Cards

Spotlight Hover

Dark card with a peach radial glow and a CSS-masked grid that both track the cursor; auto-orbits when the pointer is away.

csslight complexitysubtle motionpointer

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Feature cards, pricing tiles, or dashboard widgets on dark backgrounds needing tactile depth without canvas overhead.

When not to

Light-background layouts (background hardcoded dark) or touch-only devices where pointermove never fires.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the spotlight color from peach (#EEBAA0) to amber (#f59e0b) by updating --accent-iris and the rgba value in .c04-spot::before background. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

spotlight color (rgba(238,186,160,0.22) in ::before)
grid cell size (background-size: 26px 26px)
spotlight radius (380px in ::before, 260px in mask)
auto-orbit speed (t += 0.018)
accent dot color (--accent-cyan)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

CSS custom properties --c04-x/--c04-y driving both pseudo-elements
rect cache + resize refresh pattern (avoids per-frame reflow)
visibilitychange stop/start guard
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Grid and glow are pure CSS — no canvas, so spotlight edge is always a smooth gradient with no noise/texture
Card size uses vmin units; very small viewports may clip content before max-width clamps

spotlighthovercardglowradial-gradientgrid-maskcursor-tracking

More Cards components

3D Tilt ParallaxDark card tilts in 3D toward the cursor; badge, orb, and text layers float at distinct Z-depths. A radial shine tracks the pointer; auto-rotates when idle.
Frosted GlassA frosted glass card floats over three slowly drifting color blobs (gold, cream, tan); the panel lifts slightly on hover.
Gradient-Border GlowDark card framed by a spinning conic powder-blue, tan and slate gradient border with a soft blurred aura glow behind it; auto-rotates continuously.
Reveal on HoverDark gradient card that dims and zooms its background art on hover while a hidden title-and-copy panel slides up from the bottom.
Holographic IridescentA 3D-tilting card with a warm iridescent sheen and conic foil chip that shift with pointer position; drifts idly when not hovered.
Stacked Peeking CardsThree layered gradient cards auto-cycle and fan out with a springy rotation on hover; cards spread left and right then restack when cursor leaves.