sh4dcnv2 · atlas
← libraries

@ns-ui

389 animated React components for Tailwind v4 and React 19, with a CLI and an MCP server.

250 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://design.helpmarq.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://design.helpmarq.com/r/registry.json
bun bunx shadcn@latest add https://design.helpmarq.com/r/registry.json
fetch registry curl -s https://design.helpmarq.com/r/registry.json

Components

250 total
Accordion Latch ui

An accordion whose sections latch shut with a small SVG hasp-and-staple on each closed header: opening swings the hasp off its staple, lifts the lid 2px, then …

npx shadcn@latest add https://design.helpmarq.com/r/accordion-latch.json
Adhesive Squeeze Bead ui

A merge/dock affordance modeled on structural adhesive bonding: two panels compress a bead of adhesive to a fixed bond-line stop, forcing an uneven bead of squ…

npx shadcn@latest add https://design.helpmarq.com/r/adhesive-squeeze-bead.json
Airlift Slug Flow ui

A background file-sync/upload activity rail: a slim vertical conduit where discrete air slugs, injected at the foot every 1.8s, rise at a constant 140px/s and …

npx shadcn@latest add https://design.helpmarq.com/r/airlift-slug-flow.json
Announcement Bar Relay ui

A queued announcement bar that hands off honestly: dismissing one notice shears it upward while the next arrives from below AND the bar's own height eases betw…

npx shadcn@latest add https://design.helpmarq.com/r/announcement-bar-relay.json
Approval Inline Diff ui

Human-in-the-loop tool-call approval row: every argument is editable inline with an old→new diff, and deciding collapses the row irreversibly into a one-line r…

npx shadcn@latest add https://design.helpmarq.com/r/approval-inline-diff.json
Autosave Ratchet ui

Autosave status as a mechanical ratchet: a 10-tooth gear advances one notch per saved change and tallies the session in its rotation, while a failed save kicks…

npx shadcn@latest add https://design.helpmarq.com/r/autosave-ratchet.json
Auxin Canal ui

Full-bleed hero whose vein network grows by space colonisation through whatever negative space the copy leaves empty: sources scattered around measured content…

npx shadcn@latest add https://design.helpmarq.com/r/auxin-canal.json
Avatar Stack Flock ui

Avatar stack that mills as a live boids flock and resolves into the classic overlapping row on hover, with the +N badge appearing only once the formation settl…

npx shadcn@latest add https://design.helpmarq.com/r/avatar-stack-flock.json
Back Bearing ui

A sighting-compass bearing picker: the graduated card rotates under a fixed lubber line and the instrument always shows the fore reading plus its reciprocal, t…

npx shadcn@latest add https://design.helpmarq.com/r/back-bearing.json
Background ASCII Caustics ui

Ambient water-caustics rendered in ASCII ink density: three rotated wave grids combined multiplicatively and sharpened into thin bright filaments, the way over…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-caustics.json
Background ASCII Dither ui

Luminance-to-glyph canvas renderer: ASCII, Bayer-dither, and dot-matrix modes with cursor-proximity resolve.

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-dither.json
Background ASCII Domain Walls ui

