Design system
Motion
Scroll reveals, cursor glow, count-up numbers, and transition presets — all reduced-motion aware, all driven by the same easing tokens as the components.
Scroll reveal
The reveal action fades and rises an element the first time it scrolls into view. Pair with stagger(i) for cascades. Import @chanrg/4ui/motion.css once (or copy its few rules).
import { reveal, stagger } from '@chanrg/4ui';import '@chanrg/4ui/motion.css';{#each cards as card, i} <article use:reveal={{ delay: stagger(i) }}>…</article>{/each}Cursor glow
glow tracks the pointer as --gx/--gy custom properties; your CSS draws the highlight.
<div class="card" use:glow>…</div><style> .card::after { content: ''; position: absolute; inset: 0; background: radial-gradient( 240px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--4ui-accent) 12%, transparent), transparent 70% ); }</style>Number ticker
Animated count-up with Intl formatting; instant under reduced motion.
4,280
<NumberTicker value={throughput} format={{ maximumFractionDigits: 1 }} />Transitions
flyRise and scaleFade are Svelte transitions tuned to the library easing (cubic-bezier(0.22, 1, 0.36, 1)) so app-level motion matches component micro-motion. prefersReducedMotion() is exported for your own guards.
{#if open} <aside transition:scaleFade>…</aside>{/if}