Changelog

Components 31

Buttons & Actions

Invite Code Reveal

Inputs & Forms

Stretch Pill SliderNotch DateTime Picker

Toggles & Selection

Merge Filter Chips

Text Animations

Misprint Text

Cards & Layout

Foil Ticket ReelTrip Card RolodexBurst Pack Opening

Loaders, AI & Widgets

Voice Note PillPixel Build Progress

Marketing Sections & Logo Clouds

Dot Burst Feature TabsCoin Crew HeroInk Bloom FooterLayered Plan CardGlass Tier PricingBlueprint Plan DuoStep Demo ShowcaseDot Screen FooterPass Invite Hero

Orbits, Beams & Illustrations

Ink Walker CardLine Art Street

Studio Pieces & Glyph Art

Retro Desktop HeroPane Stack PortfolioCrumple NotesClothesline CardsPixel Bloom SelectPalette Dither FieldASCII Shark SeaGlyph Map CardFlow Line Chat CardMultiplayer Canvas Card

Added

• Studio Pieces & Glyph Art, a new category built on a shared glyph engine: per-cell image sampling, glyph sprite atlases, Bayer dithering, named palettes and one canvas loop that pauses offscreen and holds still under reduced motion.
• Glyph Map Card: an image redrawn as a living glyph map that scrambles under the pointer, with a serif title, watchers and an expanded view.
• ASCII Shark Sea: five kinds of shark seen from above, drawn as shaded blocks and glyphs, hunting fish schools that scatter, mill into bait balls and regroup while wakes light the water; click to drop bait.
• Palette Dither Field: layered waves Bayer-dithered to any 2–8 color palette, with pointer ripples and dithered palette crossfades.
• Clothesline Cards: profile cards swaying on a string that you can brush, pull and flip, with a holographic shimmer.
• Pixel Bloom Select: a select whose options bloom out of dithered pixels in each option's palette and fall away when it closes.
• Pane Stack Portfolio: project panes receding in a diagonal row, with filters, an index grid and a detail view the front pane morphs into.
• Retro Desktop Hero: a tiny retro desktop with draggable pixel icons, windows you can move, minimize and maximize, a hello window and a taskbar.
• Flow Line Chat Card and Multiplayer Canvas Card: a pair of animated feature cards for a chat and a collaboration product, sharing a FlowLines background of flowing, pointer-bending lines.
• Crumple Notes: paper notes that crumple into WebGL paper balls and unfold again, keeping faint creases.
• Merge Filter Chips: filter chips that melt into a results pill through a gooey neck and pinch back out, while the count rolls.
• Misprint Text: a paragraph that prints like a misregistered press, with shattering words, peeling stickers, plate offsets and band tears, then reprints on demand.
• Dot Burst Feature Tabs: an autoplaying feature list beside a color stage where dot clusters burst and regrow and a product card blurs from one feature to the next.
• Foil Ticket Reel: holographic event tickets that shuffle through a reel on a grainy grid; tilt them and tear off the stub to get stamped in.
• Coin Crew Hero: a hero card with a parade of coin characters that blink, follow your pointer, flip when poked and tumble when flung.
• Ink Bloom Footer: a footer on warm paper where dragging drops watercolor ink that blooms, mixes and dries behind a giant wordmark.
• Burst Pack Opening: a foil card pack you tear open in a burst of pixel rays, cards and confetti.
• Pixel Build Progress: pixel workers build a brick wall across a pill-shaped window as progress fills, on shared pixel sprite sheets.
• Layered Plan Card, Glass Tier Pricing and Blueprint Plan Duo: three pricing sections, a plan card on a colored base, frosted tiers with a gliding spotlight and two plans in a mono blueprint style, sharing pricing helpers and a billing toggle.
• Notch DateTime Picker: two dark pills joined by a stem to a popover that morphs between a calendar and time slots.
• Line Art Street and Ink Walker Card: a line-art street that runs from day to night and reacts to the pointer, and a card where one ink figure walks across a strip of paper, on a shared line-art toolkit.
• Dot Screen Footer: a footer whose giant wordmark is a halftone screen that parts around the pointer.
• Stretch Pill Slider: a dark pill stretches across the track as you drag and carries its own rolling label.
• Voice Note Pill: a mic button that grows into a recorder with a live waveform, review, playback and send.
• Invite Code Reveal and Pass Invite Hero: a ready pill that morphs into an invite code with a copy button, and a hero where a holographic pass floats in, spins and reveals a code.
• Step Demo Showcase: a step list that drives small live product scenes in a square card beside it.
• Trip Card Rolodex: a stack of trip cards that rolls one expanded card between collapsed one-line rows.
• Dark mode for the site: a Light, Dark and System switch in the header, applied before the first paint so pages never flash the wrong theme. Every component up to #228 was checked in dark.
• Theme tokens --success-foreground, for text on solid success fills, plus --link and --destructive-text for terracotta and red text. Installed components map the last two with a fallback to --primary and --destructive, so your theme looks the same unless you set them.
• A seed prop on Particle Field, Shimmering Dots, ASCII Aquarium Background and ASCII Shark Sea: the same seed and size give the same opening scene on every load, and the reduced-motion still frame matches.
• Component pages preview a demo in the other theme or open it alone in a new tab, icon-only controls on the site have tooltips, and docs pages get a section select where the table of contents doesn't fit.

