Ayaan.lol Anything.

Every standard family and direction, eleven steps() runs, parametric back/elastic tunings — and 44 custom beziers invented for this skill, each registered by name. Click any chip to feel it; or take the guided tour.

Advanced staggers take each / amount, from (“center”, “edges”, “end”, “random”, an index, or an [x,y] grid point), plus grid and axis.

This panel is pinned for 1600px while a scrubbed timeline drives everything — counter, bar, ornament — with anticipatePin: 1 killing the flash-of-unpinned.

Split into chars / words / lines, wrap lines in mask clips for clean reveals, and re-split automatically with autoSplit + onSplit. This paragraph reveals line-by-line as it enters.

Record state, mutate the DOM however you like, then Flip.from(state) animates between the two layouts. Filter the grid — layout changes tween instead of snapping.

The /ui/ page’s flower, now type: "x,y" with bounds, inertia throws and a snap to a 25px grid — and the code block on the right updates live as you drag, the way the reference’s own draggable section does.

motionPath with align, alignOrigin: [0.5, 0.5] and autoRotate — the diamond faces its direction of travel. Orange anchor dots, straight from the /svg/ page.

The /ui/ page’s component kit on its signature light-blue cards: a toggle that flips the whole panel between themes, a range slider, a stroke-drawn checkbox, and a cursor that trails your mouse. Every state change is a tween.

Observer unifies wheel, touch and pointer into directional callbacks — onDown / onUp with a tolerance. Wheel or swipe over the panel; or use the buttons.

The flair-strip concept, weaponized: toggles, hearts, dice, coins, locks, sliders, gauges and eyes — twenty component engines × five accents. Every widget is live: click, hover, flip and play. Click a tile's caption to copy the widget as a snippet.

Exact CSS variables from the reference’s source: warm near-black (never pure black), cream text (never pure white), one electric green, negative letter-spacing everywhere, weights 400 and 600 only.

The six identity classics, then every ordered pair of the eight brand colors, inks, orb radials, three-stop signatures and angle remixes — 100 gradients, all on-system. Click any swatch to copy its CSS.

Tiny seamless SVG patterns forged from the same geometry as the ornaments — dots, diagonals, crosshatch, stripes, checks, zigzags, waves, triangles, rings, plus-signs, scallops, chevrons, bricks, confetti, herringbone. Click any tile to copy its CSS.

Twenty canvas engines — particle drifts, pulse grids, auroras, sonar rings, hyperspace, constellations — each tuned into five palettes and moods. Hover any tile to bring it to life; the stage tours all 100 on its own. Click a tile to copy a dependency-free snippet: vanilla canvas, no library required.

Depth on a dark site is colored, not gray: soft lifts, hard offsets, layered stacks, under-glows, neon edges, duotone doubles and ring+shadow combos — twenty recipes × five glow tints. Click to copy the CSS.

Waves, slopes, zigzags, steps, scallops, ridges, notches and glitch steps — twenty SVG shapes × five brand fills, all preserveAspectRatio="none" so they stretch to any width. Click to copy.

Twenty hover templates — lifts, sweeps, bricks, neon, glass, corner brackets — across five brand accents. These are live: hover them right here. Click a tile to copy its HTML + CSS.

Gradient fills, outlines, neon, long shadows, per-letter rises, waves, scrambles and typewriters — twenty templates × five accents. Click a tile to copy its HTML + CSS (+ a few lines of vanilla JS where letters need splitting).

Underlines that grow on focus, floating labels, gradient borders, neon focus rings, glass, capsules and display-size inputs — twenty field templates × five accents. Click into one to feel the focus state; click the caption to copy.

Rounded, striped, shimmering, segmented, dotted, dashed, conic pies, vertical rails, step trackers and double bars — twenty determinate progress engines × five accents. Click to copy HTML + CSS.

Sliding underlines, pill actives, segmented controls, folder notches, bracket frames, numbered and skewed tabs — twenty tab bar designs × five accents. Hover for feedback; click the caption to copy.

Twenty SVG spinner engines — orbits, sweeps, pendulums, petals, gauges — animated with native SMIL, so every loader is a single self-contained tag. Five accents each. Click any tile to copy its SVG.

Solid, soft, outline, neon, glass, dot-status, count bubbles, tag notches, caption caps and offset-shadow chips — twenty badge templates × five accents, live previews. Click to copy HTML + CSS.

Twenty notification templates mapped to the five semantic states — success, info, warning, error, neutral — across classic, glass, terminal, sticker and countdown styles. Click to copy HTML + CSS.