Motion

Animation primitives that pull their curves, springs, and durations from the shared constants — no cubic-bezier is ever retyped. Every one is reduced-motion aware: turn on the OS setting and each degrades gracefully.

@shuttering/motionimport { ParticleText, Constellation, WaveText, ConstellationField, useScrollReveal, … } from '@shuttering/motion'

Signature text

Canvas-rendered wordmarks captured from stxkxs.io. ParticleText is the headline effect — a word made of character-particles that scatter away from a star-shaped cursor vortex and spring back. WaveText makes it liquid; ScrambleText decodes it on hover. Move the pointer over each; all read their color from the palette and render statically under reduced motion.

on hover

Hover the line above — ScrambleText resolves it from a glyph churn.

Scroll-reactive background

ConstellationField is an ambient backdrop of drifting, linked dots whose flow answers the scroll — scroll the page and the field lifts, scroll up and it settles. Mount it behind content; pointer-events-none, palette-colored, frozen under reduced motion.

<ConstellationField /> — scroll the page

Theme ripple

firePixelRipple() sweeps a top-to-bottom cascade of tiny accent-toned pixels across the viewport — fire it on a theme toggle, or any moment worth marking. A no-op under reduced motion.

Celebrate

Palette-tinted confetti for a real success moment — glowing star particles whose hue is derived live from --primary, so it reads on-brand rather than rainbow. A no-op under reduced motion.

List reveal + spotlight

The blog-list pattern, captured. useScrollReveal auto-staggers items into view as they enter the viewport (attach revealRef to each); SpotlightCard wakes a cursor-following accent glow and lifts on hover.

package

Tokens

package

Motion

package

Components

package

Charts

package

Agent

package

Signature

Text

GradientText renders the brand gradient as ink; Highlighter sweeps a marker behind inline text.

cast in the same form

The reusable form every app is cast in — components and animations as versioned packages, so nothing drifts.

Numbers & signals

SpringNumber eases a value to its target; StreamLine is a 'working' wave.

1,240

Pointer feedback

Tilt follows the pointer in 3D; Ripple emits from the click; Magnetic pulls toward the cursor. All mouse-only.

Tilt me — this card follows the pointer in 3D.

Reveal & stagger

Reveal rises an element into place as it scrolls in; Stagger cascades its children.

This card rises 8px into place as it enters the viewport.

first

second

third

Accents

Stamp is an overshoot settle for a celebratory moment; Marquee scrolls seamlessly; Shimmer is a loading placeholder.

APPROVED

RevealStaggerSpringNumberMagneticMarqueeStampHighlighter

Depth & drag

Pointer and scroll parallax for depth, and a draggable surface with physical return. Move the cursor over the card, scroll the page, and drag the tile. All become inert under reduced motion.

follows the cursor

drifts on scroll

Drag me — I wiggle back.

Ambient — opt-in

An aurora wash, a full-bleed twinkling pixel field, and a one-shot glimmer. These are deliberately opt-in components, not applied to a page by default — reach for them when a surface wants atmosphere.

<Aurora />

<PixelField />