Split reveal
Pax makes it worth looking at.
Primitive gallery
Motion with a spine.
Every primitive in @pax-sh/motion binds to your brand tokens, declares what it does under reduced motion, and states its performance cost up front. No mystery easing, no keyframes you inherit but cannot explain.
Live text primitives
Blur in
Pax makes it worth looking at.
Scramble
Pax makes it worth looking at.
Shiny
Pax makes it worth looking at.
Glitch
Pax makes it worth looking at.
Gradient
Pax makes it worth looking at.
Live animation primitives
Logo loop
Strands
Magnet field
Five motion personalities
A personality sets the temperament for a whole page: durations, easings, and the reduced-motion strategy travel together, so a site never mixes moods by accident.
Precise
Short, confident motion with tight control and little overshoot.
Reduced motion: fade (120ms)
Editorial
Measured entrances with graceful holds for typography-led layouts.
Reduced motion: fade (160ms)
Pulse
Energetic interaction feedback with controlled spring response.
Reduced motion: cut (0ms)
Acid
Expressive, loop-friendly motion with chromatic swells for shader-led scenes.
Reduced motion: static (0ms)
Drift
Slow ambient motion that keeps backgrounds and hero stages breathing.
Reduced motion: fade (200ms)
Design primitives, specified like parts
Each primitive lists the tokens it reads, the cost it incurs, and the exact fallback it renders. If a spec below sounds boring, good: boring specs make brave pages.
Editorial grid
Asymmetric columns for magazine-like compositions.
Cost: low
Reduced motion: Static grid with no parallax.
Tokens: --pax-fg, --pax-bg, --pax-border
Headline system
Cap-height aware headline stack with fit-to-box controls.
Cost: low
Reduced motion: Instant text appearance; no glyph sequencing.
Tokens: --pax-serif, --pax-fg, --pax-accent
Product stage
Centered product frame with controlled depth layers.
Cost: medium
Reduced motion: Flat stage without floating motion.
Tokens: --pax-bg-elevated, --pax-border
Mask reveal
Directional wipe reveal for image or type.
Cost: medium
Reduced motion: Hard cut to final state.
Tokens: --pax-accent
Card panel
Panel surface with radius and contrast-safe text.
Cost: low
Reduced motion: No hover lift.
Tokens: --pax-bg-elevated, --pax-radius, --pax-fg
Safe zone
Social/safe framing guides that never clip critical type.
Cost: low
Reduced motion: Guides only; no animation.
Tokens: --pax-border
Counter reveal
Numeric or price reveal with tabular figures.
Cost: low
Reduced motion: Show final number immediately.
Tokens: --pax-mono, --pax-fg
Gradient field
Soft gradient atmosphere bound to brand colors.
Cost: medium
Reduced motion: Static gradient, no drift.
Tokens: --pax-bg, --pax-accent