Motion Kit Original, dependency-free components. Colours, radius and fonts come from CSS variables. Switch the example palette to see the same code in another brand. Numbers are examples.
Violet Ocean Matcha Reduce motion
Digit roller and count-up Each digit rolls to its place, left to right. Counts use tabular figures so the width never jumps.
Roll a new number
digitRoller(el, '0469', { duration: 1400, stagger: 120 }) · countUp(el, 84320, { duration: 1200 }) · css .mk-live
Staggered reveal Items rise out of a soft blur, one after another, when scrolled into view.
Replay
staggerReveal(container, { step: 100, duration: 600, y: 16, blur: 8 })
Spring tabs and ticker The highlight moves on a spring (stiffness 400, damping 30). Arrow keys work. The ticker pauses on hover.
Daily Weekly Monthly Yearly
Selected: Daily
springPills(el, { k: 400, c: 30, onSelect }) · ticker(el, { seconds: 32 })
Charts that draw themselves The line is drawn on, the points pop in, the bars grow with a small overshoot.
Replay
drawOn(path) · popIn(circles, { step: 70 }) · growBars(rects, { step: 50 })
Magnetic button and loading states The button leans toward a mouse pointer and springs back (not on touch screens). Skeleton and shimmer stand in while data loads.
magnetic(el, { strength: 0.3, radius: 80 }) · css .mk-skeleton .mk-shimmer
Shader glow Slow, pale light behind a live panel. Colours come from --mk-accent-soft and --mk-warm.
shaderGlow(canvas, { speed: 1, resolution: 0.5 })
3D ball drum Needs three.js. Twenty balls tumble; Draw rolls four out in a row.
Draw Reset
Drawn: – – – –
ballDrum(THREE, el, { balls: 20, pick: 4, onResult })
Scroll stack with progress rail Keep scrolling: cards stack, earlier ones step back, the rail fills.
Times drawn (example) 37
Last drawn 12 Oct
Trend Warm
万字 meaning 水牛
scrollStack(wrap, { top: 24, step: 14, scale: 0.04 })