loomui
loomui.designBeautifully animated React components and effects to make your interface feel alive.
Items
91
2026-08-20Every entry in its own registry.json, counted last night.Free to install
91
2026-08-20Item endpoints that returned source without credentials.Behind a key
0
2026-08-20Item endpoints that answered 401.Last push
yesterday
3 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Aurora Backdropaurora-backdrop | A wash of blurred colour that drifts behind content on cycles that never line up. | Components | Free | no deps | |
| Bento Gridbento-grid | A grid of tiles of different sizes that arrive one after another when the grid is reached. | Components | Free | no deps | |
| Card Stackcard-stack | Cards that pin one behind another as the page scrolls, each settling behind the next. | Components | Free | no deps | |
| Compare Slidercompare-slider | Two versions of the same frame, split by a divider you drag, or move with the arrow keys. | Components | Free | no deps | |
| Confetti Buttonconfetti-button | A button that throws a handful of paper into the air on press, each piece lobbed on its own arc. | Components | Free | no deps | |
| Count Upcount-up | A number that counts to its value when it scrolls into view, without a render per frame. | Components | Free | no deps | |
| Credit Cardcredit-card | A placeholder payment card with a contact plate, a number and an aurora drifting under the face. | Components | Free | no deps | |
| Drawerdrawer | A panel that comes in from any edge and covers most of the screen, dragged anywhere on its face to send it back out. | Components | Free | 1 dep | |
| Elastic Tabselastic-tabs | A tab group whose pill stretches to cover both tabs before it contracts onto the one you picked. | Components | Free | no deps | |
| Flip Cardflip-card | A card with two faces that turns in 3D when it is clicked, controlled or on its own. | Components | Free | no deps | |
| Grid Backdropgrid-backdrop | An SVG grid with cells that fade in and out at a deterministic, seeded scatter. | Components | Free | no deps | |
| Grid Beamsgrid-beams | A ruled grid with neon beams running down random lines, fading out toward the edges. | Components | Free | no deps | |
| Hold Buttonhold-button | A button that fires only after a deliberate press and hold, with a fill sweeping across to count out the wait. | Components | Free | no deps | |
| Icon Morphicon-morph | One icon that turns into another by moving its own pieces, so there is never a frame with both glyphs on screen. | Components | Free | no deps | |
| Image Trailimage-trail | Images dropped along the pointer's path, spaced by distance travelled rather than by time. | Components | Free | no deps | |
| iPadipad | A tablet frame drawn from the real measurements, upright or on its side, with a screen you put anything in. | Components | Free | no deps | |
| iPhoneiphone | A device frame drawn from the real measurements, with a screen you put anything in. | Components | Free | no deps | |
| Lens Textlens-text | Text held out of focus until the pointer passes over it like a magnifying glass. | Components | Free | no deps | |
| Logo Loomlogo-loom | A logo row woven into place, every other mark arriving from the other side of the thread. | Components | Free | no deps | |
| Loom Loaderloom-loader | Threads drawn through a frame and pulled off the far side, with a shuttle crossing them. | Components | Free | no deps | |
| Loom Sliderloom-slider | A row of dashes where the one you are holding stands tallest, with the rise travelling the track as you drag. | Components | Free | no deps | |
| MacBookmacbook | A laptop frame with the camera housing cut into the display and the scoop cut into its base. | Components | Free | no deps | |
| Magneticmagnetic | A wrapper that pulls its child toward the pointer as the pointer gets close. | Components | Free | 1 dep | |
| Marqueemarquee | A seamless scrolling row or column, in either direction, that pauses on hover. | Components | Free | no deps | |
| Photo Stampphoto-stamp | A photo that lifts off the page at full size over a blurred backdrop, the same element the whole way. | Components | Free | no deps | |
| Progress Ringprogress-ring | A circular progress ring whose value springs to its target, so a number that changes mid travel keeps the speed it already had. | Components | Free | no deps | |
| Reading Progressreading-progress | A pinned bar that tracks how far through the page, or a chosen element, the reader is. | Components | Free | no deps | |
| Ripple Buttonripple-button | A button that sends a circle out from wherever it was pressed, sized to reach the furthest corner. | Components | Free | no deps | |
| Scramble Textscramble-text | A string that resolves out of random glyphs, left to right, on mount, on scroll, or on hover. | Components | Free | no deps | |
| Shimmer Skeletonshimmer-skeleton | A placeholder block with a shimmer that passes across it while the real thing loads. | Components | Free | no deps | |
| Split Flapsplit-flap | A departure board that flaps through its glyphs, one cell behind the last, until it lands on the value. | Components | Free | no deps | |
| Spoolspool | A container that changes shape to fit whatever it is showing, on a spring that carries its velocity through an interruption. | Components | Free | no deps | |
| Spotlight Cardspotlight-card | A surface with a soft highlight that follows the pointer and fades out on leave. | Components | Free | no deps | |
| Stagger Textstagger-text | Words or characters that rise into place one after another, on mount or on scroll. | Components | Free | no deps | |
| Sticker Peelsticker-peel | A card whose corner lifts off the page on hover, folded back over the crease to show its backing. | Components | Free | no deps | |
| Stitch Pathstitch-path | A running stitch sewn along an SVG path as the page scrolls, following the holes it is laid over. | Components | Free | no deps | |
| Terminalterminal | A window that types its commands out and prints their output a beat later. | Components | Free | no deps | |
| Testimonial Walltestimonial-wall | Columns of quotes drifting past each other at different speeds, faded at both ends. | Components | Free | no deps | |
| Thread Timelinethread-timeline | A timeline whose thread is sewn down the page as you read, lighting each node as it reaches it. | Components | Free | no deps | |
| Ticket Stubticket-stub | A card torn along a perforation, with a notch bitten out of the paper at each end of it. | Components | Free | no deps | |
| Tilt Cardtilt-card | A surface that leans away from the pointer in 3D and settles back on leave. | Components | Free | no deps | |
| Typewritertypewriter | Phrases typed out and deleted in a loop, with a caret and no layout shift. | Components | Free | no deps | |
| Unfold Listunfold-list | A disclosure list whose panels turn down onto the page from their top edge. | Components | Free | no deps | |
| Weave Textweave-text | Text filled with a slow-drifting gradient, woven from a palette you control. | Components | Free | no deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| useInViewportuse-in-viewport | Tells a component whether it is on screen, so a looping animation can stop while nobody is watching it. | Utilities | Free | no deps | |
| useSpringuse-spring | A spring over named numbers, driven onto a callback rather than through state, that carries velocity across every retarget. | Utilities | Free | no deps | |
| Utilsutils | The cn() class merge helper every loom component depends on. | Utilities | Free | 2 deps |
Examples
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Aurora Backdrop Demoaurora-backdrop-demo | A drifting colour wash behind a panel of copy. | Examples | Free | no deps | |
| Bento Grid Demobento-grid-demo | Four tiles of two sizes arriving one after another. | Examples | Free | no deps | |
| Card Stack Democard-stack-demo | Four cards pinning one behind another inside a panel. | Examples | Free | no deps | |
| Compare Slider Democompare-slider-demo | A draft and a shipped page split by a divider you drag. | Examples | Free | no deps | |
| Confetti Button Democonfetti-button-demo | The same throw at three different sizes. | Examples | Free | no deps | |
| Count Up Democount-up-demo | Three statistics counting to their values in step. | Examples | Free | no deps | |
| Credit Card Democredit-card-demo | The placeholder card with its aurora drifting. | Examples | Free | no deps | |
| Drawer Demodrawer-demo | A drawer from the bottom edge, pulled open or swiped away by its notch. | Examples | Free | no deps | |
| Elastic Tabs Demoelastic-tabs-demo | Four categories with a pill that stretches between them. | Examples | Free | no deps | |
| Flip Card Demoflip-card-demo | A two-by-two matching game played by turning cards over. | Examples | Free | no deps | |
| Grid Backdrop Demogrid-backdrop-demo | A grid pulsing behind a headline. | Examples | Free | no deps | |
| Grid Beams Demogrid-beams-demo | Neon beams running down a ruled grid behind a panel of copy. | Examples | Free | no deps | |
| Hold Button Demohold-button-demo | A destructive action that only goes through if you keep holding. | Examples | Free | no deps | |
| Icon Morph Demoicon-morph-demo | Five icon pairs, each one shape travelling rather than two shapes trading places. | Examples | Free | no deps | |
| Image Trail Demoimage-trail-demo | Swatches dropped behind the pointer as it crosses a panel. | Examples | Free | no deps | |
| iPad Demoipad-demo | A blank tablet held upright. | Examples | Free | no deps | |
| iPhone Demoiphone-demo | A device frame with a screen built out of live markup. | Examples | Free | no deps | |
| Lens Text Demolens-text-demo | A blurred headline pulled into focus under the pointer. | Examples | Free | no deps | |
| Logo Loom Demologo-loom-demo | Five wordmarks woven onto a thread as the row comes into view. | Examples | Free | no deps | |
| Loom Loader Demoloom-loader-demo | The loader at three sizes, with a wider frame on the last. | Examples | Free | no deps | |
| Loom Slider Demoloom-slider-demo | A tension control read off the dash standing tallest. | Examples | Free | no deps | |
| MacBook Demomacbook-demo | A blank laptop standing on its base. | Examples | Free | no deps | |
| Magnetic Demomagnetic-demo | A button that leans toward the pointer. | Examples | Free | no deps | |
| Marquee Demomarquee-demo | A row of quote cards scrolling on a seamless loop. | Examples | Free | no deps | |
| Photo Stamp Demophoto-stamp-demo | A stamp that lifts its photo out of the frame at full size over a blurred page. | Examples | Free | no deps | |
| Progress Ring Demoprogress-ring-demo | A ring stepping through five values without ever settling. | Examples | Free | no deps | |
| Reading Progress Demoreading-progress-demo | The page-level progress bar, live at the top of the screen. | Examples | Free | no deps | |
| Ripple Button Demoripple-button-demo | Three buttons, each pressed anywhere on its face. | Examples | Free | no deps | |
| Scramble Text Demoscramble-text-demo | A wordmark decoding out of noise on every hover. | Examples | Free | no deps | |
| Shimmer Skeleton Demoshimmer-skeleton-demo | A card placeholder with the sweep running down it. | Examples | Free | no deps | |
| Split Flap Demosplit-flap-demo | A departure board cycling through four destinations. | Examples | Free | no deps | |
| Spool Demospool-demo | A pill that changes shape to fit three different states, and can be interrupted part way. | Examples | Free | no deps | |
| Spotlight Card Demospotlight-card-demo | Two cards lit by the pointer as it crosses them. | Examples | Free | no deps | |
| Stagger Text Demostagger-text-demo | A sentence revealed word by word when it scrolls into view. | Examples | Free | no deps | |
| Sticker Peel Demosticker-peel-demo | Three stickers whose corners lift as the pointer crosses them. | Examples | Free | no deps | |
| Stitch Path Demostitch-path-demo | A seam sewn between two lines of copy as the page scrolls. | Examples | Free | no deps | |
| Terminal Demoterminal-demo | An install session typed out one command at a time. | Examples | Free | no deps | |
| Testimonial Wall Demotestimonial-wall-demo | Nine quotes dealt across three columns going opposite ways. | Examples | Free | no deps | |
| Thread Timeline Demothread-timeline-demo | Four entries sewn together as the page scrolls past them. | Examples | Free | no deps | |
| Ticket Stub Demoticket-stub-demo | A boarding pass torn along its perforation. | Examples | Free | no deps | |
| Tilt Card Demotilt-card-demo | A card that leans away from the pointer with a soft sheen. | Examples | Free | no deps | |
| Typewriter Demotypewriter-demo | A rotating list of phrases typed into a fixed-width slot. | Examples | Free | no deps | |
| Unfold List Demounfold-list-demo | Three questions, one panel open at a time. | Examples | Free | no deps | |
| Weave Text Demoweave-text-demo | Weave Text used as a headline accent. | Examples | Free | no deps |
Put this measurement in your README
A badge carrying how many items this registry publishes, enumerated nightly from its own registry.json. It reads from this index every time somebody loads your page, so it changes when the measurement changes and there is nothing to keep up to date. Free, no account, and the value is not something you or we can set by hand.
[](https://blockdex.kynth.studio/registries/loomui)Would rather not hotlink us? Every badge is also served in shields.io’s endpoint schema, so shields renders the image and your readers never talk to our domain:
Published by Toolproof, the masthead over this index and eight others. The method behind the number is at toolproof.kynth.studio/methodology, and the whole thing is readable as JSON with no key at /api.
