sh4dcnv2 · atlas
← libraries

@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.

52 components react shadcn-cli MIT

Install this registry

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

Components

52 total
Voxel Landing block

Isometric 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 Theming block

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
Diffusion Reveal block

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
Circle to Search block

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
Jiggle Mode block

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
Predictive Back block

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
Drum Picker block

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
Vibe Dial block

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
Screenshot Capture block

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
Seek Filmstrip block

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
Context Menu Peek block

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
Editorial Charts block

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 Orb block

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
Widget Stack block

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
Chibi Plants block

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
Pattern Unlock block

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 Radar block

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
PiP Window block

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
Paper Roll block

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
Desktop OS block

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
Formation block

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
Gravity Wall block

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
Lookbook Camera block

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
Stat Reel block

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
Terminal Disintegrate block

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
Volume Control block

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
Effort Picker block

Remake of the Codex effort picker, in ChatGPT's chrome or Claude's.

npx shadcn@latest add https://uicapsule.com/r/effort-picker.json
Tesla Climate block

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
Dynamic AI Composer block

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
Dynamic Island block

A springy Dynamic Island interaction with ring and timer states.

npx shadcn@latest add https://uicapsule.com/r/dynamic-island.json
Geometric Orb block

3D animated spherical orb with flowing latitude lines and depth-based opacity

npx shadcn@latest add https://uicapsule.com/r/geometric-orb.json
Gradient Orb block

Glowing shader orb with noise-based color mixing, hue rotation, and breathing pulse

npx shadcn@latest add https://uicapsule.com/r/gradient-orb.json
Wireframe Orb block

Curl-noise-displaced particle cloud rendered as a continuous line strip with bloom

npx shadcn@latest add https://uicapsule.com/r/wireframe-orb.json
Spinner Pixel Grid block

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
Resizable Sidebar block

A shadcn-inspired application sidebar with a draggable resize handle.

npx shadcn@latest add https://uicapsule.com/r/sidebar.json
Voice Dictator block

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
Emerald block

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 block

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
Filter Bar block

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 Grid block

Tooltip with a direction aware pixel grid background animation

npx shadcn@latest add https://uicapsule.com/r/tooltip-grid.json
3D Carousel block

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
Snail Timer block

Fastest countdown ever

npx shadcn@latest add https://uicapsule.com/r/snail-timer.json
ASCII Renderer block

Take any 3D model and render it as ASCII art

npx shadcn@latest add https://uicapsule.com/r/ascii-renderer.json
Background Pixel Stars block

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
Background Shapes block

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
Scrollable Card Stack block

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 Grid block

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 Volume Slider block

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
Light/Dark Toggle block

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
Like Button block

Twitter style like button

npx shadcn@latest add https://uicapsule.com/r/like-button.json
Particle Orb block

Noise-displaced particle sphere with additive-blended dots and custom vertex shader

npx shadcn@latest add https://uicapsule.com/r/particle-orb.json
Radial Slider block

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