Effects

Premium visual effects

Ten reimagined animated effects — Spotlight, Aurora, Meteors, Background Beams, Moving Border, 3D Tilt, Text Generate, Glare, Bento Grid, and Wavy — rebuilt on Nova tokens with reduced-motion safety. Preview + copy-paste code.

Ten premium effects, one design language

Every effect here is Nova-native — token-driven color, spring-tuned physics, andprefers-reduced-motionsafety baked in. Toggle to the Code tab to copy the source verbatim.

New10 effectsMotion + tokens onlyReduced-motion safe

Spotlight

A radial highlight that tracks the pointer — great for hero sections and CTA cards.

Move your cursor

The highlight follows you around the surface.

Aurora

Slowly drifting gradient blobs. Screen-blended so it plays well over any surface.

Aurora

Ambient gradient motion at 12–20s cadence.

Meteors

Diagonal streaks with randomized timing — subtle depth for dark surfaces.

Meteor shower

Randomized delays & angles.

Background beams

Masked grid with a rotating conic beam — a premium hero background.

Grid + beams

A hero-ready backdrop.

Moving border

A CTA with a rotating conic-gradient border ring. Feels alive without stealing focus.

3D Tilt card

Pointer-tracked perspective with spring physics and translated inner layer for real depth.

Compute

Tilt me

Pointer-tracked perspective with a translated inner layer.

Layers

Higher intensity

Increase intensity to lean into the tilt.

Text generate

Staggered word fade-in with a subtle blur — a premium reveal for headlines.

Ship premium interfaces with a motion system that feels alive.

Glare card

A specular sheen that only reveals on hover. Overlay blend keeps it subtle.

Instant

Hover to reveal the glare sweep.

AI-native

Hover to reveal the glare sweep.

Premium

Hover to reveal the glare sweep.

Bento grid

A tiled feature grid with variable spans — pair with any effect above for depth.

Featured

Nova AI streaming

Structured stream primitives with token-halo reveal.

Deploys

1,204

+18% this week

Latency

42ms

p95 edge

Timeline

Wavy background

Layered SVG waves that gently pan — ideal for footers and marketing sections.

Wavy

Three layered wave paths.

Customizing the 3D effects

Every 3D surface — the preview stage, BentoTile, CardTilt3D, and the Wavy / Bento hero previews — shares one recipe: a perspective ancestor, a preserve-3d stage, and per-layer translateZ. Adjust three knobs and the whole system re-tunes together.

Perspective

1200–1600px

Lower = more dramatic dolly. Set on the outer wrapper via [perspective:1400px].

Tilt range

±8–14°

Rest at rotateX(6deg) rotateY(-8deg). Stay under 15° so text stays legible.

Depth steps

16 / 24 / 40 px

Ambient → primary → hero. Use three tiers per surface — more looks busy.

Theme variables

Depth and glow use existing Nova tokens — override in src/styles.css under @theme to re-skin every effect at once.

Token	Role
--color-accent	Glow, halo, active edge on tilted layers
--color-primary	Aurora sweep, moving border, background beams
--color-border	Moon-edge highlight along tile rims
--color-subtle	Backing plane behind translated-Z content

Motion settings

Idle float: 6–9s ease-in-out, ±4–6px translate. Long duration keeps the surface calm.
Pointer tilt: lerp toward target at 0.10–0.14 per frame — snappy but not jittery.
Hover lift: 400–500ms ease-out on translateZ only; never animate layout.
Reduced motion: gate every keyframe behind motion-safe: and skip the pointer RAF loop when prefers-reduced-motion: reduce matches. The static rest transform stays so depth reads without movement.

Minimal recipe

tsx

<div className="[perspective:1400px]">
  <div
    className="[transform-style:preserve-3d] transition-transform duration-500 ease-out
               motion-safe:animate-[floaty_8s_ease-in-out_infinite]"
    style={{ transform: "rotateX(6deg) rotateY(-8deg)" }}
  >
    <div className="[transform:translateZ(40px)]">Hero layer</div>
    <div className="[transform:translateZ(20px)]">Support layer</div>
    <div className="[transform:translateZ(0)]">Base plane</div>
  </div>
</div>

Use them today

All ten effects live in @/nova/ui/effects. Import what you need — tree-shaking keeps bundles lean.

Browse components Visit the Lab