---
name: "@ns-ui"
slug: "ns-ui"
description: "389 animated React components for Tailwind v4 and React 19, with a CLI and an MCP server."
category: "Animated components"
tags: ["ai", "animation", "audio", "backgrounds", "blocks", "buttons", "cards", "charts", "forms", "glassmorphism", "media", "mobile", "navigation", "onboarding", "overlays", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "nikolas-sapa"
website: "https://design.helpmarq.com"
github: "https://github.com/nikolas-sapa/ns-ui"
registry: "https://design.helpmarq.com/r/registry.json"
pro: true
pro_url: "https://design.helpmarq.com/components/pricing-scale"
github_stars: 16
component_count: 250
generated_at: "2026-09-21T01:50:16.753Z"
---

# @ns-ui

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

## Links

- Website: https://design.helpmarq.com
- GitHub: https://github.com/nikolas-sapa/ns-ui
- Registry JSON: https://design.helpmarq.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ns-ui
- This file: https://sh4dcn.vercel.app/md/ns-ui.md
- Pro / pricing: https://design.helpmarq.com/components/pricing-scale

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://design.helpmarq.com/r/registry.json
pnpm dlx shadcn@latest add https://design.helpmarq.com/r/registry.json
bunx shadcn@latest add https://design.helpmarq.com/r/registry.json
# clone the source repo
git clone https://github.com/nikolas-sapa/ns-ui.git
# fetch the raw registry index
curl -s https://design.helpmarq.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion-latch | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-hillndale | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| eink-waveform-ghost | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-regression-shear | registry: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 | registry: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 | registry: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 | registry: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-answer-depth-gutter | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @ns-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ns-ui.md) for the component list.
2. Fetch the machine-readable index: https://design.helpmarq.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ns-ui).
```