Changed

• The project is now hantui (formerly alibar/ui), at hantui.dev.
• The site takes on the hantui look: warm stone neutrals, terracotta actions, Source Sans 3, Playfair Display and Fira Code.
• Accent colors in components follow your theme's primary color instead of a fixed blue.
• ASCII Koi Pond is redrawn from above with shaded, patterned bodies, translucent fins, soft edges and wakes that light the water. Its props are unchanged.
• ASCII Aquarium Background lights its creatures from the top left, leaves glowing wakes behind them and has fish dart away from the cursor.
• Dither Wildlife now draws its horses, flock and grove as shaded, dithered ASCII with dust and trails; look="dither" keeps the pixel look.
• The New badge moves to 0.4.0 components; components from 0.3.0 no longer show it.
• Search opens instantly, groups results into Components, Categories and Docs, and shows each component's category.
• Sparkle and robot icons give way to ones that say what they mean, in Wallet Agent Chat, Staking Card, Market Card, Banner Stack and the demos.
• Code blocks have a dark theme in dark mode and line numbers; docs prose is 16px with a 72-character measure; site controls get 44px touch targets on touch screens.

Fixed

• Canvases that draw with theme colors (Dot Grid, Particle Field, Shimmering Dots, Dotted Globe, Ring Reel, Formation Gallery, Dissolve Transition, Dot Burst Feature Tabs and the ASCII scenes) repaint when the theme switches instead of keeping the old colors.
• Text that fell short of 4.5:1 in dark or light now passes: success states and Swipeable List Row actions, small terracotta and red text in 24 components, the Center Pill Nav button, Tumbling Tags tones, Market Leaderboard ranks, the ember Glyph Map Card, the Living Book demo, the demo state switcher, Candlestick Chart and Staking Card tabs, Agent Progress Steps, Foil Ticket Reel's serial, Retro Desktop Hero, Crumple Notes and the site chrome.
• Stacked Cards and Swipe Card Stack demos use theme tokens instead of hardcoded white cards.
• Scroll-Aware Nav, Ticker Header and Island Nav no longer change height as the page scrolls, which made them flicker just past their threshold and made the scroll position jump.
• Retro Desktop Hero: dropped icons and windows land where they were let go instead of flashing back first, and an icon dropped on another slides back.
• Reduced motion: Voice Orb, ASCII Aquarium Background, Flow Line Chat Card and Multiplayer Canvas Card hold still, and Shimmering Dots' still frame keeps a few dots lit.
• Dual Logo Marquee, Testimonial Wall, Live Price Ticker and Foil Card Drift pause offscreen, and Voice Orb and Dot Burst Feature Tabs no longer tick a second loop offscreen.
• Visible focus rings on Sliding Tabs, Foil Ticket Reel's stub and Token Amount Input; covered Retro Desktop icons leave the tab order.
• On phones, Token Amount Input's figure stays readable, Coin Crew Hero wraps its copy before the coins, and Floating Screen's demo shows the phone.
• Position lines, pagination dots, ruler ticks, contact shadows and selection boxes in six components animate with transforms instead of layout properties.
• Links and buttons in 11 navbars, small icon buttons in 20 components and 36px buttons in 12 more components now catch clicks at 40px without changing how they look.
• Search closes reliably and returns focus to its button; demos no longer invent component counts or a release.

Components 61

Navbars & Headers

