ctrlsze

UI Cursors.

A series of React components for cursor-following effects. This page itself runs the heart variant — move your cursor anywhere to see it. The tiles below preview the other variants statically; click through to interact.

¶ 01 — Components

3 variants · all free

reveal

Cursor Reveal

A soft circular lens. Inside, text recolours to accent-blue. Used on the home page.

On the project page, move your cursor over the body. The text inside the lens recolours to accent-blue. The same approach lets you swap typeface, weight, or any CSS-controllable property for the area under the cursor — without changing the underlying page.

View source →

invert

Cursor Invert

A circular lens that flips the page theme inside the radius. Cream becomes ink.

On the project page, move your cursor over the body. Inside the lens, the cream paper becomes near-black and the ink text becomes cream. The accent and rule colours adjust to read against the new background. Layout, fonts, and spacing all stay unchanged — only the design tokens swap.

View source →

heart

Heart Cursor Reveal

A heart-shaped lens. Inside, a faint pink wash and text turns hot pink.

On the project page, move your cursor across the body. The lens is heart-shaped instead of circular, traced from a single SVG path. Inside the heart, a faint pink wash makes the silhouette visible and every text descendant turns hot pink. Same DOM-clone architecture as the other variants — just a different mask.

View source →

¶ 02 — Notes

All three components share one source file — cursor-effect.tsx — with three thin wrappers (CursorReveal, CursorInvert, HeartCursorReveal) presetting different shapes, tints, and theme behaviour. Copy the file once, get all three.

Each project page below has the source code, install instructions, architecture notes, and an FAQ specific to that variant. The page-level effect on each project page is the variant itself — so a visit to the Heart page is also a demo of the Heart cursor.