# ui.artbloom

> Production-ready React templates and animations. Copy the code, run one command, ship it.

44 pieces, all free, all MIT, no account and no key. Every one of them
installs into an existing project with a single command, which is written out on
each line below. Nothing here is published by anyone else, so there is no
quality floor to guess at: one person built all of it.

## Installing

- Our CLI: `npx ui.artbloom add <name>` — writes the files, appends any CSS the piece needs, and installs its npm dependencies.
- Any shadcn-compatible CLI: `npx shadcn@latest add https://ui.artbloom.tech/r/<name>.json` — same files, no need for our package.
- Raw JSON: `https://ui.artbloom.tech/r/<name>.json` — the payload both commands read. Public, CORS-open, no key.
- Whole index: `https://ui.artbloom.tech/r/registry.json` — every item with its title, kind, author and payload URL.
- MCP: `https://ui.artbloom.tech/mcp` — search the catalogue and read one piece's source over the Model Context Protocol.

## Templates (3)

Categories: Landing Pages (landing), Agencies (agency), Portfolios (portfolio), Personal Sites (personal), Resumes (resume).

- [Cinematic Supercar](https://ui.artbloom.tech/artbloom/templates/cinematic-supercar): A scroll-driven WebGL product story — assembly, ignition, road, braking, showroom — with a real 12MB car model, V12 audio, and film grain. Ships every byte it needs. Category: Landing Pages. Install: `npx ui.artbloom add cinematic-supercar`. JSON: https://ui.artbloom.tech/r/cinematic-supercar.json
- [Paper Portfolio](https://ui.artbloom.tech/artbloom/templates/paper-portfolio): A seven-page torn-paper portfolio: hero collage, case studies, a printable capabilities page and a draggable sketchbook. Ships the six original PNGs — the hero collage and five logo marks — with the rest of the artwork drawn in SVG. Category: Portfolios. Install: `npx ui.artbloom add paper-portfolio`. JSON: https://ui.artbloom.tech/r/paper-portfolio.json
- [Monolith Launch](https://ui.artbloom.tech/artbloom/templates/monolith-launch): A four-page product launch site built entirely from type — no images, no icons, no fonts to fetch and nothing to license. Display headline, a looping spec strip, four claims each backed by a number, the full specification table and a reservation form that admits it has no backend. Category: Landing Pages. Install: `npx ui.artbloom add monolith-launch`. JSON: https://ui.artbloom.tech/r/monolith-launch.json

## Animations (41)

Categories: Micro-interactions (micro), Loaders (loaders), Springs (springs), Draggable (draggable), Text Effects (text), Stagger (stagger), Infinite Loops (infinite), Page Transitions (transitions), 3D & Perspective (three-d), Masks & Clips (masks), Backgrounds (backgrounds), Particles (particles), Morphing (morph), Number Tickers (numbers), Noise & Grain (noise), Gradients (gradients), Marquees (marquees).

- [Text Shimmer](https://ui.artbloom.tech/artbloom/animations/text-shimmer): A light band that sweeps across text, clipped to the glyphs themselves so it inherits weight and tracking. Category: Text Effects. Install: `npx ui.artbloom add text-shimmer`. JSON: https://ui.artbloom.tech/r/text-shimmer.json
- [Number Ticker](https://ui.artbloom.tech/artbloom/animations/number-ticker): Counts to a target when it scrolls into view. The spring writes straight to textContent, so React never re-renders mid-count. Category: Number Tickers. Install: `npx ui.artbloom add number-ticker`. JSON: https://ui.artbloom.tech/r/number-ticker.json
- [Marquee](https://ui.artbloom.tech/artbloom/animations/marquee): Seamless infinite scroller, horizontal or vertical, with edge fades and pause-on-hover. Category: Marquees. Install: `npx ui.artbloom add marquee`. JSON: https://ui.artbloom.tech/r/marquee.json
- [Chip Pile](https://ui.artbloom.tech/artbloom/animations/chip-pile): A tag list where every chip is a rigid body as wide as its own label, solved by sequential impulses with real friction. Drag one out and the pile answers. Category: Draggable. Install: `npx ui.artbloom add chip-pile`. JSON: https://ui.artbloom.tech/r/chip-pile.json
- [Liquid Nav](https://ui.artbloom.tech/artbloom/animations/liquid-nav): A tab indicator that is fifteen masses on a spring chain, so it necks and catches up instead of easing. Drop-in for a real nav. Category: Micro-interactions. Install: `npx ui.artbloom add liquid-nav`. JSON: https://ui.artbloom.tech/r/liquid-nav.json
- [Pull Cord](https://ui.artbloom.tech/artbloom/animations/pull-cord): A switch you pull. Eighteen masses on inextensible links, and the click fires when the plunger runs out of travel — not when the angle looks right. Category: Micro-interactions. Install: `npx ui.artbloom add pull-cord`. JSON: https://ui.artbloom.tech/r/pull-cord.json
- [Shadow Caster](https://ui.artbloom.tech/artbloom/animations/shadow-caster): A feature grid lit by a source with real area, so every shadow has a penumbra that widens as it lengthens. The occluders are the live card rects. Category: Backgrounds. Install: `npx ui.artbloom add shadow-caster`. JSON: https://ui.artbloom.tech/r/shadow-caster.json
- [Slosh Gauge](https://ui.artbloom.tech/artbloom/animations/slosh-gauge): A stat card whose liquid obeys the shallow-water equations, so it lands on the exact number with no easing and the wave crosses the tank at its own speed. Category: Number Tickers. Install: `npx ui.artbloom add slosh-gauge`. JSON: https://ui.artbloom.tech/r/slosh-gauge.json
- [Pressure Button](https://ui.artbloom.tech/artbloom/animations/pressure-button): A button whose face is a pressure vessel. Holding it compresses the gas inside, the shell deforms under the real load, and letting go vents it — so the press has weight instead of a scale transform. Category: Micro-interactions. Install: `npx ui.artbloom add pressure-button`. JSON: https://ui.artbloom.tech/r/pressure-button.json
- [Cart-Pole Progress](https://ui.artbloom.tech/artbloom/animations/balance-progress): A progress bar with an inverted pendulum riding it. The controller drives away from the fall before it drives toward the target, so the bar leans into its own travel and settles with no easing curve. Category: Loaders. Install: `npx ui.artbloom add balance-progress`. JSON: https://ui.artbloom.tech/r/balance-progress.json
- [Heat Grid](https://ui.artbloom.tech/artbloom/animations/heat-grid): A contribution calendar where activity is heat and the heat obeys the diffusion equation, so a busy week bleeds into the days beside it and cools back to ambient on its own. Category: Stagger. Install: `npx ui.artbloom add heat-grid`. JSON: https://ui.artbloom.tech/r/heat-grid.json
- [Flock Search](https://ui.artbloom.tech/artbloom/animations/flock-search): An empty state that is not empty. Reynolds boids fill the space behind the message, split around the pointer as it passes and close back up behind it — separation, alignment and cohesion, no path to follow. Category: Particles. Install: `npx ui.artbloom add flock-search`. JSON: https://ui.artbloom.tech/r/flock-search.json
- [Morphogen Wordmark](https://ui.artbloom.tech/artbloom/animations/morphogen-wordmark): A hero background grown out of the wordmark itself. Two reagents react and diffuse from the glyphs as the seed, and the front feeds outward into stripes — every load braids differently because nothing is keyframed. Category: Backgrounds. Install: `npx ui.artbloom add morphogen-wordmark`. JSON: https://ui.artbloom.tech/r/morphogen-wordmark.json
- [Euler Disk Spinner](https://ui.artbloom.tech/artbloom/animations/euler-disk-spinner): A loading state that spends energy instead of looping. The coin's tilt carries the remaining work and its rattle rises as the disk lies down, the way a real Euler disk finishes — audibly close before it stops. Category: Loaders. Install: `npx ui.artbloom add euler-disk-spinner`. JSON: https://ui.artbloom.tech/r/euler-disk-spinner.json
- [Aurora Thread Loom](https://ui.artbloom.tech/artbloom/animations/aurora-thread-loom): Forty-eight gradient threads waving out of phase and hue-rotating as they cross. One keyframe, indexed per thread by a custom property. Category: Gradients. Install: `npx ui.artbloom add aurora-thread-loom`. JSON: https://ui.artbloom.tech/r/aurora-thread-loom.json
- [Bubble Burst](https://ui.artbloom.tech/artbloom/animations/bubble-burst): Four bubbles rise, pop, and spray eight drops each on a shared clock. A liquid loader with no JS timer. Category: Loaders. Install: `npx ui.artbloom add bubble-burst`. JSON: https://ui.artbloom.tech/r/bubble-burst.json
- [Curtain Sequence](https://ui.artbloom.tech/artbloom/animations/curtain-sequence): Six coloured panels sweep in, hinge from the far edge, and leave — the title resolves mid-pass. Press to run. Category: Page Transitions. Install: `npx ui.artbloom add curtain-sequence`. JSON: https://ui.artbloom.tech/r/curtain-sequence.json
- [Destructible Membrane](https://ui.artbloom.tech/artbloom/animations/destructible-membrane): A canvas sheet you tear with the pointer. Springs hold the cloth, the rupture propagates to neighbouring cells, and the noise buffer is rebuilt on resize. Category: Draggable. Install: `npx ui.artbloom add destructible-membrane`. JSON: https://ui.artbloom.tech/r/destructible-membrane.json
- [Domino Word](https://ui.artbloom.tech/artbloom/animations/domino-word): Letter tiles fall into each other in sequence, each with a cast side and a real ground shadow. Any word, one tile per letter. Category: Text Effects. Install: `npx ui.artbloom add domino-word`. JSON: https://ui.artbloom.tech/r/domino-word.json
- [Kinetic Kerning](https://ui.artbloom.tech/artbloom/animations/kinetic-kerning): Letters slide out of true and settle back into precise spacing, one after another, with the caption arriving last. Category: Text Effects. Install: `npx ui.artbloom add kinetic-kerning`. JSON: https://ui.artbloom.tech/r/kinetic-kerning.json
- [Kinetic Texture Mesh](https://ui.artbloom.tech/artbloom/animations/kinetic-texture-mesh): Drag to pluck a grid of textured cells and release a wave through the mesh. Canvas, pointer capture, one animation frame loop. Category: Draggable. Install: `npx ui.artbloom add kinetic-texture-mesh`. JSON: https://ui.artbloom.tech/r/kinetic-texture-mesh.json
- [Lenticular Shift](https://ui.artbloom.tech/artbloom/animations/lenticular-shift): Eighteen slats turn in place so two words trade positions, the way a lenticular print changes with the angle you hold it at. Category: 3D & Perspective. Install: `npx ui.artbloom add lenticular-shift`. JSON: https://ui.artbloom.tech/r/lenticular-shift.json
- [Mercury Droplet Choir](https://ui.artbloom.tech/artbloom/animations/mercury-droplet-choir): Twenty-five chrome droplets breathe in and out of formation, deforming as they travel. Offsets are computed per cell from the centre of the grid. Category: Morphing. Install: `npx ui.artbloom add mercury-droplet-choir`. JSON: https://ui.artbloom.tech/r/mercury-droplet-choir.json
- [Pulse Choir](https://ui.artbloom.tech/artbloom/animations/pulse-choir): Thirty-two bars on one clock, each with a fixed peak, so the field reads as a single waveform rather than thirty-two loaders. Category: Loaders. Install: `npx ui.artbloom add pulse-choir`. JSON: https://ui.artbloom.tech/r/pulse-choir.json
- [Rollback Orbit](https://ui.artbloom.tech/artbloom/animations/rollback-orbit): A weighted ball rolls to its target and back, rocking the rail it runs on and settling the shadow underneath. Press to roll. Category: Micro-interactions. Install: `npx ui.artbloom add rollback-orbit`. JSON: https://ui.artbloom.tech/r/rollback-orbit.json
- [Split Shutter](https://ui.artbloom.tech/artbloom/animations/split-shutter): Nine shutters part to reveal a word, each slat carrying its own printed label so the mechanism stays visible. Category: Masks & Clips. Install: `npx ui.artbloom add split-shutter`. JSON: https://ui.artbloom.tech/r/split-shutter.json
- [Snap Toggle](https://ui.artbloom.tech/artbloom/animations/snap-toggle): A settings toggle whose off and on are two real resting positions of a buckled arch. Drag the knob to the middle and let go: it hangs for a third of a second and then commits on its own, and which way it goes is settled by a fraction of a pixel rather than by a threshold. Category: Draggable. Install: `npx ui.artbloom add snap-toggle`. JSON: https://ui.artbloom.tech/r/snap-toggle.json
- [Toast Stack](https://ui.artbloom.tech/artbloom/animations/toast-stack): A notification stack where every card lands on the air trapped underneath it. The squeeze is algebraic rather than exponential, so half the settle is spent in the last pixel and a half — and dismissing one from the middle ripples up at each card's own rate, with no stagger written anywhere. Category: Stagger. Install: `npx ui.artbloom add toast-stack`. JSON: https://ui.artbloom.tech/r/toast-stack.json
- [Detent Slider](https://ui.artbloom.tech/artbloom/animations/detent-slider): A stepped slider with a real detent instead of a rounding function. The notches cost something to climb out of, so a slow drag settles into the nearest one and a flick clears three — out of one equation rather than a velocity threshold. Category: Draggable. Install: `npx ui.artbloom add detent-slider`. JSON: https://ui.artbloom.tech/r/detent-slider.json
- [Sheet Fold](https://ui.artbloom.tech/artbloom/animations/sheet-fold): A settings accordion whose panels are plates on a soft-close hinge. The damper is quadratic, so a leaf holds a steady rate through half its travel and then chokes on the last pixel and a half, and a long row and a short one sweep at different speeds without either being configured. Category: Page Transitions. Install: `npx ui.artbloom add sheet-fold`. JSON: https://ui.artbloom.tech/r/sheet-fold.json
- [Shutter Compare](https://ui.artbloom.tech/artbloom/animations/shutter-compare): A before/after slider whose divider is a focal-plane shutter. The second curtain is latched one exposure time after the first rather than pinned to it, so past the sync speed the reveal arrives as a travelling band instead of an edge. Category: Draggable. Install: `npx ui.artbloom add shutter-compare`. JSON: https://ui.artbloom.tech/r/shutter-compare.json
- [Dock Magnify](https://ui.artbloom.tech/artbloom/animations/dock-magnify): An app dock on a shelf that actually bends. The bump under the pointer is a solved deflection rather than a curve over distance, so the icons two slots out dip below the resting line and the ones at either end lift less than the ones in the middle — neither of which a falloff function can do. Category: Micro-interactions. Install: `npx ui.artbloom add dock-magnify`. JSON: https://ui.artbloom.tech/r/dock-magnify.json
- [Galton Histogram](https://ui.artbloom.tech/artbloom/animations/galton-histogram): A ratings breakdown whose five bars are a tally of stars that have actually been cast, one falling ball at a time. The bars wobble, and the wobble shrinks as the sample grows — so switching from every review to the last few hundred makes the same product go visibly noisy. Category: Particles. Install: `npx ui.artbloom add galton-histogram`. JSON: https://ui.artbloom.tech/r/galton-histogram.json
- [Relaxation Typing](https://ui.artbloom.tech/artbloom/animations/relaxation-typing): A typing indicator whose three dots are coupled to each other rather than delayed behind each other. Drag it toward a faster typist and the ripple tightens into a near-simultaneous blink instead of merely running quicker, which a keyframe stagger cannot do at any duration. Category: Loaders. Install: `npx ui.artbloom add relaxation-typing`. JSON: https://ui.artbloom.tech/r/relaxation-typing.json
- [Lloyd Avatars](https://ui.artbloom.tech/artbloom/animations/lloyd-avatars): A reviewer facepile in which every face owns the part of the frame nearest to it. Overlap is impossible rather than prevented, so nothing has to be re-tuned per head count — drag one face into a corner and its share collapses while the rest swell to take it up. Category: Draggable. Install: `npx ui.artbloom add lloyd-avatars`. JSON: https://ui.artbloom.tech/r/lloyd-avatars.json
- [Kelvin Ramp](https://ui.artbloom.tech/artbloom/animations/kelvin-ramp): A theme-warmth control whose strip is a real black-body locus — Planck's law through the CIE 1931 observer, then the sRGB transfer curve, solved a column at a time. A thousand kelvin at the warm end is five times the colour change it is at the cool end, so the same drag does different work at either end of the same strip, which a gradient between two stops cannot do at any number of stops. Category: Gradients. Install: `npx ui.artbloom add kelvin-ramp`. JSON: https://ui.artbloom.tech/r/kelvin-ramp.json
- [Scanline Marquee](https://ui.artbloom.tech/artbloom/animations/scanline-marquee): A trusted-by belt read one scanline at a time, and read against the strip's own velocity history rather than its current speed. Flick it and hold still: the travel has stopped and the type is still unbending from the top of the window down, because every band on screen was exposed at a different moment. Category: Marquees. Install: `npx ui.artbloom add scanline-marquee`. JSON: https://ui.artbloom.tech/r/scanline-marquee.json
- [Photon Thumbnail](https://ui.artbloom.tech/artbloom/animations/photon-thumbnail): A media card whose thumbnail arrives as photons land on it: Poisson counts over an analytically ray-traced scene, so the estimator's error falls as the square root of exposure and nothing here is a bitmap. The shadows are still boiling long after the highlights have gone clean — the one thing a grain overlay fading to zero cannot reproduce, because its noise is uniform across the frame. Category: Noise & Grain. Install: `npx ui.artbloom add photon-thumbnail`. JSON: https://ui.artbloom.tech/r/photon-thumbnail.json
- [Frost Spoiler](https://ui.artbloom.tech/artbloom/animations/frost-spoiler): An embargoed price behind ice that was actually grown — a diffusion-limited cluster, aggregated one walker at a time. Sweeping the glass sublimates the patch under the hand and leaves the rest of the pane standing, and no two panels are frosted alike, because there is no texture anywhere in it to repeat. Category: Masks & Clips. Install: `npx ui.artbloom add frost-spoiler`. JSON: https://ui.artbloom.tech/r/frost-spoiler.json
- [Wetting Reveal](https://ui.artbloom.tech/artbloom/animations/wetting-reveal): A gallery plate revealed by a liquid film with a real contact angle. The front is driven by its own curvature and pins on defects in the glass, so a drop rounds itself off, stalls at an edge, and merges with its neighbours into one sheet — and the wetted picture carries the tonality the dry haze was flattening. Category: Masks & Clips. Install: `npx ui.artbloom add wetting-reveal`. JSON: https://ui.artbloom.tech/r/wetting-reveal.json
- [Moire Scratch](https://ui.artbloom.tech/artbloom/animations/moire-scratch): A promo code under two printed gratings, revealed by the beat between them rather than by an eraser mask. Both films are box-filtered at exactly one pitch, so the carriers integrate away and only the beat survives — and the gain is the beat over the pitch: eleven pixels of hand sweeps the bright band clear across the panel. Category: Masks & Clips. Install: `npx ui.artbloom add moire-scratch`. JSON: https://ui.artbloom.tech/r/moire-scratch.json

## Reference

- [Docs](https://ui.artbloom.tech/docs): what a registry item is, what an install writes, and how to undo it.
- [CLI reference](https://ui.artbloom.tech/docs/cli): every command and flag, including `--dry-run` and `--no-telemetry`.
- [Item schema](https://ui.artbloom.tech/schema/registry-item.json): JSON Schema for a payload at `/r/<name>.json`.
- [Themes](https://ui.artbloom.tech/themes): the CSS variables the pieces read, and what they fall back to.
- [License](https://ui.artbloom.tech/license): MIT, and what that does and does not cover.