ui / ux.
Components, cursors, micro-interactions. Free drop-in pieces for other developers and designers.
cursor-font
cursor font reveal
A circular lens that swaps the typeface underneath. Defaults to Fraunces.
On the project page, move your cursor over the body. Inside the lens, the typeface swaps from Geist Sans to Fraunces — same words, served in serif. Layout flows from the original copy below the lens, so the page never reflows when the font swaps. Pass any Tailwind font utility via serifClassName to swap to a different face.
view →
cursor-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 →
cursor-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 →
cursor-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 →