Skip to content
Suluu

SpotlightCard

A composed surface that treats pointer movement like a light source. The wash arrives softly, trails with a little mass, and catches only a thin piece of the border before disappearing again.

Preview

Move across the surface
In orbit

Project Atlas

A calmer place to shape ambitious work.

Keep decisions, milestones, and the people moving them forward in one considered space.

Installation

Registry — recommended

Copies the component into your configured shadcn UI directory and installs Motion.

npx shadcn@latest add https://suluu.site/r/spotlight-card.json

npm package

For centralized upgrades, install the optional ESM package and configure Tailwind source detection as shown below.

pnpm add suluu motion

Usage

SpotlightCard is a native div wrapper. Place headings, copy, links, or controls inside it; the decorative layers never receive pointer events or cover the content.

Registry
import { SpotlightCard } from "@/components/ui/spotlight-card"

export function ProjectCard() {
  return (
    <SpotlightCard>
      <h3 className="text-lg font-semibold">Project Atlas</h3>
      <p className="mt-2 text-sm text-muted-foreground">
        A calmer place to shape ambitious work.
      </p>
    </SpotlightCard>
  )
}
npm
// app/globals.css
@import "suluu/styles.css";
@source "../node_modules/suluu/dist";

// component.tsx
import { SpotlightCard } from "suluu/spotlight-card"

export function ProjectCard() {
  return <SpotlightCard>Project Atlas</SpotlightCard>
}

Tuning the light

Motion intensity moves three things together: how far the light trails behind the pointer, how large and bright the pool is, and how long it lingers after the pointer leaves. subtle follows almost exactly and leaves quickly; expressive carries a longer trail, a wider pool, and a slower fade.

Then tune color and size for the surrounding surface. Keep custom colors low in chroma so the result still reads as reflected light rather than as a glow.

subtle

Quietly responsive

The same light, with a different sense of mass and presence.

default

Quietly responsive

The same light, with a different sense of mass and presence.

expressive

Quietly responsive

The same light, with a different sense of mass and presence.

Tuning
// A slow, wider light for a generous feature surface.
<SpotlightCard
  motionIntensity="expressive"
  spotlightColor="oklch(0.78 0.08 245)"
  spotlightSize={440}
>
  ...
</SpotlightCard>

// Turn off tracking while preserving content and the static wash.
<SpotlightCard disabled>
  ...
</SpotlightCard>

In context

Use several cards together only when the light helps distinguish each surface under the pointer.

Weekly momentum

82%

9 of 11 milestones are moving

Review queue

04

Two decisions are ready for the team.

Props

SpotlightCard also accepts native div attributes and forwards its ref to the root element. Inline styles are merged with prop-driven spotlight overrides.

PropTypeDefaultDescription
childrenReactNode—Content rendered above the lighting layers.
motionIntensity"subtle" | "default" | "expressive""default"Trail, light size, peak brightness, and how long the light lingers.
spotlightColorstringtheme variableAny CSS color used by the wash and border highlight.
spotlightSizenumbertheme variableFull diameter of the radial light in pixels.
disabledbooleanfalseDisables reactive lighting without disabling descendants.
classNamestring—Class name applied to the card surface.

Theming

Override these variables in your light and dark theme scopes. The registry installs the defaults automatically.

--suluu-spotlight-card-backgroundCard surface.
--suluu-spotlight-card-foregroundInherited content color.
--suluu-spotlight-card-mutedSuggested secondary content color.
--suluu-spotlight-card-borderResting perimeter.
--suluu-spotlight-card-radiusCard corner radius.
--suluu-spotlight-card-shadowResting depth beneath the surface.
--suluu-spotlight-card-spotlightLight and border-highlight color.
--suluu-spotlight-card-blendBlend mode for the light. Additive in dark, plain in light.
--suluu-spotlight-card-sizeFull diameter of the radial light.
--suluu-spotlight-card-intensityReactive light opacity multiplier.

The root exposes data-spotlight-active, data-spotlight-interactive, and data-disabled for contextual styling without coupling to the internal layers.

Accessibility

The card adds no role or keyboard behavior because it is a visual surface, not an interactive control. Links and buttons inside keep their native semantics and remain above the pointer-inert, assistive-technology-hidden lighting layers.

Tracking only runs for (hover: hover) and (pointer: fine). Touch-first devices receive a quiet static wash. With prefers-reduced-motion, no pointer listener is attached and any active spring is stopped immediately.

↑↓ to navigate↵ to openesc to close