Studio Kit

Headline that resolves word by word from a soft blur, fading and lifting each word into focus with a configurable stagger and initial blur radius.

Static prefix followed by a slot that springs through a list of accent-colored words on an interval, reserving the widest word's width so nothing around it shifts.

Dark surface button whose 1.5px border carries a rotating conic light beam, with configurable beam color and orbit duration, implemented with pure CSS.

Solid button that fires a radial burst of spinning two-tone confetti from its center on every press, with configurable piece count, spread distance, and colors.

3D card that flips on a tuned spring around the Y or X axis to reveal a back face, triggered by hover or click and always by Enter/Space.

Tinder-style stack of cards: drag the top card past a threshold (or flick it) and it flies off with rotation and fade, then cycles to the back of the deck; also operable with arrow keys and prev/next buttons.

A meteor-shower background of glowing streaks falling at a configurable angle, driven entirely by CSS keyframes with deterministic per-meteor positions and timing.

A compact loader with two counter-rotating orbit rings carrying satellites around a softly breathing accent core, implemented with CSS keyframes.

A toast stack where each trigger press springs in a new notification that reflows the list via layout animation, auto-dismisses after a timeout and slides out on dismiss.

A drag-to-reorder list built on motion's Reorder primitives, with springy layout reflow, a lifted drag state, grip handles and full keyboard reordering via Alt+Arrow keys.

Types and deletes a rotating list of words after a static prefix, with configurable typing speed, hold pause, accent color, and a blinking caret.

Counts from a start value to a target with an expo-out ease when scrolled into view, with fixed decimals, tabular numerals, and optional prefix and suffix.

Masked word-by-word reveal where each word slides up (or down) out of its own clipping line with a staggered expo-out ease.

Text with a soft highlight band sweeping across it on a loop, built with a pure CSS background-clip gradient animation and configurable base and shimmer colors.

Solid button that morphs through idle, loading (spinner) and success (check) states with a spring width change and vertical label swap; driven by a timer or by an async onAction promise.

Outline button whose solid fill slides in from a chosen edge on hover or keyboard focus while the label inverts color, with configurable fill color and timing.

Accessible on/off switch with a spring-driven thumb, three sizes, custom accent track color and both controlled and uncontrolled usage.

Checkbox whose check mark draws itself as an SVG path with a squash-and-settle box pop, plus an optional animated strike-through across the label.

Card whose accent-colored overlay springs in from any edge on hover or keyboard focus to reveal the title, body copy and optional actions.

Card that traces its own rounded outline with a single SVG stroke on hover or focus, using a normalised pathLength so the stroke matches the card radius at any size.

Evenly spaced vertical guide lines with glowing light beams sweeping down each one at staggered, deterministic speeds, rendered with CSS transforms only.

A bordered cell grid where individual cells softly flash with an accent color on deterministic, per-cell offsets set through CSS custom properties, under a radial vignette.

Concentric rings that expand and fade outward from a glowing core in an evenly staggered sequence, with configurable ring count, size and period.

A circular search button that springs open into a full-width search field, submitting on Enter and collapsing on Escape with focus handed back to the toggle.