Cursor Effects

A branded dot and trailing ring replace the pointer inside this stage only. The native cursor is hidden through a class that sits inside the fine-pointer media query, so coarse-pointer devices never lose their cursor.

A single soft follower catches up to the pointer rather than tracking it exactly. The catch-up duration is the whole effect, so it is the tunable parameter.

The cursor grows over interactive targets, which are real buttons. Hover and keyboard focus both trigger the state, so the affordance is never pointer-only.

A “View Project” label rides the pointer over project targets. The label is decorative — the same wording is on each button, so nothing is conveyed by the cursor alone.

Hovering a project shows a preview beside the pointer. Every project's name, discipline and year are already listed with a visible thumbnail, so the preview adds atmosphere rather than information.

Decorative preview

Selected work

Each entry carries its own thumbnail and details; the floating preview is an extra, not the source.

Helix Trials Portal · Next.js · 2026Audit Trail Console · TypeScript · 2025Site Readiness Board · React · 2025

A small disc inverts what sits beneath it using mix-blend-mode. The blend is scoped to one modest circle inside this stage, and a @supports guard leaves a plain tinted disc where blending is unavailable.

A real link leans toward the pointer as it approaches and springs back on leave. It stays a normal link: keyboard activation, focus ring and accessible name are untouched.

A fixed pool of dots trails the pointer, each with a slightly longer catch-up. The pool is rendered once from the dot-count parameter and reused, so moving the pointer never creates DOM nodes.

A soft light follows the pointer by writing two CSS custom properties, so the gradient is repainted without animating a filter across the whole stage.