Element: #380 Cursor spotlight (motion/hero-ambient) What it shows: A pricing grid lit by a soft brand spotlight and a grid of fine lines that only shows inside the light; the light eases toward the pointer. When to use: Hero or feature grids where hovering should reveal structure: pricing tables, bento grids, docs landing pages. Spec: - `MotionStage` with `loop={1600}`; each cycle moves the light to the next entry of `waypoints` - `@property --spot-x` and `@property --spot-y` are registered percentages, so `transition: --spot-x 520ms cubic-bezier(0.2, 0, 0, 1)` eases them - The pointer sets `--spot-x` and `--spot-y` from `getBoundingClientRect()`; `onpointerleave` hands control back to the autoplay waypoint - One mask: `radial-gradient(circle 8rem at var(--spot-x) var(--spot-y), #000, transparent 72%)` reveals the line grid, `circle 10rem` paints the brand glow - `@media (pointer: coarse)` sets `touch-action: none` so a finger drags the light instead of scrolling the demo - Under reduced motion `class:spot--run={!m.reduced}` removes the transition and the light rests at `50%` / `40%` Motion: - --spot-x, --spot-y (radial mask center): 520ms cubic-bezier(0.2, 0, 0, 1) Names: Cursor spotlight | Mouse spotlight | Spotlight hover | Holofote do cursor | Foco de luz no cursor | Luz que segue o mouse Tags: motion, spotlight, cursor, hero, mask, grid Needs: @codeatlasdev/ui@4.6.0 Components: MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/hero-ambient#cursor-spotlight {#snippet children(m)} {@const wp = waypoints[m.cycle % waypoints.length]} {@const at = pointer ?? { x: wp[0], y: wp[1] }}

(pointer = null)} >

{p.name}

{p.price}{p.unit}

{p.note}

{/snippet}

{p.name}