Move your pointer
Spotlight
A light that follows the pointer. The default hero background for a product page, and the reason a dark hero reads as lit rather than as black.
<Spotlight />Components
What a site built here is made of.
Every one of these is running — not a screenshot. They come from the same module a generated project imports, and the line under each is what puts it on a page.
Backgrounds
What a page looks like standing still, which is almost all of the time somebody is reading it. One per section — a spotlight and an aurora and a grid together is a mess.
Drifting
Aurora
Slow drifting colour on three co-prime durations, so the composition never visibly repeats. For a page with no photograph that needs warmth.
<Aurora />Still
MeshGradient
Four overlapping radial gradients, completely static. The one to reach for when the page already has motion elsewhere.
<MeshGradient />Ground
GridPattern
Ruled or dotted ground, faded at the edges. Unmasked it reads as graph paper; masked it reads as a surface the content sits on.
<GridPattern variant="dots" />Surfaces
Glass needs something behind it. Over a photograph or a gradient it reads as expensive; over a flat colour it is a slightly different white.
Over a gradient
GlassPanel
Real glassmorphism, with the blur floor handled — below about 0.8 opacity a blurred surface stops reading as glass and starts reading as broken.
<GlassPanel>…</GlassPanel>Hover me
GlowCard
A border that lights under the pointer. For a row of cards that would otherwise be flat rectangles. It styles nothing else — the radius and padding stay yours.
<GlowCard>…</GlowCard>ShimmerButton
A CTA with a light travelling across it, instead of the gradient-and-shadow every generated page uses.
<ShimmerButton>Start</ShimmerButton>Layout
A row of three equal cards is the single clearest tell of a generated page. Bento works because one card is bigger than the rest.
twoThirds
third
BentoGrid
An asymmetric feature grid. A row of three equal cards is the single clearest tell of a generated page; bento works because one card is bigger than the rest.
<BentoGrid><BentoCard span="twoThirds" tall>…scrollStory
The scroll is the narration.
A pinned section whose acts are the scroll position — scroll back up and it runs backwards. Ships with a play control, because a story hides its content behind a gesture.
Stopping halfway holds it halfway.
That is the difference from scrollTrigger, which happens once when a thing arrives and then runs on its own clock.
And it can be watched instead.
A story hides its content behind a gesture, which is expensive for more people than it looks. The play control ships with it.
useEffect(() => scrollStory(ref.current), []);There are more — eighteen scroll compositions in scene.ts and fifteen element effects in effects.ts. You do not choose them from a list: describe the site and the builder reaches for the right one.