/ cursor-fx demo · bakakats.team

Kursor,
który wie,
gdzie jesteś.

Custom kursor, magnetic buttons, sticky hover, kontekstowy kolor. 8 kB JS, zero zależności, działa nawet z włączonym prefers-reduced-motion.

01Magnetic

Hover wciąga kursor do środka elementu. Cubic-bezier easing, 60 fps na pasywnym slabie.

02Color sync

Pierścień kursora przejmuje akcent karty. Trzy state-y w 4 linijkach JS.

03Difference

Mix-blend-mode: difference. Kursor zawsze widoczny, niezależnie od tła.

04Reduce-motion

Respektuje preferencje systemu. Brak skoku, brak lerp, czysty pointer.

050 deps

Ani GSAP, ani Lottie. Tylko requestAnimationFrame i CSS transforms.

06Touch

Na ekranach dotykowych kursor znika sam, bez warunkowego ładowania.

Magnetic primary → Magnetic hot → Ghost magnetic →