Why I Built ContricReaction (or, “I Love a Good Show-Off Effect”)

A little about me: I’m Mohneesh, a self-proclaimed code-chef who loves to cook up fresh UI experiences in the mornings and whip up code at night. Just like I layer flavors in the kitchen, I layer animations in React—balancing taste (er, performance), style, and a dash of “wow.” ContricReaction was born when I thought, “Why should cursors be boring?” If you feel me, keep reading!

Concept Overview: Circles That Follow, Spin, and “Breath”

At its core, ContricReaction does three things:

* with a slight, configurable delay (so it feels graceful, not robotic).

* in an alternating dance—one clockwise, the next counterclockwise, and so on.

* (scales up and back down) so the animation feels alive, not just a static spin.

The result? A hypnotic array of concentric circles that swirl around your cursor, transforming a simple hover into an experience.

I’m assuming you already have a Next.js/React environment set up (if not, you can quickly scaffold one with 

). This component is a “client component,” meaning it needs to run in the browser—hence the 

 in your components folder (or wherever you keep React components). Here’s the TypeScript boilerplate:

What All Those Props Mean (Spoiler: They’re Your “Spice Controls”)

1. Tracking the Mouse Position (Because, Without That, It’s Just Rings in Space)

To make the rings actually chase your pointer, we need to know where your mouse is, and we need to do it with a touch of delay. Here’s the gist:

**: By delaying the update, we create a “lazy follower” vibe—circles don’t teleport to your cursor; they glide. Want them more eager? Lower 

. Chill vibe? Increase it to something like 200 ms.

**: We only want the rings popping in when the user actually moves the mouse. As soon as the cursor leaves (for instance, you alt-tab away), we gently fade them out.

2. Cooking Up Concentric Circles (Layer by Layer)

Now, the pièce de résistance: generating multiple 

 elements that each represent one ring. We loop from 0 to 

 px. Each subsequent ring is a fraction smaller.

): Outer rings are more opaque; inner ones fade out for a depth effect.

): Alternate—0th: clockwise; 1st: counter-clockwise; 2nd: clockwise; etc.

): Slightly faster for inner rings, layered complexity.

 is 5, then sizes: 100 px, 80 px, 60 px, 40 px, 20 px.

Starts at 0.8 (nearly solid) for the outermost ring.

 each step (so if 5 rings, subtraction is 0.12 per ring).

Ensures your eye is forced back and forth: ring 0 → clockwise; ring 1 → counter; ring 2 → clockwise, etc.

Outer ring: 10 s per revolution (very leisurely).

Inner rings: each one is slightly quicker (down to 5 s for the innermost).

You can squash or stretch this by tweaking 

All that remains is to define the keyframes for our “pulse.” Basically, at 0%, we’re at scale(1), at 50% we’ve rotated 180° and scaled up to ~1.1 (if pulsing is on), and at 100% we’ve made a full 360° spinnit and returned to scale(1). The 

 keeps each ring perfectly centered on the cursor.

, scale stays at 1 throughout (so rings just spin, no “breathing”).

Otherwise, they gently swell to 1.1× size at mid-animation.

4. Wrapping Everything in a “Follow Container”

Covers the entire viewport (so rings can appear anywhere).

 to ensure the animation doesn’t block clicks/hover on underlying elements.

Positions the “rendered circles” container at the current 

 ensures it’s always “full-screen” and on top of everything (z-index 9999!).

** with a 0.3 s transition gives a subtle fade in/out when the mouse enters or leaves the window.

5. The Full ContricReaction Component (Copy & Paste Rock ’n’ Roll)

In case you just want all the code in one place, feast your eyes:

6. How to Use ContricReaction in Your Page

 or any component), simply import and render:

7. Performance & Accessibility—Keeping It Friendly

 events can flood React with state updates. If you notice lag on low-powered devices, you can wrap your 

) so it only fires at most once every, say, 16 ms (≈60 fps).

 causes a re-render of the component. That’s usually fine for a handful of rings, but if you push things too far (e.g., 

), consider memoizing the circle styles or even using a 

-based approach for ultimate performance.

Some folks get nauseous with spinning animations. To honor their choice:

Or skip rendering altogether by checking 

. That’s crucial so your clickable buttons and links aren’t intercepted by invisible circles. Always keep this in mind!

8. Tweaking for Your Project—Flavor Text

 into multiple layered divs or dynamic CSS variables.

*: Swap circles for squares or blobs by changing 

*: If “pulse” isn’t your jam, define a fresh keyframe—maybe a wobble or a rubber-band effect.

*: Want to show different circles when hovering certain elements? Use React context or props to toggle 

9. Final Thoughts (Because I’m a Wordy Code-Chef)

Congratulations—your cursor is now surrounded by hypnotic, rotating rings. You just turned a boring “hover” event into a theatrical performance. Whether you sprinkle this effect on a landing page, a call-to-action button, or your entire app, remember:

*: Too many circles or too fast an animation can be overwhelming. Start minimal (e.g., 3 rings, slow spin) and dial up the drama if needed.

*: Always respect users’ reduced-motion settings.

*: Keep an eye on frame rates, especially on mobile.

*: That’s why we code. For the joy of seeing those colorful rings swirl!

If you try this out, tag me on Twitter or shoot me a DM—let’s swap animation war stories. Until next time, happy coding (and happy swirling)!

— Mohneesh (that code-chef who believes every cursor deserves a little pizzazz)

 Hypnotic Rings: Crafting a Mouse-Following Concentric Circles Animation in React: ContricReaction

This post was migrated from the old system. Please edit to add content.

Building a Movie Social Platform: Combining Social Media with Movie Recommendations

This post was migrated from the old system. Please edit to add content.


CythBlog.

How A Simple Assignment Became A Full-Stack Automated System (And Why Vercel's Timeout Message Haunts Me)

Latest Stories

Hypnotic Rings: Crafting a Mouse-Following Concentric Circles Animation in React: ContricReaction

Building a Movie Social Platform: Combining Social Media with Movie Recommendations