Cursor

`<pura-cursor>` is the awwwards custom cursor: a dot snaps to the pointer while a ring lerps behind it on a requestAnimationFrame loop that only runs while the ring is still catching up (it stops once settled, no idle work). Over interactive targets, `a`, `button`, anything matching `[data-cursor]` or the `targets` selector, the ring grows; a target carrying `data-cursor-text="View"` fills the ring and shows that text inside it, the portfolio "View / Drag / Play" move. `hide-native` suppresses the real cursor while connected (and restores it on disconnect); `blend` puts the overlay in `mix-blend-mode: difference` so it inverts whatever it crosses. Touch devices (`pointer: coarse`) and `prefers-reduced-motion` render nothing and never bind, leaving the native cursor alone. Drop a single instance anywhere on the page; it renders as a fixed overlay above everything. Sizes and colors are tokens: `--pura-cursor-dot-size`, `--pura-cursor-ring-size`, `--pura-cursor-ring-hover-size`, `--pura-cursor-ring-text-size`, `--pura-cursor-color`.

Preview

<!-- one instance per page, anywhere -->
<pura-cursor hide-native></pura-cursor>

<!-- difference blend (inverts what it crosses) -->
<pura-cursor hide-native blend></pura-cursor>

<!-- mark targets -->
<a href="/work">links grow the ring automatically</a>
<div data-cursor data-cursor-text="DRAG">carousel</div>

<!-- extra targets + lazier trail -->
<pura-cursor targets=".card, .thumb" ease="0.12"></pura-cursor>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/cursor.js"></script>

import "./pura/lib/cursor.js";