#380
Cursor spotlight
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.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Cursor spotlight" pattern (@codeatlasdev/ui demo #380, motion/hero-ambient) in my app.
Call get_demo({ ids: ["#380"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Hero or feature grids where hovering should reveal structure: pricing tables, bento grids, docs landing pages.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `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%`
Exact motion (do not approximate):
- --spot-x, --spot-y (radial mask center): 520ms, cubic-bezier(0.2, 0, 0, 1)
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `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%`
Related
Loading source.