The explorer for the shadcn registry ecosystem.
[mizzle] Example usage of Split Text.
[mizzle] Text that arrives piece by piece: characters, words or lines. Each one fades, lifts a little and sharpens from a slight blur, so it reads as settling into focus. Pure CSS, no animation library.
[mizzle] Example usage of Text Reveal.
[mizzle] Example usage of Text Reveal.
[mizzle] Decides when a CSS entrance plays: a frame after mount, or when the element scrolls into view. Returns a boolean to put on a data attribute; includes a small useInView.
[mizzle] Points several refs at one element, so a component can keep its own ref and still honour the one passed to it. Supports object refs, callback refs and React 19 ref cleanups.
[mizzle] Whether the visitor has asked for reduced motion, as a boolean that is safe to read while rendering: false on the server and during hydration, then the real setting, and it updates if the setting changes.
[Motion Menu] "embed frame is <n>" — a 16:9 panel with a faux browser chrome bar on top; reach for it to preview an embedded doc, map, or app without looking like a bare iframe.
[Motion Menu] "collapse the sitemap into an accordion" — real <details> groups, no JS, the mobile-footer move. First group shown open, the rest close to one row.
[Motion Menu] "account created" — an off-centre check mark and a calm confirmation line instead of a full-screen celebration; reach for it as the last step of a signup flow.
[Motion Menu] "lockout notice is <n>" — a too-many-attempts card with a static cooldown readout and a depleting bar; the visual only, wire it to your own rate-limit state.
[Motion Menu] "role select cards are <n>" — three radio-driven cards for choosing an account type, no JS; reach for it as the step right after signup, before the workspace exists.
[Motion Menu] "heatmap grid is <n>" — a grid of cells shaded by intensity with a Less-to-More legend; reach for it as a contribution-style activity panel. Illustrative pattern only, not live data.
[Motion Menu] "address form is <n>" — street on its own row, city and state paired, postal and country paired; reach for it for shipping or billing address capture.
[Motion Menu] "stack the lines alternating" — left, right, left. Asymmetry does the work no centred block can.
[Motion Menu] "glow frame is <n>" — a media placeholder haloed by a slow-breathing ambient glow; reach for it when a single piece of media needs to feel premium, not just placed.
[Motion Menu] "index the page down the side" — anchors with an active marker. Orientation is what stops long pages feeling long.
[Motion Menu] "cut the seam on an angle" — two acts split by a diagonal clip-path, with a thin accent stroke tracing the cut.
[Motion Menu] "pin the diagram and list it" — an inline SVG connects numbered points to a plain-text legend. For anything that needs a labelled part more than a caption.
[Motion Menu] "put the announcement strip up top" — a dismissible bar for one piece of real news; reach for it over a banner ad when there is something worth surfacing without demanding a click.
[Motion Menu] "curve the seam" — the next section rises as a smooth dome over the one above it, a single border-radius ellipse, no SVG.
[Motion Menu] "proof is <n>" — a slow continuous strip of press-style marks; reach for it as a quiet trust signal above the fold, not a hero claim.
[Motion Menu] "mix the aspect ratios" — portrait, square, landscape in one row. Rhythm instead of a uniform grid.
[Motion Menu] "give me an asymmetric hero" — a vertical caption run up the edge, the headline pushed off-centre; reach for it when the layout should feel art-directed, not centred-by-default.
[Motion Menu] "audio player is <n>" — a play control beside an inline SVG waveform and a time readout; reach for it for a podcast clip or voice note preview.
[Motion Menu] "aurora behind the hero" — slow colour fields that never repeat visibly. Costs nothing; no canvas, no GL.
[Motion Menu] "add back-to-top" — a floating round button with an up-chevron, the kind that only appears once you have scrolled.
[Motion Menu] "proof is <n>" — a plain panel next to a refined one; reach for it when the credibility argument is craft, not a number.
[Motion Menu] "lay the footer out as a bento" — asymmetric grid-template-areas cells for contact, social, location and legal instead of equal columns.
[Motion Menu] "stats are <n>" — an asymmetric grid with one figure emphasised; reach for it when one metric matters more than the others and should read first.
[Motion Menu] "end on the big ask" — oversized closing line with the address as the only link. A visible ending shortens the perceived middle.
[Motion Menu] "block it out like a collage" — three solid rectangles overlapped at low opacity, one rule crossing through. Bauhaus, not gradient.
[Motion Menu] "booking picker is <n>" — a week strip with one day selected above a grid of time slots; static and visual, wire real availability yourself.
[Motion Menu] "give me a CTA panel with two actions" — a bordered card holding one filled and one outlined button side by side; reach for it when visitors split roughly evenly between two next steps.
[Motion Menu] "give me a boxed book-a-call CTA" — an icon, a heading and one button sit inside a bordered card; reach for it when booking a call is the single next step you want on the page.
[Motion Menu] "chevron breadcrumb" — a trail separated by a sliced arrow shape instead of a plain ">"; reach for it on deep catalogue or docs hierarchies.
[Motion Menu] "breadcrumb and share row is <n>" — trail on the left, copy-link and share on the right; reach for it on any deep content page that needs both orientation and a way out.
[Motion Menu] "speed is a header — 256" — the CDN caching dance shown with real responses. Why fast sites feel free to run.
[Motion Menu] "pull it out as a callout band" — a bordered aside for the sentence that must not be skimmed past.
[Motion Menu] "CTA in a card, with a rule" — heading, a hairline, then an arrow link that slides on hover.
[Motion Menu] "spell out the care" — symbols and plain rules. The page a buyer returns to after the sale.
[Motion Menu] "strip the case study down" — what, what changed, over how long. Three facts beat three paragraphs.
[Motion Menu] "centered wordmark nav" — a minimal top bar with the mark dead-centre and matched flanks either side; reach for it when the brand mark should read as the anchor, not a corner logo.
[Motion Menu] "give me a centred statement hero" — an eyebrow, one bold claim, a single CTA; reach for it when the product needs one clear sentence and nothing competing with it.
[Motion Menu] "split it into a diptych with a centre rule" — two frames divided by a hairline instead of a gap, reads as one composed pair.
[Motion Menu] "list it as a checklist" — ticked rows in a bordered panel. For scope, inclusions, or requirements.
[Motion Menu] "notch the seam with a chevron" — a downward chevron sitting on the rule, marking the break without a label.
[Motion Menu] "hint the command palette" — a fake-input bar advertising ⌘K. The cheapest discoverability there is.