An ambient ASCII background running a real Ising model just below its critical temperature and inking only the DOMAIN WALLS (the boundaries between up and down…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-domain-walls.json
Background ASCII Flow ui

An ambient ASCII flow-field background: a fixed set of tracer particles ride a time-evolving 2D curl-noise velocity field, each glyph's direction ('-', '|', '/…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-flow.json
Background ASCII Force Chains ui

An ambient ASCII background of a granular packing under load: a static disc packing's contact network is relaxed each frame and only the contacts carrying well…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-force-chains.json
Background ASCII Nodal Lines ui

An ambient ASCII background of the destructive-interference nodal set of four point emitters: ink appears only where the summed radial waves cancel to near zer…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-nodal-lines.json
Background ASCII Voronoi Walls ui

An ambient ASCII background of Voronoi cell WALLS only: ink appears exactly where the first and second nearest sites are equidistant, so a sparse, slowly drift…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-voronoi-walls.json
Background ASCII Wake ui

Full-bleed monospace cursor-trail field: a sparse ambient scatter at rest, with the pointer dragging a decaying character comet whose length and brightness dep…

npx shadcn@latest add https://design.helpmarq.com/r/background-ascii-wake.json
Background Lloyd Relax ui

A blue-noise dot field that never stops settling: points run one weighted Lloyd relaxation iteration per frame against a drifting density function with genuine…

npx shadcn@latest add https://design.helpmarq.com/r/background-lloyd-relax.json
Background Truchet Weave ui

An ambient Truchet arc weave whose tile orientation is the SIGN of a slow harmonic field, so the frame reads as interlaced domains of continuous arcs separated…

npx shadcn@latest add https://design.helpmarq.com/r/background-truchet-weave.json
Badge Unread Tarnish ui

Unread badge that tarnishes like brass: solid when fresh, an outline within a day, a muted ring after a week. New activity instantly re-polishes it with a smal…

npx shadcn@latest add https://design.helpmarq.com/r/badge-unread-tarnish.json
Banner Tear Stub ui

A dismissible notice with a perforated edge: dismissing rips the panel off along the perforation, leaving a small permanent stub that reopens it.

npx shadcn@latest add https://design.helpmarq.com/r/banner-tear-stub.json
Barograph Drum Week ui

A card-scale status widget modelled on the aneroid barograph: a pen arm inches rightward across pre-ruled seven-day chart paper, its ink trail lengthening cont…

npx shadcn@latest add https://design.helpmarq.com/r/barograph-drum-week.json
Bias Hysteresis ui

A saturation/headroom gauge rendered as an analog tape deck's own AC-bias hysteresis loop instead of a bar or dial: a bright marker rides a closed H/B loop tha…

npx shadcn@latest add https://design.helpmarq.com/r/bias-hysteresis.json
Bitting Cut ui

Every passkey in a sign-in-methods list gets a physical key blade whose six notch depths are cut deterministically from its credential id, so the MacBook passk…

npx shadcn@latest add https://design.helpmarq.com/r/bitting-cut.json
Blast Hole Delay Sequence ui

A bench-blast shot pattern rendered as a grid of charged holes that fires row by row on a delay wave rather than all at once, each row flashing to peak brightn…

npx shadcn@latest add https://design.helpmarq.com/r/blast-hole-delay-sequence.json
Board Kanban ASCII WIP ui

A kanban board drawn as box-drawing frames, each column header showing its card count against its WIP limit; going over turns the frame accent and appends the …

npx shadcn@latest add https://design.helpmarq.com/r/board-kanban-ascii-wip.json
Bobbin Lace Pricking ui

A decorative divider/empty-state motif: a narrow working band of pins twists thread pairs into locked crosses down a pricked grid, while a pin two rows behind …

npx shadcn@latest add https://design.helpmarq.com/r/bobbin-lace-pricking.json
Bombe Drum Halt ui

An ambient search/lookup loading indicator built as the electromechanical Bombe's drum-and-stop search cycle: four drum columns scan continuously until, every …

npx shadcn@latest add https://design.helpmarq.com/r/bombe-drum-halt.json
Bowditch Close ui

A geofence/traverse polygon editor built like a real closed survey traverse: the last click never auto-snaps to the first, the gap between them is drawn as the…

npx shadcn@latest add https://design.helpmarq.com/r/bowditch-close.json
Boxplot ASCII Whisker ui

ASCII-textured boxplot family with one shared fence handle: dragging or keying it re-cuts every box's whiskers live against the real sample, and outliers fade …

npx shadcn@latest add https://design.helpmarq.com/r/boxplot-ascii-whisker.json
Brass Check ui

The active-sessions list as a pit-head lamp-room check board: each session is a stamped brass tag hanging on a hook, and signing one out is a hold-to-release g…

npx shadcn@latest add https://design.helpmarq.com/r/brass-check.json
Braze Capillary Fill ui

A progress/validation-fill indicator rendered as torch brazing: molten filler is drawn sideways along a hairline joint gap by capillary action, brightest at th…

npx shadcn@latest add https://design.helpmarq.com/r/braze-capillary-fill.json
Breadcrumb Fold ui

A breadcrumb that folds like a camera bellows: ancestor segments rest pleated into narrow slivers and the current page sits fully extended, with hover or focus…

npx shadcn@latest add https://design.helpmarq.com/r/breadcrumb-fold.json
Breadcrumb Overflow Menu ui

A breadcrumb trail that collapses from the middle into a menu of the hidden levels, with an accent rule that sweeps under the current level.

npx shadcn@latest add https://design.helpmarq.com/r/breadcrumb-overflow-menu.json
Brine Float ui

A pricing section built as one shallow tank: an SVG water line runs behind the whole tier row and each card is a hydrometer float riding it, heavier (cheaper) …

npx shadcn@latest add https://design.helpmarq.com/r/brine-float.json
Button Cooldown Heat ui

A rate-limited button that heat-soaks: each press deposits heat into a visible bottom-up fill, dilates its letter-spacing, swells its surface and brightens its…

npx shadcn@latest add https://design.helpmarq.com/r/button-cooldown-heat.json
Button Glass ui

Liquid-glass button with translucent blurred surface and press states.

npx shadcn@latest add https://design.helpmarq.com/r/button-glass.json
Button Retry Backoff ui

A retry button that visibly winds a torsion spring through its backoff: disabled and charging while a --foreground arc grows on real timing, notching every fai…

npx shadcn@latest add https://design.helpmarq.com/r/button-retry-backoff.json
Caddisfly Case Assembly ui

A card-scale ambient loader modelled on caddisfly larva case-building: mineral grains drift in one at a time, get measured against the open gap at the case's g…

npx shadcn@latest add https://design.helpmarq.com/r/caddisfly-case-assembly.json
Cambium Lay ui

A tree cross-section accreting live in SVG: a cambium ring lays wood outward year by year, each year closing with a thin dense latewood band, the section sligh…

npx shadcn@latest add https://design.helpmarq.com/r/cambium-lay.json
Capstan Slip ui

A determinate progress bar redrawn as an analog tape transport: a capstan shaft turns at a strictly constant rate while a pinch roller's nip actually sets the …

npx shadcn@latest add https://design.helpmarq.com/r/capstan-slip.json
Carbon Ply Fade ui

Activity feed rendered as a carbon-paper multi-part form: one strike lands on the top ply at full density and echoes down through 4-5 contiguous, fully-visible…

npx shadcn@latest add https://design.helpmarq.com/r/carbon-ply-fade.json
Card Dot Gain Screen ui

A card backed by a contact-screen halftone that reproduces real dot gain: a nonlinear per-dot growth curve where the deepest tones grow past the point of stayi…

npx shadcn@latest add https://design.helpmarq.com/r/card-dot-gain-screen.json
Card Number Emboss ui

A card-number input rendered as an embossing machine: typed digits raise as bevel-shadowed metal, a stamping-head caret dips on every keystroke, and a brand wa…

npx shadcn@latest add https://design.helpmarq.com/r/card-number-emboss.json
Carousel Card Riffle ui

A card-stack navigator that shows its actual card edges as a scrubbable stripe of thin lines: dragging it riffles cards past with quick flip-past kicks, and th…

npx shadcn@latest add https://design.helpmarq.com/r/carousel-card-riffle.json
Catenary Contact Stagger ui

A live connection/sync-quality indicator built from overhead contact wire stagger: a fixed pantograph marker tracks the wire's deliberate zigzag span by span, …

npx shadcn@latest add https://design.helpmarq.com/r/catenary-contact-stagger.json
Cathode Stack Glow ui

A Nixie-tube stat readout: ten wire-mesh cathode digits stacked behind a shared anode mesh, the struck digit glowing over faint ghost outlines of the nine behi…

npx shadcn@latest add https://design.helpmarq.com/r/cathode-stack-glow.json
Chain Scale ui

A map zoom control that is the scale bar: drag its end handle in log space to zoom, and the bar's length always reads a sayable 1-2-5 round distance, snapping …

npx shadcn@latest add https://design.helpmarq.com/r/chain-scale.json
Chargen ROM Slice ui

A status glyph that reconstructs a real 1970s-80s CRT character-generator ROM read pattern: each glyph in a short string is built top-to-bottom from horizontal…

npx shadcn@latest add https://design.helpmarq.com/r/chargen-rom-slice.json
Chart Bar Dither ui

Canvas bar chart in ordered-dither ink density, where hovering or focusing a bar pulls it into sharper resolution while the rest ease back to a coarse print.

npx shadcn@latest add https://design.helpmarq.com/r/chart-bar-dither.json
Chart Bar Halftone ui

Bar chart whose fills are an ordered-dither halftone instead of a flat color: ink density tracks value as a second, redundant channel to height.

npx shadcn@latest add https://design.helpmarq.com/r/chart-bar-halftone.json
Chart Donut Halftone ui

Donut chart for an ordinal size scale where wedge angle carries share and ordered-dither density carries tier order, instead of a second colour.

npx shadcn@latest add https://design.helpmarq.com/r/chart-donut-halftone.json
Chart Funnel Stage Drop ui

Canvas funnel chart in ordered-dither ink density, where hovering or focusing a stage animates its own drop-off as ink particles falling into the next stage.

npx shadcn@latest add https://design.helpmarq.com/r/chart-funnel-stage-drop.json
Chart Line Dither ui

Canvas line/area chart in ordered-dither ink density, where a scrub cursor drags a local higher-resolution loupe through the fill as it moves.

npx shadcn@latest add https://design.helpmarq.com/r/chart-line-dither.json
Chart Radar Dither ui

Canvas radar/spider chart in ordered-dither ink density, swept by a continuously rotating radar line that locally resolves each axis wedge to sharper ink as it…

npx shadcn@latest add https://design.helpmarq.com/r/chart-radar-dither.json
Chart Ridgeline Terrain ui

Unknown-Pleasures ridgeline chart whose live history recedes into scrolling ambient noise terrain, dented gravitationally by the cursor.

npx shadcn@latest add https://design.helpmarq.com/r/chart-ridgeline-terrain.json
Chart Scatter ASCII Bin ui

Two-dimensional scatter plot rendered as a glyph-density grid, with a pointer- or keyboard-driven brush that live re-bins the exact points under it and reads o…

npx shadcn@latest add https://design.helpmarq.com/r/chart-scatter-ascii-bin.json
Chart Waterfall ASCII Step ui

ASCII-ramp waterfall chart where toggling a step excludes or restores its delta and every bar after it (plus the running total) visibly recomputes and re-anima…

npx shadcn@latest add https://design.helpmarq.com/r/chart-waterfall-ascii-step.json
Checkbox Domino Run ui

Select-all where the change propagates like a domino run: flip the master and a wavefront tips down the list, each row's checkbox flipping and shoving the next…

npx shadcn@latest add https://design.helpmarq.com/r/checkbox-domino-run.json
Checkbox Ink Stroke ui

A checkbox and its tri-state select-all cousin whose mark is inked on by a variable-width calligraphic pen stroke (thin entry, thick corner flick, a hair of ov…

npx shadcn@latest add https://design.helpmarq.com/r/checkbox-ink-stroke.json
Checkbox Tally Notch ui

Checkbox group rendered as a carpenter's tally: each check carves a notch stroke into its row and adds a stroke to an aggregate tally cluster in the header, wh…

npx shadcn@latest add https://design.helpmarq.com/r/checkbox-tally-notch.json
Citation Grounding Gap ui

A single SVG baseline under a RAG answer's prose: a solid 1px plank under every sourced sentence, a fading 3-dash gap wherever a claim has none. Grounding cove…

npx shadcn@latest add https://design.helpmarq.com/r/citation-grounding-gap.json
Citation Grounding Hatch ui

A per-sentence grounding trace under an AI answer: solid where a source backs the claim, a bare hairline where the model is inferring alone, diagonal hatch whe…

npx shadcn@latest add https://design.helpmarq.com/r/citation-grounding-hatch.json
Citation Inline Card ui

An inline citation pill (hostname + source count, Geist Mono) that opens one bordered card with a title, excerpt and a 1/N stepper, instead of a popover per so…

npx shadcn@latest add https://design.helpmarq.com/r/citation-inline-card.json
Clock Card Rack ui

A catch-up digest as a punch-clock card rack: one bordered card per collaborator, unread bursts holding the card proud of a shared top datum by up to 6px until…

npx shadcn@latest add https://design.helpmarq.com/r/clock-card.json
CMM Probe Touch ui

An empty-state ambient reproducing coordinate-measuring machine touch-trigger probing: a stylus indexes to 18 stations around a fixed part outline, approaches …

npx shadcn@latest add https://design.helpmarq.com/r/cmm-probe-touch.json
Cockle Swell ui

A pull-quote block printed on a sheet of paper that is cockling — three drifting humidity sources buckle the sheet along a fixed grain direction (5:1 anisotrop…

npx shadcn@latest add https://design.helpmarq.com/r/cockle-swell.json
Compare Crack Seam ui

Before/after comparison slider whose divider is a living Voronoi crack seam: fast drags spawn branching micro-fissures, slow drags heal them shut, and release …

npx shadcn@latest add https://design.helpmarq.com/r/compare-crack-seam.json
Compare Table Reach Rule ui

A tier comparison matrix where every feature row draws a real box-drawing rule that runs left-to-right and terminates with ┤ at the last tier that actually inc…

npx shadcn@latest add https://design.helpmarq.com/r/compare-table-reach-rule.json
Confidence Logprob Hatch ui

Hand-hatched underlines under low-confidence tokens, stroke density mapping straight to logprob doubt in three buckets, with a hover/focus popover naming what …

npx shadcn@latest add https://design.helpmarq.com/r/confidence-logprob-hatch.json
Confirm Dial Align ui

Destructive-action confirm gated on precision, not patience: rotate an SVG dial's notch to within 3deg of a fixed index, hold it there 400ms, and the dial snap…

npx shadcn@latest add https://design.helpmarq.com/r/confirm-dial-align.json
Confirm Hold Ink ui

Press-and-hold destructive action: monochrome ink pours up from the press point, release early and it recoils.

npx shadcn@latest add https://design.helpmarq.com/r/confirm-hold-ink.json
Confirm Slide Shatter ui

Frosted-glass confirm slider where drag distance drives Voronoi crack density. Release early and the cracks heal on a spring; complete the travel and the pane …

npx shadcn@latest add https://design.helpmarq.com/r/confirm-slide-shatter.json
Consent Scope Redact ui

A consent surface that shows instead of tells: a live sentence templated from the user's own record, where each sharing scope is a real switch and toggling it …

npx shadcn@latest add https://design.helpmarq.com/r/consent-scope-redact.json
Contact Form Teletype ui

A contact form whose validation prints as a teletype receipt below it: each field's check accretes as a new line, and correcting a field strikes through the ol…

npx shadcn@latest add https://design.helpmarq.com/r/contact-form-teletype.json
Container Box Drawing ui

A container with real box-drawing chrome: an inline title breaking the top rule, upgrading to a double-line border character by character on hover or focus.

npx shadcn@latest add https://design.helpmarq.com/r/container-box-drawing.json
Context Compaction River ui

Context compaction drawn as a meandering river: live turns are points on one curving channel, and a compacted run of turns necks off into a reopenable, re-inje…

npx shadcn@latest add https://design.helpmarq.com/r/context-compaction-river.json
Context Menu Unfold ui

A context menu that unfolds like a pocket knife: items swing out from a hinged spine as slim blades, staggered from folded to open, with a hairline edge highli…

npx shadcn@latest add https://design.helpmarq.com/r/context-menu-unfold.json
Context Prompt Shims ui

Prompt composition rendered as machinist shims fitted into a fixed-height gap: each section's row height maps to its real token count, order is drag/keyboard r…

npx shadcn@latest add https://design.helpmarq.com/r/context-prompt-shims.json
Contra Strike ui

Order line-item ledger where a partial refund drags a struck span across the amount bar and, on commit, appends a negative contra row beneath the original, whi…

npx shadcn@latest add https://design.helpmarq.com/r/contra-strike.json
Copy Button Travel ui

Copy-to-clipboard button whose confirmation shows what got copied: a duplicate of the source text visibly peels off the line and travels the real distance to t…

npx shadcn@latest add https://design.helpmarq.com/r/copy-button-travel.json
Copy Field Crimp ui

A copyable value field whose confirmation is typographic: letter-spacing crimps shut in a wave from the clicked character, then a check scales into the icon sl…

npx shadcn@latest add https://design.helpmarq.com/r/copy-field-crimp.json
Countdown Vapor Digits ui

Live countdown where each digit change is a phase transition: the outgoing digit sublimates into grains on curl-noise wind while the incoming digit condenses f…

npx shadcn@latest add https://design.helpmarq.com/r/countdown-vapor-digits.json
Counter Carry Ripple ui

Display-only numeric readout where change animates the way arithmetic works: only the digits that differ move, and a carry (199 -> 200) visibly ripples right-t…

npx shadcn@latest add https://design.helpmarq.com/r/counter-carry-ripple.json
Crack Arrest Hole ui

A press-and-hold STOP/ABORT confirm modeled on the crack-arrest (stop) hole: holding grows a fatigue crack from the edge toward a drilled hole, and reaching th…

npx shadcn@latest add https://design.helpmarq.com/r/crack-arrest-hole.json
Crack Polygon Order ui

A decorative panel fill that tiles itself the way drying mud actually cracks: widely-spaced primary cracks grow first, then two more generations nucleate insid…

npx shadcn@latest add https://design.helpmarq.com/r/crack-polygon-order.json
Craze Rule ui

A section divider that arrives as a propagating, branching fracture instead of a static <hr>: a seeded random-walk SVG path with 3-5 near-perpendicular T-junct…

npx shadcn@latest add https://design.helpmarq.com/r/craze-rule.json
Creep Span ui

An SLO error-budget meter drawn as a taut wire spanning the card, which sags by irreversible plastic creep: sustained burn above 1x permanently sets the wire, …

npx shadcn@latest add https://design.helpmarq.com/r/creep-span.json
Crimp Barrel Set ui

A 'connect/link/attach' confirm control modeled on open-barrel wire crimping: two dies flatten a barrel into a witness-marked, strand-flared profile on a repea…

npx shadcn@latest add https://design.helpmarq.com/r/crimp-barrel-set.json
Crossfoot Gap ui

An editable invoice grid that validates itself the way a bookkeeper crossfoots a ledger: row totals right of a vertical rule, column totals under a horizontal …

npx shadcn@latest add https://design.helpmarq.com/r/crossfoot-gap.json
Cruet Settle ui

A checkout or invoice total settles like shaken vinaigrette: one agitated column stratifies by density into net, tax, fees and discount, each layer's height ex…

npx shadcn@latest add https://design.helpmarq.com/r/cruet-settle.json
Curd Cut Whey ui

A card-scale batch-processing status indicator modelled on cheesemaking curd cutting and syneresis: a solid mass is knife-cut into a grid of cubes that each sh…

npx shadcn@latest add https://design.helpmarq.com/r/curd-cut-whey.json
Cylinder Hill-and-Dale ui

A full-width section divider rendered as a side elevation of an Edison-style wax cylinder phonograph: a rotating cylinder carrying a static helical hill-and-da…

npx shadcn@latest add https://design.helpmarq.com/r/cylinder-hillndale.json
Damask Float ui

A feature grid woven from one reversible damask cloth — figure and ground are the same thread in the same colour, differing only in float direction, so hoverin…

npx shadcn@latest add https://design.helpmarq.com/r/damask-float.json
Date Picker Moon ui

Masked date input whose popover calendar doubles as a moon-phase almanac: every day cell carries a canvas moon with a real synodic terminator, the field icon t…

npx shadcn@latest add https://design.helpmarq.com/r/date-picker-moon.json
Date Range Tape ui

Date-range calendar where the selection is a tape measure: clicking anchors the hook, moving extends a mono-ticked strip across the grid with a live night coun…

npx shadcn@latest add https://design.helpmarq.com/r/date-range-tape.json
Decatron Step Ring ui

Circular step/cyclic-position indicator modelled on a decatron cold-cathode counting tube: a glow spot steps around ten radial stations, stretching onto an int…

npx shadcn@latest add https://design.helpmarq.com/r/decatron-step-ring.json
Delta Frame Macroblock ui

A quiet full-width band that visualizes a video codec's own P-frame change-detection decision: a grid of macroblocks sits mostly static, and every 220ms tick a…

npx shadcn@latest add https://design.helpmarq.com/r/delta-frame-macroblock.json
Device Mockup ASCII Screen ui

A phone-frame device mockup whose screen is a live ASCII/scanline raster; dragging the handle skews the frame while the raster independently resamples its glyp…

npx shadcn@latest add https://design.helpmarq.com/r/device-mockup-ascii-screen.json
Dew Coalesce ui

An empty state as condensation on cold glass: a PRNG-seeded droplet field nucleates, grows, jitters and merges, and a droplet crossing the runoff threshold str…

npx shadcn@latest add https://design.helpmarq.com/r/dew-coalesce.json
Diagram ASCII Flow ui

A box-drawing flowchart whose connectors are a real orthogonal router: dragging a node re-routes every edge touching it live, cell by cell, recomputing junctio…

npx shadcn@latest add https://design.helpmarq.com/r/diagram-ascii-flow.json
Dial Moire ui

Weighted rotary knob tuned like a radio: counter-rotating line gratings shimmer with moire interference, and a hidden word only resolves at the detent.

npx shadcn@latest add https://design.helpmarq.com/r/dial-moire.json
Dialog Emerge ui

A native <dialog> modal that grows out of the control that opened it and returns into it on close.

npx shadcn@latest add https://design.helpmarq.com/r/dialog-emerge.json
Diff Unified Viewer ui

A line-addressable unified-diff viewer, split or unified, that swaps red/green blocks for a thin left-rail marker and a muted gutter glyph (colorblind-safe by …

npx shadcn@latest add https://design.helpmarq.com/r/diff-unified-viewer.json
Divider Mosaic Split ui

A full-width section divider rendered in real NAPLPS 'separated mosaic' mode: the same 2-wide x 3-tall sextant sub-cell grid this registry's divider-teletext-m…

npx shadcn@latest add https://design.helpmarq.com/r/divider-mosaic-split.json
Divider PETSCII VU ui

A full-width section divider printed as a PETSCII / C64 reverse-video VU meter band: every cell has exactly two states, paper or ink, never a density ramp, dri…

npx shadcn@latest add https://design.helpmarq.com/r/divider-petscii-vu.json
Divider Telephone Cord Delam ui

A full-width section divider modeled on thin-film delamination buckling, a compressive-stress film debonding from its substrate and popping upward into the rea…

npx shadcn@latest add https://design.helpmarq.com/r/divider-telephone-cord-delam.json
Divider Teletext Mosaic ui

A full-width section divider rendered as a real teletext / videotex ALPHAMOSAIC graphics band: each character cell is a 6-bit code across a 2-wide x 3-tall sub…

npx shadcn@latest add https://design.helpmarq.com/r/divider-teletext-mosaic.json
Dock Cursor Magnify ui

Cursor-proximity magnification row with Gaussian falloff: macOS-dock physics for any children.

npx shadcn@latest add https://design.helpmarq.com/r/dock-cursor-magnify.json
Dock Shelf Lean ui

A dock/toolbar where items lean like books on a shelf: hover or focus straightens one and cants its neighbors away, reorder is a pick-up/move/drop cycle, nothi…

npx shadcn@latest add https://design.helpmarq.com/r/dock-shelf-lean.json
Drawer Counterweight ui

Side drawer hung on a counterweight like a sash window: a thin track on the drawer's leading edge carries a weight pill that travels opposite the drag at -0.6x…

npx shadcn@latest add https://design.helpmarq.com/r/drawer-counterweight.json
Drill Down Spines ui

Drill-down navigation where every pushed level compresses into a slim clickable book spine instead of vanishing behind a back button, so the whole navigation h…

npx shadcn@latest add https://design.helpmarq.com/r/drill-down-spines.json
Dropdown Drape ui

Dropdown whose panel is a live verlet cloth pinned to the trigger: it falls and drapes like an awning, labels ride the weave, the cursor billows the fabric, an…

npx shadcn@latest add https://design.helpmarq.com/r/dropdown-drape.json
Due Slip ui

A ruled read-receipt card styled as a library date-due slip: the first time each collaborator opens a shared doc, their initials and an HH:MM timestamp stamp i…

npx shadcn@latest add https://design.helpmarq.com/r/due-slip.json
Edge Burnish Glaze ui

A full-width section divider modeled on leather-edge burnishing: a slicker sweeps back and forth along the edge on a constant-speed triangle wave, a per-cell g…

npx shadcn@latest add https://design.helpmarq.com/r/edge-burnish-glaze.json
E-ink Waveform Ghost ui

An empty-state panel rendered as an idle e-ink display: a coarse grid of cells continuously replays real electrophoretic drive waveforms on a scattered, ever-c…

npx shadcn@latest add https://design.helpmarq.com/r/eink-waveform-ghost.json
Empty State Braille Orbit ui

A small ambient icon for empty states: an unbroken stroke traced through braille's 2x4 sub-cell dot addressing along a closed 3:2 Lissajous orbit, sampled by a…

npx shadcn@latest add https://design.helpmarq.com/r/empty-state-braille-orbit.json
Empty State Dashed ui

Empty state whose dashed SVG boundary drifts like a plot marked out and not yet planted, and contracts toward the CTA on hover.

npx shadcn@latest add https://design.helpmarq.com/r/empty-state-dashed.json
Empty State Mezzotint ui

A small ambient icon for empty states built on real mezzotint printmaking: the plate is rocked to a dense burr that would print solid black, then worked SUBTRA…

npx shadcn@latest add https://design.helpmarq.com/r/empty-state-mezzotint.json
Empty State Pegboard ui

Empty state modeled on a workshop pegboard: dashed silhouettes preview the exact card/avatar/title geometry of future items, and creating one hangs it onto its…

npx shadcn@latest add https://design.helpmarq.com/r/empty-state-pegboard.json
Empty State Sonar ui

An empty state that pings like sonar every 6-8s to actively demonstrate emptiness, then freezes and grows skeleton rows outward the instant real results interr…

npx shadcn@latest add https://design.helpmarq.com/r/empty-state-sonar.json
Empty State Survey ui

First-run empty state as a surveyor's staked plot: corner stakes drop in, then dashed strings tauten around the future layout and tie off at the CTA.

npx shadcn@latest add https://design.helpmarq.com/r/empty-state-survey.json
Envelope Window ui

An OAuth-style consent screen built as a physical envelope: the user's real account data sits on a sheet underneath, and each granted scope die-cuts a window t…

npx shadcn@latest add https://design.helpmarq.com/r/envelope-window.json
Equation Kidney Cam ui

A section divider whose midpoint tick rides a lookup table built from the real equation-of-time curve (an equation-marchante watch's kidney cam compressed to a…

npx shadcn@latest add https://design.helpmarq.com/r/equation-kidney-cam.json
Eval Delta Table ui

Two eval runs compared case by case: a table of baseline, candidate and signed delta, sorted by delta, with a diverging bar per case drawn off a labelled zero …

npx shadcn@latest add https://design.helpmarq.com/r/eval-regression-shear.json
Expansion Gap Breather ui

A full-height divider between two independently-sized layout regions, sourced from continuous-welded-rail breather switches: the seam's tapered-blade teeth int…

npx shadcn@latest add https://design.helpmarq.com/r/expansion-gap-breather.json
Extrusion Die Cut ui

A card-scale processing/loader widget modelled on pasta die-face cutting: a textured rope continuously extrudes from a die aperture and a guillotine blade swee…

npx shadcn@latest add https://design.helpmarq.com/r/extrusion-die-cut.json
Facer Stamp Flip ui

An ambient batch-processing loader (no total count, only continuous throughput) built as a letter-facing and cancelling machine's orientation stage: mixed-orie…

npx shadcn@latest add https://design.helpmarq.com/r/facer-stamp-flip.json
FAQ Accordion ui

A plain FAQ accordion: real button semantics, one answer open at a time, a smooth height transition and a thin accent rail marking the open question.

npx shadcn@latest add https://design.helpmarq.com/r/faq-answer-depth-gutter.json
Fax Line Slip ui

A document-preview / attachment-thumbnail loading state reproducing a Group 3 fax handshake and page transmission: two waveform-rendered handshake tones, then …

npx shadcn@latest add https://design.helpmarq.com/r/fax-line-slip.json
Feature Grid ASCII Rule ui

A feature grid where hovering or focusing a cell draws real box-drawing connectors to its related features, routed orthogonally through the grid's gutters and …

npx shadcn@latest add https://design.helpmarq.com/r/feature-grid-ascii-rule.json
Feed Escapement ui

Live feed where a small SVG anchor fork gates arrivals one at a time: a burst becomes a metered tick-tick-tick instead of a dogpile, held open only by each ite…

npx shadcn@latest add https://design.helpmarq.com/r/feed-escapement.json
Fiche Step Repeat ui

A thumbnail grid that populates like a microfiche step-and-repeat camera: one cell exposed per raster step with a brief flash, then an index strip types in onc…

npx shadcn@latest add https://design.helpmarq.com/r/fiche-step-repeat.json
File Upload Seal ui

File upload where progress is the container: a loose dashed outline 24px outside the card pulls taut as the file uploads, clicks shut with a pucker at 100%, an…

npx shadcn@latest add https://design.helpmarq.com/r/file-upload-seal.json
File Upload Thermal ui

File dropzone as a thermal field: dragging spawns rising accent convection wisps, accepted drops buoy off the drop point and squash-land into a docked queue ra…

npx shadcn@latest add https://design.helpmarq.com/r/file-upload-thermal.json
Filter Facet Mesh ui

Faceted filter chips as a sieve: active facets read as taut, bright threads in a hairline mesh fanned from a hub above the chip row, hovering a chip visibly ti…

npx shadcn@latest add https://design.helpmarq.com/r/filter-facet-mesh.json
Flamegraph ASCII Frames ui

A CPU-profile flame graph laid out in monospace cells (one row per stack depth, frame width proportional to sample count, self-vs-total time encoded as ink wei…

npx shadcn@latest add https://design.helpmarq.com/r/flamegraph-ascii-frames.json
Flash Entrain ui

A few hundred DOM fireflies pulse-couple over a static nearest-neighbour graph (Mirollo-Strogatz), so the field self-organises from scattered twinkle through t…

npx shadcn@latest add https://design.helpmarq.com/r/flash-entrain.json
Float Ribbon Draw ui

A multi-stage pipeline/job-status bar modeled on the float-glass process: a fixed molten-to-set thermal gradient marks the pipeline's stages while a faint ripp…

npx shadcn@latest add https://design.helpmarq.com/r/float-ribbon-draw.json
Floret Pack ui

A full-bleed phyllotactic hero background where primordia are birthed one at a time at a central meristem, golden-angle sequenced and locally relaxed as they a…

npx shadcn@latest add https://design.helpmarq.com/r/floret-pack.json
Flyball Throttle ui

A spend-cap widget drawn as a Watt centrifugal governor: two hinged arms with ball weights fly wider as burn rate outpaces the sustainable rate, the sleeve col…

npx shadcn@latest add https://design.helpmarq.com/r/flyball-throttle.json
Flying Splice ui

A logo ribbon whose real subject is the roll stand feeding it: one paper roll unwinds at constant web speed, so its radius falls to 0.426 of full while its RPM…

npx shadcn@latest add https://design.helpmarq.com/r/flying-splice.json
Footer ASCII Rule ui

A sitemap footer whose back-to-top control is a real instrument: an aria-hidden vertical rail beside it continuously reads actual scroll position, and the butt…

npx shadcn@latest add https://design.helpmarq.com/r/footer-ascii-rule.json
Frank Register ui

Paying from a prepaid wallet rendered as a postal franking meter: committing stamps an indicium onto the invoice while a descending BALANCE odometer rolls down…

npx shadcn@latest add https://design.helpmarq.com/r/frank-register.json
Frazil Dam ui

A card-scale processing/progress indicator modelled on frazil ice: fine crystals nucleate in turbulent water, drift across a channel via a 2-octave curl-noise …

npx shadcn@latest add https://design.helpmarq.com/r/frazil-dam.json
Fugitive Ink ui

A one-time secret panel that prints a new API key or recovery code fully legible, then lets it fade like security ink, armed by the user's own copy or by click…

npx shadcn@latest add https://design.helpmarq.com/r/fugitive-ink.json
Fusee Cone ui

A burn-rate alert policy editor built as a clock fusee: error budget is the mainspring barrel, a chain rides down a tapering cone as budget depletes, and alert…

npx shadcn@latest add https://design.helpmarq.com/r/fusee-cone.json
Gallery ASCII Gradient Orientation ui

A gallery grid where each tile runs its own procedural 3-octave value-noise field and a 3x3 Sobel operator selects glyphs by the field's own gradient ANGLE, bu…

npx shadcn@latest add https://design.helpmarq.com/r/gallery-ascii-gradient-orientation.json
Gallery Coverflow Caustic ui

3D coverflow gallery whose frosted-glass cards run a live caustic-light simulation: drifting light pools refract across each pane, and drag velocity fringes th…

npx shadcn@latest add https://design.helpmarq.com/r/gallery-coverflow-caustic.json
Galley Bracket ui

Remote collaborators' live selections drawn as proofreader's marks: thin corner brackets at each end of a range and a hairline underline, nesting outward by ar…

npx shadcn@latest add https://design.helpmarq.com/r/galley-bracket.json
Gantt ASCII Critical Path ui

An ASCII Gantt chart where a real CPM forward/backward pass decides which bars are critical: zero-float tasks draw heavy `━` in accent, the rest light `─`, and…

npx shadcn@latest add https://design.helpmarq.com/r/gantt-ascii-critical-path.json
Gather Marver ui

A file-upload / processing indicator sourced from the real hot-glass gather-and-marver sequence: an off-centre blob rolls back and forth on a flat baseline, lo…

npx shadcn@latest add https://design.helpmarq.com/r/gather-marver.json
Gauge Capacity Waterline ui

Capacity-vs-legal-limit meter drawn as a ship's side-profile hull with Plimsoll load-line marks: the waterline rises with load, the hull itself settles a few p…

npx shadcn@latest add https://design.helpmarq.com/r/gauge-capacity-waterline.json
Git Graph ASCII Lanes ui

A commit-history DAG rendered as `git log --graph` does, where a real lane-allocation pass assigns each branch a column and emits `│ ├─┐ ┘ ┼` connector rows, a…

npx shadcn@latest add https://design.helpmarq.com/r/git-graph-ascii-lanes.json
Glaze Crawl Heal ui

A live status badge drawn as a glaze surface mid-firing: gas bubbles burst through the molten glaze and the melt either flows back over the crater (heals) or, …

npx shadcn@latest add https://design.helpmarq.com/r/glaze-crawl-heal.json
Glory Hole Cycle ui

A 'still actively processing' status chip whose small canvas glow rises fast and cools slow on a fixed 4.0s beat, modeled on a glassblower's furnace reheat cyc…

npx shadcn@latest add https://design.helpmarq.com/r/glory-hole-cycle.json
Gluten Windowpane ui

A background-task progress indicator built on the baker's windowpane test: a dough membrane is stretched, held, and released on a repeating 4-cycle knead loop,…

npx shadcn@latest add https://design.helpmarq.com/r/gluten-windowpane.json
Gravure Cell Wipe ui

A divider / background texture strip printed as a rotogravure cylinder: a static, seeded matrix of engraved cell depths sits under a doctor-blade band that swe…

npx shadcn@latest add https://design.helpmarq.com/r/gravure-cell-wipe.json
Grazing Light ui

A feature-grid card whose icon and heading are blind-embossed into the surface: invisible relief that a low-angle light reveals as it rakes slowly across at id…

npx shadcn@latest add https://design.helpmarq.com/r/grazing-light.json
Grid Bento ASCII ui

A 2x2 bento layout primitive built on its own content/seam track grid (a real vertical rule, horizontal rule and ┼ junction between the four tiles), where acti…

npx shadcn@latest add https://design.helpmarq.com/r/grid-bento-ascii.json
Grid Bento Dense ui

A composable bento grid where activating a tile genuinely promotes it: the tile takes a 2x2 slot and every other tile re-packs around it via CSS grid-auto-flow…

npx shadcn@latest add https://design.helpmarq.com/r/grid-bento-dense.json
Grid Magnetic Lattice ui

Card grid on a magnetized hairline lattice: the cursor bends the grid lines and the DOM cards sample the same displacement field, riding the bent sheet.

npx shadcn@latest add https://design.helpmarq.com/r/grid-magnetic-lattice.json
Grinding Chatter Lobes ui

A card-scale loader substitute driven by regenerative chatter in cylindrical grinding: a rotating disc's rim grows a lobed profile as it re-cuts its own previo…

npx shadcn@latest add https://design.helpmarq.com/r/grinding-chatter-lobes.json
Groove Pitch ui

An ambient loader modeling a vinyl mastering lathe's variable groove pitch: a cutting-point marker spirals outward from a lead-in, its own turn spacing visibly…

npx shadcn@latest add https://design.helpmarq.com/r/groove-pitch.json
Growth Ring ui

Version history as a dendrochronological cross-section: one ring per save, ring width proportional to change size, a dark line wherever authorship changed hand…

npx shadcn@latest add https://design.helpmarq.com/r/growth-ring.json
Guardrail Interlock Keys ui

Output guardrails built as a trapped-key interlock: every policy gate holds one key, the release bolt only retracts when all of them are seated, and a tripped …

npx shadcn@latest add https://design.helpmarq.com/r/guardrail-interlock-keys.json
Hachure Fall ui

A route elevation profile drawn as 18th-century military engravers drew slope: strokes perpendicular to the profile line, hanging down the fall direction, whos…

npx shadcn@latest add https://design.helpmarq.com/r/hachure-fall.json
Header Scroll Pill ui

A page header that morphs between a full-width quiet nav bar at the top and a floating centered pill once scrolled: spring-like width/radius/padding morph, sec…

npx shadcn@latest add https://design.helpmarq.com/r/header-scroll-pill.json
Heatmap Year Stipple ui

A GitHub-style year activity calendar where intensity is stipple density, not color: every day cell holds a handful of deterministically jittered ink dots, den…

npx shadcn@latest add https://design.helpmarq.com/r/heatmap-year-stipple.json
Helicorder Line Wrap ui

An ambient status widget shaped like a seismograph helicorder drum: a pen traces one line at a time and steps down to a fresh line the instant it runs off the …

npx shadcn@latest add https://design.helpmarq.com/r/helicorder-line-wrap.json
Hero ASCII Wordmark ui

Hero wordmark rendered as ASCII block-letters, lit by the pointer like a torch over a density ramp.

npx shadcn@latest add https://design.helpmarq.com/r/hero-ascii-wordmark.json
Hero Dipole Field ui

Full-bleed hero where the headline exists twice: crisp DOM type above, and beneath it a canvas field of iron-filing strokes solved from a two-pole dipole field…

npx shadcn@latest add https://design.helpmarq.com/r/hero-dipole-field.json
Hero Long Exposure ui

Hero card whose canvas behaves like a long-exposure photograph: cursor movement burns light streaks that never clear per frame, only decay on a 4s half-life, a…

npx shadcn@latest add https://design.helpmarq.com/r/hero-long-exposure.json
Hero Particles WEBGL ui

Full-viewport hero with a cursor-reactive WebGL particle field and staggered text reveal.

npx shadcn@latest add https://design.helpmarq.com/r/hero-particles-webgl.json
Histogram Live Grain ui

Live distribution instrument where the histogram IS the samples: each arrival falls as a grain into its bin and stacks, the heap visibly re-settles as the roll…

npx shadcn@latest add https://design.helpmarq.com/r/histogram-live-grain.json
Honeycomb Draw ui

An ambient background where wax cells start as loosely packed circles and locally relax, wall by wall, into a tight hexagonal comb: each neighbour pair's share…

npx shadcn@latest add https://design.helpmarq.com/r/honeycomb-draw.json
Honing Crosshatch ui

A card whose backing texture is a genuine cylinder-bore plateau-honing process: two families of fine scratches deposited at a fixed controlled 45 degree crossh…

npx shadcn@latest add https://design.helpmarq.com/r/honing-crosshatch.json
Hover Card Dwell ui

A hover-card trigger that has to be wound before it opens: a hairline arc coils clockwise around a 5px dot while the pointer dwells, and drifting away mid-wind…

npx shadcn@latest add https://design.helpmarq.com/r/hover-card-dwell.json
Idler Drop ui

Delegated admin drawn as a gear train: your authority is the drive gear, each delegate is a driven gear whose tooth count sets a discrete role ratio, and revok…

npx shadcn@latest add https://design.helpmarq.com/r/idler-drop.json
Image Crop Mat ui

Image cropping as a passe-partout: four mat boards slide over a photo to define the crop window, snap to ratio presets with a settle, and show a rule-of-thirds…

npx shadcn@latest add https://design.helpmarq.com/r/image-crop-mat.json
Index Contour ui

A travel-time reach editor: one slider handle sets minutes, and the reach renders as topographic-style contour bands re-thresholded from a real per-node cost f…

npx shadcn@latest add https://design.helpmarq.com/r/index-contour.json
Indicator Rack ui

A plan selector built on the indicator-tablet rack of a pre-electronic cash register: four columns of ten printed tablets each, all ten always mounted, where c…

npx shadcn@latest add https://design.helpmarq.com/r/indicator-rack.json
Input Focus Membrane ui

Text input whose focus ring is a living membrane: a noise-displaced canvas loop that breathes on idle, dilates on focus, sends a peristaltic pulse from the car…

npx shadcn@latest add https://design.helpmarq.com/r/input-focus-membrane.json
Jacquard Card Chain ui

An ambient status strip modelled on a Jacquard loom's control mechanism: a chain of punched cards feeds past a fixed needle bank, one card read every beat, the…

npx shadcn@latest add https://design.helpmarq.com/r/jacquard-card-chain.json
Jam Kickout Loop ui

An ambient background-job status line built as bulk-mail sortation conveyor jam handling: most tiles ride the main line straight through, but a fixed 1-in-6 ti…

npx shadcn@latest add https://design.helpmarq.com/r/jam-kickout-loop.json
Kelvin Wake ui

A real site nav whose active-item indicator is a point source drifting along the link row, trailing a genuine Kelvin ship wake: a V-shaped envelope of transver…

npx shadcn@latest add https://design.helpmarq.com/r/kelvin-wake.json
Keymap ASCII Heat ui

An ASCII keyboard layout that accumulates real ink density per key as you type into it: each keystroke inks the key, heat decays on an exponential half-life, a…

npx shadcn@latest add https://design.helpmarq.com/r/keymap-ascii-heat.json
Knife Edge Rack Focus ui

A card-scale loader substitute built on the Foucault knife-edge test: a knife edge racks through a mirror's focus, sweeping the aperture's shadow pattern from …

npx shadcn@latest add https://design.helpmarq.com/r/knife-edge-rack-focus.json
Knit Ladder Run ui

An ambient status/health card background: a field of knit stitches builds downward course by course, and at random intervals a dropped stitch opens a ladder th…

npx shadcn@latest add https://design.helpmarq.com/r/knit-ladder-run.json
Knot Capsize Cycle ui

An ambient capacity/status gauge that expresses load as knot topology instead of a fill bar or needle: a granny-knot's two standing ends and two crossing loops…

npx shadcn@latest add https://design.helpmarq.com/r/knot-capsize-cycle.json
LCD Response Smear ui

An ambient panel-diagnostics status card whose canvas strip simulates LCD pixel response time compensation: a sweeping fill boundary crosses a row of simulated…

npx shadcn@latest add https://design.helpmarq.com/r/lcd-response-smear.json
Leaven Crest Fall ui

A sourdough starter jar status indicator: the surface dome rises with a Poisson-nucleated bubble texture to a peak, then collapses as the bubble population thi…

npx shadcn@latest add https://design.helpmarq.com/r/leaven-crest-fall.json
Lens ASCII Magnify ui

A circular lens that resolves the text under it into a denser dot-matrix of ASCII glyphs: every character it passes over is redrawn as its own 5x7 grid of ramp…

npx shadcn@latest add https://design.helpmarq.com/r/lens-ascii-magnify.json
Lenticule Swing ui

A hero H1 lockup printed twice behind vertical lenticular slats (the problem statement and the product promise coexisting at once) that shimmers between both a…

npx shadcn@latest add https://design.helpmarq.com/r/lenticule-swing.json
Lining Wear ui

A dunning card for past-due subscriptions where the clutch grip on 'active' is a friction lining that wears down: every failed charge slips the pad and permane…

npx shadcn@latest add https://design.helpmarq.com/r/lining-wear.json
Listbox Sticky Groups ui

A grouped listbox for long lists (timezones, countries, currencies) where every passed group header sticks in place, stacking into overlapping 20px slivers you…

npx shadcn@latest add https://design.helpmarq.com/r/listbox-sticky-groups.json
Loader ASCII Diffuse Fill ui

Indeterminate ASCII loader whose texture comes from real Floyd-Steinberg serpentine error diffusion, propagated cell-to-cell every frame, rather than a fixed o…

npx shadcn@latest add https://design.helpmarq.com/r/loader-ascii-diffuse-fill.json
Loader Braille ui

Determinate/indeterminate loader built from braille dot patterns, where each cell's eight dots are individually addressable for far finer granularity than a bl…

npx shadcn@latest add https://design.helpmarq.com/r/loader-braille.json
Loader Die Tumble ui

An ambient loading glyph shaped as a die tumbling face over face on a fixed axle: each 90deg landing overshoots by 8deg and corrects on a spring, with a floor …

npx shadcn@latest add https://design.helpmarq.com/r/loader-die-tumble.json
Loader Ink Blob ui

A small canvas-2D assistant-state indicator: a soft ink blob traced through 72 points around a circle, each perturbed by one of six distinct motion signatures …

npx shadcn@latest add https://design.helpmarq.com/r/loader-ink-blob.json
Loader Iris ui

An ambient loading glyph shaped as a six-blade camera-iris diaphragm breathing open and shut inside a fixed housing ring: one wedge shape repeated by rotation,…

npx shadcn@latest add https://design.helpmarq.com/r/loader-iris.json
Loader Pendulum Sync ui

An indeterminate loader for long background work: a row of pendulums with slightly different periods drift from unison into apparent chaos and back into perfec…

npx shadcn@latest add https://design.helpmarq.com/r/loader-pendulum-sync.json
Loader Spirograph Trace ui

A determinate loader that traces a real hypotrochoid: the full closed rosette is always visible as a ghost, and progress is the fraction of that curve's arc le…

npx shadcn@latest add https://design.helpmarq.com/r/loader-spirograph-trace.json
Loader Spring Bars ui

An ambient loading glyph shaped as a row of leaf springs on a rail: one displacement keyframe, staggered per bar by negative animation-delay, reads as a single…

npx shadcn@latest add https://design.helpmarq.com/r/loader-spring-bars.json
Loader Thread Spool ui

A loader that winds thread onto a spool while duration is unknown, then converts the same coil in place into a proportional gauge the instant total size arrive…

npx shadcn@latest add https://design.helpmarq.com/r/loader-thread-spool.json
Log Viewer ASCII Tail ui

A live `tail -f` log pane with a real ring buffer, a per-line severity glyph column, and follow-mode that detaches the instant you scroll up and reports how ma…

npx shadcn@latest add https://design.helpmarq.com/r/log-viewer-ascii-tail.json
Logo Cloud Settle ui

A trust-wall grid of abstract, generated marks that physically settles into place: each tile drops in from lifted/shrunk/tilted with a per-item stagger and a s…

npx shadcn@latest add https://design.helpmarq.com/r/logo-cloud-settle.json
Lug Cage Tally ui

An ambient loading glyph shaped as five pin wheels spinning at mutually-prime rates past a fixed read mark, each engaged pin brightening in a brief flash and n…

npx shadcn@latest add https://design.helpmarq.com/r/lug-cage-tally.json
Manifold Bleed ui

A connected app's standing grants drawn as a valve manifold: each scope is a gate valve on a supply line from your account to the app, and revoking it drains t…

npx shadcn@latest add https://design.helpmarq.com/r/manifold-bleed.json
Map Choropleth ASCII ui

ASCII-density choropleth over a fully synthetic hand-seeded tessellation. Hovering or keying through a region isolates it and the legend rescales to a band aro…

npx shadcn@latest add https://design.helpmarq.com/r/map-choropleth-ascii.json
Marquee Ticker Glyph ui

A grabbable ticker tape: drag to scrub through its content, release to fling it with momentum, and legibility itself is a function of speed. Fast motion blurs …

npx shadcn@latest add https://design.helpmarq.com/r/marquee-ticker-glyph.json
Masonry ASCII Settle ui

A masonry gallery whose tiles render as live ASCII halftone and resolve from a coarse print to a fine one as they drop into their packed column slot, re-packin…

npx shadcn@latest add https://design.helpmarq.com/r/masonry-ascii-settle.json
Melt Pond Drain ui

A card-scale ambient loader/empty-state panel modelling Arctic melt-pond drainage: a shallow top-view basin whose pool fills over ~9-11s, then drains rapidly t…

npx shadcn@latest add https://design.helpmarq.com/r/melt-pond-drain.json
Memory Ledger Decay ui

Session memory that visibly patinates: each remembered fact steps its ink from --foreground toward --ns-muted the longer it goes unused, snaps back and underli…

npx shadcn@latest add https://design.helpmarq.com/r/memory-ledger-decay.json
Menu Nested Trays ui

Nested menus as telescoping card-catalog trays: opening a submenu shunts the parent back and dims it instead of spawning a flyout, leaving a 12px clickable edg…

npx shadcn@latest add https://design.helpmarq.com/r/menu-nested-trays.json
Mesh Lash ui

A currency amount field where two meshed gears are the FX quote itself: tooth ratio draws the exchange rate, and mechanical backlash (the dead angle a reversed…

npx shadcn@latest add https://design.helpmarq.com/r/mesh-lash.json
Meter Context Window ui

A context-window budget meter: one hairline stacked bar segmenting the window into system prompt / tools / history / current turn, told apart by fill pattern i…

npx shadcn@latest add https://design.helpmarq.com/r/meter-context-window.json
Meter Latency Capillary ui

Time-to-first-token rendered as calibrated capillary rise: a narrow tube climbs to a scribed p50 line, holds and trembles if it's running slow, and only surfac…

npx shadcn@latest add https://design.helpmarq.com/r/meter-latency-capillary.json
Meter Matrix Scan ui

A level meter rendered as a genuinely row-multiplexed LED dot-matrix panel: five rows addressed round-robin off a real 240Hz-per-row clock, and each LED's brig…

npx shadcn@latest add https://design.helpmarq.com/r/meter-matrix-scan.json
Meter Quota Meniscus ui

A quota (storage, API budget, seats) rendered as liquid in a thin vessel where surface curvature, not level, carries the reading: concave under the soft limit,…

npx shadcn@latest add https://design.helpmarq.com/r/meter-quota-meniscus.json
Meter Quota Rule ui

A quota meter with no bar, no fill, no pill: the printed reading ('38.2 GB of 100 GB') sits above a 4px hairline whose used portion is solid and remainder is d…

npx shadcn@latest add https://design.helpmarq.com/r/meter-quota-rule.json
Meter Threshold Trip ui

A data-driven threshold indicator built like a thermostat's bimetallic strip: it bows progressively as a metric climbs, snaps across a visible contact gap at t…

npx shadcn@latest add https://design.helpmarq.com/r/meter-threshold-trip.json
Millstone Furrow Flow ui

An ambient processing-section background modelled on a dressed millstone pair: a static bedstone furrow layer under a slowly rotating runner layer, their cross…

npx shadcn@latest add https://design.helpmarq.com/r/millstone-furrow-flow.json
Minimap Pantograph ui

A minimap whose viewport rectangle is physically wired to the real viewport by a live SVG pantograph (two elbow arms solved by two-bar IK every frame), so drag…

npx shadcn@latest add https://design.helpmarq.com/r/minimap-pantograph.json
Mudflow Levee Build ui

Ambient activity track whose channel is self-built by the flow's own coarse fraction shearing out to the margins: surges deposit growth at the edges as they pa…

npx shadcn@latest add https://design.helpmarq.com/r/mudflow-levee-build.json
Mull Hinge ui

A margin comment thread glued to its anchored phrase by a translucent tissue-strip hinge whose shear, opacity and tearing are a live readout of anchor health u…

npx shadcn@latest add https://design.helpmarq.com/r/mull-hinge.json
Nav Blue Noise Scrim ui

Dimming backdrop for a command palette or search overlay, dithered with a temporal blue-noise mask that reshuffles every frame instead of a flat tint.

npx shadcn@latest add https://design.helpmarq.com/r/nav-blue-noise-scrim.json
Nav Condense Rail ui

A full-width site nav that condenses in place as the page scrolls (roomy padding, full-size wordmark and links at the top, tightening to a dense pinned rail) o…

npx shadcn@latest add https://design.helpmarq.com/r/nav-condense-rail.json
Nav Overstrike Typewriter ui

A real site nav with a typed ruled line beneath its links, shaded by striking two or three characters into the same cell (real typewriter overstrike compositin…

npx shadcn@latest add https://design.helpmarq.com/r/nav-overstrike-typewriter.json
Nav Site Condense ui

A full-width site nav with the furniture a real site needs: a scroll-condensed bar, a menu trigger present at every width, and a mobile sheet built on native <…

npx shadcn@latest add https://design.helpmarq.com/r/nav-site-condense.json
Neon Tube Striation ui

A horizontal section divider rendered as the positive column of a lit glow-discharge tube: a traveling ionization-wave striation pattern drifts along its lengt…

npx shadcn@latest add https://design.helpmarq.com/r/neon-tube-striation.json
Network Packet Trace ui

A small hairline node/edge network where data pulses branch across random routes, easing along each edge with a fading tail: idle traffic, dense active traffic…

npx shadcn@latest add https://design.helpmarq.com/r/network-packet-trace.json
Newsletter Cadence Rail ui

A newsletter capture whose headline element is a mono day-rail showing the publication's actual rhythm (six weeks of days, an issue mark every interval, a care…

npx shadcn@latest add https://design.helpmarq.com/r/newsletter-cadence-rail.json
Night Store ui

A cache diagnostics rack where every key-group is a storage-heater brick holding heat: a hit charges it toward full glyph-density stipple, idle time cools it o…

npx shadcn@latest add https://design.helpmarq.com/r/night-store.json
Nomogram Edge ui

A two-input estimator built as a real paper nomogram: three vertical ASCII scales in Geist Mono where a straightedge stretched between draggable left and right…

npx shadcn@latest add https://design.helpmarq.com/r/nomogram-edge.json
Notification Bell Swing ui

A notification bell whose clapper physically rings: arrivals add an impulse to a damped harmonic oscillator swinging the clapper and recoiling the bell body, b…

npx shadcn@latest add https://design.helpmarq.com/r/notification-bell-swing.json
Optimistic Stitch ui

Optimistic-write feedback for a single row rendered as a tailor's basting stitch along its left seam: dashed hand-stitch while pending, pulled tight into a sol…

npx shadcn@latest add https://design.helpmarq.com/r/optimistic-stitch.json
OTP Reel ui

6-box code entry where each box is a tiny slot-machine cipher reel: keystrokes spin a canvas glyph strip into a weighted detent on the typed digit with an acce…

npx shadcn@latest add https://design.helpmarq.com/r/otp-reel.json
Overflow Chip Mux ui

The list/tag overflow indicator, replaced with real NES PPU sprite multiplexing: instead of collapsing extra items into a static "+N" pill, only 8 chip slots (…

npx shadcn@latest add https://design.helpmarq.com/r/overflow-chip-mux.json
Pagination Dog Ear ui

A pagination control rendered as book folios: paper cards for each page number, a raised current page, and a CSS corner dog-ear that curls further as you hover…

npx shadcn@latest add https://design.helpmarq.com/r/pagination-dog-ear.json
Parison Inflate ui

A capacity/fill-progress meter rendered as a glassblower's parison inflating: a thick-walled bubble grows from a small dense core toward a larger, thin-walled …

npx shadcn@latest add https://design.helpmarq.com/r/parison-inflate.json
Passing Loop ui

A progressive-rollout controller built as a funicular: two cars share one cable over a summit pulley, so the new version's share and the old version's share ar…

npx shadcn@latest add https://design.helpmarq.com/r/passing-loop.json
Password Strength Tide ui

Password field with a canvas water tank behind the masked text: entropy raises the tide on a damped spring, keystrokes slosh a real 1D heightfield wave, deleti…

npx shadcn@latest add https://design.helpmarq.com/r/password-strength-tide.json
Patchbay ASCII Cable ui

A patchbay with real, persistent, user-authored topology: drag from one jack to another to create a patch, routed orthogonally onto the shared monospace glyph …

npx shadcn@latest add https://design.helpmarq.com/r/patchbay-ascii-cable.json
Pecked Ring ui

A geofence radius editor whose circle is drawn in pecked chart line-work where each dash is exactly 100 metres of ground circumference, so dragging the handle …

npx shadcn@latest add https://design.helpmarq.com/r/pecked-ring.json
Peen Coverage ui

A card whose backing texture is a genuine shot-peening coverage process: a stream of uniform-random impacts stamping soft circular dimples into a coverage bitm…

npx shadcn@latest add https://design.helpmarq.com/r/peen-coverage.json
Picker Pareto Frontier ui

Model picker rendered as a legible cost/latency/quality Pareto scatter: the frontier is a rising line of solid nodes (quality can't rise without moving right i…

npx shadcn@latest add https://design.helpmarq.com/r/picker-pareto-frontier.json
Pin Register ui

A map layer panel drawn as registered acetate separations: each layer a translucent sheet in a shallow isometric stack that fans on hover, and turning one off …

npx shadcn@latest add https://design.helpmarq.com/r/pin-register.json
Pole Shy ui

Live cursor name-labels that repel each other like matching magnetic poles, so the person actually typing makes bystander labels visibly yield and drift back.

npx shadcn@latest add https://design.helpmarq.com/r/pole-shy.json
Polyp Bud ui

A coral colony that accretes inward from one edge, budding new polyps only where five shadow rays against the colony's own skeleton clear a 0.55 exposure thres…

npx shadcn@latest add https://design.helpmarq.com/r/polyp-bud.json