Island NavFloat BarSplit IslandsDuo Panel MenuCatalog MenuTicker HeaderCenter Pill NavMorphing Dropdown NavScroll-Aware NavSheet NavNotch NavGooey NavLiquid Tab NavOverlay Menu NavTakeover NavGather Nav

Marketing Sections & Logo Clouds

Icon HeadlineTumbling Tags

Shaders & Backgrounds

ASCII Koi PondPixel MosaicPixel LandscapeDither Wildlife

3D Galleries & Carousels

Sleeve RailCurved WallFormation GalleryDarkroom StreamRing ReelHelix GalleryDepth RailPage Flip BookInfinite Canvas GalleryScattered PrintsShelf Gallery

Physical Surfaces & Navigation

Card WalletLens Tab BarFoil Card Drift

Prediction Markets

Market CardTrade TicketProbability ChartOutcome LadderOrder BookMobile Trade BarPositions PanelMarket LeaderboardResolution & Rules CardMarket Activity & Discussion

Usage, Billing & Agent Commerce

Spend MeterCredit TrendCredit BreakdownPrinted ReceiptWallet Agent Chat

HTML in Canvas

Ripple FormPeel CardLiving BookDissolve TransitionCRT TerminalDisintegrate DeleteMagnifier LensFloating ScreenCloth BannerLiquid Glass Overlay

Added

• Five categories: 3D Galleries & Carousels, Physical Surfaces & Navigation, Prediction Markets, Usage, Billing & Agent Commerce, and HTML in Canvas, each with its own sidebar group.
• A shared gallery engine: a WebGL2 renderer for textured cards (rounded corners, soft shadows, edge fades and floor reflections in one instanced draw), one input hook for drag, wheel, keyboard and autoplay, and a hidden DOM list that keeps every gallery keyboard and screen-reader operable.
• 24 original generated placeholder images for gallery demos.
• Prediction market foundations (integer basis-point and cent math, formatting, a hydration-safe clock) and two demo pages built from the ten market components: a full market page at /demos/prediction-market and a filterable feed at /demos/prediction-feed. All market data is simulated.
• Usage and billing components built on integer minor-unit money (USD and IDR) and integer credits: Spend Meter, Credit Trend, Credit Breakdown, Printed Receipt and Wallet Agent Chat. Totals roll instead of swapping, every category color has a label, and the wallet agent is scripted and never signs anything without an explicit approve click.
• HTML in Canvas: ten components that draw live DOM through the experimental WICG API (Ripple Form, Dissolve Transition, CRT Terminal, Disintegrate Delete, Magnifier Lens, Cloth Banner, Peel Card, Liquid Glass Overlay, Floating Screen and Living Book), all through one adapter that keeps clicks, focus and selection on the drawn pixels, each with a CSS fallback for every other browser, and a demo page at /demos/html-in-canvas.
• ASCII Koi Pond in Shaders & Backgrounds: glyph-cell koi that swim, leave wakes, come to look at the cursor and race for food you drop.
• Shelf Gallery, Foil Card Drift, Icon Headline, Pixel Mosaic and Tumbling Tags: covers on floating shelves, foil cards drifting in 3D, a headline with inline app icons, a living pixel band and a pile of tumbling product blocks.
• Pixel Landscape: a dot-mosaic mountain range the pointer relights like a moving sun.
• Dither Wildlife: galloping horses, a wheeling flock or a swaying grove, drawn in dithered gray pixels.
• Navbars & Headers: sixteen site headers (Island Nav, Float Bar, Split Islands, Duo Panel Menu, Catalog Menu, Ticker Header, Center Pill Nav, Morphing Dropdown Nav, Scroll-Aware Nav, Sheet Nav, Notch Nav, Gooey Nav, Liquid Tab Nav, Overlay Menu Nav, Takeover Nav and Gather Nav) sharing menu, scroll and mobile-menu helpers, all keyboard operable and sized by container queries.

Changed

• The New badge moves to 0.3.0 components; components from 0.2.0 no longer show it.

Components 51

Web3: Wallet & Identity

Connect Wallet ButtonWallet Selector ModalAddress PillNetwork SwitcherAccount DropdownToken Balance ListTransaction ToastTransaction HistoryNFT CardTransaction Review Modal

Web3: DeFi & Trading

Token Swap WidgetToken Selector ModalCross-chain BridgeSlippage SettingsToken Amount InputCandlestick ChartLive Price TickerStaking CardLiquidity Pool CardGas Fee Selector

Marketing Sections & Logo Clouds

