---
name: "@uicapsule"
slug: "uicapsule"
description: "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."
category: "Personal/portfolio registry"
tags: ["3d", "aesthetic", "ai", "audio", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "editor", "forms", "glassmorphism", "loaders", "maps", "marketing", "media", "mobile", "navigation", "overlays", "retro", "tables", "theming"]
framework: "react"
license: "MIT"
author: "kyh"
website: "https://uicapsule.com"
github: "https://github.com/kyh/uicapsule"
registry: "https://uicapsule.com/r/registry.json"
pro: false
pro_url: null
github_stars: 32
component_count: 52
generated_at: "2026-10-27T06:34:08.542Z"
---

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

## Links

- Website: https://uicapsule.com
- GitHub: https://github.com/kyh/uicapsule
- Registry JSON: https://uicapsule.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/uicapsule
- This file: https://sh4dcn.netlify.app/md/uicapsule.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/kyh/uicapsule.git
# fetch the raw registry index
curl -s https://uicapsule.com/r/registry.json
```

## Components (52)

| name | type | description | install |
| --- | --- | --- | --- |
| voxel-landing | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:block | A springy Dynamic Island interaction with ring and timer states. | `npx shadcn@latest add https://uicapsule.com/r/dynamic-island.json` |
| geometric-orb | registry: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 | registry: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 | registry: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 | registry: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` |
| sidebar | registry:block | A shadcn-inspired application sidebar with a draggable resize handle. | `npx shadcn@latest add https://uicapsule.com/r/sidebar.json` |
| voice-dictator | registry: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-template | registry: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 | registry: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 | registry: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 | registry:block | Tooltip with a direction aware pixel grid background animation | `npx shadcn@latest add https://uicapsule.com/r/tooltip-grid.json` |
| carousel-3d | registry: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 | registry:block | Fastest countdown ever | `npx shadcn@latest add https://uicapsule.com/r/snail-timer.json` |
| ascii-renderer | registry: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 | registry: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 | registry: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` |
| card-stack | registry: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 | registry: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 | registry: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 | registry: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 | registry:block | Twitter style like button | `npx shadcn@latest add https://uicapsule.com/r/like-button.json` |
| particle-orb | registry: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 | registry: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` |

## For AI agents

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