{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "wancraft", "homepage": "https://wancraft.my", "items": [ { "name": "magnetic-button", "type": "registry:ui", "title": "Magnetic Button", "description": "A button gently pulled toward the pointer inside a bounded magnetic field.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/magnetic-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "liquid-button", "type": "registry:ui", "title": "Liquid Button", "description": "A button flooded with colour from the exact point the pointer enters, draining out where it leaves.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/liquid-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "hold-to-confirm", "type": "registry:ui", "title": "Hold to Confirm", "description": "A destructive-action button that fires only after a sustained press, with a rewinding progress ring.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/hold-to-confirm.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "split-text-button", "type": "registry:ui", "title": "Split Text Button", "description": "A button whose label rolls character by character on hover or focus, revealing a duplicate line.", "dependencies": [], "files": [ { "path": "registry/wancraft/split-text-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "tilt-card", "type": "registry:ui", "title": "Tilt Card", "description": "A perspective card that tilts toward the pointer, with a spring-smoothed glare and layered depth.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/tilt-card.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "spotlight-card", "type": "registry:ui", "title": "Spotlight Card", "description": "A card that reveals a soft radial light — inner glow and border highlight — under the pointer.", "dependencies": [], "files": [ { "path": "registry/wancraft/spotlight-card.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "flip-card", "type": "registry:ui", "title": "Flip Card", "description": "An accessible two-sided card that flips on click, Enter or Space — with the hidden face made inert.", "dependencies": [], "files": [ { "path": "registry/wancraft/flip-card.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "expandable-project-card", "type": "registry:ui", "title": "Expandable Project Card", "description": "A portfolio card that expands into a full project dialog through a shared-layout animation.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/expandable-project-card.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "kinetic-headline", "type": "registry:ui", "title": "Kinetic Headline", "description": "Display type that rises out of masks line by line, word by word or character by character.", "dependencies": [], "files": [ { "path": "registry/wancraft/kinetic-headline.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "text-scramble", "type": "registry:ui", "title": "Text Scramble", "description": "Text that resolves through a flurry of random glyphs — without ever changing width.", "dependencies": [], "files": [ { "path": "registry/wancraft/text-scramble.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "gradient-reveal-text", "type": "registry:ui", "title": "Gradient Reveal Text", "description": "A paragraph whose words take on an accent gradient as you scroll it into place.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/gradient-reveal-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "infinite-marquee", "type": "registry:ui", "title": "Infinite Marquee", "description": "A seamless horizontal marquee that eases to a stop on hover and never jumps.", "dependencies": [], "files": [ { "path": "registry/wancraft/infinite-marquee.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "interactive-dock", "type": "registry:ui", "title": "Interactive Dock", "description": "A navigation dock whose tiles rise and grow as the pointer approaches.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/interactive-dock.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "morphing-tabs", "type": "registry:ui", "title": "Morphing Tabs", "description": "Accessible tabs with a selection indicator that flows between tabs on a spring.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/morphing-tabs.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "command-menu", "type": "registry:ui", "title": "Command Menu", "description": "A searchable command palette with grouped commands, fuzzy matching and full keyboard control.", "dependencies": [], "files": [ { "path": "registry/wancraft/command-menu.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "scroll-progress-navbar", "type": "registry:ui", "title": "Scroll Progress Navbar", "description": "A header that tightens and gains a surface as you scroll, with a reading progress bar.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scroll-progress-navbar.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "aurora-field", "type": "registry:ui", "title": "Aurora Field", "description": "A fluid colour atmosphere of drifting, blurred light that fills its container.", "dependencies": [], "files": [ { "path": "registry/wancraft/aurora-field.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "dot-matrix-field", "type": "registry:ui", "title": "Dot Matrix Field", "description": "A halftone dot grid that swells and lights up around the pointer, drawn on one canvas.", "dependencies": [], "files": [ { "path": "registry/wancraft/dot-matrix-field.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "noise-grid", "type": "registry:ui", "title": "Noise Grid", "description": "An editorial hairline grid with film grain and accent cells that pulse and wander.", "dependencies": [], "files": [ { "path": "registry/wancraft/noise-grid.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "cursor-glow", "type": "registry:ui", "title": "Cursor Glow", "description": "A soft light that follows the pointer inside a container and catches its border.", "dependencies": [], "files": [ { "path": "registry/wancraft/cursor-glow.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "animated-toggle", "type": "registry:ui", "title": "Animated Toggle", "description": "A tactile switch whose thumb springs across the track and squashes when pressed.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/animated-toggle.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "floating-label-input", "type": "registry:ui", "title": "Floating Label Input", "description": "A premium text field whose label floats on focus, with hint, validation and autofill support.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/floating-label-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "multi-step-form", "type": "registry:ui", "title": "Multi-Step Form", "description": "A typed, multi-stage form with per-step validation, direction-aware transitions and a success state.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/multi-step-form.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "otp-input", "type": "registry:ui", "title": "Animated OTP Input", "description": "One-time-code entry with paste, SMS autofill, keyboard navigation and an error shake.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/otp-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "animated-counter", "type": "registry:ui", "title": "Animated Counter", "description": "A locale-aware count-up number that plays once in view and never shifts the layout.", "dependencies": [], "files": [ { "path": "registry/wancraft/animated-counter.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "activity-heatmap", "type": "registry:ui", "title": "Activity Heatmap", "description": "A contribution-style calendar heatmap with keyboard navigation and focus-aware tooltips.", "dependencies": [], "files": [ { "path": "registry/wancraft/activity-heatmap.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "chart-tooltip", "type": "registry:ui", "title": "Interactive Chart Tooltip", "description": "A responsive SVG line chart with a tracking crosshair, spring-led tooltip and keyboard inspection.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/chart-tooltip.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "metric-ticker", "type": "registry:ui", "title": "Metric Ticker", "description": "A dashboard metric with rolling or tweened updates, an honest delta badge and a live sparkline.", "dependencies": [], "files": [ { "path": "registry/wancraft/metric-ticker.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "rotating-product-stage", "type": "registry:ui", "title": "Rotating Product Stage", "description": "A CSS 3D product stage with drag-to-rotate inertia, keyboard turns and per-face lighting presets.", "dependencies": [], "files": [ { "path": "registry/wancraft/rotating-product-stage.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "particle-sphere", "type": "registry:ui", "title": "Particle Sphere", "description": "A rotating Fibonacci-lattice particle sphere on canvas that tilts toward and parts around the pointer.", "dependencies": [], "files": [ { "path": "registry/wancraft/particle-sphere.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "card-stack", "type": "registry:ui", "title": "3D Card Stack", "description": "A perspective card stack you can swipe, drag, click or arrow through — with spring physics.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/card-stack.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "orbital-skills", "type": "registry:ui", "title": "Orbital Skills", "description": "An interactive orbital diagram of tools and skills with upright labels and a selectable centre.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/orbital-skills.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "stateful-button", "type": "registry:ui", "title": "Stateful Submit Button", "description": "A submit button that morphs through loading, success and error with a spring-driven width and drawn icons.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/stateful-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "elastic-slider", "type": "registry:ui", "title": "Elastic Slider", "description": "A range slider whose track rubber-bands past either end and springs back on release.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/elastic-slider.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "rotary-knob", "type": "registry:ui", "title": "Rotary Knob", "description": "A tactile synth-style dial: drag, turn, scroll or use the keyboard, with ticks, a value arc and optional detents.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/rotary-knob.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "copy-button", "type": "registry:ui", "title": "Copy Button", "description": "A copy-to-clipboard button whose icon morphs into a drawn check, with a tooltip, live announcement and fallback.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/copy-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "bento-grid", "type": "registry:ui", "title": "Bento Grid", "description": "A responsive editorial bento layout with dense packing, a staggered entrance and pointer-lit tiles.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/bento-grid.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "fluid-accordion", "type": "registry:ui", "title": "Fluid Accordion", "description": "An accessible accordion whose panels glide open to their natural height, with single or multiple open items.", "dependencies": [], "files": [ { "path": "registry/wancraft/fluid-accordion.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "bottom-sheet", "type": "registry:ui", "title": "Bottom Sheet", "description": "A draggable modal sheet that snaps between heights with velocity, built on a native dialog.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/bottom-sheet.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "compare-slider", "type": "registry:ui", "title": "Compare Slider", "description": "A before / after comparison with a draggable, keyboard-operable divider revealed by clip-path.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/compare-slider.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "typewriter", "type": "registry:ui", "title": "Typewriter", "description": "Types, holds and deletes a rotating list of phrases behind a blinking caret.", "dependencies": [], "files": [ { "path": "registry/wancraft/typewriter.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "proximity-text", "type": "registry:ui", "title": "Proximity Text", "description": "Letters swell in weight, width and scale as the pointer approaches — on any variable font.", "dependencies": [], "files": [ { "path": "registry/wancraft/proximity-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "circular-text", "type": "registry:ui", "title": "Circular Text", "description": "A rotating ring of type around a centre slot — the classic “available for work” badge.", "dependencies": [], "files": [ { "path": "registry/wancraft/circular-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "marker-highlight", "type": "registry:ui", "title": "Marker Highlight", "description": "Hand-drawn annotations — marker swipes, underlines, circles, boxes — that draw in on view.", "dependencies": [], "files": [ { "path": "registry/wancraft/marker-highlight.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "radial-menu", "type": "registry:ui", "title": "Radial Menu", "description": "A circular menu that fans actions around a trigger or the pointer, with direction-aware highlighting.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/radial-menu.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "scrollspy-toc", "type": "registry:ui", "title": "Scrollspy TOC", "description": "A table of contents that tracks the section you are reading with a sliding indicator and per-section progress.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scrollspy-toc.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "dynamic-island", "type": "registry:ui", "title": "Dynamic Island", "description": "A pill that morphs between idle, compact and expanded live activities on a spring.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/dynamic-island.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "flow-field", "type": "registry:ui", "title": "Flow Field", "description": "Particles drifting along an evolving simplex-noise vector field, leaving soft fading trails.", "dependencies": [], "files": [ { "path": "registry/wancraft/flow-field.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "topo-lines", "type": "registry:ui", "title": "Topographic Lines", "description": "Animated contour lines traced with marching squares over an evolving noise terrain.", "dependencies": [], "files": [ { "path": "registry/wancraft/topo-lines.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "pixel-trail", "type": "registry:ui", "title": "Pixel Trail", "description": "A canvas grid whose cells light up under the pointer and fade out, leaving a pixel trail.", "dependencies": [], "files": [ { "path": "registry/wancraft/pixel-trail.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "signal-lines", "type": "registry:ui", "title": "Signal Lines", "description": "Stacked horizontal lines displaced by layered noise waves — a ridgeline, oscilloscope feel.", "dependencies": [], "files": [ { "path": "registry/wancraft/signal-lines.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "tag-input", "type": "registry:ui", "title": "Tag Input", "description": "A chips input with paste splitting, duplicate shake, keyboard chip navigation and accessible suggestions.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/tag-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "password-strength", "type": "registry:ui", "title": "Password Strength", "description": "A password field with show/hide, a four-segment strength meter and a live requirement checklist.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/password-strength.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "file-dropzone", "type": "registry:ui", "title": "File Dropzone", "description": "Drag-and-drop or browse for files, with per-file validation, thumbnails, upload progress and retries.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/file-dropzone.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "rating-input", "type": "registry:ui", "title": "Rating Input", "description": "An accessible star rating built on native radios, with hover preview, half steps and a particle pop.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/rating-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "toast-stack", "type": "registry:ui", "title": "Toast Stack", "description": "Stacked notifications that peek behind each other, fan out on hover and swipe away.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/toast-stack.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "radial-gauge", "type": "registry:ui", "title": "Radial Gauge", "description": "A semi or three-quarter dial whose needle springs between values, with labelled threshold zones.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/radial-gauge.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "activity-timeline", "type": "registry:ui", "title": "Activity Timeline", "description": "A vertical timeline whose line fills to the current step, with staggered reveal and collapsible notes.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/activity-timeline.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "bar-race", "type": "registry:ui", "title": "Bar Race", "description": "Horizontal bars that grow, shrink and overtake each other as the data changes.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/bar-race.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "wireframe-globe", "type": "registry:ui", "title": "Wireframe Globe", "description": "A rotating canvas globe with a depth-faded graticule, pulsing markers and travelling great-circle arcs.", "dependencies": [], "files": [ { "path": "registry/wancraft/wireframe-globe.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "ring-carousel", "type": "registry:ui", "title": "Ring Carousel", "description": "A 3D ring of cards you can drag, flick and snap, with keyboard control and a flat reduced-motion fallback.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/ring-carousel.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "morphing-blob", "type": "registry:ui", "title": "Morphing Blob", "description": "An organic SVG blob that morphs continuously, leans toward the pointer and can merge with a gooey twin.", "dependencies": [], "files": [ { "path": "registry/wancraft/morphing-blob.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "border-beam-button", "type": "registry:ui", "title": "Border Beam Button", "description": "A button whose hairline border carries a travelling two-colour beam that brightens on hover and focus.", "dependencies": [], "files": [ { "path": "registry/wancraft/border-beam-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "reaction-button", "type": "registry:ui", "title": "Reaction Button", "description": "A like toggle that pops with a spring, fires a ring and particle burst, and rolls its count digit by digit.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/reaction-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "number-stepper", "type": "registry:ui", "title": "Number Stepper", "description": "A numeric field with − / + buttons, accelerating hold-to-repeat, rolling digits and an elastic bump at the limits.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/number-stepper.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "swipe-to-confirm", "type": "registry:ui", "title": "Swipe to Confirm", "description": "A slide-to-unlock control: drag the knob across the track to confirm, or step it there with the arrow keys.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/swipe-to-confirm.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "zoom-image", "type": "registry:ui", "title": "Zoom Image", "description": "Click an image to zoom it from its exact on-page position to fit the viewport, in a native modal dialog.", "dependencies": [], "files": [ { "path": "registry/wancraft/zoom-image.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "scroll-stack", "type": "registry:ui", "title": "Scroll Stack", "description": "Cards that pin and pile up as you scroll, with covered cards easing back in scale and light.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scroll-stack.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "link-preview", "type": "registry:ui", "title": "Link Preview", "description": "An inline link that springs out a preview card on hover or keyboard focus, with collision-aware placement.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/link-preview.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "sortable-list", "type": "registry:ui", "title": "Sortable List", "description": "A drag-to-reorder list with a grip handle, lifted rows, layout animations and full keyboard reordering.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/sortable-list.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "split-flap", "type": "registry:ui", "title": "Split-Flap Display", "description": "A Solari departure board: hinged flaps fall cell by cell until the new text is spelled out.", "dependencies": [], "files": [ { "path": "registry/wancraft/split-flap.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "masked-text", "type": "registry:ui", "title": "Masked Text", "description": "Display type used as a window onto a moving texture — gradient, grain, stripes or your image.", "dependencies": [], "files": [ { "path": "registry/wancraft/masked-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "morph-text", "type": "registry:ui", "title": "Morph Text", "description": "Words that melt into one another through a liquid blur-and-threshold morph.", "dependencies": [], "files": [ { "path": "registry/wancraft/morph-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "glitch-text", "type": "registry:ui", "title": "Glitch Text", "description": "A tasteful RGB-split glitch: colour channels jump out in clipped slices, capped at three bursts a second.", "dependencies": [], "files": [ { "path": "registry/wancraft/glitch-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "overlay-menu", "type": "registry:ui", "title": "Overlay Menu", "description": "A fullscreen navigation overlay that grows from its hamburger button, with large links rising through masks.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/overlay-menu.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "fluid-pagination", "type": "registry:ui", "title": "Fluid Pagination", "description": "Pagination with a sliding active indicator, smart ellipsis windowing and numbers that roll in the direction of travel.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/fluid-pagination.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "collapsible-sidebar", "type": "registry:ui", "title": "Collapsible Sidebar", "description": "An app sidebar that springs down to an icon rail, with fading labels, rail tooltips, nested groups and a sliding active marker.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/collapsible-sidebar.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "morphing-dropdown", "type": "registry:ui", "title": "Morphing Dropdown", "description": "A top-nav dropdown where one floating panel morphs its size and position between menus while content slides.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/morphing-dropdown.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "water-ripple", "type": "registry:ui", "title": "Water Ripple", "description": "A refractive water surface: pointer and raindrops send ripples across a tinted, tiled pool.", "dependencies": [], "files": [ { "path": "registry/wancraft/water-ripple.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "flashlight-reveal", "type": "registry:ui", "title": "Flashlight Reveal", "description": "A dark layer with a soft, eased flashlight that reveals the content beneath the pointer.", "dependencies": [], "files": [ { "path": "registry/wancraft/flashlight-reveal.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "confetti", "type": "registry:ui", "title": "Confetti", "description": "Canvas confetti bursts with flipping squares, circles and strips, fired by ref, hook or trigger.", "dependencies": [], "files": [ { "path": "registry/wancraft/confetti.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "connection-beams", "type": "registry:ui", "title": "Connection Beams", "description": "Curved SVG beams between nodes with a travelling comet of light — for integration diagrams.", "dependencies": [], "files": [ { "path": "registry/wancraft/connection-beams.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "dual-range-slider", "type": "registry:ui", "title": "Dual Range Slider", "description": "A two-thumb range slider with an optional histogram, value bubbles, a minimum gap and full keyboard support.", "dependencies": [], "files": [ { "path": "registry/wancraft/dual-range-slider.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "color-picker", "type": "registry:ui", "title": "Color Picker", "description": "An accessible colour picker: 2D saturation area, hue and alpha sliders, validated hex / RGB / HSL input, swatches and eyedropper.", "dependencies": [], "files": [ { "path": "registry/wancraft/color-picker.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "date-picker", "type": "registry:ui", "title": "Date Picker", "description": "A calendar date picker with an ARIA grid, sliding months, single or range selection and a typed ISO field with a native popover.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/date-picker.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "signature-pad", "type": "registry:ui", "title": "Signature Pad", "description": "Canvas signature capture with smooth, velocity-weighted strokes, pen pressure, undo, PNG / SVG export and a typed-name fallback.", "dependencies": [], "files": [ { "path": "registry/wancraft/signature-pad.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "donut-chart", "type": "registry:ui", "title": "Donut Chart", "description": "An interactive donut: arcs sweep in, segments slide out on hover or focus, the legend re-flows the ring.", "dependencies": [], "files": [ { "path": "registry/wancraft/donut-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "radar-chart", "type": "registry:ui", "title": "Radar Chart", "description": "A spider chart for up to three series whose polygons spring between datasets.", "dependencies": [], "files": [ { "path": "registry/wancraft/radar-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "uptime-bar", "type": "registry:ui", "title": "Uptime Bar", "description": "Status-page uptime bars: one bar per day, computed overall uptime, a legend and tooltips on hover, tap and keyboard focus.", "dependencies": [], "files": [ { "path": "registry/wancraft/uptime-bar.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "skeleton-loader", "type": "registry:ui", "title": "Skeleton Loader", "description": "Content-aware skeletons that mirror your layout, shimmer in sync and crossfade into real content without layout shift.", "dependencies": [], "files": [ { "path": "registry/wancraft/skeleton-loader.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "isometric-grid", "type": "registry:ui", "title": "Isometric Grid", "description": "A CSS-3D isometric field of blocks that rise and glow near the pointer — or a bar-chart city.", "dependencies": [], "files": [ { "path": "registry/wancraft/isometric-grid.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "paper-fold", "type": "registry:ui", "title": "Paper Fold", "description": "A panel that folds and unfolds like paper: 3D accordion creases with shading, toggled or scrubbed.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/paper-fold.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "segmented-control", "type": "registry:ui", "title": "Segmented Control", "description": "A radio-group segmented control with a spring thumb, roving arrow keys, sizes and native form support.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/segmented-control.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "speed-dial", "type": "registry:ui", "title": "Speed Dial", "description": "A floating action button that fans out into labelled actions with staggered springs, as a stack or an arc.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/speed-dial.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "theme-toggle", "type": "registry:ui", "title": "Theme Toggle", "description": "A light / dark toggle with a sun-to-moon morph and an optional circular reveal using the View Transitions API.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/theme-toggle.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "xy-pad", "type": "registry:ui", "title": "XY Pad", "description": "A 2D control surface: drag a puck to set two values at once, with grid, crosshair, readout and keyboard nudging.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/xy-pad.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "hover-image-list", "type": "registry:ui", "title": "Hover Image List", "description": "An editorial index list whose rows reveal a floating image that follows the pointer, tilts with velocity and crossfades.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/hover-image-list.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "pan-zoom-canvas", "type": "registry:ui", "title": "Pan & Zoom Canvas", "description": "An infinite-feeling canvas: drag to pan with inertia, wheel or pinch to zoom around the cursor, with controls and keys.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/pan-zoom-canvas.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "pricing-toggle", "type": "registry:ui", "title": "Pricing Toggle", "description": "Pricing cards with a monthly / yearly switch, digit-rolling prices, savings badges and Intl currency formatting.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/pricing-toggle.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "filterable-grid", "type": "registry:ui", "title": "Filterable Grid", "description": "A grid filtered by tag chips and sorted from a menu, with items gliding between layouts as filters change.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/filterable-grid.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "scroll-text-path", "type": "registry:ui", "title": "Scroll Text Path", "description": "Type that travels along a curved SVG path — wave, arc, loop or your own — steered by scroll progress.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scroll-text-path.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "fit-text", "type": "registry:ui", "title": "Fit Text", "description": "A headline that sizes itself to exactly fill its container's width — per line, with any font, without a first-paint jump.", "dependencies": [], "files": [ { "path": "registry/wancraft/fit-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "testimonial-rotator", "type": "registry:ui", "title": "Testimonial Rotator", "description": "An editorial quote carousel: words blur in one by one, authors swap, and a pausable timer fills the active indicator.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/testimonial-rotator.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "falling-text", "type": "registry:ui", "title": "Falling Text", "description": "A sentence whose words or letters break loose and fall with real 2D physics — then can be dragged, thrown and reset.", "dependencies": [], "files": [ { "path": "registry/wancraft/falling-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "smart-breadcrumbs", "type": "registry:ui", "title": "Smart Breadcrumbs", "description": "Breadcrumbs that measure themselves and fold middle items into an accessible overflow menu when space runs short.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/smart-breadcrumbs.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "scroll-to-top", "type": "registry:ui", "title": "Scroll to Top", "description": "A back-to-top button with a scroll-progress ring that appears after a threshold, for the window or any scroll box.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scroll-to-top.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "A right-click and long-press menu with checkbox and radio items, nested submenus, shortcuts, typeahead and full menu ARIA.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/context-menu.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "mobile-tab-bar", "type": "registry:ui", "title": "Mobile Tab Bar", "description": "A bottom navigation bar with a sliding indicator, icon bounce, badge counts and an optional raised primary action.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/mobile-tab-bar.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "ascii-field", "type": "registry:ui", "title": "ASCII Field", "description": "An animated ASCII-art field: noise, waves or rings sampled on a character grid and mapped to a density ramp.", "dependencies": [], "files": [ { "path": "registry/wancraft/ascii-field.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "light-rays", "type": "registry:ui", "title": "Light Rays", "description": "Soft volumetric god rays fanning from a light source, swaying slowly with drifting dust motes.", "dependencies": [], "files": [ { "path": "registry/wancraft/light-rays.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "warp-grid", "type": "registry:ui", "title": "Warp Grid", "description": "Grid lines that bend around the pointer like a gravitational lens and spring back when it leaves.", "dependencies": [], "files": [ { "path": "registry/wancraft/warp-grid.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "bokeh-field", "type": "registry:ui", "title": "Bokeh Field", "description": "Out-of-focus lights drifting at different depths, with pointer parallax and a circle or hexagon aperture.", "dependencies": [], "files": [ { "path": "registry/wancraft/bokeh-field.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "An ARIA 1.2 autocomplete with match highlighting, groups, async search, multi-select chips and create-on-type.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/combobox.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "animated-checkbox", "type": "registry:ui", "title": "Animated Checkbox", "description": "A real checkbox with a drawn check, an indeterminate dash morph, a spring press and a tri-state select-all group.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/animated-checkbox.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "wheel-picker", "type": "registry:ui", "title": "Wheel Picker", "description": "An iOS-style drum picker: native scroll-snap momentum, a 3D cylinder per column, keyboard and typeahead.", "dependencies": [], "files": [ { "path": "registry/wancraft/wheel-picker.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "inline-edit", "type": "registry:ui", "title": "Inline Edit", "description": "Click-to-edit text that becomes a field without moving a pixel, with async save, revert-on-error and validation.", "dependencies": [], "files": [ { "path": "registry/wancraft/inline-edit.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "sparkline", "type": "registry:ui", "title": "Sparkline", "description": "A word-sized chart for tables and text: line, area or bars, coloured by trend, with a computed summary and nearest-value tooltip.", "dependencies": [], "files": [ { "path": "registry/wancraft/sparkline.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "storage-meter", "type": "registry:ui", "title": "Storage Meter", "description": "A stacked usage bar with animated segments, a legend with percentages, tooltips and threshold status.", "dependencies": [], "files": [ { "path": "registry/wancraft/storage-meter.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "countdown", "type": "registry:ui", "title": "Countdown", "description": "A countdown to a date with rolling digits, progress rings, localised unit labels and a hydration-safe start.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/countdown.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "notification-bell", "type": "registry:ui", "title": "Notification Bell", "description": "A bell with a rolling unread badge, a wobble on new arrivals and a popover panel with read states.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/notification-bell.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "cube-carousel", "type": "registry:ui", "title": "Cube Carousel", "description": "Slides on the faces of a 3D cube that turns with a spring — drag, keys, buttons or auto-rotate.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/cube-carousel.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "depth-gallery", "type": "registry:ui", "title": "Depth Gallery", "description": "Cards on a loose spiral at increasing depth that fly toward the viewer as you scroll — a perspective tunnel.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/depth-gallery.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "progress-button", "type": "registry:ui", "title": "Progress Button", "description": "A download button whose fill sweeps across as work progresses, with pause, cancel, retry and a rolling percentage.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/progress-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "keycap-button", "type": "registry:ui", "title": "Keycap Button", "description": "A mechanical keycap with a real skirt and dished top that travels down on a short spring, bottoms out and clacks.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/keycap-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "vote-control", "type": "registry:ui", "title": "Vote Control", "description": "Forum-style up / down voting with rolling digits, bouncing arrows and optimistic updates that roll back on error.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/vote-control.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "morph-icon-button", "type": "registry:ui", "title": "Morph Icon Button", "description": "An icon button whose glyph morphs between two states by interpolating SVG paths — play/pause, menu/close, heart and more.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/morph-icon-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "resizable-panels", "type": "registry:ui", "title": "Resizable Panels", "description": "Split panes with draggable, keyboard-operable dividers, px or % limits, snapping collapsible panels and nested groups.", "dependencies": [], "files": [ { "path": "registry/wancraft/resizable-panels.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "kanban-board", "type": "registry:ui", "title": "Kanban Board", "description": "Drag cards within and between columns with a lifted ghost, animated placeholder, WIP limits and full keyboard moves.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/kanban-board.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "product-tour", "type": "registry:ui", "title": "Product Tour", "description": "An onboarding tour that dims the page, springs a spotlight between targets and anchors a step card with collision handling.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/product-tour.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "masonry-grid", "type": "registry:ui", "title": "Masonry Grid", "description": "A measured masonry layout with responsive column breakpoints that springs tiles into place as they are added, removed or resized.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/masonry-grid.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "animated-link", "type": "registry:ui", "title": "Animated Link", "description": "Inline links with refined hover and focus underlines — slide, grow, double, highlight, arrow and wave — that follow line wraps.", "dependencies": [], "files": [ { "path": "registry/wancraft/animated-link.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "wave-text", "type": "registry:ui", "title": "Wave Text", "description": "Letters that ripple in a springy wave from the letter nearest the pointer — on hover, focus, in view or continuously.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/wave-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "type-specimen", "type": "registry:ui", "title": "Type Specimen", "description": "An interactive variable-font specimen: editable sample, live axis sliders, waterfall, glyph loupe and CSS output.", "dependencies": [], "files": [ { "path": "registry/wancraft/type-specimen.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "spoiler-text", "type": "registry:ui", "title": "Spoiler Text", "description": "Text hidden under shimmering particle noise that dissolves outward from where you click.", "dependencies": [], "files": [ { "path": "registry/wancraft/spoiler-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "step-indicator", "type": "registry:ui", "title": "Step Indicator", "description": "A horizontal or vertical wizard stepper whose connectors fill as you advance, with clickable completed steps and a narrow-width summary.", "dependencies": [], "files": [ { "path": "registry/wancraft/step-indicator.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "expanding-search", "type": "registry:ui", "title": "Expanding Search", "description": "A search icon that springs open into a full field with recent searches, suggestions and a / shortcut.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/expanding-search.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "scrollable-tabs", "type": "registry:ui", "title": "Scrollable Tabs", "description": "A tab strip for many tabs: edge fades and scroll buttons, a sliding indicator, wheel-to-horizontal scrolling and closable tabs.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scrollable-tabs.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "auto-hide-header", "type": "registry:ui", "title": "Auto-Hide Header", "description": "A sticky header that slides away as you scroll down and springs back the moment you scroll up.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/auto-hide-header.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "glass-refraction", "type": "registry:ui", "title": "Glass Refraction", "description": "A liquid-glass pane that bends the content behind it, with a specular rim that leans toward the pointer.", "dependencies": [], "files": [ { "path": "registry/wancraft/glass-refraction.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "metaballs", "type": "registry:ui", "title": "Metaballs", "description": "Lava-lamp blobs that drift, merge and split through an implicit field — your pointer joins in as one more.", "dependencies": [], "files": [ { "path": "registry/wancraft/metaballs.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "voronoi-field", "type": "registry:ui", "title": "Voronoi Field", "description": "A drifting Voronoi mosaic with hairline cell edges — the pointer becomes a seed and the cells make room.", "dependencies": [], "files": [ { "path": "registry/wancraft/voronoi-field.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "particle-text", "type": "registry:ui", "title": "Particle Text", "description": "Type sampled into a swarm of particles that spring home, scatter from the pointer and re-form.", "dependencies": [], "files": [ { "path": "registry/wancraft/particle-text.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "card-input", "type": "registry:ui", "title": "Card Input", "description": "Payment card fields with brand detection, live formatting, Luhn checks and a card preview that flips for the CVC.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/card-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "image-cropper", "type": "registry:ui", "title": "Image Cropper", "description": "Crop an image with a draggable, resizable box or a fixed frame — aspect presets, zoom, rotate and canvas output.", "dependencies": [], "files": [ { "path": "registry/wancraft/image-cropper.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "feedback-scale", "type": "registry:ui", "title": "Feedback Scale", "description": "A five-step satisfaction scale with drawn faces that morph as you hover, a follow-up comment and a thank-you state.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/feedback-scale.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "mention-input", "type": "registry:ui", "title": "Mention Input", "description": "A textarea with @mention and #tag autocomplete at the caret, highlighted tokens and whole-token delete.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/mention-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "brush-chart", "type": "registry:ui", "title": "Brush Chart", "description": "A time-series chart with an overview brush: drag or resize the window and the main chart glides to the new range.", "dependencies": [], "files": [ { "path": "registry/wancraft/brush-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "funnel-chart", "type": "registry:ui", "title": "Funnel Chart", "description": "A conversion funnel whose stages re-taper smoothly when data changes, with step conversion, drop-off and overall rate.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/funnel-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "treemap", "type": "registry:ui", "title": "Treemap", "description": "A squarified treemap of nested data: colour by group, tooltips, and click-to-zoom drill-down with a breadcrumb back up.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/treemap.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "activity-rings", "type": "registry:ui", "title": "Activity Rings", "description": "Concentric goal rings that spring to their values, wrap past 100% with a shadowed overlap lap, and report as meters.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/activity-rings.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "page-flip", "type": "registry:ui", "title": "Page Flip", "description": "A CSS 3D book: drag a page's edge and it turns around the spine with curl shading, or falls back.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/page-flip.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "coverflow", "type": "registry:ui", "title": "Coverflow", "description": "The classic coverflow: a forward-facing centre cover with the rest turned away in depth, on one spring.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/coverflow.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "split-button", "type": "registry:ui", "title": "Split Button", "description": "A primary action joined to a chevron menu of alternatives, with descriptions, typeahead and an optional remember-last-action mode.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/split-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "formatting-toolbar", "type": "registry:ui", "title": "Formatting Toolbar", "description": "An ARIA toolbar with toggle buttons, an alignment radio group, a style menu, overflow into “More”, tooltips and scoped shortcuts.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/formatting-toolbar.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "kbd-shortcut", "type": "registry:ui", "title": "Kbd Shortcut", "description": "Keycaps for a keyboard shortcut that light up as the keys are physically pressed, with platform-aware modifiers and sequences.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/kbd-shortcut.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "waveform-player", "type": "registry:ui", "title": "Waveform Player", "description": "A compact audio player with a bar waveform you can click or drag to scrub, a morphing play button and a real slider for keyboards.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/waveform-player.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "snap-carousel", "type": "registry:ui", "title": "Snap Carousel", "description": "An accessible carousel on native CSS scroll-snap with peeking slides, dot or thumbnail pickers and pausable autoplay.", "dependencies": [], "files": [ { "path": "registry/wancraft/snap-carousel.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "animated-dialog", "type": "registry:ui", "title": "Animated Dialog", "description": "A native modal that scales in from the button that opened it, with a blurred backdrop, alertdialog mode and nesting.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/animated-dialog.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "smart-tooltip", "type": "registry:ui", "title": "Smart Tooltip", "description": "An accessible tooltip for hover and keyboard focus with flip / shift placement, a pointing arrow and an OS-style delay group.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/smart-tooltip.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "side-drawer", "type": "registry:ui", "title": "Side Drawer", "description": "A left or right panel on a native dialog: modal overlay or non-modal push, with velocity drag-to-close.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/side-drawer.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "sidenotes", "type": "registry:ui", "title": "Sidenotes", "description": "Numbered references whose notes sit in the margin beside their line, and fold into inline disclosures on narrow containers.", "dependencies": [], "files": [ { "path": "registry/wancraft/sidenotes.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "read-more", "type": "registry:ui", "title": "Read More", "description": "Line-clamped text that expands to its measured height, with a fade at the clamp and a button only when it overflows.", "dependencies": [], "files": [ { "path": "registry/wancraft/read-more.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "text-prism", "type": "registry:ui", "title": "Text Prism", "description": "Words printed on the faces of a 3D prism that tumbles to the next word, with the width reserved for the longest.", "dependencies": [], "files": [ { "path": "registry/wancraft/text-prism.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "stroke-draw-text", "type": "registry:ui", "title": "Stroke Draw Text", "description": "Display text drawn as a self-tracing outline, letter by letter, that then fills in.", "dependencies": [], "files": [ { "path": "registry/wancraft/stroke-draw-text.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "tree-view", "type": "registry:ui", "title": "Tree View", "description": "A file-explorer tree on the APG pattern: arrow keys, typeahead, multi-select, tri-state checkboxes and lazy loading.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/tree-view.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "swipe-tabs", "type": "registry:ui", "title": "Swipe Tabs", "description": "Mobile tabs with side-by-side panels on native scroll-snap and an indicator that tracks the swipe continuously.", "dependencies": [], "files": [ { "path": "registry/wancraft/swipe-tabs.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "alphabet-index", "type": "registry:ui", "title": "Alphabet Index", "description": "An A–Z scrubber beside a long grouped list: drag to jump with a letter bubble, sticky headers, locale-aware sorting.", "dependencies": [], "files": [ { "path": "registry/wancraft/alphabet-index.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "hover-highlight-nav", "type": "registry:ui", "title": "Hover Highlight Nav", "description": "Nav links with one highlight pill that springs to the hovered or focused link and rests on the active one.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/hover-highlight-nav.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "halftone-image", "type": "registry:ui", "title": "Halftone Image", "description": "Any image re-printed as a rotated halftone screen of dots, squares or lines, with a pointer lens that reveals the original.", "dependencies": [], "files": [ { "path": "registry/wancraft/halftone-image.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "ink-trail", "type": "registry:ui", "title": "Ink Trail", "description": "Pointer strokes leave ink that bleeds, drifts and fades like ink dropped in water, cycling through a palette.", "dependencies": [], "files": [ { "path": "registry/wancraft/ink-trail.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "ribbon-trail", "type": "registry:ui", "title": "Ribbon Trail", "description": "Silky spring-chain ribbons that chase the pointer, tapering and twisting, and drift on a Lissajous path when idle.", "dependencies": [], "files": [ { "path": "registry/wancraft/ribbon-trail.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "parallax-hills", "type": "registry:ui", "title": "Parallax Hills", "description": "Layered, seeded landscape silhouettes with atmospheric haze, slow drift and pointer/scroll parallax by depth.", "dependencies": [], "files": [ { "path": "registry/wancraft/parallax-hills.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "variant-picker", "type": "registry:ui", "title": "Variant Picker", "description": "Colour swatches and size buttons as radiogroups that derive availability, stock and price deltas from your variants.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/variant-picker.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "chip-select", "type": "registry:ui", "title": "Chip Select", "description": "Filter and interest chips with a springy check-in, select all / clear, a max with feedback and a +N more collapse.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/chip-select.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "slug-input", "type": "registry:ui", "title": "Slug Input", "description": "A URL slug field that follows the title until edited, previews the full URL and checks availability as you type.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/slug-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "markdown-editor", "type": "registry:ui", "title": "Markdown Editor", "description": "A textarea Markdown editor with a roving-focus toolbar, undoable formatting, shortcuts and a safe Write / Preview.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/markdown-editor.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "data-table", "type": "registry:ui", "title": "Data Table", "description": "A sortable, selectable table on real semantics with multi-sort, resizable columns, density and paging.", "dependencies": [], "files": [ { "path": "registry/wancraft/data-table.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "gantt-chart", "type": "registry:ui", "title": "Gantt Chart", "description": "A project timeline with draggable, resizable bars, dependency arrows, milestones, progress and day / week / month zoom.", "dependencies": [], "files": [ { "path": "registry/wancraft/gantt-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "scatter-plot", "type": "registry:ui", "title": "Scatter Plot", "description": "An SVG scatter plot with size and colour encodings, nearest-point tooltips, lasso or box selection, legend toggles and keyboard travel.", "dependencies": [], "files": [ { "path": "registry/wancraft/scatter-plot.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "waffle-chart", "type": "registry:ui", "title": "Waffle Chart", "description": "A grid of cells filled in category order to show parts of a whole, with a staggered fill, highlightable categories and smooth reassignment.", "dependencies": [], "files": [ { "path": "registry/wancraft/waffle-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "holo-card", "type": "registry:ui", "title": "Holo Card", "description": "A holographic foil card that tilts toward the pointer while rainbow foil, glitter and glare shift with the light.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/holo-card.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "extruded-text", "type": "registry:ui", "title": "Extruded Text", "description": "Display text with real 3D depth from stacked, shaded layers that turns toward the pointer on a spring.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/extruded-text.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "pin-pad", "type": "registry:ui", "title": "PIN Pad", "description": "A tactile numeric keypad for PIN entry with spring-filled dots, error shake and keyboard support.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/pin-pad.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "scene-switch", "type": "registry:ui", "title": "Scene Switch", "description": "An illustrated day / night switch: the sun springs across a tiny sky and turns into the moon.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/scene-switch.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "record-button", "type": "registry:ui", "title": "Record Button", "description": "A voice-note record button: the circle morphs into a stop square, a ring pulses with the level, then play back or discard.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/record-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "add-to-cart-button", "type": "registry:ui", "title": "Add to Cart Button", "description": "Throws the product along a parabola into the cart, bumps it, rolls the badge and confirms with a check.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/add-to-cart-button.tsx", "type": "registry:ui" } ], "categories": [ "buttons" ] }, { "name": "swipe-actions", "type": "registry:ui", "title": "Swipe Actions", "description": "List rows that reveal actions when swiped, with full-swipe triggers and an accessible Actions menu on every row.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/swipe-actions.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "virtual-list", "type": "registry:ui", "title": "Virtual List", "description": "A windowed listbox that renders only the visible rows of a huge list, with measured variable heights, sticky group headers and scrollToIndex.", "dependencies": [], "files": [ { "path": "registry/wancraft/virtual-list.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "story-viewer", "type": "registry:ui", "title": "Story Viewer", "description": "A stories viewer with segmented progress, tap and hold gestures, a cube turn between people and a native modal.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/story-viewer.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "lightbox-gallery", "type": "registry:ui", "title": "Lightbox Gallery", "description": "A thumbnail grid that opens a full-screen lightbox: FLIP from the thumbnail, swipe, pinch / double-click zoom and a thumbnail strip.", "dependencies": [], "files": [ { "path": "registry/wancraft/lightbox-gallery.tsx", "type": "registry:ui" } ], "categories": [ "cards" ] }, { "name": "text-image-reveal", "type": "registry:ui", "title": "Text Image Reveal", "description": "Editorial text where marked words reveal an image: an inline pill that pushes the line apart, or a floating print that follows the pointer.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/text-image-reveal.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "text-search-highlighter", "type": "registry:ui", "title": "Text Search Highlighter", "description": "Find-in-text for any content block: every match highlighted, a \"3 of 12\" counter, and Enter / Shift+Enter to step through them.", "dependencies": [], "files": [ { "path": "registry/wancraft/text-search-highlighter.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "text-diff", "type": "registry:ui", "title": "Text Diff", "description": "An animated word- or character-level diff: deletions strike through, insertions type in, inline or side by side with a +12 −5 summary.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/text-diff.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "code-walkthrough", "type": "registry:ui", "title": "Code Walkthrough", "description": "A presentation-style code walkthrough: each step highlights a line range, lines grow and collapse between steps, and captions explain.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/code-walkthrough.tsx", "type": "registry:ui" } ], "categories": [ "text" ] }, { "name": "pull-to-refresh", "type": "registry:ui", "title": "Pull to Refresh", "description": "Pull a scroll container down at the top to refresh: rubber-band resistance, a filling ring, a spinner and a Refresh button.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/pull-to-refresh.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "selection-toolbar", "type": "registry:ui", "title": "Selection Toolbar", "description": "A Medium-style toolbar that floats above a text selection inside one container, keeps the selection intact and is reachable with Alt+F10.", "dependencies": [], "files": [ { "path": "registry/wancraft/selection-toolbar.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "page-transition", "type": "registry:ui", "title": "Page Transition", "description": "A route transition wrapper using the View Transitions API with a Motion fallback, direction-aware presets and SPA focus management.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/page-transition.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "link-hints", "type": "registry:ui", "title": "Link Hints", "description": "Vimium-style keyboard hints scoped to a container: press F to label every visible control, then type the letters to activate one.", "dependencies": [], "files": [ { "path": "registry/wancraft/link-hints.tsx", "type": "registry:ui" } ], "categories": [ "navigation" ] }, { "name": "electric-arc", "type": "registry:ui", "title": "Electric Arc", "description": "Crackling electric arcs between anchors: forked, flickering bolts that re-route constantly and reach for a nearby pointer.", "dependencies": [], "files": [ { "path": "registry/wancraft/electric-arc.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "fireflies", "type": "registry:ui", "title": "Fireflies", "description": "Glowing fireflies drifting on smooth noise paths, blinking on their own rhythms and gently drawn toward the pointer.", "dependencies": [], "files": [ { "path": "registry/wancraft/fireflies.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "tile-reveal", "type": "registry:ui", "title": "Tile Reveal", "description": "Content revealed by a grid of tiles flipping, shrinking or dropping away in a wave — on view, on click or from a prop.", "dependencies": [], "files": [ { "path": "registry/wancraft/tile-reveal.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "weather-effect", "type": "registry:ui", "title": "Weather Effect", "description": "Rain, snow or sleet over content: wind-angled streaks that splash, drifting flakes with sway and depth, and a pointer gust.", "dependencies": [], "files": [ { "path": "registry/wancraft/weather-effect.tsx", "type": "registry:ui" } ], "categories": [ "backgrounds" ] }, { "name": "phone-input", "type": "registry:ui", "title": "Phone Input", "description": "An international phone field with a searchable country list, as-you-type formatting and paste-to-detect E.164 numbers.", "dependencies": [], "files": [ { "path": "registry/wancraft/phone-input.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "clock-picker", "type": "registry:ui", "title": "Clock Picker", "description": "An analog time picker: drag the hand round an hour ring, then a minute ring, with snapping, AM / PM and an editable readout.", "dependencies": [], "files": [ { "path": "registry/wancraft/clock-picker.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "permission-matrix", "type": "registry:ui", "title": "Permission Matrix", "description": "A roles × permissions grid with tri-state select-all headers, collapsible groups, locked cells and tracked changes.", "dependencies": [], "files": [ { "path": "registry/wancraft/permission-matrix.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "availability-grid", "type": "registry:ui", "title": "Availability Grid", "description": "A weekly availability picker: drag to paint or erase time slots, merged ranges, per-day summaries and spreadsheet keys.", "dependencies": [], "files": [ { "path": "registry/wancraft/availability-grid.tsx", "type": "registry:ui" } ], "categories": [ "forms" ] }, { "name": "event-calendar", "type": "registry:ui", "title": "Event Calendar", "description": "A month and week calendar with colour-coded event chips, \"+N more\" popovers, timed blocks, direction-aware slides and grid keys.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/event-calendar.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "sankey-diagram", "type": "registry:ui", "title": "Sankey Diagram", "description": "A Sankey flow diagram with an inline layout: hover or focus a node to trace its flows, keyboard navigation and animated data changes.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/sankey-diagram.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "candlestick-chart", "type": "registry:ui", "title": "Candlestick Chart", "description": "An OHLC candlestick chart with volume, a moving average, crosshair tooltip, wheel / drag pan-zoom and candle-by-candle keys.", "dependencies": [], "files": [ { "path": "registry/wancraft/candlestick-chart.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "force-graph", "type": "registry:ui", "title": "Force Graph", "description": "A force-directed network graph in SVG: inline simulation that settles and stops, draggable nodes, zoom and pan, keyboard navigation.", "dependencies": [], "files": [ { "path": "registry/wancraft/force-graph.tsx", "type": "registry:ui" } ], "categories": [ "data" ] }, { "name": "dice-roller", "type": "registry:ui", "title": "Dice Roller", "description": "CSS 3D dice with real pips that hop and tumble through several turns, then settle on a random face and announce the total.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/dice-roller.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] }, { "name": "door-reveal", "type": "registry:ui", "title": "Door Reveal", "description": "Doors that swing open in CSS 3D around their hinges, with shading and a slight overshoot, to reveal the content behind.", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/door-reveal.tsx", "type": "registry:ui" } ], "categories": [ "3d" ] } ] }