Logo Grid Hover RevealDual Logo MarqueeLogo Cloud Blur CycleSpotlight Logo GridTestimonial WallFeature Bento SectionPricing SectionStats SectionFAQ SectionCTA with Border Beam

Shaders & Backgrounds

Cloud ShaderMesh GradientGrain GradientDithered WavesLiquid RippleDot Matrix FieldLight RaysGPU AuroraGlow OrbPixel Reveal ImageASCII Aquarium Background

Orbits, Beams & Illustrations

Orbiting CirclesIntegration HubAnimated BeamRadar SweepDotted GlobeRipple RingsIcon CloudBorder BeamNode NetworkAnimated Grid Pattern

Added

• Five categories: Web3: Wallet & Identity, Web3: DeFi & Trading, Marketing Sections & Logo Clouds, Shaders & Backgrounds, and Orbits, Beams & Illustrations.
• useShaderCanvas: renders a fragment shader with WebGL2 (no three.js), caps the pixel ratio, pauses offscreen and in hidden tabs, draws one static frame under reduced motion and recovers from context loss.
• Shared GLSL snippets (hash, simplex noise, fBm, Bayer dither), a hex-to-vec3 color helper, and web3 formatting built on bigint math and viem.
• A version badge in the navbar and this changelog.
• Landing page: a What's new section with live showcases (Token Swap Widget, Orbiting Circles, ASCII Aquarium Background), Logo Grid Hover Reveal under the hero and an optional Cloud Shader hero background.
• useShaderCanvas also takes texture uniforms (images, canvases, video) and per-frame uniform functions, and exposes its clock. On software WebGL (no GPU), shaders use their CSS fallback instead of blocking the main thread.

Changed

• The New badge marks every component added in the latest release, instead of a hand-picked list. Components from 0.1.0 no longer show it.
• Registry items can ship the new shared lib files (color, shader and web3 helpers) next to a component, just like lib/motion.ts.

Components 100

Buttons & Actions

Spring Press ButtonMagnetic ButtonShimmer ButtonStateful ButtonHold to ConfirmSlide to ConfirmLike ButtonCopy ButtonTactile 3D ButtonAction Swap Button

Inputs & Forms

Money InputOTP InputFloating Label InputPassword InputSearch InputTag InputQuantity StepperRange SliderPhone InputFile Upload Dropzone

Toggles & Selection

Spring SwitchAnimated CheckboxRadio Card GroupSegmented ControlSliding TabsExpandable TabsTheme ToggleStar RatingColor PickerAnimated Select

Overlays & Feedback

Morphing ModalBottom SheetDrawerOrigin-aware DropdownButton-to-Menu MorphTooltipToast StackNotification BadgeError Shake FieldBanner Stack

Navigation

DockCommand PaletteDynamic IslandExpandable Action BarRadial MenuHover Navigation IndicatorCollapsible SidebarAnimated BreadcrumbAnimated PaginationProximity Navigation

Text Animations

Text ScrambleTypewriterShimmer TextBlur Reveal TextFlip TextWord RotatorLetter CascadeStreaming TextAnnotated TextGradient Text

Numbers & Data Display

Number TickerRolling DigitsSparklineAnimated Bar ChartArea ChartDonut ChartProgress RingActivity RingsContribution HeatmapStat Card

Cards & Layout

Tilt CardStacked CardsSwipe Card StackBouncy AccordionExpandable CardFolder CardFlip CardSpotlight CardBento GridSortable List

Media, Scroll & Backgrounds

Draggable MarqueeLogo CarouselImage LightboxHover Image RevealParallax SliderScroll Reveal SectionInteractive Dot GridLight AuroraParticle FieldShimmering Grid Dots

Loaders, AI & Widgets

Skeleton to ContentSpinner to CheckMatrix Dot LoaderBars LoaderThinking StatesAI Prompt InputChat BubblesVoice OrbAgent Progress StepsSwipeable List Row

Added

• 100 components: Buttons & Actions, Inputs & Forms, Toggles & Selection, Overlays & Feedback, Navigation, Text Animations, Numbers & Data Display, Cards & Layout, Media, Scroll & Backgrounds, and Loaders, AI & Widgets.
• A shadcn registry that installs each component with its dependencies, helpers, design tokens and sibling components.
• A docs site with live previews, variants, code, install commands, props tables and accessibility notes for every component.
• Shared motion tokens (durations, easings, springs) and design tokens for color, radius and shadows.