@uicapsule
A curated personal collection of interactive React UI experiments and design concepts by Kaiyu Hsu, spanning ~25 components. Includes ASCII Renderer, Particle Orb, Geometric Orb, Gradient Orb, Wireframe Orb, Card Stack, Carousel 3D, Dynamic Island, Expanding Header Menu, Infinite Grid, iOS Volume Slider, Light/Dark Toggle, Like Button, Line Chart, Radial Slider, Sidebar, Snail Timer, Spinner Pixel Grid, Spreadsheet, Tooltip Grid, Voice Dictator, and Emerald Template. Built with React, Next.js, and Tailwind CSS. Organized by Styles, Elements, and Categories. Free and open source. Use for: sourcing unconventional, design-experiment-quality interactive widgets — particularly orb/particle effects, creative nav patterns, and novel input controls — for portfolios or products that want distinctive UI moments.
Install this registry
npx shadcn@latest add https://uicapsule.com/r/registry.json pnpm dlx shadcn@latest add https://uicapsule.com/r/registry.json bunx shadcn@latest add https://uicapsule.com/r/registry.json curl -s https://uicapsule.com/r/registry.json Components
52 totalIsometric voxel diorama landing page — scroll pans diagonally through a living world of walkers, marquee signs, and ground-laid typography
npx shadcn@latest add https://uicapsule.com/r/voxel-landing.json Material You dynamic color — pick a wallpaper and a tonal palette derived from its seed hue re-themes the whole system.
npx shadcn@latest add https://uicapsule.com/r/material-you-theming.json The image-gen loading ritual done honestly — pure noise resolves through coarse color blobs into the sharp frame, the way a denoiser actually converges.
npx shadcn@latest add https://uicapsule.com/r/diffusion-reveal.json Android's Circle to Search — enter search mode, lasso anything with a glowing stroke, and results slide up for the circled item.
npx shadcn@latest add https://uicapsule.com/r/circle-to-search.json iOS home-screen edit mode — long-press to wobble, drag to reorder, tap the badge to remove.
npx shadcn@latest add https://uicapsule.com/r/jiggle-mode.json Android's predictive back gesture — drag from the edge and the screen shrinks in your hand, revealing where you'll land before you commit.
npx shadcn@latest add https://uicapsule.com/r/predictive-back.json The iOS time-picker wheel on the web — 3D cylinder, momentum flicks, detent snapping, edge fog.
npx shadcn@latest add https://uicapsule.com/r/drum-picker.json A temperature knob for generation — turn it and the dial itself heats up: the LED ring fills from cool blue to ember, the glow swells, and the readout drifts f…
npx shadcn@latest add https://uicapsule.com/r/vibe-dial.json The iOS screenshot moment — flash, the screen shrinks into a corner thumbnail, lingers, then swipes away.
npx shadcn@latest add https://uicapsule.com/r/screenshot-capture.json The tvOS scrubber — dragging the timeline raises a filmstrip of preview frames above the playhead, rendered live from a synthetic day-cycle video.
npx shadcn@latest add https://uicapsule.com/r/seek-filmstrip.json iOS long-press context menu — the bubble lifts, the thread melts into blur, and the menu springs from the press point.
npx shadcn@latest add https://uicapsule.com/r/context-menu-peek.json A four-card editorial chart set — rung bars, a hairline dot-line, a tick-ring dial, and a dot waffle — drawn ink-on-paper by TanStack Charts, with spring-stagg…
npx shadcn@latest add https://uicapsule.com/r/editorial-charts.json Liquid-glass shader orb that morphs through material presets — siri, aurora, plasma, chrome, opal, blue drop, violet ember
npx shadcn@latest add https://uicapsule.com/r/liquid-orb.json iOS Smart Stack — widgets roll through a vertical 3D page-flip, auto-advancing until you swipe.
npx shadcn@latest add https://uicapsule.com/r/widget-stack.json Cute chibi potted plants raymarched from signed distance fields on a little soft-body rig — pinch, pull, lift and toss them; they watch your cursor, blink, and…
npx shadcn@latest add https://uicapsule.com/r/chibi-plants.json Android's 9-dot pattern lock — glowing trail, dot ripples, red shake on a wrong draw, green on unlock.
npx shadcn@latest add https://uicapsule.com/r/pattern-unlock.json AirDrop's ripple radar — nearby people surface on expanding rings; tap one and a progress ring wraps their avatar.
npx shadcn@latest add https://uicapsule.com/r/airdrop-radar.json iOS picture-in-picture — flick the call window and velocity picks its corner; throw it off an edge to tuck it behind a peek tab.
npx shadcn@latest add https://uicapsule.com/r/pip-window.json An endless strip of paper unrolls behind a heavy roll, printing a portfolio in its wake
npx shadcn@latest add https://uicapsule.com/r/paper-roll.json A desktop boots itself — one card riffles through every thumbnail, icons burst out from centre, then the dock magnifies under the cursor and windows drag, stac…
npx shadcn@latest add https://uicapsule.com/r/desktop-os.json Sixteen photo cards regroup between four spatial formations — a solved ellipse, an arc conveyor, a tilted ring and a swelling orbit — and scrub under drag or w…
npx shadcn@latest add https://uicapsule.com/r/formation.json A drifting wall of photos bends away from the cursor like a gravity well, promoting whichever picture sits in the clearing — click and the whole wall pans to b…
npx shadcn@latest add https://uicapsule.com/r/gravity-wall.json A camera drifts forever across an edgeless field of fashion figures — scroll to zoom at the cursor, drag to fling, click one and it flies in while every other …
npx shadcn@latest add https://uicapsule.com/r/lookbook-camera.json An endless wheel of labels glides past a fixed center line while a giant gradient-filled figure swaps in beside it; scroll to seize the reel and it resumes on …
npx shadcn@latest add https://uicapsule.com/r/stat-reel.json An ASCII trading terminal drawn from box-drawing glyphs, whose screen burns into drifting embers and reassembles as the next one — scrub backwards and the same…
npx shadcn@latest add https://uicapsule.com/r/terminal-disintegrate.json Five volume controls that refuse to just be a slider: tilt, cannon, curling, dot-matrix, and whack-a-mole.
npx shadcn@latest add https://uicapsule.com/r/volume-control.json Remake of the Codex effort picker, in ChatGPT's chrome or Claude's.
npx shadcn@latest add https://uicapsule.com/r/effort-picker.json A replica of Tesla's climate screen — drag the airstream to aim the vents, with live temperature, fan, and seat-heat response.
npx shadcn@latest add https://uicapsule.com/r/tesla-climate.json A shape-shifting AI input capsule that morphs between text, voice, thinking, and streaming states.
npx shadcn@latest add https://uicapsule.com/r/dynamic-ai-composer.json A springy Dynamic Island interaction with ring and timer states.
npx shadcn@latest add https://uicapsule.com/r/dynamic-island.json 3D animated spherical orb with flowing latitude lines and depth-based opacity
npx shadcn@latest add https://uicapsule.com/r/geometric-orb.json Glowing shader orb with noise-based color mixing, hue rotation, and breathing pulse
npx shadcn@latest add https://uicapsule.com/r/gradient-orb.json Curl-noise-displaced particle cloud rendered as a continuous line strip with bloom
npx shadcn@latest add https://uicapsule.com/r/wireframe-orb.json Dot-matrix pixel loading spinners — 20 grid animations (wave, spiral, radar, rain, snake, heart…) with square or round dots, neon glow and rainbow hue cycling.
npx shadcn@latest add https://uicapsule.com/r/spinner-pixel-grid.json A shadcn-inspired application sidebar with a draggable resize handle.
npx shadcn@latest add https://uicapsule.com/r/sidebar.json Voice dictation UI — tap the orb and a dithered WebGL ring swells with simulated speech amplitude while a faux transcript streams in word by word.
npx shadcn@latest add https://uicapsule.com/r/voice-dictator.json Dark emerald AI landing page template — hero demo types a question, reveals collapsible chain-of-thought steps and a sourced answer; feature cards, integration…
npx shadcn@latest add https://uicapsule.com/r/emerald-template.json Spreadsheet data grid with AI enrichment — select cells, hit Enrich and each fills in after a Generating… beat; editable cells, drag/shift selection, arrow key…
npx shadcn@latest add https://uicapsule.com/r/spreadsheet.json Data table filter bar — build text, number, date and option filters as editable chips with operators, or type a prompt, hit Ask AI and watch simulated filters …
npx shadcn@latest add https://uicapsule.com/r/filter-bar.json Tooltip with a direction aware pixel grid background animation
npx shadcn@latest add https://uicapsule.com/r/tooltip-grid.json WebGPU 3D image carousel — cards ride a bent ring; scroll or drag to spin it with momentum, then it snaps to the nearest card as side cards fade back.
npx shadcn@latest add https://uicapsule.com/r/carousel-3d.json Fastest countdown ever
npx shadcn@latest add https://uicapsule.com/r/snail-timer.json Take any 3D model and render it as ASCII art
npx shadcn@latest add https://uicapsule.com/r/ascii-renderer.json Retro 16fps pixel starfield background — grid-snapped stars twinkle in stepped fades and slowly reshuffle while pixel shooting stars streak past with fading tr…
npx shadcn@latest add https://uicapsule.com/r/background-pixel-stars.json Generative glyph grid background — two mirrored SVG panels of dots, crosses, stripes and squares, each cell swapping to a random shape on its own timer.
npx shadcn@latest add https://uicapsule.com/r/background-shapes.json An infinite stack of cards placed with perspective one on top of another.
npx shadcn@latest add https://uicapsule.com/r/card-stack.json Infinite pannable grid — drag or scroll with momentum through endless cells, indexed in a spiral out from the center and rendered only while in view.
npx shadcn@latest add https://uicapsule.com/r/infinite-grid.json iOS-style vertical volume slider — drag past the top and the bar stretches, past the bottom it squashes, with sigmoid rubber-band resistance and a spring back.
npx shadcn@latest add https://uicapsule.com/r/ios-volume-slider.json Sun/moon light-dark theme toggle icon — the moon's crescent mask slides away as it shrinks into a sun, the icon rotates, and six rays pop in one by one.
npx shadcn@latest add https://uicapsule.com/r/light-dark-toggle.json Twitter style like button
npx shadcn@latest add https://uicapsule.com/r/like-button.json Noise-displaced particle sphere with additive-blended dots and custom vertex shader
npx shadcn@latest add https://uicapsule.com/r/particle-orb.json Rotary dial slider — drag sideways to spin a ring of tick marks under a fixed needle; release and it springs to the nearest tick while the number readout rolls.
npx shadcn@latest add https://uicapsule.com/r/radial-slider.json