Hover & cursor-reactive presets

@summonware/ui · interaction · ·

Usage

Hover/focus and cursor-reactive tiers of the motion catalog — Unicorn Studio's own "mouse tracking"/"3D axis tilt" idea (getting-started.md's Interactivity section), built as pointer-event + CSS-custom-property/transform components. TiltCard (primitives.tsx) and the WebGL hover-sheen in use-shader-mask.ts already cover the two heaviest hover techniques and are not duplicated here — this catalog is the lighter-weight tier: five CSS-only hover wrappers plus four JS pointer-tracking components. Every hover wrapper reacts to :focus-within, not a tabIndex on the wrapper itself, so wrapping a real button never creates a second, redundant tab stop.
import { Lift, GlowRing, UnderlineDraw, IconNudge, PressScale, MagneticButton, CursorGlow, TiltTowardCursor, MagneticIcon, SpotlightMask } from '@summonware/ui';

Best practices

DoUse Lift/GlowRing on a whole clickable card or panel; UnderlineDraw/IconNudge on inline text or a link — mismatching the two (Lift on a single word) reads as a rendering bug, not affordance.
DoReserve MagneticButton/MagneticIcon for one or two hero CTAs — a whole row of magnetic buttons fighting the same cursor reads as noisy, the same caution TiltCard's own doc gives for tilt.
Don'tCombine SpotlightMask with another attention-drawing hover effect on the same surface — the mask already dims everything else, adding a second competing cue undercuts the one it is drawing attention to.

Anatomy

LiftTranslates up + adds shadow on hover/focus — the baseline "this is interactive" cue.
GlowRingA soft ring that grows in — lighter-weight than Lift.
UnderlineDrawAn underline that draws in left-to-right — inline text links.
IconNudgeNudges the last child (typically a trailing icon) a few px.
PressScaleSqueezes on :active — tactile press feedback.
MagneticButtonPulls its child toward the pointer within the whole wrapper, springs back on leave.
CursorGlowA radial glow that follows the pointer within the wrapper.
TiltTowardCursorGeneric 3D tilt toward the pointer — TiltCard's math, for any content.
MagneticIconLike MagneticButton but only activates within a radius — for a denser toolbar.
SpotlightMaskDims everything except a radial cutout following the pointer.

Examples

Common configurations, variations and states.

Hover/focus tier (CSS-only)

Lift
Glow ring
Underline drawLearn more
Lift, GlowRing, UnderlineDraw, IconNudge, PressScale — hover or tab to each.

Magnetic button

Move the pointer near the button — it pulls slightly toward the cursor, then springs back.

Cursor-reactive tier

Cursor glow
Tilt toward cursor
Spotlight — move the pointer over this card
CursorGlow, TiltTowardCursor, MagneticIcon, SpotlightMask — move the pointer across each.