Motion library

Motion elements

10 animation primitives — fade-ins, scroll reveals, count-ups, typewriters, shimmer skeletons, pulse glows, glow cards, 3D tilts, magnetic pulls, and animated gradient borders. Pure CSS + rAF, no animation libraries required.

FadeIn

Fade up

delay 0ms

Fade down

delay 80ms

Fade left

delay 160ms

Fade right

delay 240ms

TSX

<FadeIn direction="up" delay={100} duration={600}>
  <Card>Slides up and fades in on mount.</Card>
</FadeIn>

ScrollReveal

From the left

IntersectionObserver, fade in once visible.

From below

IntersectionObserver, fade in once visible.

From the right

IntersectionObserver, fade in once visible.

↓ Scroll further down — more cards will reveal as they enter the viewport.

TSX

<ScrollReveal direction="up" distance={2}>
  <Card>Reveals when scrolled into view.</Card>
</ScrollReveal>

CountUp

Users today

0.0%

Uptime

Requests/mo

0ms

p50 latency

TSX

<CountUp value={1284} suffix="" duration={1500} />

Typewriter

TSX

<Typewriter
  phrases={["Build with JSN UI.", "Ship in days.", "AI-native components."]}
/>

Shimmer

Loading state

Skeleton with animated sweep

TSX

<Shimmer className="h-32 w-full" />
<ShimmerText lines={4} />

Pulse

TSX

<Pulse color="bg-emerald-500" intensity={0.3}>
  <Button>Get started</Button>
</Pulse>

GlowCard

Hover anywhere

A soft radial glow follows your cursor. Great for pricing cards and feature highlights.

Different colors

Pass any Tailwind background class. Mix and match to your theme.

TSX

<GlowCard color="bg-primary" intensity={0.5}>
  <h3>Hover me</h3>
  <p>The glow follows your cursor.</p>
</GlowCard>

Tilt3D

Build

Move your mouse over the card

Ship

Move your mouse over the card

Scale

Move your mouse over the card

TSX

<Tilt3D max={12}>
  <Card>3D tilt on hover.</Card>
</Tilt3D>

Magnetic

TSX

<Magnetic strength={0.4}>
  <Button size="lg">Hover me</Button>
</Magnetic>

GradientBorder

Animated ring

Conic gradient sweeps around the border.

Custom colors

Any Tailwind gradient works.

TSX

<GradientBorder thickness={2} duration={4}>
  <div className="p-6">Animated gradient ring</div>
</GradientBorder>