Foundations

Motion showcase

Every Nova animation is a spring or a curve — never a linear tween. Try every preset side by side.

Motion carries meaning. Nova uses stiff springs for interaction, soft springs for layout, and a glide spring for choreography. Every animation checks prefers-reduced-motion.

Full motion enabled.

Entrance animations

✦

fade

✦

rise

✦

scale

stagger

Hover

Lift

Scale

Tilt

Glow

3D Tilt cards

Aurora

Voltage

Stack

Magic

Magnetic pull

Hover close — the surface reaches back.

3D Flip

Hover

Novix

Design

System

Motion

Alive

Craft

Detail

Orbit system

Morphing shape

Layered parallax

move your cursor

Loading states

Spinner

Thinking dots

Progress sweep

Spring presets

✦

snap

✦

soft

✦

glide

✦

bounce

src/nova/animations/springs.ts

1export const springs = {
2  snap:   { type: "spring", stiffness: 500, damping: 32 },
3  soft:   { type: "spring", stiffness: 260, damping: 26 },
4  glide:  { type: "spring", stiffness: 140, damping: 22 },
5  bounce: { type: "spring", stiffness: 320, damping: 12 },
6};

Duration comparison

120ms

200ms

320ms

500ms

800ms

Reduced-motion preview

Simulate reduced motion

Bouncy spring

Nova components check useReducedMotion() and swap springs for near-instant fades. Never remove animation entirely — remove the physics.