Skip to content
SloplessTry the picker

Signature look · cursor

Blend-mode cursor

A circular follower replaces the cursor accent: it trails the pointer with a slight lag, inverts whatever is under it (mix-blend-mode: difference) and grows with a short label over links and media.

Id
custom-cursor-blend
Cost
about 28 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Add one fixed, pointer-events: none follower (12–20 px circle in the bg or text colour) with mix-blend-mode: difference; keep the system cursor visible (do not set cursor: none on interactive elements).
  • Move it with gsap.quickTo (0.25–0.45 s lag); scale it up with a one-word label (View, Play, Drag) only over elements with a data-cursor-label attribute.
  • Enable only when (hover: hover) and (pointer: fine) match and prefers-reduced-motion is no-preference; render nothing otherwise.
  • Make sure blend-mode inversion never makes text unreadable under it for long: keep the follower small over body text.
  • Load after first paint and reuse GSAP if another look already ships it.

Required skills (the agent asks before installing, per project)

gsap-core
Official GSAP core API: tweens, easing, stagger, matchMedia for prefers-reduced-motion. Source: greensock/gsap-skills, reviewed 2026-10-24 at 96c4b013173f.
npx skills add greensock/gsap-skills#96c4b013173fa9b01c059b036abc4d266a58c476 --skill gsap-core
cinematic-gsap-lenis-motion-system
GSAP ScrollTrigger + Lenis smooth scroll, parallax layers, pinned sections, magnetic hover and custom cursor. Source: MengTo/Skills, reviewed 2026-10-24 at 1ef3e3e8dd37.
npx skills add MengTo/Skills#1ef3e3e8dd37a6bed5e84db238f4b11cba896a36 --skill cinematic-gsap-lenis-motion-system

Running demo, in Art Deco

The preview renderer's stand-in for this look on the hero of a Art Deco design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

  • About
  • Contact
NNorthfold
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Desktop, prefers-reduced-motion: reduce
MenuN

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies
Phone, reduced motion

Styles it suits

Art DecoBrutalistFrosted GlassLuxury FashionMaximalist CollageNeo-BrutalismRisograph PrintSeventies PsychedelicSynthwave Retro-FutureTerminal MonoY2K Chrome