Loom Draft
loom-draft
A living woven fabric background: a shuttle of light races the loom laying luminous weft row by row, an iridescent violet→cyan→pink sheen rolls across the finished cloth, and warp threads sway. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback.
More from @motiq
Cycles through phrases in place with slide or fade motion. Polite aria-live announces the current word, pauses on hover/focus, and keeps a stable layout. Reduced-motion safe.
A real button with press-scale feedback and accessible loading (aria-busy + polite spinner) and success states. Solid, outline, and ghost variants. Reduced-motion safe.
A CSS-only animated grid background layer with a slow drift, optional radial fade mask, and a prefers-reduced-motion stop. No canvas, no JS loop. Decorative.
A surface with a radial glow that follows the pointer. CSS-only, no runtime deps beyond cn.
A semantic list whose items fade/slide in with a stagger and animate out cleanly on removal, with layout-based reordering. Requires stable keys. Reduced-motion safe.
Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe.
Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe.
Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit their label from a parent control. Reduced-motion safe.