# Assembli > A library of React and Tailwind components. Preview them, copy the code, or install with the shadcn CLI. Built for humans and coding agents. Every page has a Markdown version: append `.md` to its URL or send `Accept: text/markdown`. Components are React + Tailwind CSS v4 + TypeScript, styled with shadcn/ui theme tokens, and install with the shadcn CLI from the `@assembli` registry. ## Access - [Agent guide](https://www.assembli.design/agents.md): setup for Claude Code, Codex, Cursor and other MCP clients; MCP server, JSON API, shadcn registry and Markdown endpoints - [Skill](https://www.assembli.design/skill.md): SKILL.md for Claude Code; install with `mkdir -p ~/.claude/skills/assembli && curl -fsSL https://www.assembli.design/skill.md -o ~/.claude/skills/assembli/SKILL.md` - [MCP server](https://www.assembli.design/mcp): Streamable HTTP with OAuth sign-in; tools search_components, get_component, list_categories. https://www.assembli.design/api/mcp is the same server without sign-in (API key or device login via connect_account, finish_connect) - Source code needs a subscription. Over MCP, signing in is enough. Otherwise send `Authorization: Bearer `; get a key with device login: POST https://www.assembli.design/api/agent/login, show the user the returned link, then poll https://www.assembli.design/api/agent/token (details in the agent guide). Keys can also be created at https://www.assembli.design/account - [Component search API](https://www.assembli.design/api/components): JSON; supports ?q=, ?category=, ?subcategory=, ?tag=, ?limit= - [shadcn registry index](https://www.assembli.design/r/registry.json): registry items at /r/.json ## Pages: Landing pages ### SaaS > Software products: CRMs, developer tools, dashboards and B2B platforms. - [Switchyard — AI Workflow Landing](https://www.assembli.design/components/switchyard-landing.md): Dark editorial SaaS template for a fictional AI workflow platform, in warm graphite and signal amber: a stacked deck of live account records, a framed grid of stats and logos, a scroll-filled track past five working panels (call lanes, signal switching, a tone-shifting draft, an approval queue, a growth chart), a quote-led marquee, a prompt box, plan comparison, FAQ and CTA. - [Cairn — AI Visibility Landing](https://www.assembli.design/components/cairn-landing.md): AI-search visibility SaaS template in porcelain, ultramarine and marigold: a headline tile that flips through answer engines, a live prompt box over a share-of-voice dashboard, a five-card bento, chats that replay on scroll, phone screens, stories, pricing, FAQ and a closing CTA. - [Headwater — Data Answers Landing](https://www.assembli.design/components/headwater-landing.md): Ask-your-data SaaS template built on a river: sources are tributaries that keep their colour in the main stream, so the river is also the answer's streamgraph. Questions re-form the hero watershed, a hover-to-trace lineage explorer, a long-profile how-it-works, an Ask chart, flood alerts on a staff gauge, outcomes, stories, pricing and an FAQ. - [Kiln — Outbound Sales Landing](https://www.assembli.design/components/kiln-landing.md): Outbound sales template built around a kiln: a soot-dark hero with an ember glow that follows the cursor, a live intent dashboard with a scrubbable chart, four glaze-coloured stage cards that stack while a thermometer climbs, a typing email composer, an editable sequence, a case-study chart, pricing and auto-scrolling reviews. - [Porchlight — Hiring & Onboarding Landing](https://www.assembli.design/components/porchlight-landing.md): Warm hiring and onboarding template built on 'leave the light on': a lamp you can switch off, lamplight behind key words, a tilting hiring dashboard with stage filters and bulk actions, a live activity log, tickable first-week plans, CV screening that lights matching lines, pricing and a night-sky CTA. - [Ashlar — Block Automation Landing](https://www.assembli.design/components/ashlar-landing.md): Back-office automation template drawn on an architect's sheet: ruled rails and numbered section tags, an isometric hero block that comes apart near the cursor, a scroll-lit four-layer stack, isometric feature art, a dark metrics band with a 3D bar chart, extruded pricing and a grid you can stack blocks on. - [Marshal — Rail Yard Automation Landing](https://www.assembli.design/components/marshal-landing.md): AI-operations template drawn as an isometric rail yard: a live hero where cargo rolls into a signal box and is switched onto the line for each tool, standing UI panels, five live reliability drawings, use-case yards, couplings around a glass signal box, fares, FAQ and a semaphore CTA. - [Isoline — Vector Database Landing](https://www.assembli.design/components/isoline-landing.md): Developer-platform template for a vector database, printed as a survey map of meaning. A contour-map hero where a dropped query pin finds its nearest records, tabbed install snippets with live output, a cost estimator with a log-scale chart, Atlas as two routes to one answer, a console with metrics, record browser and namespaces, architecture steps, uptime and a map-collar footer. - [Alder — Agentic CRM Ledger Landing](https://www.assembli.design/components/alder-landing.md): Landing template for a fictional agentic CRM, set as a printed ledger on warm paper. People write in black serif; the agent edits in red mono ink: a live pipeline it strikes through and rewrites, a scroll-driven night log, redlines you accept, an autonomy setting, footnoted figures, a menu-style price list and a signature-line sign-up. - [Orrery — SaaS Landing Template](https://www.assembli.design/components/orrery-landing.md): Reusable SaaS landing template for a fictional orchestration platform. A draggable 3D orrery hero that tilts top-down as you scroll, a scroll-pinned exploded layer stack, a spotlight bento with a dot globe and live micro-demos, a code runner, warp-tunnel CTA and more. Pass content, accent colors and section order as props. ### AI products > Model-powered tools: generators, assistants, copilots and agents. - [Kestrel — AI Growth Agent Landing Page](https://www.assembli.design/components/kestrel-landing.md): A light landing page for an AI growth agent, illustrated with gouache landscapes painted in SVG: a coast hero with live channel pins and a typing composer, scroll-lit copy beside four product views, an overnight board with a replay scrubber, a connector flow, team tabs, customer postcards, pricing and a harbour CTA. - [Timbre — Voice AI Assistant Landing Page](https://www.assembli.design/components/timbre-landing.md): A pitch-black landing page for a voice AI assistant: decoding pixel keywords, a live spectrum analyser hero behind a working composer with a listening mode, timecode rulers with a scroll playhead, radial voice orbs, a self-filling meeting notes panel, a two-card bento, a usage slider that picks your plan, a two-column FAQ and a hold-to-talk call to action. - [Vesper — AI Agent Cloud Landing Page](https://www.assembli.design/components/vesper-landing.md): A dusk-gradient landing page for an AI agent cloud in a blueprint frame: a point-cloud crystal that leans toward the cursor, a rippling halftone arc, a rolling logo wall, a scroll-lit quote, a live terminal, a feature bento with a fork-and-merge race, a use-case carousel, a scrubbable quota chart, a story pager, an integrations hub and a sunrise call to action. - [Marigold — AI Automation SaaS Landing Page](https://www.assembli.design/components/marigold-landing.md): A warm marigold landing page for an AI back-office automation platform: a grid hero with travelling light pulses, a live metrics bento with a gliding bar chart and spinning globe, an auto-advancing industry accordion that re-plots a dashboard, animated how-it-works cards, a pricing switch, a story carousel and a self-shuffling agent roster. - [Facelet — AI Site Builder Landing](https://www.assembli.design/components/facelet-landing.md): Toy-plastic landing page for a fictional AI website builder, built around a working Rubik's cube in CSS 3D that turns and solves itself as a log ticks through six build stages. Plus a product board, a host/export panel that turns like a cube face, a self-folding cube net, a 20-move build log, a leaderboard and scrollable demo sites. - [Calyx — AI Platform Landing](https://www.assembli.design/components/calyx-landing.md): AI platform template printed as a botanical field guide: a wireframe lotus hero that blooms and turns, four live product panels (policy toggles, one answer in five channels, cited retrieval, an eval chart), roots that grow into data sources, a variant tree you prune with a slider, growth rings, herbarium-sheet testimonials, usage pricing and a seed-packet CTA. - [Borea — AI Agent Platform Landing](https://www.assembli.design/components/borea-landing.md): AI-agent platform template lit like an aurora: violet and mint streaks over a live prompt box and app, a bento, a chat workspace that replays threads, crews, stacked feature cards with a working command palette, a four-tab product tour, an integrations wall over a glass sphere, stories, steps, FAQ and an aurora footer. - [Stratum — AI Context Layer Landing](https://www.assembli.design/components/stratum-landing.md): AI context-layer template told as geological strata. An isometric core-sample hero with a scrubbable time ruler, chamfered problem cards, a stale snapshot beside a live record that rewrites itself, a cited answer with source popovers, a connector field, a compounding-value chart, a scope/monitor/audit security console and a use-case carousel. - [Parhelia — AI Agent Platform Landing](https://www.assembli.design/components/parhelia-landing.md): Enterprise AI-agent platform template built from atmospheric optics. Light pillars and a rising sun with its halo and sun dogs over a live ops dashboard, a scroll-lit manifesto, a bento with a prism and draggable dials, a sticky platform tour, solution tabs, stacked steps, 3D security plates, results carousel, pricing, FAQ and a horizon wordmark. - [Bloomprint — AI Image Darkroom Landing](https://www.assembli.design/components/bloomprint-landing.md): Landing template for a fictional AI image generator, set as a photographic darkroom. A wheel of prints turns above a light-leak prompt box that develops new ones, then expose-develop-fix steps, a bento with a compare slider and film looks, a scroll-lit manifesto, a safelight pricing room and prints drying on a line. ### Product launches > Hardware, gadgets, apps and consumer products with a launch story. - [Tine — Pocket Synthesizer Launch](https://www.assembli.design/components/tine-landing.md): Product launch page for a fictional pocket synth. The hero device is a working instrument: a Web Audio step sequencer with draggable knobs and a live scope. Then a scroll-driven exploded view, four sound engines drawn on canvas, colour swatches with a circular wipe, playable artist patterns, odometer specs, pre-order, FAQ and a strummable footer logo. ### Portfolios > Personal sites for designers, developers, photographers and other creatives. - [Brandt — Split-Screen Product Designer Portfolio](https://www.assembli.design/components/brandt-folio.md): A cool cobalt split-screen portfolio: a sticky intro with a live clock, a headline whose scrambled word tidies up on hover and a scroll-following work index, beside live case studies (an onboarding flow that types its own code, a money app, a sales dashboard, fitness screens, a launch site), a cursor pill, a floating nav and a contact footer. - [Abara — Booking-Calendar Brand Designer Portfolio](https://www.assembli.design/components/abara-folio.md): A bright, outlined brand designer portfolio: a bubblegum hero with a live clock beside a booking calendar whose open months you can pick, project cards that tilt with a cursor pill, priced services you add to the brief, a process strip, an about card, tilted kind words and a brief form that remembers your picks. - [Arvidsson — Bento Designer Portfolio](https://www.assembli.design/components/arvidsson-folio.md): A dark bento-grid portfolio for a product designer: a portrait hero with a working light/dark toggle, count-up stats, a featured project with a tilted live dashboard you can page through, a drifting tool marquee, an auto-playing testimonial carousel, a work timeline, services, a turntable card whose record spins as it plays through a queue and a reach-out card with copy-to-clipboard email. - [Marlow — Minimal Designer Portfolio](https://www.assembli.design/components/marlow-folio.md): A quiet one-column designer portfolio: a floating icon rail that tracks the section in view (a bottom dock on phones) with a ⌘K jump palette, a hero with a live local-time city chip, copy-to-clipboard email and an unfolding bio, a featured side project drawn as a tiny live app, an expandable writing list, a tool stack with real app marks, and newsletter and contact forms with sent states. - [Halden — Product Designer Portfolio](https://www.assembli.design/components/halden-folio.md): A light product designer portfolio lit by the designer's own sky: the pastel aura and project backdrops follow the time of day in Copenhagen, with a sun dial that scrubs the light. Live UI mockups play on hover in a grid or index view, plus three playable lab interactions, an experience list, a contact card with bookable slots and a floating dock. - [Vandermeer — Design Engineer Portfolio](https://www.assembli.design/components/vandermeer-folio.md): A dark design engineer portfolio laid out like a desk: a cobalt cutting-mat hero with a die-cut sticker name, highlighted intro, tilted pill links, a studio photo, grid-paper notes and a playable mixtape, then scribbled client logos, photo case studies with a cursor pill, parallax UI details around a phone and a code-syntax sign-off. - [Stickwork — Brand Designer Portfolio](https://www.assembli.design/components/stickwork-folio.md): A brand designer's portfolio printed as a die-cut sticker sheet on a cutting mat: a hero whose stickers peel off and drag, leaving their kiss-cut outlines behind, packing-tape marquees, project cards that show each identity as its own sticker sheet, service cards you peel back for pricing and a laptop lid of stickers. - [Concertina — Folding Book Portfolio](https://www.assembli.design/components/concertina-folio.md): A sound designer's portfolio printed as a concertina book: scrolling unfolds the panels in 3D one spread at a time, a top-down fold diagram tracks your place, and at the end the book closes onto a contact back cover. - [Palmline — Mobile App Designer Portfolio](https://www.assembli.design/components/palmline-folio.md): A portfolio for an independent app designer, built on 'made for the hand it's held in': a reach inspector that overlays thumb zones on live phone screens and checks the primary action, project stages with working app UIs, a settings-style CV, service specimens, testimonials as a Messages thread and a slide-to-book call to action. - [Artboard — Multiplayer Canvas Portfolio](https://www.assembli.design/components/artboard-folio.md): A designer portfolio built as a live design file: a ruler that measures whatever you hover, a name layer with working resize handles that drive a variable font, roaming collaborator cursors you can follow, stacked case-file folders, a version-history career log and a Truchet-tile playground. ### Agencies & studios > Design, development and marketing agencies, studios and consultancies. - [Retort — Frontier Science Studio Landing Page](https://www.assembli.design/components/retort-landing.md): An airy landing page for a brand studio serving frontier science companies. A glass DNA double helix with fluorescent liquid flowing through it is raymarched live in WebGL with real refraction and choreographed by scroll: an arch under the hero, a column beside a word-by-word statement, a beam behind frosted client slides, a pinned four-stage method, then a plasmid ring around the CTA. - [Updraft — AI Operations Studio Landing Page](https://www.assembli.design/components/updraft-landing.md): A photographic sky landing page for an AI operations consultancy: a lavender cloud-sea hero with a draggable 3D ring of live widget cards, a logo marquee, a statement that fills in as you scroll, a stat bento with live office clocks, service cards that expand into photos, animated expertise mockups, a pricing toggle, a testimonial rail, field notes and a wind-farm call to action. - [Halyard — Recruitment Agency Landing Page](https://www.assembli.design/components/halyard-landing.md): A departures-board landing page for a recruitment agency: a live split-flap roles board with desk filters and a colleague's cursor, a diagonal employer/candidate split, boarding-pass marquees, sector desks, a scroll-driven week, draggable role cards, flap counters, a tile wall that reveals the team, a page-turning salary guide, FAQs and a flap wordmark footer. - [Wren — Retention Consultancy Landing Page](https://www.assembli.design/components/wren-landing.md): A soft, photographic landing page for a subscription-retention consultancy: a painterly flower hero with a rotating case readout, a scroll-lit statement, a before/after reveal that splits its headline, a switchable results chart, stacking service cards, a self-advancing phase accordion, a team roster, a dark plan picker, tabbed FAQs and a working contact form. - [Heddle — AI Automation Studio Landing](https://www.assembli.design/components/heddle-landing.md): AI-automation studio template cut like a denim mill: threads run through the hero CTA and are woven into selvedge cloth as you scroll, punch-card section bars, a live Loom dashboard, an agent you can thread, hanging-thread stats, auto-advancing process tabs, woven swatch covers, pricing, an approvals phone and an FAQ. - [Nightjar — AI Automation Studio Landing](https://www.assembli.design/components/nightjar-landing.md): Agency landing template told as one night shift. A 24-hour shift dial hero, a drag-to-spin client cylinder, a sunrise manifesto, a zoom through the headline into a live night log, expanding service panels with working mocks, a scroll-drawn process, cursor-lit case studies, a printed morning report, orbiting agents, pricing with a payback slider and a moon CTA. - [Scorewell — Performance Marketing Studio Landing](https://www.assembli.design/components/scorewell-landing.md): Agency landing template built around a scoreboard. The hero is a live budget router that flips between spray-and-pray and ROAS-weighted spend, then a scroll-lit manifesto, service dashboards (funnel, budget moves, creative test, incrementality chart), a receipts bento, sticky case-study stack, a weekly-plays carousel, a home-vs-away comparison and a marquee CTA. ### Health & wellness > Clinics, dentists, therapists, gyms and wellness brands. - [Ninety — Blood Sugar Awareness Landing](https://www.assembli.design/components/ninety-landing.md): Blood-sugar screening template built on the A1c's 90-day memory: a raymarched frosted sugar crystal with a glowing honey core over a 90-day reading strip, a scroll-drawn decade of silent drift, a red-cell explainer with an A1c converter, a post-meal curve you flatten with four levers, a six-question risk check, a ranges table with unit toggle, testing routes, an FAQ and a closing crystal. ### Finance > Fintech, banking, accounting, insurance and investing. - [Quarter — Business Account Landing Page](https://www.assembli.design/components/quarter-landing.md): A bright fintech landing page built on the slice: incoming payments split into four coins that fly to their pots over a turning ring, a pinned track of line-art cards that lean as you scroll, a bento with a pickable split and a self-screening transfer, Quarter/Half/Whole pricing with rolling digits, a story deck you can throw and a ring call to action. - [Tilly — Everyday Banking Landing Page](https://www.assembli.design/components/tilly-landing.md): A graphite fintech landing page with a lime highlighter and a receipt motif: a dashboard that tilts flat on scroll, a live feed that translates bank-speak, a receipt that prints, slide-to-send, draggable envelope limits, reviews on receipts, a card you can freeze, perforated pricing and a card you can flip. - [Cheeks — Meme Coin Landing](https://www.assembli.design/components/cheeks-landing.md): Meme coin template starring Hamlet, a raymarched vinyl-toy hamster whose eyes follow the cursor. Click to feed him coins until his cheeks burst, then try six skins. Below: an ID card, a fanned deck of trading cards, a working swap widget, a tokenomics donut, a burrow roadmap drawn as you scroll, a meme maker that exports PNGs and a chat FAQ. - [Tare — Month-End Close Landing](https://www.assembli.design/components/tare-landing.md): Month-end close template on cool ledger paper: bank lines ride lanes into a glazed cobalt key you press to close the month, a statement that inks itself beside a stat ledger, one app window with four working views, the close hour by hour, a matching board with drawn connectors, a connector keyboard, a verifiable audit trail, pricing and an FAQ. - [Sextant — Insurance AI Landing](https://www.assembli.design/components/sextant-landing.md): Insurance-operations AI template on one field of 70,000 glowing particles that reshapes as you scroll: a tree rising from rippling water, a turning wireframe cube with the wordmark inside, a shield beside a filterable decision ledger, a calm pool of rings behind outcome stats, then the tree again. The pointer parts the particles. Raw WebGL, no three.js. - [Assay — AI Finance Analyst Landing](https://www.assembli.design/components/assay-landing.md): Finance-AI template where every answer comes back hallmarked with its source: brushed-brass ingots, coin-milled buttons, a working finance workspace with an Ask panel, sticky capabilities with live panels, connectors stamped as they pass the seal, dark use cases on a tick ruler, expanding stories, a hoverable growth chart, minted security coins, MCP and API, and an FAQ. - [Obverse — Business Banking Landing](https://www.assembli.design/components/obverse-landing.md): Business-banking template printed like currency: a hero banknote that tilts, shimmers its foil and shows a watermark when held to the light, a working ledger, a security leaflet where a loupe glides to each printing feature as you scroll, a card issuer, a treasury certificate whose coupons clip themselves, a cheque that writes amounts in words, notes in six inks, pricing and an FAQ. ## Assets: Asset packs ### Objet > Sixteen raymarched WebGL objects in cobalt clay, chrome, tangerine lacquer, paper and birch, plus a stage to compose them. - [Objet Pack](https://www.assembli.design/components/objet-pack.md): The whole Objet asset pack in one install: sixteen raymarched WebGL objects in cobalt clay, chrome, tangerine lacquer, paper and birch, plus ObjetStage, ObjetSlab and ObjetPiece for composing them. Pieces pop in on springs, drift with the pointer by depth and float. Every asset also installs on its own, and all of them share one WebGL context. - [Clay Swirl](https://www.assembli.design/components/objet-swirl.md): Objet pack asset: a ball of hammered cobalt clay with nine fat lobes that twist into a crown, raymarched in WebGL with studio lighting on a transparent canvas. The twist slowly tightens and relaxes, it leans toward the cursor and spins when dragged. Colors are props. Zero dependencies; any number share one WebGL context. - [Chrome Spring](https://www.assembli.design/components/objet-spring.md): Objet pack asset: a polished chrome coil spring with ball ends, raymarched in WebGL against a studio of softboxes so the metal reads on light and dark pages. It spins like a barber pole, squashes and boings back on a damped spring every few seconds, and can be dragged. Zero dependencies; any number share one WebGL context. - [Lacquer Lattice](https://www.assembli.design/components/objet-lattice.md): Objet pack asset: a hollow lacquered sphere pierced by forty-four rounded cells, so you see its glossy inside through the holes. Tangerine at the rim fades to butter where it faces you, with clear-coat reflections, raymarched in WebGL on a transparent canvas. The struts slowly breathe and it turns, leans toward the cursor and spins when dragged. Zero dependencies. - [Chrome Jack](https://www.assembli.design/components/objet-jack.md): Objet pack asset: three polished chrome rods crossed on every axis like a jack, with filleted joints and bevelled flat caps, raymarched in WebGL against a studio of softboxes and a cobalt floor bounce. It tumbles slowly on two axes, leans toward the cursor and spins when dragged. Zero dependencies; any number share one WebGL context. - [Paper Burst](https://www.assembli.design/components/objet-burst.md): Objet pack asset: a pleated paper rosette with twenty-eight pointed folds, tangerine at the heart and cream to white at the tips, with light glowing through the thin paper. Raymarched in WebGL on a transparent canvas; the pleats slowly fold open and shut like a fan while it turns, it leans toward the cursor and spins when dragged. Zero dependencies. - [Clay Cog](https://www.assembli.design/components/objet-cog.md): Objet pack asset: a chunky ten-toothed cog in hammered cobalt clay with a raised white collar and a five-point star cut clean through, raymarched in WebGL with soft studio light. It ticks round one tooth at a time with a little overshoot, leans toward the cursor and spins when dragged. Colors are props. Zero dependencies; any number share one WebGL context. - [Chrome Arrow](https://www.assembli.design/components/objet-arrow.md): Objet pack asset: a polished chrome arrow, a rounded shaft with a conical head, raymarched in WebGL against studio softboxes. It turns on its own axis so reflections slide along the metal, and every couple of seconds it pokes forward and recoils on a damped spring, like a cursor tapping. Leans toward the cursor, spins when dragged. Zero dependencies. - [Bubble Orb](https://www.assembli.design/components/objet-bubbles.md): Objet pack asset: a ball of hammered cobalt clay with twenty round sockets, each cradling a glossy amber bubble that pushes out through the surface. Raymarched in WebGL with clear-coat reflections on the bubbles and soft shadow in the sockets. The bubbles swell in a rolling wave as it turns; it leans toward the cursor and spins when dragged. Zero dependencies. - [Lacquer Bundle](https://www.assembli.design/components/objet-bundle.md): Objet pack asset: four glossy lacquered cylinders bundled two by two, tangerine caps facing you and sides fading to butter along their length, raymarched in WebGL with clear-coat reflections. They slide in and out like pistons in a rolling sequence, and the bundle leans toward the cursor and spins when dragged. Colors are props. Zero dependencies. - [Split Orb](https://www.assembli.design/components/objet-split-orb.md): Objet pack asset: a sphere split down the middle, one half glossy amber gold and the other figured birch with flowing grain, raymarched in WebGL with studio light and reflections. Every few seconds the halves ease apart and close again like a locket. It leans toward the cursor and spins when dragged. Colors are props. Zero dependencies; any number share one WebGL context. - [Chrome Coins](https://www.assembli.design/components/objet-coins.md): Objet pack asset: four polished chrome coins with rounded rims tumbling down in an endless drizzle, each popping in at the top and shrinking away at the bottom, raymarched in WebGL against studio softboxes so every flip catches the light. Leans toward the cursor and spins when dragged. The metal tint is a prop. Zero dependencies; any number share one WebGL context. - [Split Ring](https://www.assembli.design/components/objet-split-ring.md): Objet pack asset: a chunky rounded ring split down the middle into a sky-blue satin lacquer half and a figured birch half, raymarched in WebGL with soft studio light. It turns slowly in its own plane so the seam sweeps round, and every so often the halves part a hair and click back. Leans toward the cursor and spins when dragged. Zero dependencies. - [Lacquer Donuts](https://www.assembli.design/components/objet-donuts.md): Objet pack asset: two glossy lacquer donuts stacked off-center, tangerine on butter cream, raymarched in WebGL with clear-coat reflections and candy-colored shadows. The top donut hops and lands with a little squash while the stack turns, and it leans toward the cursor and spins when dragged. Colors are props. Zero dependencies; any number share one WebGL context. - [Chrome Wire](https://www.assembli.design/components/objet-wire.md): Objet pack asset: a thin polished chrome wire bent into a scribbled loop-de-loop with wavy tails, raymarched in WebGL against studio softboxes. The loop wriggles and twists through depth as it turns, so highlights run along the wire. Leans toward the cursor and spins when dragged. The metal tint is a prop. Zero dependencies; any number share one WebGL context. - [Lacquer Comma](https://www.assembli.design/components/objet-comma.md): Objet pack asset: a glossy sky-blue brushstroke, plump at one end and tapering into a curled tail, like a 3D comma or swoosh accent. Raymarched in WebGL with clear-coat reflections; it flexes and bobs as it floats, leans toward the cursor and spins when dragged. Use a few as confetti around bigger pieces. Colors are props. Zero dependencies. - [Clay Pebble](https://www.assembli.design/components/objet-pebble.md): Objet pack asset: a small ball of hammered cobalt clay pressed with one deep, soft-edged thumbprint dimple that pools with shadow, raymarched in WebGL with studio light on a transparent canvas. It rolls slowly so the dimple drifts in and out of view, leans toward the cursor and spins when dragged. A good filler between bigger pieces. Zero dependencies. ### Lumen > Twelve UI icons in frosted, halftone-printed glass, each with its own motion: an eye that watches, a lock that opens, a bell that rings. Five tints. - [Lumen Pack](https://www.assembli.design/components/lumen-pack.md): The whole Lumen asset pack in one install: twelve UI icons in frosted, halftone-printed glass, raymarched in WebGL, each with its own motion: an eye that watches the cursor, a gear a wrench ratchets, a lock that swings open, a bell that rings. Five tints (ember, jade, iris, rose, ink) or your own colors, plus LumenTile and LumenTintPicker for building a board. All icons share one WebGL context. - [Glass Bell](https://www.assembli.design/components/lumen-bell.md): Lumen pack asset: a notification bell in frosted, halftone-printed glass with a glass ball clapper. Every few seconds it rings: a damped swing about its hanger, with the clapper lagging behind and swinging wider. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Chat Bubble](https://www.assembli.design/components/lumen-chat.md): Lumen pack asset: a speech bubble in frosted, halftone-printed glass with three glass beads floating in front that hop in turn like a typing indicator. Raymarched in WebGL with refraction, so the beads read through the bubble's frosting. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Cube](https://www.assembli.design/components/lumen-cube.md): Lumen pack asset: a cube in frosted, halftone-printed glass that rolls a quarter turn at a time, overshooting and settling, so its gradient print comes round face by face. Raymarched in WebGL with refraction: the far edges show through the frosting. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Eye](https://www.assembli.design/components/lumen-eye.md): Lumen pack asset: an eye in frosted, halftone-printed glass. The almond lid has a hole cut through it and a thick pupil disc floats inside; it wanders, blinks every few seconds and turns to watch your cursor. Raymarched in WebGL with refraction, so you see the far edges through the glass. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Heart](https://www.assembli.design/components/lumen-heart.md): Lumen pack asset: a puffy heart in frosted, halftone-printed glass that beats in a lub-dub rhythm, swelling and glowing a little on each beat. Raymarched in WebGL with refraction and soft bevels. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Lightning Bolt](https://www.assembli.design/components/lumen-bolt.md): Lumen pack asset: a lightning bolt in frosted, halftone-printed glass. It winds up with a slow squash, then strikes: a sharp jolt with a little twist while the glass flashes bright and fades back. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Magnifier](https://www.assembli.design/components/lumen-search.md): Lumen pack asset: a magnifying glass in frosted, halftone-printed glass, with a thin lens set in the ring and a chunky handle. It sweeps a slow figure eight and leans into each turn, as if scanning a page. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Padlock](https://www.assembli.design/components/lumen-lock.md): Lumen pack asset: a padlock in frosted, halftone-printed glass with a keyhole cut clean through. The keyhole flashes, the shackle pops up and swings open about its leg in 3D, then swings back and drops shut with a bounce. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Pen Nib](https://www.assembli.design/components/lumen-pen.md): Lumen pack asset: a pen nib in frosted, halftone-printed glass, hovering over a separate base bar. Every few seconds it taps down: the bar squashes, the slit flexes open, and the nib springs back up. Raymarched in WebGL with refraction, so the slit and breather hole show their inner walls. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Plug](https://www.assembli.design/components/lumen-plug.md): Lumen pack asset: a connect icon in frosted, halftone-printed glass. A plug with two prongs and its socket half drift apart on a diagonal, then snap back together on a spring, and the seam lights up for a beat as they connect. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Resize Arrow](https://www.assembli.design/components/lumen-resize.md): Lumen pack asset: a diagonal resize arrow in frosted, halftone-printed glass. Its shaft stretches out on a springy ease, holds, then pulls back in, as if a corner were being dragged. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. - [Glass Settings](https://www.assembli.design/components/lumen-settings.md): Lumen pack asset: a settings icon in frosted, halftone-printed glass. An eight-toothed gear with an open-ended wrench floating in front: the wrench pulls the gear round a tooth, then ratchets back on its own with a little overshoot. Raymarched in WebGL with refraction and bevel highlights. Five tints or your own colors. Zero dependencies; any number share one WebGL context. ### Orbit > Twelve pastel toy-space objects in soft satin plastic: a telescope that sweeps the sky, a rocket on a flickering flame, a saucer with a tractor beam, an observatory that opens up. Six palettes. - [Orbit Pack](https://www.assembli.design/components/orbit-pack.md): The whole Orbit asset pack in one install: twelve pastel toy-space objects in satin plastic, raymarched in WebGL, each with its own motion: a telescope that sweeps the sky, a rocket on a flickering flame, a saucer beaming up a star, an observatory that opens up. Six palettes or your own colors, plus OrbitScene, OrbitPiece, OrbitCard and OrbitPalettePicker. One shared WebGL context. - [Rover](https://www.assembli.design/components/orbit-rover.md): Orbit pack asset: a six-wheeled rover with rocker arms, a solar deck and treaded wheels that roll, riding its suspension, with a camera head on a mast that looks around and follows your cursor, plus a beacon. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Observatory](https://www.assembli.design/components/orbit-observatory.md): Orbit pack asset: a round observatory on a plinth with an arched, lit door. On a loop its dome turns to a new heading, the shutter rolls back, and a telescope slides out through the slit, then everything closes up. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Radio Dish](https://www.assembli.design/components/orbit-dish.md): Orbit pack asset: a radio telescope with a stepped pedestal, a turntable, a yoke and a deep bowl with three struts to its receiver. It slews across the sky, turns toward your cursor and catches arcs of signal. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Comet](https://www.assembli.design/components/orbit-comet.md): Orbit pack asset: a comet with an icy, glowing head and a tapered tail that ripples and twists in three lobes, running from glow through accent to pale trim, with sparks streaming back along it. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Puffy Star](https://www.assembli.design/components/orbit-star.md): Orbit pack asset: an inflated five-point star that crouches, hops and spins a full turn with an overshoot every few seconds, landing with a squash and a flash of four-point glints. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Crescent Moon](https://www.assembli.design/components/orbit-moon.md): Orbit pack asset: a puffy crescent moon with soft edges and dented craters that rocks like a cradle, while two little stars bob, turn and twinkle inside its curve. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Satellite](https://www.assembli.design/components/orbit-satellite.md): Orbit pack asset: a foil-wrapped satellite with gridded solar wings that turn to track the sun, a dish with a feed and beacon, and rings of signal that spread out from it. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Astronaut Helmet](https://www.assembli.design/components/orbit-helmet.md): Orbit pack asset: a rounded helmet with a recessed glass visor that reflects the studio and a field of twinkling stars, accent ear pucks, a neck ring and a whip antenna with a blinking beacon. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Flying Saucer](https://www.assembli.design/components/orbit-saucer.md): Orbit pack asset: a lens-shaped saucer with a glass dome and a rim of lights that chase around it, hovering over a pulsing tractor beam that lifts a little star up into its hatch. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Ringed Planet](https://www.assembli.design/components/orbit-planet.md): Orbit pack asset: a banded planet with a storm drifting across its face as it turns, an accent inner ring, a pale outer ring with fine grooves and moonlets tumbling through the gap. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Rocket](https://www.assembli.design/components/orbit-rocket.md): Orbit pack asset: an egg-shaped rocket with an accent nose, a porthole and swept fins, hovering on a solid flame that flickers inside its own glow while puffs of smoke roll out, swell and fade. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Telescope](https://www.assembli.design/components/orbit-telescope.md): Orbit pack asset: a refractor on a tripod in satin pastel plastic, with an accent sleeve, a capped eyepiece and a glass lens set back in its dew shield. The tube sweeps the sky on slow sines and turns toward your cursor. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. ### Morsel > Eight soft-lit 3D dishes in twenty versions: burgers, hot dogs, sandwiches, sushi, fries and shakes, each with its own motion. Six palettes or your own colors. - [Morsel Pack](https://www.assembli.design/components/morsel-pack.md): The whole Morsel asset pack in one install: eight dishes in twenty versions, soft-lit and raymarched in WebGL, each with its own motion: a burger whose layers hop apart, a hot dog piped with mustard, a sandwich that fans open, sushi that somersaults. Six palettes or your own colors, plus MorselTable, MorselPiece, MorselCard, MorselOptions and MorselPalettePicker. - [Soda](https://www.assembli.design/components/morsel-soda.md): Morsel pack asset: a takeaway cup with a domed lid and a striped bendy straw, or a milkshake under a swirl of cream, chocolate and a cherry. It takes a long sip, pinching at the waist, and springs back. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Fries](https://www.assembli.design/components/morsel-fries.md): Morsel pack asset: a striped paper carton of golden fries that jostle on their own rhythms, then pop up in a wave and drop back in. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Temaki](https://www.assembli.design/components/morsel-temaki.md): Morsel pack asset: a cone of nori packed with rice, fanned salmon or tuna, cucumber and a spoon of roe. It turns slowly and bounces, the fillings springing a beat behind. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Maki](https://www.assembli.design/components/morsel-maki.md): Morsel pack asset: three pieces of salmon or cucumber roll in nori, or an inside-out roll in sesame and roe. A wave runs along them: each piece hops, somersaults and lands with a squash. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Nigiri](https://www.assembli.design/components/morsel-nigiri.md): Morsel pack asset: salmon, tuna or tamago on a hand-pressed mound of grainy rice. The slice lifts off, slaps back down and a wobble runs along it like jelly. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Sandwich](https://www.assembli.design/components/morsel-sandwich.md): Morsel pack asset: a triple-decker club with an olive pick, a BLT, or a cheese toastie dripping at the cut. The layers fan open round the pick like a deck of cards and close with a bounce. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Hot Dog](https://www.assembli.design/components/morsel-hotdog.md): Morsel pack asset: a grilled sausage in a split bun, a loaded dog with ketchup and relish, or a corn dog on a stick. The sausage hops in its bun and lands with a squeeze, then a zigzag of sauce is piped along it. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. - [Burger](https://www.assembli.design/components/morsel-burger.md): Morsel pack asset: a sesame-bun cheeseburger, a double, or a veggie stack with onion rings and black sesame. Every few seconds the layers hop apart on their own arcs, the top bun tumbling, and land back bottom first with a squash. Raymarched in WebGL with soft studio light. Six palettes or your own colors. Zero dependencies; any number share one WebGL context. ### Jaunt > Ten pastel toy vehicles with see-through windows and real shadows: a helicopter that lifts off, a plane that barrel-rolls, a tug riding the waves, a digger working a load. Six palettes or your own colors. - [Jaunt Pack](https://www.assembli.design/components/jaunt-pack.md): The whole Jaunt asset pack in one install: ten pastel toy vehicles in satin plastic, raymarched in WebGL with see-through glass and real ground shadows, each with its own motion: a helicopter that lifts off, a plane that barrel-rolls, a tug riding the waves, a digger working a load. Six palettes or your own colors, plus JauntScene, JauntPiece, JauntCard and JauntPalettePicker. - [Camper van](https://www.assembli.design/components/jaunt-camper.md): Jaunt pack asset: a two-tone camper van rolling along on soft springs. Every seven seconds it pulls over, the pop-top roof swings up over a striped canvas, then folds back down and the van rolls on. Bench seats show through the windows. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Car](https://www.assembli.design/components/jaunt-car.md): Jaunt pack asset: a round two-tone car that drives in place. The wheels roll, the body rides its springs, and every five seconds it hops, stretching up and squashing down as it lands. Front wheels steer toward your cursor; seats show through the glass. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Digger](https://www.assembli.design/components/jaunt-digger.md): Jaunt pack asset: a mini excavator working one load every seven seconds. The boom drops and the bucket curls through a scoop of earth, lifts, slews round and tips it out, crumbs and all, then swings back. A seat and joystick show through the cab glass. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Helicopter](https://www.assembli.design/components/jaunt-helicopter.md): Jaunt pack asset: a chubby helicopter that idles on its skids, lifts off with a nose-down surge, hovers over its own shadow and settles back with a bounce, rotors turning. See-through windows show the seats inside. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Hot-air balloon](https://www.assembli.design/components/jaunt-balloon.md): Jaunt pack asset: a hot-air balloon. Every five seconds the burner roars: the flame leaps, the envelope swells and the balloon rises, then sinks slowly back as the air cools. Pillowed panels in two colors, a wicker basket and sandbags. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Plane](https://www.assembli.design/components/jaunt-plane.md): Jaunt pack asset: a chubby prop plane that flies in place, climbing and dipping, banking into your cursor and throwing a barrel roll every eight seconds while its shadow slides along the ground. A seat shows under the bubble canopy. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Scooter](https://www.assembli.design/components/jaunt-scooter.md): Jaunt pack asset: a round-hipped scooter weaving down an imaginary lane. It leans into slow S-bends and steers with them, bobs over the road, and turns its handlebars toward your cursor. Mirrors, a rack and a headlamp. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Steam train](https://www.assembli.design/components/jaunt-train.md): Jaunt pack asset: a little steam engine on a length of track. The spoked drivers turn, the coupling rod rides their crank pins, and the chimney chuffs twice a turn, each puff kicking the engine with a tiny bob. The cab shows its seat through the windows. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Submarine](https://www.assembli.design/components/jaunt-submarine.md): Jaunt pack asset: a little submarine that hangs in the water, bobbing and nosing up and down. The propeller turns in its shroud, bubbles stream back and rise, the portholes glow, and the periscope scans the room until it finds your cursor. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. - [Tugboat](https://www.assembli.design/components/jaunt-boat.md): Jaunt pack asset: a tug on its own little pond that rides the waves. Its bob, pitch and roll come from the wave height under its bow, stern and sides. Tyre fenders, a lifebuoy, a wheel at the helm behind glass, and a funnel that puffs. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors; any number share one WebGL context. ### Tinsel > Ten soft clay Christmas pieces in snow, icing, knit and gingerbread: a tree that shivers and spins its star, a snowman who waves, mittens that high-five, a snow globe that swirls. Six palettes or your own colors. - [Tinsel Pack](https://www.assembli.design/components/tinsel-pack.md): The whole Tinsel asset pack in one install: ten Christmas pieces in soft clay, raymarched in WebGL with snow and icing that glow at their edges, real knit stitches and real ground shadows, each with its own motion: a tree that shivers and spins its star, a snowman who waves, mittens that high-five, a snow globe that swirls. Six palettes, plus TinselScene, TinselSnowfall and TinselCard. - [Christmas Tree](https://www.assembli.design/components/tinsel-tree.md): Tinsel pack asset: a snow-frosted Christmas tree on an iced gingerbread plinth with sprinkles. Baubles hang under its drooping boughs, fairy lights twinkle in turn, and every seven seconds the tree shivers tier by tier, the star spins a full turn and the gifts at its foot hop one after another. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Snowman](https://www.assembli.design/components/tinsel-snowman.md): Tinsel pack asset: a snowman in a knit beanie and striped scarf, with a carrot nose, coal smile and twig arms. Every six seconds he hops, squashes on landing and waves; his head turns toward your cursor and his pompom jiggles. Snow that glows at its edges and knit you can see the stitches of. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Sleigh](https://www.assembli.design/components/tinsel-sleigh.md): Tinsel pack asset: Santa's sleigh in glossy lacquer with gold scrollwork, curling gold runners, a cushioned seat and a sack of gifts in the back. It glides over a bumpy field, riding up each rise and nosing down the far side while the sack jostles behind. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Gingerbread Cookies](https://www.assembli.design/components/tinsel-gingerbread.md): Tinsel pack asset: a gingerbread man with piped royal icing, a smile and gumdrop buttons, standing on a stack of three iced cookies with drips and sprinkles. Every five seconds he hops, lands with a squash and waves; his head tips toward your cursor. Baked crumb and glossy, translucent icing. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Wreath](https://www.assembli.design/components/tinsel-wreath.md): Tinsel pack asset: a puffy evergreen wreath dusted with snow, with clusters of glossy berries, a ribbon bow and a gold bell. It hangs from a ribbon loop and swings; every six seconds a nudge sets it rocking and the bell rings a beat behind. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Santa Hat](https://www.assembli.design/components/tinsel-santa-hat.md): Tinsel pack asset: a soft velvet Santa hat with a fluffy fur brim and a pompom on its floppy tip. Every five seconds it hops, and the tip swings over and back on a loose spring; it leans away from your cursor. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Mittens](https://www.assembli.design/components/tinsel-mittens.md): Tinsel pack asset: a pair of knit mittens joined by a string, with zigzag Fair Isle colorwork, real V stitches and striped ribbed cuffs. They wave out of step, and every six seconds swing in for a high five and bounce apart. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Gift Stack](https://www.assembli.design/components/tinsel-gifts.md): Tinsel pack asset: a stack of three wrapped gifts, in polka dots, candy stripes and ribbon, with a bow on top. Every five seconds the lids pop in turn from the bottom up, the top one flipping its bow into the air, and each lands with a wobble. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Stocking](https://www.assembli.design/components/tinsel-stocking.md): Tinsel pack asset: a knit Christmas stocking with a band of tree motifs, a snowy heel and toe and a fluffy cuff, with a candy cane and a gift peeking out of the top. It swings on its loop, and every six seconds the candy cane bobs up for a peek. Raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Snow Globe](https://www.assembli.design/components/tinsel-snow-globe.md): Tinsel pack asset: a snow globe on a turned wooden base with a gold band. Inside, a cabin with a lit window, a little tree and a gift sit on a snowy mound. Every seven seconds it rocks as if shaken, and the snow swirls up and drifts back down. See-through glass, raymarched in WebGL with a real ground shadow. Six palettes or your own colors. ### Sunday > Eight scenes of soft clay people on their day off, with painted faces that blink and look your way: friends under a tree, a reader, a gardener, a skater's ollie, a ukulele player, coffee for two, a dog that begs, and tree pose with a bird. Six palettes or your own colors. - [Sunday Pack](https://www.assembli.design/components/sunday-pack.md): The whole Sunday asset pack in one install: eight scenes of clay people on their day off, raymarched in WebGL with painted faces that blink and look toward your cursor: friends under a tree, a reader turning pages, a gardener whose flower blooms, a skater's ollie, a ukulele player, coffee with a friend, a dog that begs, and tree pose with a bird. Six palettes, plus SundayStage and SundayCard. - [Tree pose](https://www.assembli.design/components/sunday-yoga.md): Sunday pack scene: someone holds yoga tree pose on a mat, breathing slowly. Their palms rise from the chest to overhead, a little bird flutters in and perches on their fingertips, they wobble and steady with their eyes closed, and the bird flies off. Soft clay people raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Good dog](https://www.assembli.design/components/sunday-pup.md): Sunday pack scene: someone kneels to fuss over their dog. They scratch its head while it shuts its eyes in bliss and wags its tail like a metronome, then lift a ball: the dog sits up to beg with its head cocked, gives a little woof, and they laugh. Soft clay people raymarched in WebGL. Six palettes or your own colors. - [Café](https://www.assembli.design/components/sunday-cafe.md): Sunday pack scene: two friends catch up at a little round café table with cups and a slice of cake. He lifts his cup and sips while she tells a story with her hands, then they both laugh; steam curls off the cups the whole time. Soft clay people raymarched in WebGL, faces that blink and look toward your cursor. Six palettes or your own colors. - [Ukulele player](https://www.assembli.design/components/sunday-musician.md): Sunday pack scene: a musician perches on a wooden stool strumming a ukulele. The strumming hand swings on the beat, her braids swing as her head bobs, a foot taps, and clay music notes float up and away; on the long notes she closes her eyes and sings. Soft clay people raymarched in WebGL. Six palettes or your own colors. - [Skater](https://www.assembli.design/components/sunday-skater.md): Sunday pack scene: a skater in a beanie and hoodie cruises on a board, wheels spinning, arms out for balance. Every five seconds they crouch, pop an ollie and land with a squash and a puff of dust while their shadow shrinks and grows on the ground. Soft clay people raymarched in WebGL. Six palettes or your own colors. - [Gardener](https://www.assembli.design/components/sunday-gardener.md): Sunday pack scene: a bearded gardener in a straw hat and dungarees tips his watering can over a pot. Drops arc into the soil, the bud swells and opens its petals, and he nods along, pleased, before the flower folds up for the next round. Soft clay people raymarched in WebGL with a real ground shadow. Six palettes or your own colors. - [Reader](https://www.assembli.design/components/sunday-reader.md): Sunday pack scene: a reader in round glasses sits cross-legged on a floor cushion. Their eyes run along the lines, a page lifts and turns over every few seconds, they push their glasses up and wiggle their toes, steam curls off the mug and a plant sways. Soft clay people raymarched in WebGL. Six palettes or your own colors. - [Friends](https://www.assembli.design/components/sunday-friends.md): Sunday pack scene: two friends sit hugging their knees under a little tree. One turns to say something, the other throws her head back laughing, both blink on their own clocks, a foot taps and a leaf spins down from the canopy. Soft clay people raymarched in WebGL, with painted faces that follow your cursor. Six palettes or your own colors. ### Boo > Ten vinyl art-toy monsters whose bulging eyes follow your cursor: a drooling zombie, Frankenstein's monster, a vampire, a mummy, a werewolf, a ghost, a witch, a dancing skeleton, a pumpkin kid and a lagoon creature. Each has its own motion and jumps when you tap it. Six palettes. - [Boo Pack](https://www.assembli.design/components/boo-pack.md): The whole Boo asset pack in one install: ten vinyl art-toy monsters raymarched in WebGL, with bulging eyes that follow your cursor and a jump when you tap them: zombie, Frankenstein, vampire, mummy, werewolf, ghost, witch, skeleton, pumpkin kid and lagoon creature. Six palettes, plus a moonlit BooStage, toy-box BooCards and a BooBlindBox. - [Lagoon creature](https://www.assembli.design/components/boo-creature.md): Boo pack character: a creature from the lagoon with fine scales, a pale plated belly, fanned fins, gill slits, flipper feet and big pouty lips. It sways as if still underwater, fins fanning and gills flaring, with bubbles trickling up; every few seconds it puffs its cheeks and blows one big bubble. Eyes follow your cursor, and a tap puffs it up like a pufferfish. Raymarched in WebGL, six palettes. - [Pumpkin kid](https://www.assembli.design/components/boo-pumpkin.md): Boo pack character: a kid with a ribbed jack-o'-lantern for a head, carved with a jagged grin that glows from a flickering candle inside, plus a curly stem and leaf and a trick-or-treat pail of sweets. Its head wobbles like a bobblehead and every few seconds spins right round. Candle-flame pupils follow your cursor; a tap flares the candle and flips out a sweet. Raymarched in WebGL, six palettes. - [Skeleton](https://www.assembli.design/components/boo-skeleton.md): Boo pack character: a toy skeleton with a big rounded skull, deep sockets lit by glowing pupils, a clacking jaw, ribs, spine, pelvis and knobby bones. It dances with swaying hips, bobbing knees and pumping arms; every few seconds it pops its skull off, spins it and catches it again. The pupils follow your cursor, and a tap makes it fall apart and snap back. Raymarched in WebGL, six palettes. - [Witch](https://www.assembli.design/components/boo-witch.md): Boo pack character: a green witch with a hooked nose and a wart, long ginger hair, a crooked hat with a buckle, a jagged dress and striped stockings. She stirs a cauldron of glowing brew that bubbles while her hat tip nods; every few seconds she throws her head back and cackles and the pot boils over. Eyes follow your cursor; tap to set her off. Raymarched in WebGL, six palettes. - [Ghost](https://www.assembli.design/components/boo-ghost.md): Boo pack character: a soft sheet ghost with glossy button eyes and pink cheeks, floating above its own shadow. It bobs and sways while its scalloped hem ripples; every few seconds it swoops at you with its arms up, squeezes its eyes shut and yells BOO, tongue out. Eyes follow your cursor; tap to get spooked first. Raymarched in WebGL, six palettes. - [Werewolf](https://www.assembli.design/components/boo-werewolf.md): Boo pack character: a shaggy werewolf with tall pointed ears, cheek tufts, a pale muzzle with underbite fangs, claws, a bushy tail and torn purple shorts. It bounces on its toes, ears twitching one at a time and tail wagging; every few seconds it throws its head back and howls. Glowing eyes follow your cursor, and a tap puts every hair on end. Raymarched in WebGL, six palettes. - [Mummy](https://www.assembli.design/components/boo-mummy.md): Boo pack character: a mummy wound in raised bandages, peering out of a dark gap with two big eyes, one half-covered by a slipped strip. It shuffles stiffly with its arms out while two loose ends flutter; every few seconds it winds up and sneezes a puff of tomb dust. Eyes follow your cursor; a tap makes it shudder. Raymarched in WebGL, six palettes. - [Vampire](https://www.assembli.design/components/boo-vampire.md): Boo pack character: a pale vampire with a slicked widow's peak, pointed ears and fangs, wrapped in a black cape with a high collar and a purple lining, while a little bat loops around him. He cocks an eyebrow now and then; every few seconds he throws the cape open like wings and hisses. Eyes follow your cursor; tap for the flare. Raymarched in WebGL, six palettes. - [Frankenstein](https://www.assembli.design/components/boo-frankenstein.md): Boo pack character: Frankenstein's monster as a vinyl toy, with a flat-top haircut and ragged bangs, a stitched scar, heavy-lidded eyes, neck bolts and platform boots. He stomps in place with his arms out; every few seconds his bolts crackle with lightning, his hair bristles up and his eyes snap wide. Eyes follow your cursor; tap to zap him. Raymarched in WebGL, six palettes. - [Zombie](https://www.assembli.design/components/boo-zombie.md): Boo pack character: a mint vinyl zombie with giant bulging eyeballs, raised goo drips and a mouthful of teeth. It shuffles from foot to foot, head lolling and one lazy eye drifting, drool gathering on its chin; every few seconds it reaches out and chomps. Its eyes follow your cursor, and a tap makes it hop with its eyeballs boinging. Raymarched in WebGL, six palettes. ### Gizmo > Ten soft-touch tech gadgets with sculpted keycaps, printed line icons and glowing screens: a macro pad that taps out a rhythm, a computer with a pixel face, an instant camera that prints, a boombox, an arcade stick and more. Tap one to press it. Six palettes. - [Gizmo Pack](https://www.assembli.design/components/gizmo-pack.md): The whole Gizmo asset pack in one install: ten soft-touch tech gadgets raymarched in WebGL, each with its own routine and a response when you tap it: macro pad, mouse, headphones, gamepad, desktop computer, instant camera, handheld console, boombox, arcade stick and podcast mic. Six palettes, plus a GizmoStage with a desk mat, keycap buttons, a keycap palette picker and spec cards. - [Podcast mic](https://www.assembli.design/components/gizmo-microphone.md): Gizmo pack gadget: a podcast microphone with a mesh grille, a colored band and an on-air light, cradled in a yoke on a round stand. It turns to face your cursor; when it's on air the light glows and sound arcs ripple out to either side. A tap makes it pop, with a jolt and one big ring. Raymarched in WebGL, six palettes. - [Arcade stick](https://www.assembli.design/components/gizmo-joystick.md): Gizmo pack gadget: an arcade stick in a low wedge case, with a ball-top lever on a dust washer, six candy buttons in two arcs, direction arrows printed around the lever and a start button. The lever leans after your cursor; left alone it plays a combo of its own. A tap mashes all six buttons and slams the stick. Raymarched in WebGL, six palettes. - [Boombox](https://www.assembli.design/components/gizmo-boombox.md): Gizmo pack gadget: a boombox with two pumping woofers, a cassette window with turning reels, a level meter, piano keys on top, dials, a carry handle and a telescopic antenna. On the beat the cones pump, the meter dances and the keys press along. A tap drops the bass: the woofers punch out and the whole box hops. Raymarched in WebGL, six palettes. - [Handheld console](https://www.assembli.design/components/gizmo-handheld.md): Gizmo pack gadget: a pocket game console with a big rounded corner, a d-pad, A and B buttons, start and select, speaker slots and a screen that plays a tiny pixel runner: a block hero hops obstacles over scrolling hills, and the A button presses on every jump. A tap makes the hero leap for a coin and the screen flash. Raymarched in WebGL, six palettes. - [Instant camera](https://www.assembli.design/components/gizmo-camera.md): Gizmo pack gadget: a two-tone instant camera with a fat lens and ribbed zoom ring, a flash, a viewfinder, a shutter button and a strap lug. The lens follows your cursor and breathes in and out; every few seconds the shutter clicks, the flash fires and a print slides out of the top and develops a sunny little picture. A tap takes one now. Raymarched in WebGL, six palettes. - [Desktop computer](https://www.assembli.design/components/gizmo-computer.md): Gizmo pack gadget: a boxy retro desktop computer with a bulging screen, a floppy slot, side vents, a badge and a little keyboard on a cord. A pixel face on its glowing screen blinks and looks at your cursor while the keyboard types away on its own. A tap makes it beam, with happy eyes, rosy cheeks and a hop. Raymarched in WebGL, six palettes. - [Gamepad](https://www.assembli.design/components/gizmo-gamepad.md): Gizmo pack gadget: a chunky two-tone game controller with a d-pad, four candy-colored face buttons, two thumbsticks, bumpers and a light bar. Its thumbsticks follow your cursor; left alone it plays itself, rocking the d-pad, firing combos and circling the sticks. A tap mashes every button and makes it rumble. Raymarched in WebGL, six palettes. - [Headphones](https://www.assembli.design/components/gizmo-headphones.md): Gizmo pack gadget: over-ear headphones with pillowy cups, plush cushions, a soft knit canopy on a slim frame and a note printed on each cup. They bob to the beat: the cups pulse, the band flexes and notes float up and away. A tap drops the bass, with one big thump and a burst of notes. Raymarched in WebGL, six palettes. - [Mouse](https://www.assembli.design/components/gizmo-mouse.md): Gizmo pack gadget: a pebble-round mouse with two-tone buttons, a ribbed scroll wheel, thumb buttons and a light on the palm. It glides in a lazy figure eight, scrolling and clicking as it goes, and turns its nose toward your cursor. A tap double-clicks, spins the wheel and makes it hop. Raymarched in WebGL, six palettes. - [Macropad](https://www.assembli.design/components/gizmo-macropad.md): Gizmo pack gadget: a seven-key macro pad in soft-touch plastic, its sculpted keycaps printed with line icons (home, call, globe, chat, idea, doc and a wide heart key), plus a knurled dial, a side button, a status light and a cable. The keys tap out a little rhythm and the dial turns toward your cursor; a tap slams the wide key and ripples the rest. Raymarched in WebGL, six palettes. ### Sol > The solar system as hand-made clay models: the Sun, eight planets, the Moon and Pluto. Earth has real raised continents under a glass atmosphere, Saturn wears grooved rings, Pluto has its heart. Drag any of them to spin it like a globe and tap for its own trick. Five paint jobs, plus a working orrery. - [Sol Pack](https://www.assembli.design/components/sol-pack.md): The whole Sol asset pack in one install: the solar system as clay models raymarched in WebGL. The Sun, Mercury, Venus, Earth with real raised continents, the Moon, Mars, Jupiter, Saturn with grooved rings, Uranus, Neptune and Pluto with its heart. Drag any body to spin it and tap for its trick. Five paint jobs, plus a working orrery, a specimen panel with real facts and cards. - [Pluto](https://www.assembli.design/components/sol-pluto.md): Sol pack: Pluto, the dwarf planet, in tan and cream clay with its famous heart, Tombaugh Regio, pressed on smooth and pale, the dark red whale of Cthulhu along the equator and a scatter of craters. Charon, its big grey moon with a reddish cap, circles close by. A tap makes the heart beat and blush. Raymarched in WebGL, five paint jobs. - [Neptune](https://www.assembli.design/components/sol-neptune.md): Sol pack: Neptune in deep blue clay, with pale and dark bands, the Great Dark Spot pressed in beside a bright companion cloud, and long white cloud streaks raised over the blue, blown along by the fastest winds in the solar system. Triton circles it the wrong way round. A tap whips the planet round and stretches the clouds. Raymarched in WebGL. - [Uranus](https://www.assembli.design/components/sol-uranus.md): Sol pack: Uranus in glossy pale-cyan clay, tipped right over so one pole faces you and its thin dark rings circle it like a target. Faint bands, a bright polar collar and a few small white clouds wheel round the pole as it turns. Drag to spin it; a tap sets the rings wobbling. Raymarched in WebGL, five paint jobs. - [Saturn](https://www.assembli.design/components/sol-saturn.md): Sol pack: Saturn in pale gold clay, its rings pressed as separate grooved discs, each its own shade and thickness: the dusky C ring, the bright B ring, the Cassini gap, the A ring with the Encke gap and the thin F ring. Planet and rings shade each other and a hexagon sits on the north pole. A tap sends a ripple racing out across the rings. Raymarched in WebGL. - [Jupiter](https://www.assembli.design/components/sol-jupiter.md): Sol pack: Jupiter in banded clay. Cream zones swell between sunken tan and rust belts, their edges curling into eddies, every band sliding past its neighbors at its own speed, with the Great Red Spot raised as a swirl in the south and little Io circling. A tap spins the storm up and sends a ripple through every band. Raymarched in WebGL, five paint jobs. - [Mars](https://www.assembli.design/components/sol-mars.md): Sol pack: Mars in rust-red clay, with darker plains where the real ones lie, white ice caps at both poles, Olympus Mons and the three Tharsis volcanoes pushed up beside the long trench of Valles Marineris, and two lumpy little moons, Phobos and Deimos, circling it. A tap whips the moons round and blows a dust storm across its face. Raymarched in WebGL. - [Moon](https://www.assembli.design/components/sol-moon.md): Sol pack: the Moon in grey clay with its near side to the front: dark maria pressed in where they lie on the real Moon, craters with raised rims and Tycho's bright rays across the south. It rocks gently on its libration. A tap runs a whole month of phases across its face in three seconds, with a faint earthshine on the dark side. Raymarched in WebGL. - [Earth](https://www.assembli.design/components/sol-earth.md): Sol pack: Earth as a clay globe. Real coastlines are raised off a glossy sea that catches square studio lights, with mountain ranges pinched up, sandy deserts, ice sheets at both poles, a glass atmosphere and puffy clouds drifting around outside it. Drag to spin it like a globe; a tap throws the clouds out and lets them bounce back. Raymarched in WebGL, five paint jobs. - [Venus](https://www.assembli.design/components/sol-venus.md): Sol pack: Venus wrapped in thick clay cloud, piped in fine ribbons of cream and ochre that curl into a vortex over each pole, with the dark sideways Y of its upper clouds across the middle, all under a glass shell. The cloud deck races round far faster than the planet turns. A tap sets off a storm: lightning flickers deep in the clouds. Raymarched in WebGL. - [Mercury](https://www.assembli.design/components/sol-mercury.md): Sol pack: Mercury in warm grey clay, battered all over with overlapping craters, the wide ring of the Caloris basin and a young crater flinging bright rays. Drag to spin it; a tap turns its day side red hot, glowing from the crater floors out, then lets it cool. Raymarched in WebGL, five paint jobs. - [Sun](https://www.assembli.design/components/sol-sun.md): Sol pack: the Sun in glowing clay. Its lumpy granules slowly boil, a few sunspots are pressed in, loops of prominence arch off the edge and a soft corona glows around it, deeper orange toward the limb. Drag to spin it; a tap sets off a flare, with one loop bursting up and the corona flashing. Raymarched in WebGL, five paint jobs. ### Vitro > Ten abstract sculptures in real refractive glass and soft matte color: stacked glass rings, a bubble with an orbiting hoop, a paperweight cube, a coil-wound torus, a glass spring and more. Light bends through every wall. Drag to turn one, tap it to set it going. Six palettes, clear, frosted or smoked glass. - [Vitro Pack](https://www.assembli.design/components/vitro-pack.md): The whole Vitro asset pack in one install: ten abstract sculptures in real refractive glass around soft matte color, raymarched in WebGL. Stacked glass rings, a bubble with an orbiting hoop, a capsule of beads, a paperweight cube, a coil-wound torus, a lens tower, a gyroscope, a bubble cluster, an arch and a spring. Six palettes, clear, frosted or smoked glass, plus a stage and color options. - [Spring](https://www.assembli.design/components/vitro-spring.md): Vitro pack: a coil spring of glass tube wound four and a half times round a tall matte pill, with a glossy ring at each end of the pill. Each turn of the coil slices the pill into its own refracted band. The coil slowly turns and breathes. A tap squashes the spring down and lets it boing back. Raymarched in WebGL. - [Arch](https://www.assembli.design/components/vitro-arch.md): Vitro pack: a thick glass arch standing on a glass plinth, with a glossy tube set into the arch like neon in acrylic and a matte ball rolling to and fro through it, a ring round its middle showing the roll. The plinth mirrors the ball and the tube. A tap rolls the ball right out the front and back again. Raymarched in WebGL. - [Cluster](https://www.assembli.design/components/vitro-cluster.md): Vitro pack: five glass bubbles of different sizes floating together, each holding a matte ball or a glossy ring of its own, all bobbing gently out of step. The thin walls catch the studio lights and magnify what's inside. A tap scatters the bubbles outward and lets them drift back, one after another. Raymarched in WebGL. - [Gyro](https://www.assembli.design/components/vitro-gyro.md): Vitro pack: three nested gimbal rings turning on crossed axes around a matte ball, a glass tube outside, a glossy ring in the middle and a thinner glass tube inside, each hung from the next on pearl axles. The ball wears a glossy ring of its own. A tap spins every gimbal up and lets it coast back to its idle tumble. Raymarched in WebGL. - [Tower](https://www.assembli.design/components/vitro-tower.md): Vitro pack: three round glass lenses stacked with a matte ball sandwiched in each gap and another on top, each ball circled by a flat glossy ring, the colors running bottom to top. The lenses wobble like settling coins and mirror the rings above them. A tap makes the stack hop, one tier after another. Raymarched in WebGL. - [Donut](https://www.assembli.design/components/vitro-donut.md): Vitro pack: a fat glass torus wound eleven times round with a glossy coil that flows slowly along it, and a matte ball floating in the hole. Seen through the glass, the coil's far side bends into the near one. A tap pops the ball up through the ring and back down, and sends the coil racing round. Raymarched in WebGL. - [Cube](https://www.assembli.design/components/vitro-cube.md): Vitro pack: a solid glass paperweight cube with rounded edges, a matte ball set in its heart and two glossy hoops turning round it inside the glass. Every face bends the ball into its own view, so it doubles and stretches as the cube turns, and light bounces round the inside of the walls. A tap spins the hoops up like a gyroscope. Raymarched in WebGL. - [Capsule](https://www.assembli.design/components/vitro-capsule.md): Vitro pack: a hollow glass pill leaning at an angle, holding three matte beads that drift slowly up and down inside it, shaded through the palette from bottom to top, with a glossy band round its waist and a thinner one at each shoulder. The curved wall stretches the beads as they pass. A tap rattles the beads against each other. Raymarched in WebGL. - [Orb](https://www.assembli.design/components/vitro-orb.md): Vitro pack: a glass bubble around a matte ball, with a glossy hoop gimballing round the ball inside, a pearl bead running its track, and a flat glass ring circling the bubble like a planet's. The bubble wall magnifies the ball and catches the studio lights. A tap bounces the ball and whips the bead once round its track. Raymarched in WebGL. - [Stack](https://www.assembli.design/components/vitro-stack.md): Vitro pack: two thick glass rings stacked off-center on a column of three matte balls. A glossy hoop runs through the wall of each ring, poking out above and below as it precesses, another circles the ball inside, and thin glass collars cap the ends. The glass bends every color into its walls. A tap twists the rings apart and lets them settle. Raymarched in WebGL. ### Hamlet > Toy diorama scenes on floating islands: a cottage, a beach house, an alpine lodge, a city block, the suburbs, a lighthouse, a farm, a lakeside camp, canal houses and a desert. Set the time of day and the sun really moves: shadows swing round, then windows light up one by one and lamps pool warm light. Drag to turn, tap for each scene's trick. - [Hamlet Pack](https://www.assembli.design/components/hamlet-pack.md): The whole Hamlet asset pack in one install: ten toy diorama scenes floating in a sky that keeps the time. One clock drives the sky, the sun and moon on their arcs, stars and clouds, and every island: scrub the day or play it through and shadows swing round, then windows and lamps come on island by island. Five palettes, plus HamletSky, HamletIsland, a 24-hour scrubber and a palette picker. - [Desert](https://www.assembli.design/components/hamlet-desert.md): Hamlet pack scene: a desert homestead under layered red mesas. An adobe with beams poking through its walls, a roof ladder and a beehive oven, a silver trailer under a striped awning with two chairs, saguaros, barrel cacti in flower and a prickly pear, and string lights strung across the patio that glow at night. Tap to send a tumbleweed bouncing across. Raymarched in WebGL. - [Canal](https://www.assembli.design/components/hamlet-canal.md): Hamlet pack scene: a canal in an old town. A row of tall, narrow canal houses with step, bell, neck and spout gables and a hoist beam under each peak, a quay with trees, bikes, benches and lamps, and a little boat pottering up and down while the drawbridge lifts its two leaves to let it through. At night windows light up across the facades. Tap to raise the bridge. Raymarched in WebGL. - [Lakeside camp](https://www.assembli.design/components/hamlet-lakeside.md): Hamlet pack scene: a log cabin by a lake among the pines, the water cut away at the island's edge. A dock with a canoe tied alongside, a tent, a ring of stones round a crackling campfire with stumps to sit on, lily pads and two ducks paddling, and fireflies after dark. The fire flickers and lights the clearing. Tap to stoke it and send up sparks. Raymarched in WebGL. - [Farm](https://www.assembli.design/components/hamlet-farm.md): Hamlet pack scene: a little farm with a gambrel-roofed barn and cross-braced doors, a banded silo, a windpump turning in the breeze, rows of crops and a pumpkin patch, round hay bales, a tractor and a fenced paddock where three sheep graze. A lantern lights the barn door at night and fireflies rise over the field. Tap to whirl the windpump and make the sheep jump. Raymarched in WebGL. - [Lighthouse](https://www.assembli.design/components/hamlet-lighthouse.md): Hamlet pack scene: a striped lighthouse on a rocky islet in a cut-away sea, with a gallery rail, a glass lantern room and the keeper's cottage beside it. Waves break white around the rocks, a rowboat and a buoy bob on the swell and gulls circle the light. From dusk the lamp turns, sweeping two beams across the water. Tap to set the lamp racing round. Raymarched in WebGL. - [Suburbs](https://www.assembli.design/components/hamlet-suburb.md): Hamlet pack scene: two houses on a suburban street, a two-storey with an attached garage, a basketball hoop and a car in the drive, and a hip-roofed bungalow with a porch, behind white picket fences, with mailboxes at the kerb, hedges, pines and a sprinkler ticking across the lawn. Porch lights come on at night. Tap to roll the garage door up and flash the car's lights. Raymarched in WebGL. - [City block](https://www.assembli.design/components/hamlet-city.md): Hamlet pack scene: a city block on its own island. A glass tower with a blinking antenna, a brick walk-up with a fire escape and a water tower, a three-setback art-deco tower and a corner shop under a striped awning, ringed by a road where cars drive round past street lamps and trees. At night offices light up at random. Tap and the tower's windows spell a heart. Raymarched in WebGL. - [Alpine lodge](https://www.assembli.design/components/hamlet-alpine.md): Hamlet pack scene: an A-frame lodge in the snow under faceted low-poly peaks. Its glass front glows at night, smoke curls from the chimney, a gondola glides up its cable to a mountain station, pines wear snow caps, a snowman stands by a frozen pond and snow keeps falling. Set the time of day and the light follows. Tap to whizz the gondola up and stir a flurry. Raymarched in WebGL. - [Beach house](https://www.assembli.design/components/hamlet-beach.md): Hamlet pack scene: a beach hut on stilts above a shelving beach, with the sea cut away at the island's edge so you see into the water. Palms lean over the sand, a striped umbrella shades two loungers, there's a sandcastle and a jetty, a sailboat bobs offshore and gulls wheel overhead. At night string lights and tiki torches come on. Tap for a big wave. Raymarched in WebGL. - [Cottage](https://www.assembli.design/components/hamlet-cottage.md): Hamlet pack scene: a two-storey cottage on a floating lawn, with a fenced roof terrace, flower boxes, wall lanterns, curly street lamps, faceted pines and a low-poly autumn tree. Smoke curls from the chimney. Set the time of day and the sun sweeps round; at night windows glow, lamps pool warm light on the grass and fireflies drift. Tap to open the front door. Raymarched in WebGL. ### Bloop > Ten glossy gumball critters with googly eyes that roll loose on real physics and jelly bodies that squash and wobble when you poke or fling them: a visor ball that pops its lid, a somersaulting imp, a hat-tossing snow egg, a propeller cyclops, a pufferfish koosh, a mouth on stalks, a bouncer, a melting jelly, a sleepyhead and a cool one in shades. Six palettes. - [Bloop Pack](https://www.assembli.design/components/bloop-pack.md): The whole Bloop asset pack in one install: ten glossy gumball critters raymarched in WebGL, with googly eyes that roll loose on real physics and jelly bodies that squash when you poke or fling them: Peep, Imp, Fuji, Whirly, Puff, Chomp, Sprout, Gloop, Snooze and Shades. Six palettes, plus studio tiles, a gumball-pile palette picker and a gumball machine that dispenses a random critter. - [Shades](https://www.assembli.design/components/bloop-shades.md): Bloop pack critter: an aqua gumball in mirror-black sunglasses and red headphones, with a smirk and a tapping foot. It nods along at 108 beats a minute, bouncing on every beat; every eight beats it slides its shades down, peeks over them with googly eyes and winks, then pushes them back up. A tap gets the wink. Raymarched in WebGL, six palettes. - [Snooze](https://www.assembli.design/components/bloop-snooze.md): Bloop pack critter: a lilac sleepyhead in a striped nightcap with a fluffy pom-pom, dozing with painted arcs for eyes. It breathes slowly, blowing a see-through bubble that swells and shrinks while little z's float up; every few seconds the bubble pops, it jolts awake with googly eyes wide, has a groggy look round and nods back off. A tap pops it. Raymarched in WebGL, six palettes. - [Gloop](https://www.assembli.design/components/bloop-gloop.md): Bloop pack critter: a cherry jelly that never stops wobbling, glossy and lit from within, with three googly eyes floating in it and a puddle round its base. Every few seconds it melts flat, eyes and all, has a look round from down there, then pulls itself back together with a boing that overshoots and jiggles out. A tap splats it. Raymarched in WebGL, six palettes. - [Sprout](https://www.assembli.design/components/bloop-sprout.md): Bloop pack critter: a lemon gumball with rosy cheeks, glossy eyes that squeeze into happy arcs and a two-leaf sprout on its head. It bounces, three happy hops with a proper squash before each take-off and on each landing, the leaf flapping behind; then one big spinning hop that bursts its sprout into a flower. A tap gives it the big hop. Raymarched in WebGL, six palettes. - [Chomp](https://www.assembli.design/components/bloop-chomp.md): Bloop pack critter: a grape ball that is nearly all mouth, hinged at the back, with big square teeth, a lolling tongue and googly eyes up on bendy stalks. It hums along, nibbles the air in quick little noms, and every few seconds opens wider and wider, then snaps shut so hard it squashes and its eye stalks whip about. A tap makes it chomp. Raymarched in WebGL, six palettes. - [Puff](https://www.assembli.design/components/bloop-puff.md): Bloop pack critter: a blueberry koosh ball covered in soft rubber spikes that go pale at the tips, with googly eyes, rosy cheeks and pouty lips. It bobs in the air breathing slowly; every few seconds it holds its breath and puffs right up like a pufferfish, spikes standing stiff, then lets go and zips round like a balloon. A tap puffs it up. Raymarched in WebGL, six palettes. - [Whirly](https://www.assembli.design/components/bloop-whirly.md): Bloop pack critter: a tangerine cyclops with one big googly eye, a four-panel propeller beanie and little feet dangling below. It hovers with the blades whirring; every few seconds the propeller sputters, it sinks with its eye wide and its mouth in an O, then the blades catch and it zooms back up with a spin. A tap revs the propeller. Raymarched in WebGL, six palettes. - [Fuji](https://www.assembli.design/components/bloop-fuji.md): Bloop pack critter: a mint egg with a melting snowcap, glossy black eyes, a straw boater with a red band, nub arms, red shoes and a grin full of little teeth. It rocks from foot to foot; every few seconds its hat springs off its head, wobbling round like a spun plate, and lands back with a squash while Fuji squeezes its eyes shut with glee. Raymarched in WebGL, six palettes. - [Imp](https://www.assembli.design/components/bloop-imp.md): Bloop pack critter: a bubblegum-pink imp with pointy fins, black horns and a ridge of spikes down its back, tall tile eyes under heavy bored lids and a mouthful of fangs. It floats about flapping its fins; every few seconds it ducks, springs into a forward somersault with its eyes popped wide and lands on the air with a wobble. A tap bristles every spike. Raymarched in WebGL, six palettes. - [Peep](https://www.assembli.design/components/bloop-peep.md): Bloop pack critter: a lime gumball with big googly eyes behind a smoky glass visor, a drippy shell top and bottom, an open grin and bean feet. It waddles from foot to foot; every few seconds its top shell pops up like a lid for a look round and drops back with a squash. The pupils roll loose with real physics, and a tap rattles them. Raymarched in WebGL, six palettes. ## Icons: Icons ### Plume > 287 line icons on a 24px grid with a 2px round stroke, covering the whole Feather catalogue under the same names. Each one moves the way it means: a bell swings, a trash lid lifts, a slash draws through. - [Plume Icons](https://www.assembli.design/components/plume-icons.md): 287 line icons drawn on a 24px grid with a 2px round stroke, covering the whole Feather catalogue under the same names. Every icon is a typed React component with size, stroke and accent props, and a part that moves the way it means: a bell swings, a trash lid lifts, a slash draws through. Plays on hover of the button around it, on mount, on loop or on demand. ### Offset > 287 two-ink icons, printed like a riso job: a fine key line and a flat spot of color on the part that carries the meaning, set a hair out of register. Hover and the plates pull into line while the icon moves. Same Feather names and props as Plume. - [Offset Icons](https://www.assembli.design/components/offset-icons.md): 287 two-ink icons covering the whole Feather catalogue. A 1.5px key line plus a flat spot of second ink on the part that carries the meaning (the bell's body, the pin's head), or a marker under arrows and ticks, printed a hair out of register like a riso job. Hover and the plates pull into line while the icon moves. Eleven inks, halftone and hatch screens. ### Argon > 287 neon icons bent from glass tube: a soft halo, the gas color and a hot white core, with painted-out jumps and wall clips at large sizes. Hover and the tube stutters on while the icon moves. Eight gases. Same Feather names and props as Plume. - [Argon Icons](https://www.assembli.design/components/argon-icons.md): 287 neon icons covering the whole Feather catalogue, each bent from glass tube: a soft halo, the gas color and a hot white core. From 40px up the sign maker's work shows too, the jumps between parts painted out in black and the clips that hold the tube to the wall. Hover and it stutters on while the icon moves. Eight gases, a second gas for the moving part, unlit glass and dark-until-hover modes. ### Keyline > 287 line icons that show their working. Hover and the construction lays in over the glyph (arcs completed to circles, guides, Bézier handles, dimensions), then it redraws along it. Same Feather names and props as Plume. - [Keyline Icons](https://www.assembli.design/components/keyline-icons.md): 287 line icons covering the whole Feather catalogue that show their working. Hover and the construction lays in over the glyph, derived from its own geometry: every arc completed to its circle, straight runs extended into guides, Bézier handles, anchor points, width, height and the biggest radius. Then the glyph redraws stroke by stroke along it. Hairlines stay one screen pixel at every size. ## Marketing blocks: Heroes - [Eclipse Hero](https://www.assembli.design/components/eclipse-hero.md): Night-black hero over a total solar eclipse drawn in a shader: corona streamers, flames off the limb, looping prominences and embers. The moon slides in from a crescent, then edges away from the pointer so a diamond-ring bead breaks out on the side facing it. Member sites circle inside the rim, beside a claim-your-name field. Raw WebGL. - [Sleepy Plush Hero](https://www.assembli.design/components/sleepy-plush-hero.md): Bedtime-brand hero with a knitted lilac bear raymarched in WebGL, hugging a puffy crescent moon on a midnight page. Its glossy eyes follow the cursor and it blinks and leans toward the pointer. Leave it alone and it gets drowsy: lids droop, the head nods and Zs drift up. Move the cursor and it startles awake. Press it for a squeeze. Script logo between two text columns. - [Payment Terminal Hero](https://www.assembli.design/components/payment-terminal-hero.md): Fintech hero with a glossy plastic card terminal raymarched in WebGL, floating in an exploded still life with a coiled cord, a coin stack and a cursor. The keypad taps out each amount, the card dips, the screen approves and a printed receipt tape feeds out. Floating nav card, big headline and gradient CTAs on the left. - [Plush Mascot Hero](https://www.assembli.design/components/plush-mascot-hero.md): Studio hero with a knitted plush mascot raymarched in WebGL: a mint gumdrop creature hugging a puffy star, with V-stitch knit, fuzzy silhouette and glossy eyes that follow the cursor. It blinks, leans toward the pointer, lifts its brows as you get close and squishes when pressed. Script logo between two text columns. - [Resonance Field Hero](https://www.assembli.design/components/resonance-field-hero.md): Studio hero over a sheet of thousands of lit ceramic spheres rippling in perspective. Each project slide morphs the field into its own wave (standing wave, two-source interference, slow swell), the cursor raises a swell under it, and a rotating badge pauses the motion. WebGL2 sprites, no three.js. - [Specimen Bloom Hero](https://www.assembli.design/components/specimen-bloom-hero.md): Split hero styled as a botanical plate. A wireframe lotus grows in from the stem, then blooms layer by layer. Callouts with leader lines track the moving mesh and light up the part they name, either in turn or on hover. Drag to turn the specimen. Ink on paper in light mode, a glowing wire bloom in dark mode. Canvas 2D, no three.js. - [Grass Arc Hero](https://www.assembli.design/components/grass-arc-hero.md): Airy hero where a furry grass hillside rises in an arc across a blue sky and fills the bottom of the frame, dotted with daisies. Over 200,000 instanced blades lean, sway in the wind and lie down wherever the pointer brushes them, then slowly stand back up. Italic serif over a tight sans headline, a glass pill nav, and a moonlit version in dark mode. Raw WebGL, no three.js. - [Holo Cloth Hero](https://www.assembli.design/components/holo-cloth-hero.md): Studio hero with a holographic cloth you can grab. A Verlet cloth ripples in a soft breeze; drag any point and it pinches, crumples and follows the pointer, then flutters back to its pose on a spring. The print is violet foil silk with a chrome anemone raised from a height map and your own words in condensed type, under an iridescent sheen and a soft cast shadow. Raw WebGL, no three.js. - [Dither Hero](https://www.assembli.design/components/dither-hero.md): A flowing, domain-warped field rendered as 1-bit ordered dither on a tiny pixelated canvas. Switch between Bayer, halftone-dot and scanline threshold matrices live, push the field with your cursor and click to send a ring through it. Theme-aware ink with an accent highlight. - [Life Type Hero](https://www.assembli.design/components/life-type-hero.md): The headline is a Game of Life seed. Pixel letters hold for a beat, then shatter into gliders and oscillators under Conway's rules before snapping back into the words. Hover to seed new cells, click to rewind instantly. Newborn cells glow in the accent colour; ink follows the theme. - [Rain on Glass Hero](https://www.assembli.design/components/rain-on-glass-hero.md): A fogged-up window on a neon city at night. Drag a finger across the glass to wipe a clear trail that slowly re-fogs, while raindrops swell, merge and slide down, each one a tiny upside-down lens of the street behind. Canvas 2D, no libraries beyond motion. - [Brilliant Hero](https://www.assembli.design/components/brilliant-hero.md): Luxury hero with a raymarched round brilliant diamond: real facets, light traced through the stone per color channel with total internal reflection, so dispersion and fire emerge on their own. It turns slowly in a studio of softboxes, tilts toward the cursor, throws rainbow caustics and twinkles with four-point flares. Raw WebGL, no three.js. - [Event Horizon Hero](https://www.assembli.design/components/event-horizon-hero.md): A black hole integrated per pixel: rays bend around it so the accretion disk wraps over and under the shadow, with a photon ring and Doppler-bright approaching side. Light mode lenses a celestial grid on paper; dark mode lenses a starfield. The cursor orbits the camera. Raw WebGL, no three.js. - [Floating Isle Hero](https://www.assembli.design/components/floating-isle-hero.md): Game-style hero with a raymarched floating island: grassy hills on a fluted rock spire, trees, a cottage, a pond spilling over the edge as a waterfall and rocks in orbit, under drifting CSS clouds. Sunlit with soft shadows by day; in dark mode it is moonlit, windows glow and fireflies drift. The cursor turns the island. Raw WebGL, no three.js. - [Jelly Garden Hero](https://www.assembli.design/components/jelly-garden-hero.md): Playful hero over a raymarched row of gummies on an endless floor that fogs into the page. Thin edges glow, floor shadows take the color of the jelly that cast them, and brushing or clicking a jelly sets it wobbling on its own spring. In dark mode they glow and pool colored light. Raw WebGL, no three.js. - [Koi Pond Hero](https://www.assembli.design/components/koi-pond-hero.md): Calm full-bleed hero over a living koi pond: a GPU wave simulation refracts a pebble floor with caustics, koi drawn in shader swim, school and cast shadows, and lily pads with blooms ride the swell. The cursor trails ripples and a tap drops food the koi race for. Moonlit in dark mode. WebGL2, no three.js. - [Minted Coin Hero](https://www.assembli.design/components/minted-coin-hero.md): Centered fintech hero with a raymarched coin rising from the bottom of the frame: raised rim, bead ring, an embossed planet emblem, lathe-turned field and a reeded edge, lit by a procedural studio of softboxes. Seven small coins tumble in orbit around it, it tilts toward the cursor, and it flips on a spring every few seconds or on click. The metal color is a prop. Raw WebGL, no three.js. - [Shadow Study Hero](https://www.assembli.design/components/shadow-study-hero.md): Full-bleed raymarched still life: a plaster arch, sphere, column, stair and hoop on an endless floor that fogs into the page background. The cursor moves the sun, sweeping soft raymarched shadows across the floor, with a live time-of-day readout. Light mode is sunlit plaster, dark mode a moonlit stage. Raw WebGL, no three.js. - [Soap Bubble Hero](https://www.assembli.design/components/soap-bubble-hero.md): Airy centered hero with drifting soap bubbles shaded by real thin-film interference: film thickness drains and swirls, so gold and magenta bands slide around and the crown thins to black. Bubbles show front and back films with window reflections, shy away from the cursor and pop into droplets on click. Raw WebGL, no three.js. - [Swallowtail Hero](https://www.assembli.design/components/swallowtail-hero.md): Centered hero with a swarm of CSS 3D swallowtail butterflies that share one 3D context with the headline, so they fly both in front of and behind it. SVG wings flap in bursts and glides, bodies bank into turns, the cursor startles nearby ones and a click scatters the swarm. It bursts out from the center on load. No WebGL. - [Tide Hero](https://www.assembli.design/components/tide-hero.md): Cinematic hero over a raymarched open ocean: wind-dragged crests, Fresnel reflections and a sun glitter path that follows the cursor along the horizon, under golden-hour cloud. The sky fades into the page so copy sits on it. In dark mode it is moonlit and starry, and a lighthouse sweeps a volumetric beam. Raw WebGL, no three.js. - [Beam Hero](https://www.assembli.design/components/beam-hero.md): Centered hero above a flow diagram: source nodes connect to a central hub through curved SVG paths that draw in on load. Gradient light beams travel along each path in sequence; the hub flares as they arrive, then fires beams out to the destinations. Inputs, outputs and logo are configurable. - [Brutalist Hero](https://www.assembli.design/components/brutalist-hero.md): Neo-brutalist hero: oversized uppercase headline with a highlighter word (BrutalistMark) and hand-drawn underline (BrutalistScribble), thick borders and hard offset shadows that press flat on hover, draggable stickers (spinning text badge, starburst, smiley) and a tilted ticker tape along the bottom. - [Depth Stack Hero](https://www.assembli.design/components/depth-stack-hero.md): Split product hero with a 3D stack of live UI cards (revenue chart, deploy progress, payment toast) in real perspective. The stack tilts toward the cursor on springs and its layers separate in Z when hovered; bars grow and the deploy bar loops. - [Dot Field Hero](https://www.assembli.design/components/dot-field-hero.md): Interactive canvas hero: a grid of dots springs away from the cursor, grows and glows in the accent color. Ripple waves roll out from random points or wherever you click. Colors follow the theme, and animation pauses offscreen and switches off for reduced motion. - [Keycap Hero](https://www.assembli.design/components/keycap-hero.md): Keyboard-first hero: two rows of 3D keycaps tilted in perspective play shortcut combos in turn, glowing in the accent color as each key goes down, with a caption naming each shortcut. Pressing keys on your own keyboard lights up the matching keycaps. - [Kinetic Type Hero](https://www.assembli.design/components/kinetic-hero.md): Oversized typographic hero: lead words rise from clipping masks, then a serif italic word cycles letter by letter through 3D blur, the line reflows smoothly, a stroke redraws beneath it, and story-style progress pills let you jump between words. A violet dot spotlight trails the cursor. - [Orbit Hero](https://www.assembli.design/components/orbit-hero.md): Integrations hero: icon tiles circle a central mark on three counter-rotating dashed rings and stay upright as they travel. A conic radar sweep passes over the rings, ripples pulse from the hub, and hovering pauses the orbit and shows labels. Rings and logo are configurable. - [Parallax Floating](https://www.assembli.design/components/parallax-floating.md): Hero where floating cards sit at different depths and drift against the pointer with spring easing, while a slow idle bob keeps the scene alive. Depth drives size, blur and speed. - [Perspective Product Hero](https://www.assembli.design/components/perspective-product-hero.md): Left-aligned product hero above a full app window (an issue tracker mockup by default, or your own via children) tilted back in 3D. The window flattens and lifts as the hero scrolls away, with a rim of light on its top edge and a fade to the background at the bottom. - [Prism Hero](https://www.assembli.design/components/prism-hero.md): Infrastructure hero: a beam of light draws in from the left, strikes a glass prism and fans out into an eight-color spectrum that fades across the page and gently shimmers, over a fading grid. Built entirely in SVG; works in light and dark. - [Prompt Hero](https://www.assembli.design/components/prompt-hero.md): AI-builder hero in the style of today's app generators: a large prompt box types example prompts letter by letter, deletes them and moves on, over a warm sunrise glow on the bottom edge with film grain. Suggestion chips fill the prompt in one click, Enter submits, and an onSubmit callback receives the text. - [Release Shelf Hero](https://www.assembli.design/components/release-shelf-hero.md): Release archive hero styled like a record shelf. Square cover art drops onto two lit shelves. Hovering or focusing a cover lifts it out of its slight tilt and reveals Open and Details links, and a year/season timeline underneath highlights the matching cover. The current release wears a holographic "Now playing" sticker. - [Skew Gradient Hero](https://www.assembli.design/components/skew-gradient-hero.md): Payments-style hero: five blurred color blobs drift inside a band skewed downhill across the top, behind a bold deep-navy headline. A floating checkout card and an animated revenue chip sit on the right (replaceable via children). Mesh colors are configurable. - [Tilted Wall Hero](https://www.assembli.design/components/tilted-wall-hero.md): Centered hero over an isometric wall of UI tiles (charts, toggles, avatars, stats, gradient swatches) tilted in 3D. Alternate columns scroll endlessly in opposite directions, and a radial vignette keeps the headline readable. The wall settles in from a slight zoom on load. - [Editorial Hero](https://www.assembli.design/components/editorial-hero.md): Magazine-cover hero: masthead rules, an oversized serif headline that rises line by line out of clipping masks, a drop-cap deck, credits row and a rotating circular 'read the story' stamp. - [Globe Hero](https://www.assembli.design/components/globe-hero.md): Split hero with a rotating dotted globe: a Fibonacci-lattice sphere drawn on canvas with depth shading, and great-circle routes between cities that draw in, hold and retract with pulsing endpoints. - [Terminal Hero](https://www.assembli.design/components/terminal-hero.md): Developer-tool hero pairing a headline and copyable install command with a dark terminal that types commands at human speed and streams colored output once scrolled into view. - [Gradient Hero](https://www.assembli.design/components/gradient-hero.md): Centered landing hero with a fading grid, soft conic gradient glow, eyebrow pill and primary/secondary actions. - [Scroll Tilt Showcase](https://www.assembli.design/components/scroll-tilt-showcase.md): Hero showcase whose device frame starts tipped back in 3D and settles flat as you scroll, inside a sticky stage, while the heading drifts away and a glare fades out. Static for reduced motion. ## Marketing blocks: Features - [Horizontal Scroll Showcase](https://www.assembli.design/components/horizontal-scroll-showcase.md): Scrollytelling section: vertical scroll drives a pinned horizontal track. Panels slide sideways while their art drifts at a different speed, with a live step counter and progress bar. - [Autoplay Feature Tabs](https://www.assembli.design/components/feature-tabs-autoplay.md): Tabbed product showcase whose tabs advance on their own, each with a progress bar that fills while its visual is on screen. Hovering or focusing pauses; clicking jumps. Tabs become a scrollable strip on small screens. - [Hairline Feature Grid](https://www.assembli.design/components/feature-hairline-grid.md): Engineering-style feature grid divided by 1px rules with plus marks at the intersections. Each cell has an icon, title and copy; hovering lights the cell with a soft radial wash. No JavaScript. - [Old Way vs New Way](https://www.assembli.design/components/feature-old-vs-new.md): Before/after feature comparison: a muted column of struck-through pain points beside a highlighted column of wins. A switch flips focus between the two on small screens; side by side on large ones. - [Shortcut Feature Grid](https://www.assembli.design/components/feature-shortcut-grid.md): Feature cards that each own a keyboard shortcut. Press the keys and the matching card lights up and its keycaps press down; hover does the same. Made for keyboard-first products. - [Stacking Feature Cards](https://www.assembli.design/components/feature-stack-scroll.md): Full-width feature cards that pin as you scroll and stack on top of each other; cards underneath shrink and dim so the deck reads as depth. - [Zigzag Feature Rows](https://www.assembli.design/components/feature-zigzag.md): Alternating copy and visual rows with eyebrow, headline, checklist and link. Each row slides in from its own side as it enters the viewport. - [Expanding Panels](https://www.assembli.design/components/expanding-panels.md): Row of tall art panels where the hovered, focused or tapped one springs open to reveal its story while the rest collapse to vertical labels. Stacks vertically on small screens. A bold feature showcase. - [Integration Orbit](https://www.assembli.design/components/integration-orbit.md): Integrations hub where tool icons orbit a central logo on concentric rings at different speeds, counter-rotating to stay upright. Pure CSS: hover pauses the system, reduced motion stops it. - [Sticky Feature Scroll](https://www.assembli.design/components/sticky-feature-scroll.md): Scrollytelling features: copy blocks scroll past on one side while a pinned panel cross-fades (with blur) to the visual for whichever step is centered. Falls back to inline visuals on mobile. - [Bento Features](https://www.assembli.design/components/bento-features.md): Responsive bento grid for feature overviews with wide and tall cards, icons and optional per-card visuals. ## Marketing blocks: Pricing - [Access Pass Pricing Card](https://www.assembli.design/components/pricing-access-card.md): A single centred pricing card in three stacked bands: a mono plan badge with headline, a big price with optional struck-through anchor, full-width pill button and small assurances, then a checklist and a fine-print footer. Works inline or inside a modal. - [Credit Packs Pricing](https://www.assembli.design/components/pricing-credit-packs.md): Pay-as-you-go credit packs for AI products: selectable pack tiles with bonus credits, a unit-cost chart that shows the volume discount, and an estimator that translates credits into things people actually make. - [Glow Tiers Pricing](https://www.assembli.design/components/pricing-glow-tiers.md): Premium tier cards whose borders catch a light that follows the pointer across the whole grid, with a slowly rotating gradient beam around the featured plan and rolling prices on the billing toggle. - [One Plan Pricing](https://www.assembli.design/components/pricing-one-plan.md): Single-plan pricing with an editorial oversized price, a billing switch that rolls the digits, a grouped everything-included list, and an anchoring panel that strikes through the tools it replaces and what they cost together. - [Plan Switcher Pricing](https://www.assembli.design/components/pricing-plan-switcher.md): Compact pricing as one morphing card: a segmented control picks the plan, the price rolls, and the feature list shows exactly what each step up unlocks, with newly included rows popping in and tagged. - [Receipt Pricing Builder](https://www.assembli.design/components/pricing-receipt.md): Build-your-plan configurator: pick a plan, seats and add-ons on the left while a torn-paper receipt on the right adds and removes line items, applies the annual discount and rolls the total. - [Seat Builder Pricing](https://www.assembli.design/components/pricing-seat-builder.md): Per-seat pricing where one team-size control drives every tier: per-seat and team totals roll digit by digit, plans outside their seat range dim, and a 'Best fit' badge glides to the plan that matches. Monthly/yearly toggle included. - [Usage Pricing Slider](https://www.assembli.design/components/usage-pricing-slider.md): Usage-based pricing calculator: a stepped gradient slider drives graduated tier math, a rolling blur-swap price readout, the active tier and per-unit cost, with full range-input accessibility. - [Pricing Cards](https://www.assembli.design/components/pricing-cards.md): Three-tier pricing section with a monthly/yearly toggle, highlighted plan, feature checklists and custom-price support. ## Marketing blocks: Testimonials - [Quote Spotlight](https://www.assembli.design/components/quote-spotlight.md): One large testimonial at a time: words blur in sequentially, and a row of avatars doubles as navigation with a progress ring around the current speaker. Autoplay pauses on hover and focus. - [Testimonial Columns](https://www.assembli.design/components/testimonial-columns.md): Testimonials in vertical columns drifting upward at staggered speeds behind top and bottom fades. A column pauses while hovered or focused, collapses to one or two columns on small screens and stops for reduced motion. - [Testimonial Marquee](https://www.assembli.design/components/testimonial-marquee.md): Two rows of testimonial cards scrolling in opposite directions with edge fades; pauses for users who prefer reduced motion. ## Marketing blocks: Calls to action - [Cohort Seats CTA](https://www.assembli.design/components/cohort-seats-cta.md): Enrollment closer for a cohort, workshop or event: an early-bird countdown with sliding split-flap digits, a theatre-style seat map that fills front-first, and the best open seat pulsing harder while the visitor hovers the button. - [Fork CTA](https://www.assembli.design/components/fork-cta.md): Two-path closer pairing a low-commitment self-serve route with a high-touch sales route. Hovering or focusing a path widens it and dims the other; the sales card is inverted with a grid texture and an avatar stack. - [Horizon CTA](https://www.assembli.design/components/horizon-cta.md): Closing panel lit by a planet rising over its bottom edge: rim-lit horizon, swaying conic light rays, a breathing atmosphere and a twinkling star field. Announcement pill, gradient headline and a sheen-sweep primary button. - [Marquee Type CTA](https://www.assembli.design/components/marquee-type-cta.md): Big-type closing section: an outlined headline loops as a marquee, an accent fill wipes up through the letters on hover, and a rotating circular-text badge follows the cursor. Availability status and contact links included. - [Portal Door CTA](https://www.assembli.design/components/portal-door-cta.md): Closing call to action with an arched door standing in the page. Hovering or focusing the button (or the door) swings it open on a heavy spring: the slab has real thickness, light spills across the floor and the scene behind the doorway comes into view. - [Savings Calculator CTA](https://www.assembli.design/components/savings-calculator-cta.md): Personalised closer: team-size and hours sliders drive a spring-animated hours-per-year figure and its cost, a grid of people fills to show equivalent hires, and the button label quotes the visitor's own number back to them. - [Sticker CTA](https://www.assembli.design/components/sticker-cta.md): Playful closer on graph paper covered in die-cut stickers (starburst, tape, circle, pill and pennant) that slap on with a springy stagger and can be dragged and tossed around. Chunky pressable buttons; stickers are configurable. - [Spotlight CTA](https://www.assembli.design/components/spotlight-cta.md): Closing call-to-action card lit by a spring-smoothed light that follows the cursor, with film grain, registration marks and a rotating-arrow pill button. - [Waitlist CTA](https://www.assembli.design/components/waitlist-cta.md): Waitlist closer with an inline email pill: submit morphs the button through a spinner, bursts confetti and reveals the visitor's position in line. Error state and social proof included. ## Marketing blocks: Logo clouds - [Logo Carousel](https://www.assembli.design/components/logo-carousel.md): Logo cloud that swaps one slot at a time, in scattered order, with each mark rising out of a blur while the old one lifts away. Never shows the same logo twice at once. - [Wordmark Wall](https://www.assembli.design/components/wordmark-wall.md): Hairline-grid logo cloud where each brand gets its own typographic treatment and hovering a cell rolls the wordmark away to reveal the customer's result. ## Marketing blocks: Stats - [KPI Sparklines](https://www.assembli.design/components/kpi-sparklines.md): KPI cards with a delta badge and a scrubbable sparkline: hover anywhere on the line to read that point back into the headline. Good/bad coloring respects metrics where down is good. - [Ring Stats](https://www.assembli.design/components/ring-stats.md): KPI row of radial progress rings with tick marks that sweep and count up together when scrolled into view, each with its own glow color and caption. - [Split-Flap Stats](https://www.assembli.design/components/split-flap-stats.md): KPI row rendered as an airport departure board: each digit tile clatters through random numbers and settles in a staggered cascade when scrolled into view. - [Activity Rings](https://www.assembli.design/components/activity-rings.md): Concentric progress rings in the style of a fitness tracker: round-capped strokes sweep in on view with a staggered spring, a legend counts up, and hovering a ring spotlights its metric. ## Marketing blocks: FAQs - [FAQ Chat](https://www.assembli.design/components/faq-chat.md): FAQ as a conversation: unanswered questions wait as chips; picking one sends it as a bubble, shows a typing indicator, then answers. Asked questions leave the chip row. - [FAQ Ledger](https://www.assembli.design/components/faq-ledger.md): Two-column FAQ with a sticky heading and live filter beside a numbered ledger of questions; answers open with a spring height animation and the plus rotates into a filled close mark. ## Marketing blocks: Footers - [Outline Footer](https://www.assembli.design/components/outline-footer.md): Site footer with a pill newsletter form, link columns with sliding arrows, and an oversized outlined wordmark that floods with gradient from the bottom on hover. - [Wordmark Footer](https://www.assembli.design/components/wordmark-footer.md): Footer with link columns that ends on an oversized wordmark cropped by the page edge. The hollow letters fill with soft light wherever the pointer passes. ## Marketing blocks: Navigation - [Fullscreen Menu](https://www.assembli.design/components/fullscreen-menu.md): Header with a takeover menu: an inverted circle wipes out from the toggle, giant links rise out of masks one by one, hovering one dims the rest, and Escape returns focus to the button. - [Notch Tab Bar](https://www.assembli.design/components/notch-tab-bar.md): Mobile bottom tab bar with a curved cutout that glides under the active tab while its icon floats up in a coloured bubble. - [Scrollspy Contents](https://www.assembli.design/components/toc-scrollspy.md): On-this-page table of contents that tracks the section in view, with a sliding indicator, nested levels and a reading progress line. - [Island Nav](https://www.assembli.design/components/island-nav.md): Header that starts as a full-width bar and, once you scroll, springs into a floating frosted pill: width, radius, padding and shadow all animate. Hover highlight glides between links. - [Mega Menu](https://www.assembli.design/components/mega-menu.md): Stripe-style navigation with one shared dropdown surface that resizes and slides between panels instead of closing and reopening; panel contents cross-fade in the direction you moved. - [Pill Nav](https://www.assembli.design/components/pill-nav.md): Floating frosted navbar where a pill glides between links on hover (shared layout animation), the current page gets a dot, and mobile opens a staggered sheet. - [Morph Nav](https://www.assembli.design/components/morph-nav.md): Floating pill navbar with a mega-menu panel that glides under the hovered item and morphs its width and height to fit the content, sliding panels directionally. Opens on hover, focus or click; Escape closes. ## Marketing blocks: Backgrounds - [Halftone Field](https://www.assembli.design/components/halftone-field.md): Print-style canvas backdrop: a staggered dot lattice whose dot sizes ride flowing interference waves, swelling under the cursor. Pauses off-screen, adopts the text colour, and freezes for reduced motion. - [ASCII Field](https://www.assembli.design/components/ascii-field.md): A canvas grid of characters that swells and brightens around the pointer and drifts with an ambient wave. - [Dot Grid Ripple](https://www.assembli.design/components/dot-grid-ripple.md): Canvas dot matrix that reacts to you: the pointer swells nearby dots and every click sends a shockwave rippling through the grid. DPR-aware, pauses off-screen, reads the text colour so it follows light and dark. - [Flow Field](https://www.assembli.design/components/flow-field.md): Thousands of fading particles tracing a slowly evolving noise field on canvas, with the pointer bending the current. - [Goo Cursor Field](https://www.assembli.design/components/goo-cursor.md): A trailing chain of blobs fused by an SVG gooey filter. The head follows the pointer, each blob chases the one before it, and they melt together. - [Gradient Blobs](https://www.assembli.design/components/gradient-blobs.md): Slow, organic mesh-gradient background: four blurred colour blobs drift on offset loops, with a fine grain overlay that kills banding. Takes any palette, static when motion is reduced. - [Iso Wave Field](https://www.assembli.design/components/iso-wave-field.md): Isometric field of pillars that breathes in slow interference waves. The pointer raises a swell beneath it and each click sends a ripple ring across the grid. Drawn back to front on a 2D canvas with three shaded faces per pillar; wraps any content as a hero background. - [Pixel Trail](https://www.assembli.design/components/pixel-trail.md): A pixel grid that lights up under the cursor and decays cell by cell, leaving a fading mosaic wake. Canvas-based, DPR-aware, theme-aware. - [Aurora Backdrop](https://www.assembli.design/components/aurora-backdrop.md): Section background of four blurred color fields drifting on independent loops over a radially masked dot grid; blends correctly in light and dark mode and holds still for reduced motion. - [Beam Grid](https://www.assembli.design/components/beam-grid.md): Blueprint grid fading out from the center while comet-tailed beams of light race along random grid lines in both axes; deterministic placement, no beams for reduced motion. - [Constellation Field](https://www.assembli.design/components/constellation-field.md): Canvas starfield whose drifting points join with threads when they pass close. The cursor pushes stars aside and casts accent-colored threads of its own. Theme-aware, reduced-motion safe. - [Dot Matrix Wave](https://www.assembli.design/components/dot-matrix-wave.md): Canvas dot field with a slow diagonal swell and a liquid lens that inflates dots around the cursor; follows the theme via currentColor, DPR-aware, and draws a single frame for reduced motion. - [Grain Gradient](https://www.assembli.design/components/grain-gradient.md): Risograph-style mesh gradient: four radial color fields slide and rotate past each other beneath heavy SVG film grain and a soft vignette, for editorial heroes and posters. - [Retro Grid](https://www.assembli.design/components/retro-grid.md): Synthwave floor: a perspective grid scrolls toward the viewer beneath a striped sunset sun and a glowing horizon line. Configurable cell size, speed and neon color. - [Topo Lines](https://www.assembli.design/components/topo-lines.md): SVG topographic contour rings generated from layered sine terrain that slowly breathe and shift, with heavier index contours every fifth line; uses currentColor so it suits both themes. - [Warp Starfield](https://www.assembli.design/components/warp-starfield.md): Canvas starfield streaming toward the viewer that eases into hyperspace when hovered or focused: stars stretch into streaks with motion trails, then settle back to cruise. ## Marketing blocks: Text effects - [Fisheye Type](https://www.assembli.design/components/fisheye-type.md): Headline letters that stretch tall like a dock magnifying its icons: each glyph springs up and brightens as your cursor or finger passes, with neighbours following in a smooth bell curve. When nobody is hovering, a wave sweeps through on its own. Pure transforms, so layout never shifts. - [Lyrics Sync](https://www.assembli.design/components/lyrics-sync.md): Karaoke-style synced lyrics: the active line glides to centre, fills word by word as time passes, and neighbours fade and blur with distance. Click a line or drag the scrubber to seek. - [Cylinder Words](https://www.assembli.design/components/cylinder-words.md): Rotating headline word printed around a real 3D drum that clicks forward one face at a time with a slot-reel overshoot. Neighbouring faces curve away above and below, the inline width locks to the longest word, hover pauses it, and the current word is announced to screen readers. - [Flashlight Text](https://www.assembli.design/components/flashlight-text.md): A headline written in near-invisible ink that a roving beam of colour reveals. It follows the pointer on a spring and drifts on its own in a Lissajous path when idle, so it also works on touch screens. Reduced motion shows the full gradient. - [Paper Fold Text](https://www.assembli.design/components/paper-fold-text.md): Headline cut into horizontal panels and folded like a paper map with alternating creases. It springs open the first time it scrolls into view and creases again on hover, with panels shaded by the angle they face. Works for any block of text; the real text stays in the DOM for layout and screen readers. - [Roll Text](https://www.assembli.design/components/roll-text.md): Letters roll up and out and a duplicate rolls in behind them, staggered left to right, whenever the parent is hovered or focused. Pure CSS transitions, works for links, nav and buttons. - [Weight Wave Text](https://www.assembli.design/components/weight-wave-text.md): Headline whose variable-font weight swells under the cursor. Letters nearest the pointer go heavy and the weight falls off smoothly with distance, so a wave of boldness follows your mouse. - [Blur In Text](https://www.assembli.design/components/blur-in-text.md): Headline that resolves out of a blur word by word or letter by letter as it enters the viewport. Words never break mid-character; replays optionally. - [Kinetic Headline](https://www.assembli.design/components/kinetic-headline.md): Headline whose words rise into view from behind per-word masks with a springy tumble, staggered when scrolled into view; chosen accent words switch to serif italic. Screen readers get the plain text. - [Scramble Text](https://www.assembli.design/components/scramble-text.md): Text that decodes from glyph noise, locking characters in left to right when it scrolls into view and replaying on hover, while assistive tech reads the real string. - [Scroll Reveal Text](https://www.assembli.design/components/scroll-reveal-text.md): Statement paragraph that reads itself as you scroll: each word brightens from a faint ghost to full ink in order, tied directly to scroll position so it rewinds when you scroll back. - [Shimmer Text](https://www.assembli.design/components/shimmer-text.md): Text with a band of light sweeping through it: the 'thinking…' treatment for AI status lines, loading labels and launch eyebrows. CSS only, custom base and highlight colors. - [Marker Highlights](https://www.assembli.design/components/marker-highlights.md): Inline hand-drawn emphasis for copy: highlighter swipes, squiggly underlines, loose circles, strikes and boxes that draw themselves when scrolled into view. Wraps across lines and respects reduced motion. - [Rotating Words](https://www.assembli.design/components/rotating-words.md): Inline word that cycles through a list, sliding up out of a blur on a spring while its slot resizes to fit the next word. Style the word with any class (gradients work); screen readers hear one stable word. ## Marketing blocks: Marquees - [Path Marquee](https://www.assembli.design/components/path-marquee.md): Chips and words that ride a curved SVG path in a loop. Scroll velocity pushes them faster, hovering slows them, and items rotate to follow the tangent. - [Velocity Marquee](https://www.assembli.design/components/velocity-marquee.md): Two-row text marquee that speeds up and flips direction with scroll velocity, then eases back to a gentle drift. - [Card Wall 3D](https://www.assembli.design/components/card-wall-3d.md): A wall of cards laid back in 3D and twisted, with alternate columns scrolling in opposite directions forever behind your headline. Pure CSS; hover pauses, edges fade into the page. - [Tape Marquee](https://www.assembli.design/components/tape-marquee.md): Two crossing tilted tapes of heavy uppercase words scrolling in opposite directions, driven per frame so each ribbon pauses smoothly on hover. ## Marketing blocks: Timelines - [Order Tracker](https://www.assembli.design/components/order-tracker.md): Delivery progress drawn as a winding route: the line fills as the parcel advances, a truck rides the exact path between stops, and the active stop pulses. Fully driven by one current-step prop. - [Gantt Chart](https://www.assembli.design/components/gantt-chart.md): An interactive project timeline: drag bars to reschedule, pull their edges to resize, everything snaps to days. Finish-to-start dependency arrows reroute live and flag conflicts with a dashed line and a warning icon. Today marker, weekend shading, keyboard control and a live summary. - [Changelog Timeline](https://www.assembli.design/components/changelog-timeline.md): Changelog with a sticky date column and a rail that fills as you scroll. Release nodes light up when reached; entries are tagged New, Improved or Fixed. - [Orbital Timeline](https://www.assembli.design/components/orbital-timeline.md): Roadmap milestones orbiting a pulsing core. Selecting one pauses the orbit, draws lines to related milestones and opens a detail card with status and progress. The orbit is pure CSS, nodes counter-rotate to stay upright, and Escape closes. ## Marketing blocks: 3D - [Tag Sphere](https://www.assembli.design/components/tag-sphere.md): A word cloud wrapped round a sphere: Fibonacci-distributed labels orbit with depth-scaled size and opacity, drag to spin with inertia, and hovering or focusing a word slows the globe. Positions are written straight to the DOM, so there are no re-renders. - [Book CTA](https://www.assembli.design/components/book-cta.md): Lead-magnet call to action built around a real CSS 3D hardcover with spine, page block and back cover. It floats, turns toward the cursor, and on hover the front cover swings open on its hinge to show the title page. The linen cover has a foil band and moving glare. An email form with pending and success states sits beside it. - [Contribution Skyline](https://www.assembli.design/components/contribution-skyline.md): A year of activity as a 3D city of bars on canvas, with real per-face shading and painter-sorted depth. Bars rise in a wave on load, the camera sways gently and you can drag to orbit. Hover any bar for its exact count and date. A stats row and legend come built in. Theme-aware, any hue. - [Cube Letter Swap](https://www.assembli.design/components/cube-letter-swap.md): Rotating word where every letter is a real 3D prism: on each tick the letters roll a quarter turn in a staggered wave with a little overshoot, revealing the next word on the face below, with light falling off as faces turn away. Works inline in any headline. Rolls up or down, with an optional mode that sets each letter on a tile. Screen readers hear each word once. - [Depth Tunnel](https://www.assembli.design/components/depth-tunnel.md): Scroll-driven 3D gallery: frames hang on alternating walls of a CSS perspective corridor and the camera flies down it as you scroll, easing between wheel steps. Frames emerge from fog, sharpen as they pass, floor and ceiling grids stream by, and a headline waits at the vanishing point. - [Device Hero](https://www.assembli.design/components/device-hero.md): App launch hero with a phone built entirely from DOM layers: a live screen, a camera plateau on the back and a frame of stacked slices that gives the edge real thickness. It leans toward the cursor on a spring, flips to show its back, and floating cards sit at their own depth for true parallax. - [Dotted Surface](https://www.assembli.design/components/dotted-surface.md): Background of dots laid on a rolling 3D surface that recedes to a horizon. Columns converge on the vanishing point, points shrink and fog with distance, and wave crests light up in an accent color. Moving the pointer casts onto the ground and sends ripples across it. Canvas 2D, theme-aware, pauses off-screen. - [Exploded Stack](https://www.assembli.design/components/exploded-stack.md): Architecture section with an isometric stack of solid plates, each with a real thickness edge, that pull apart when they scroll into view and spread further on hover. A beam of light runs up through every layer, and the highlighted plate lifts out and glows. Autoplays through the layers and stays in sync with the list beside it. - [Feature Cube](https://www.assembli.design/components/feature-cube.md): Feature section built around a real CSS 3D cube. Each side face shows one feature's visual. The cube turns the short way round on a spring when you pick a feature, autoplays with a progress line, and you can grab it to spin. Faces darken as they turn from the light, over a perspective floor grid. - [Point Morph Hero](https://www.assembli.design/components/point-morph-hero.md): WebGL hero where eleven thousand points morph between a sphere, a torus knot, a wordmark sampled from canvas, a wave field, a lattice and a helix. Each morph bursts outward with a per-point stagger, depth drives size and color, the cursor parts the cloud, and a numbered index lets you pick a shape. Raw WebGL, no three.js. - [Puzzle Cube](https://www.assembli.design/components/puzzle-cube.md): A fully working 3×3 twisty puzzle in pure CSS 3D: 26 cubies driven by rotation matrices, per-face Lambert shading from a fixed light, drag-to-orbit with inertia, keyboard face turns, and an autoplay loop that scrambles and then solves itself by reversing its history. - [Sculpture Hero](https://www.assembli.design/components/sculpture-hero.md): Split hero with a raymarched WebGL sculpture: a breathing torus with three orbs melting through it, shaded as iridescent lacquer with anti-aliased edges on a transparent canvas. It turns toward the cursor over a receding ring floor, with floating glass callouts. No three.js; one fragment shader. - [Testimonial Helix](https://www.assembli.design/components/testimonial-helix.md): Testimonials spiralling around a 3D helix that turns slowly. Cards on the far side show their backs and fade with the angle, Fling it to spin with inertia, and hover to slow it to a reading pace. Radius and rise adapt to the card count and number of turns. - [Trifold Invite](https://www.assembli.design/components/trifold-invite.md): Letter-folded card in CSS 3D. Closed, it shows a cover flap with a wax seal; open it and the top flap swings up, then the bottom flap swings down, each panel shading as it turns from the light. Folding closes it in reverse order. Bring your own cover, three inside panels and a back. ## UI components: Buttons - [Tactile Button](https://www.assembli.design/components/tactile-button.md): A button with real travel: the face sits on a visible edge, lifts on hover and sinks into it on press with a springy release. Latches half-down with aria-pressed; disabled stays down. - [Shortcut Button](https://www.assembli.design/components/shortcut-button.md): A button with live keycaps: pressing its chord (mod+enter, /, …) clicks it and the caps sink while held. Shows ⌘ or Ctrl per platform, sets aria-keyshortcuts and ignores bare keys while typing. - [Icon Reveal Button](https://www.assembli.design/components/icon-reveal-button.md): Icon button that grows its label on hover or keyboard focus via an animated grid track, so any label length works. Toolbar-ready, with solid, soft, outline, ghost and destructive variants. - [Roll Text Button](https://www.assembli.design/components/roll-text-button.md): Pill whose label rolls letter by letter on hover, each character tipping away as its twin rises in, staggered left to right. Can roll to a different word; arrow chip turns. CSS only. - [Paper Plane Button](https://www.assembli.design/components/paper-plane-button.md): Send button whose paper plane crouches, launches out of the button on an arc with a dotted contrail, then settles into Sent with a drawn check. Waits on async onSend and shows an error state. - [Arrow Chip Button](https://www.assembli.design/components/arrow-chip-button.md): Agency-style pill with a round arrow chip that floods the whole button on hover via a growing clip-path, while the label inverts and the arrow shoots out and reloads. Custom accent. CSS only. - [Mesh Gradient Button](https://www.assembli.design/components/mesh-gradient-button.md): Pill made of drifting light: three blurred colour blobs wander over a base under grain and a glassy top edge; hover saturates the mesh and blooms a matching glow. Four palettes or your own. - [Gradient Outline Button](https://www.assembli.design/components/gradient-outline-button.md): Hairline gradient outline with matching gradient ink that slowly turns; on hover the gradient pours in as a fill, the ink crossfades to white and a tinted glow lifts it. CSS only. - [Iridescent Button](https://www.assembli.design/components/iridescent-button.md): Pearlescent foil pill: a conic rainbow, diffraction lines and a specular hotspot follow the pointer as the button tilts toward it, shifting colour like a hologram. Turns slowly at rest. - [Border Beam Button](https://www.assembli.design/components/border-beam-button.md): A button whose hairline border is traced by a travelling beam of light, with a soft matching glow underneath. Pure transform animation, pauses for reduced motion. - [Morph Icons](https://www.assembli.design/components/morph-icons.md): Icon buttons whose glyphs physically transform: a menu folds into a cross, play melts into pause, plus collapses into minus, a speaker grows sound waves, copy draws a tick, a chevron turns over. Path interpolation on springs, accessible toggle semantics. - [Slide to Confirm](https://www.assembli.design/components/slide-to-confirm.md): A drag-to-confirm control: the label shimmers and fades as you pull the handle, a green fill chases it, then it settles through a loading spinner into a success state. Keyboard users get arrow and Enter support. - [Slide-Fill Button](https://www.assembli.design/components/slide-fill-button.md): Outline button that fills from whichever edge your pointer enters and drains out the edge it leaves, with the label inverting under the fill. Direction-aware hover on springs. - [Burst Like](https://www.assembli.design/components/burst-like.md): Like button with payoff: the heart squashes and refills, a ring flashes, ten confetti particles burst outward and the count rolls up or down; aria-pressed toggle, quiet under reduced motion. - [Copy Button](https://www.assembli.design/components/copy-button.md): Copy-to-clipboard button whose two-sheet icon folds away as a check draws itself, with a tiny 'Copied' tooltip and a screen-reader announcement. - [Hold to Confirm](https://www.assembli.design/components/hold-to-confirm.md): Destructive button you press and hold (pointer, touch, Space or Enter) while a fill sweeps across and the label inverts beneath it; releasing early drains it back, completion turns it green. - [Magnetic Button](https://www.assembli.design/components/magnetic-button.md): Button with gravity: it springs toward the pointer while its label moves further for a parallax lean, squishes on press and rests still for reduced motion. Solid and outline variants. - [Morph Submit](https://www.assembli.design/components/morph-submit.md): Async submit button that becomes its state: the pill collapses into a spinning circle, then springs back out as a green check or a shaking red error before resetting; labels blur-swap. - [Ripple Button](https://www.assembli.design/components/ripple-button.md): Button with ink ripples that spread from the exact point you press (or the center for keyboard). Rapid presses stack ripples; each cleans itself up. Solid, soft and outline variants. - [Shimmer Button](https://www.assembli.design/components/shimmer-button.md): Premium pill button with an inner top highlight, gradient body and a glass sheen that sweeps across on a slow loop (faster on hover). Solid and outline variants, CSS only. - [Glow Button](https://www.assembli.design/components/glow-button.md): Pill button with a rotating conic-gradient border and a soft hover glow; customizable colors and speed, respects reduced motion. - [Liquid Glass Button](https://www.assembli.design/components/liquid-glass-button.md): Pill button made of liquid glass: the backdrop is blurred, saturated and bent by an SVG displacement filter, lit by inset rim highlights and swept by a specular sheen on hover. Falls back to frosted glass outside Chromium. - [Split Button](https://www.assembli.design/components/split-button.md): Primary action joined to a dropdown of alternatives, like GitHub's merge button. Choosing an option makes it the new primary action rather than running it; async actions show a spinner. Controlled or uncontrolled, built on the Base UI dropdown menu. ## UI components: Inputs - [Swatch Fan](https://www.assembli.design/components/swatch-fan.md): A fan deck of colour swatches pinned at one corner. Hover to riffle, click to pull one out, arrow keys to walk the deck, copy the hex. - [Shortcut Recorder](https://www.assembli.design/components/shortcut-recorder.md): Click, press a key combination, and it is captured as physical keycaps that press down. Detects conflicts and supports clearing and reset. - [Contrast Lab](https://www.assembli.design/components/contrast-lab.md): Pick two colours and read the WCAG contrast ratio on a live specimen, with AA and AAA verdicts and a one-click nudge that fixes failing pairs. - [Allocation Bar](https://www.assembli.design/components/allocation-bar.md): Split a total across categories on one bar. Drag the seams or use arrow keys, lock a category, and every amount updates live. - [Safe Dial](https://www.assembli.design/components/safe-dial.md): A brushed-steel combination dial you spin with a finger or the arrow keys. It reads the way a real safe does: turn right to a number, reverse, turn left to the next, then pull the handle. Reversals register each step, wrong numbers rattle and reset, and the right sequence unlocks a reward. Haptic ticks on touch. - [Signature Pad](https://www.assembli.design/components/signature-pad.md): A signature field that feels like ink: strokes thin out as you move faster and thicken with pen pressure, curves are smoothed through midpoints, and a ghost signature draws itself as a hint. Undo, clear, pick an ink, or switch to Type for a keyboard-friendly script signature. Exports a transparent PNG. - [NPS Scale](https://www.assembli.design/components/nps-scale.md): Net-promoter survey with dock-style magnification across a 0-10 scale that warms from red to green. The follow-up question adapts to detractor, passive or promoter, then folds into a thank-you. - [Color Picker](https://www.assembli.design/components/color-picker.md): Compact colour picker: a saturation/brightness field, hue slider, hex input and swatches. Pointer-drag and keyboard friendly, copies the hex, works controlled or uncontrolled. - [Easing Curve Editor](https://www.assembli.design/components/easing-curve-editor.md): Drag the two control points of a cubic-bezier and watch the real animation play against a linear reference. Overshoot is supported, presets spring between curves, handles are keyboard-operable, and the result copies as CSS, Tailwind or Motion. - [Emoji Slider](https://www.assembli.design/components/emoji-slider.md): A mood slider with a face that actually reacts: the mouth bends from frown to grin, the brows lift, and the whole card drifts from red to green as you drag. Native range input underneath for free accessibility. - [Gradient Builder](https://www.assembli.design/components/gradient-builder.md): A visual CSS gradient editor: drag colour stops along a strip, click to add one with an interpolated colour, spin the angle dial, switch between linear, radial and conic, shuffle harmonious OKLCH palettes, and copy the CSS. - [Mention Input](https://www.assembli.design/components/mention-input.md): Textarea where typing @ opens a filterable people list. Pick with arrows and Enter and the mention becomes a styled inline chip. - [Multi Select Combobox](https://www.assembli.design/components/multi-combobox.md): Searchable multi-select: chips animate in and out, Backspace removes the last chip, and arrow keys move through filtered options. - [Plucked Strings](https://www.assembli.design/components/plucked-strings.md): Stretched SVG strings you pluck with the pointer: a damped spring simulation sends travelling waves along each string, and WebAudio plays a pentatonic note per string. - [Rotary Knob](https://www.assembli.design/components/rotary-knob.md): A hardware-style control knob with a brushed-metal body, a ring of ticks that light up with the value, fine-adjust on Shift, keyboard steps, double-click reset and a spring-damped indicator. - [Ruler Slider](https://www.assembli.design/components/ruler-slider.md): Horizontal ruler you drag to dial in a value: ticks scroll under a fixed needle with momentum and snap, major ticks labelled. - [Star Rating](https://www.assembli.design/components/star-rating.md): Accessible rating input with half-star precision: hover previews the value, stars pop in a wave when you commit, and arrow keys step by half a star. Also renders read-only for averages. - [Wheel Picker](https://www.assembli.design/components/wheel-picker.md): An iOS-style 3D drum picker built on native scroll-snap: items curve away on a cylinder as you scroll, with mouse drag, wheel, touch, click-to-select and arrow-key support. Compose several for time and date pickers. - [Elastic Slider](https://www.assembli.design/components/elastic-slider.md): iOS-style slider you can grab anywhere: dragging past either end stretches and thins the track like rubber and pushes the end icon, then springs back. Full slider keyboard support. - [Histogram Range Slider](https://www.assembli.design/components/histogram-range-slider.md): Dual-thumb price-style range slider over a distribution histogram: bars inside the selection light up, a live result count updates as you drag, thumbs swell on grab, and every key (arrows, PageUp/Down, Home/End) works. - [Number Stepper](https://www.assembli.design/components/number-stepper.md): Quantity stepper whose digits roll like an odometer in the direction of change; only changed digits move. Holding a button repeats and accelerates; hitting a limit shakes. - [OTP Input](https://www.assembli.design/components/otp-input.md): One-time-code field with grouped cells, paste and arrow-key support, autofill hints, an async check that pulses while verifying, a shake on failure and a cascading green on success. - [Password Meter](https://www.assembli.design/components/password-meter.md): Password field with reveal toggle, a four-segment strength meter that fills and recolors as you type, and a requirement checklist that ticks itself off. Custom rules supported. - [Tag Input](https://www.assembli.design/components/tag-input.md): Tokenizing input with autocomplete: Enter, comma or a pasted list adds tags, Backspace removes the last, chips pop in with stable per-word tints, and a counter enforces the limit. - [File Dropzone](https://www.assembli.design/components/file-dropzone.md): Drag-and-drop or click-to-browse upload zone that validates type, size and count up front, previews images, and shows per-file progress, success and errors from your onUpload(file, onProgress) handler. Keyboard-operable, with announced rejections. - [Search Field](https://www.assembli.design/components/search-field.md): Search input with a ⌘K focus shortcut, loading spinner, clear button and Escape-to-clear; works controlled or uncontrolled. ## UI components: Forms - [Checkout Form](https://www.assembli.design/components/checkout-form.md): Two-pane checkout: payment form with live card formatting, brand detection, Luhn and expiry validation, plus an order summary with a working promo code and a processing-to-success pay button. - [Aurora Glass Login](https://www.assembli.design/components/login-aurora-glass.md): Frosted-glass sign-in card floating over slow drifting aurora blobs, with a passkey primary action, social providers and translucent inputs. Always dark. - [Editorial Login](https://www.assembli.design/components/login-editorial.md): Magazine-style split sign-in with a big serif headline, numbered underline-only fields whose rules draw in on focus, and a button that fills with ink on hover. - [Email-first Login](https://www.assembli.design/components/login-email-first.md): Minimal two-step sign-in with floating labels: enter your email, it collapses into an editable chip with your initial, and the password field slides in with a personalised greeting. - [Madlib Contact Form](https://www.assembli.design/components/contact-madlib.md): Contact form written as a sentence: fill-in-the-blank inputs that grow as you type, pill choices with a sliding highlight, and a send button that unlocks once the sentence is complete. - [Mascot Login](https://www.assembli.design/components/login-mascot.md): Playful sign-in where a blob mascot's pupils follow your typing, its eyes cover when you enter a password, and it smiles, droops or hops on success and failure. Clay-style chunky buttons. - [Neobrutalist Sign-up](https://www.assembli.design/components/signup-neobrutalist.md): Loud sign-up form with thick black borders, hard offset shadows that press flat on click, a blocky password-strength meter and a sticker badge. - [Passkey Login](https://www.assembli.design/components/login-passkey.md): Passkey-first sign-in built around one large fingerprint button: idle ripples, a scanning sweep, a success burst and a shake on failure, with an inline password fallback. - [Reset Password Flow](https://www.assembli.design/components/reset-password.md): Four-stage password recovery in one card: request, email-sent with a resend countdown, new password with live rules and match check, and a confirmation. The icon tile and progress rail animate between stages. - [Seat Map](https://www.assembli.design/components/seat-map.md): A curved cinema seat picker: rows fan around the screen, price tiers, taken and accessible seats, hover lift, a best-seats-together finder, up to six selections with a live total, and full arrow-key navigation with a roving tabindex. - [Split-screen Sign-up](https://www.assembli.design/components/signup-split-brand.md): Two-panel sign-up with a brand side (testimonial, stats, drifting gradient) and a form with social buttons and a live password checklist that ticks off as you type. - [Spotlight Login](https://www.assembli.design/components/login-spotlight.md): Near-black sign-in card whose hairline border and surface light up under the cursor like a spotlight, with SSO, gradient-text heading and a ⌘↵ submit shortcut. Always dark. - [Terminal Login](https://www.assembli.design/components/login-terminal.md): Developer-tool sign-in styled as a shell session: inline prompts for email and password, a streamed status log on submit, and a red failure line instead of a toast. Always dark. - [Waitlist Ticket](https://www.assembli.design/components/waitlist-ticket.md): Waitlist sign-up shaped like an admit-one ticket with punched notches, a perforated stub and barcode. Submitting makes the ticket hop and the stub's queue number count up. - [Feedback Widget](https://www.assembli.design/components/feedback-widget.md): Feedback pill that morphs into its own form via a shared layout element: emoji rating, note, send, then a thank-you check before collapsing back to a pill. - [Onboarding Wizard](https://www.assembli.design/components/onboarding-wizard.md): Multi-step onboarding card with a segmented progress rail, step bodies that slide in the direction of travel, a card that resizes smoothly to each step, and focus moved to each new heading. - [Sign-in Card](https://www.assembli.design/components/signin-card.md): Sign-in card that switches between password and magic-link modes with a sliding segmented control, show/hide password, async errors and an inbox confirmation state. - [Paper Plane Subscribe](https://www.assembli.design/components/paper-plane-subscribe.md): Newsletter signup pill where submitting launches a paper plane along a drawn dotted trail, then settles into a confirmation. Handles validation with a shake, async submit, error state and reset. ## UI components: Cards - [Listing Card](https://www.assembli.design/components/listing-card.md): Stay or property listing card: swipeable scroll-snap photo carousel with arrows and dots, save-to-wishlist heart, guest favourite badge, rating, dates and nightly plus total price. - [Integration Card](https://www.assembli.design/components/integration-card.md): App integration card for settings pages: connect switch with a pending state, inline confirm before disconnecting, sync status, and a permissions disclosure. - [Event Card](https://www.assembli.design/components/event-card.md): Event card with a calendar date tile, time zone aware times, location with directions, a capacity bar, Going/Maybe/Can't RSVP that updates the count, and a real Add to calendar (.ics) download. - [Metric Card](https://www.assembli.design/components/metric-card.md): Dashboard KPI card: big value with a delta badge, a 7D/30D/90D range switch and an area sparkline you can scrub with pointer or arrow keys to read any day. - [Article Card](https://www.assembli.design/components/article-card.md): Blog post card: inset cover with category chip, whole-card link, clamped excerpt, author byline with date and read time, copy-link share and a bookmark toggle. - [Profile Card](https://www.assembli.design/components/profile-card.md): Person card with a cover band, presence dot and verified mark, follow button that updates the follower count in place, message action, stat row and mutual followers. - [Card Fan](https://www.assembli.design/components/card-fan.md): A hand of cards fanned in an arc. Hover lifts and straightens one card while neighbours part, click flips it forward. - [Comment Thread](https://www.assembli.design/components/comment-thread.md): Threaded comments with inline replies, live-reacting emoji chips, relative timestamps and an expandable composer. - [Diorama Card](https://www.assembli.design/components/diorama-card.md): Shadow-box card: paper cut-outs stand at different depths inside a box with real inner walls behind a mat-board window. Tilting toward the cursor reveals the walls, slides the layers past each other with drop shadows, and moves a soft glare across the frame. Bring any backdrop and layers. - [Disintegrate Card](https://www.assembli.design/components/disintegrate-card.md): Wrap any card and flip a prop to make it crumble into a grid of shards and dust that drift away on the wind, sweeping left to right. Siblings slide up when it is gone. Falls back to a fade for reduced motion. - [Glass Folder Cards](https://www.assembli.design/components/glass-folder-cards.md): A folder drawn as an object: generated liquid-marble artwork on the back panel, real file cards inside, and a frosted-glass front that leans on hover, falls open on click to fan the files, and takes new files with a drop-and-bump. Keyboard menu, light and smoked-glass tones, zero dependencies. - [Holo Card](https://www.assembli.design/components/holo-card.md): Collectible foil card: tilts toward the pointer on springs while a rainbow foil layer and a specular glare slide across the surface in sync. Light-source realism without WebGL. - [Kanban Board](https://www.assembli.design/components/kanban-board.md): Drag cards between columns with pointer or keyboard. Columns highlight as drop targets, cards reflow with layout animation, and counts update live. - [Lanyard Card](https://www.assembli.design/components/lanyard-card.md): A conference badge hanging from a real rope simulation. Verlet physics swings it in, you can grab and fling it, and a holographic sheen slides across the card as it tilts. Arrow keys give it a nudge; reduced motion shows it still. - [Peel Card](https://www.assembli.design/components/peel-card.md): A card with a curling paper corner: hover teases the fold, click peels it back on a spring to reveal what is underneath. The flap is real geometry with a back face, fold gradient and drop shadow that follows the cut. - [Scratch Card](https://www.assembli.design/components/scratch-card.md): A canvas scratch-off: holographic foil with a coin cursor that you rub away with mouse or finger. Tracks how much is cleared, auto-reveals past a threshold with a sparkle burst, and gives keyboard users a Reveal button. - [Sticky Note Board](https://www.assembli.design/components/sticky-note-board.md): A tactile whiteboard of sticky notes: drag from anywhere except the text, notes lift and straighten under your hand, the last one touched stays on top, edit in place, add in five colours, and drop a note on the bin to crumple it away. - [Weather Card](https://www.assembli.design/components/weather-card.md): Glanceable weather card with an animated scene per condition: a spinning sun, drifting clouds or falling rain, a sky gradient that crossfades between them, big temperature and an hourly strip. - [Credit Card](https://www.assembli.design/components/credit-card.md): Payment card that tilts toward the pointer with a holographic sheen tracking the light, and flips in 3D on click to reveal the signature strip and CVC. Number masked except the last four. - [Flip Card](https://www.assembli.design/components/flip-card.md): Two-sided card that flips in 3D on a spring via a corner button; the hidden face is made inert so focus and screen readers only reach the visible side, with a crossfade for reduced motion. - [Music Player Card](https://www.assembli.design/components/music-player-card.md): Now-playing card with a cover that spins like a record, a scrubbable progress bar (pointer and arrow keys), skip controls, a live equalizer and a card tint taken from the artwork. - [Product Card](https://www.assembli.design/components/product-card.md): Commerce card: colorway swatches cross-fade and spin the product shot while washing the stage in the variant color, size chips with a sliding selection, and an add-to-bag button that confirms in place. - [Tilt Card](https://www.assembli.design/components/tilt-card.md): Spring-damped 3D tilt container that follows the pointer with a soft-light glare, plus a TiltLayer helper that lifts children toward the viewer for real parallax depth. - [Wallet Stack](https://www.assembli.design/components/wallet-stack.md): Apple-Wallet style card stack: cards overlap with only their top strip showing; tap one and it springs to the front while the rest tuck away below. Generous card art with chip, sheen and masked number. Keyboard accessible. - [Boarding Pass](https://www.assembli.design/components/boarding-pass.md): Airline boarding-pass card with real punched notches (CSS mask), a perforated stub, a deterministic barcode and a plane that flies the route arc along a live Bézier path. - [Spotlight Card](https://www.assembli.design/components/spotlight-card.md): Card grid lit by the cursor: one pointer handler on the group feeds each card local coordinates, so the border light spills across neighbouring cards while the hovered one glows. CSS variables only, no re-renders. - [Swipe Deck](https://www.assembli.design/components/swipe-deck.md): Tinder-style stack of draggable cards with rotation, like/nope stamps, velocity-based fling, undo and arrow-key control. Bring your own card art as any CSS background. ## UI components: Dialogs - [Feedback Dialog](https://www.assembli.design/components/feedback-dialog.md): Feedback modal with a five-face rating radio group, topic chips, an optional message whose placeholder follows the rating, and a send button that waits for a rating. A thank-you replaces the form on success. - [Edit Profile Dialog](https://www.assembli.design/components/edit-profile-dialog.md): Profile editor modal: photo upload with preview and remove, name and username fields that validate as you type, a bio with a live character counter, and a save button that waits for a valid change and reports failures inline. - [Upgrade Plan Dialog](https://www.assembli.design/components/upgrade-plan-dialog.md): Plan picker modal: monthly or yearly toggle that shows the saving, three selectable plan cards with popular and current markers, and a footer that restates the billing before the upgrade button. - [Cookie Preferences Dialog](https://www.assembli.design/components/cookie-preferences-dialog.md): Cookie consent as a dialog: a row per category with an accessible switch and an expandable cookie list, required categories locked on, and reject all, save choices and accept all as equally easy exits. - [Settings Dialog](https://www.assembli.design/components/settings-dialog.md): Settings modal with a sidebar of sections (account, notifications, appearance, security), accessible switches and radio groups, a fixed-height body, and a footer that tracks unsaved changes with discard and save. - [New Project Dialog](https://www.assembli.design/components/new-project-dialog.md): Create-a-project modal: name field with a live URL preview and inline validation, template and visibility pickers built as radio groups, and an async create button that spins, confirms and closes. - [Morphing Dialog](https://www.assembli.design/components/morphing-dialog.md): A card that physically becomes its own modal: shared-layout animation grows the card's image, title and body into a full dialog and back, with focus trap, scroll lock and Escape to close. - [Confirm Dialog](https://www.assembli.design/components/confirm-dialog.md): Destructive confirmation on the native element (free focus trap, Escape and top layer) with a consequences list, type-to-confirm guard and an async action that holds the dialog open. - [Share Dialog](https://www.assembli.design/components/share-dialog.md): Docs-style sharing dialog: invite by email, member list with role selects, a general-access toggle between restricted and public, and a copy-link footer that confirms in place. - [Snap Drawer](https://www.assembli.design/components/snap-drawer.md): Bottom sheet that drags between snap points with velocity-aware settling, flick-to-dismiss, a scrim that tracks the sheet, focus trap, scroll lock and Escape to close. Portal-based, no dependencies beyond motion. ## UI components: Menus - [Filter Menu](https://www.assembli.design/components/filter-menu.md): A "Filter" menu for lists and tables: search for a field, open it to tick values with status icons, avatars, priority bars and counts, and keep picking without the menu closing. Each level has its own search, fields show how many values are on, and ActiveFilters renders "Status is any of" chips you can remove. Base UI Menu filtering and keyboard support. - [Workspace Switcher](https://www.assembli.design/components/workspace-switcher.md): The team switcher at the top of an app sidebar: the current workspace as the trigger, then each workspace with its tile, plan, member count and ⌘1–9 shortcut, a check on the current one, and create, invite, settings and log out. The menu matches the trigger's width. Keyboard and typeahead from Base UI. - [App Menubar](https://www.assembli.design/components/app-menubar.md): A desktop-style application menubar with File, Edit, View and Help: right-aligned shortcuts, Open recent, Export and Find submenus, checkbox items and a radio group, and disabled states. Hover or arrow keys move across the bar once a menu is open. Entries are data, and checkbox and radio state is one controllable record. Base UI Menubar. - [Display Options Menu](https://www.assembli.design/components/display-options-menu.md): The "Display" menu from an issue tracker or table toolbar: List, Board and Table layout tiles, Group by and Order by submenus that show their current value, switches for view options, property chips to show or hide fields, and a reset. A dot on the trigger marks a customised view. Keyboard support from Base UI. - [File Context Menu](https://www.assembli.design/components/file-context-menu.md): A file manager's right-click menu: the file named at the top, Open and an Open with submenu, rename, duplicate and compress, favorites, a Share submenu, Finder-style colour tags inline, and Move to Trash. Opens at the pointer on right-click or long-press, with full keyboard support from Base UI. - [Actions Menu](https://www.assembli.design/components/actions-menu.md): The everyday "more" menu for rows, cards and toolbars: icons, right-aligned shortcuts, optional descriptions, nested Move to and Share submenus, group labels, separators and a destructive item. Data-driven entries, an ellipsis or labelled trigger, and full keyboard support from Base UI. - [Command Palette](https://www.assembli.design/components/command-palette.md): ⌘K palette on the native with grouped fuzzy results, nested pages behind a breadcrumb chip, combobox ARIA, arrow/enter/backspace control and an active row that glides between items. - [Floating Action Menu](https://www.assembli.design/components/fab-menu.md): Floating + button whose icon springs into an ×, fanning labeled actions upward with a staggered pop; full menu semantics with focus management, arrow keys and Escape. - [Profile Menu](https://www.assembli.design/components/profile-menu.md): Account menu with a presence-dot avatar trigger, profile card header with plan badge, a presence picker, account links with shortcuts and sign out. Built on the dropdown-menu primitive. - [Radial Context Menu](https://www.assembli.design/components/radial-context-menu.md): Pie-style context menu that blooms around the pointer on right-click or long-press. Items spring out in a ring, selection follows pointer angle (a flick is enough), the centre names the active action, and arrow keys, Enter and Escape work too. ## UI components: Tabs - [Enclosed Tabs](https://www.assembli.design/components/enclosed-tabs.md): Folder tabs joined to a card: the active tab is a raised sheet of the card with curved, flared feet where it meets the panel border, and it slides between tabs as one shape. Actions at the end of the row and counts on tabs. - [Expanding Tabs](https://www.assembli.design/components/expanding-tabs.md): Icon tabs that open up: each tab is just an icon until it's active, then its pill widens to reveal the label with a grid-track transition. Per-tab tints, a bottom-bar mode for mobile, and labels that stay in the accessible name. - [Metric Tabs](https://www.assembli.design/components/metric-tabs.md): Analytics card whose tabs are the KPIs: label, figure and change against the last period on each tab, with a bar sliding along the active one. The chart below morphs between series and has a crosshair tooltip and an accessible table. - [Overflow Tabs](https://www.assembli.design/components/overflow-tabs.md): Priority+ tabs for app headers: tabs that don't fit fold, in order, into a More menu, and picking one there promotes it into the strip under a sliding highlight. Measures live with a ResizeObserver, so it reflows as the container resizes. - [Swipe Tabs](https://www.assembli.design/components/swipe-tabs.md): Mobile tabs you swipe between: pages sit in a scroll-snap pager, and the underline, its width, the label colors and the tab strip's scroll all track the swipe frame by frame. Mouse drag, glide on tap, unread counts and arrow-key support. - [Underline Tabs](https://www.assembli.design/components/underline-tabs.md): Line tabs for page and repository navigation: a 2px underline slides to the active tab, a soft highlight follows the pointer from tab to tab, counts sit beside labels, and long strips scroll with fading edges while keeping the active tab in view. - [Browser Tabs](https://www.assembli.design/components/browser-tabs.md): Chrome-style tab strip: the active tab flares into the page with inverted-radius corners, tabs drag to reorder with layout animation, close with a collapse, and the strip is a proper roving-tabindex tablist. - [Liquid Tabs](https://www.assembli.design/components/liquid-tabs.md): Segmented tabs whose dark indicator springs between triggers with a squash on arrival, while panels blur-slide in from the direction of travel; full tablist keyboard support. - [Segmented Control](https://www.assembli.design/components/segmented-control.md): iOS-style segmented control with a raised thumb that springs between options. A real radio group with roving focus; sm/md/lg sizes, icon options and a pill variant. - [Vertical Tabs](https://www.assembli.design/components/vertical-tabs.md): Settings-style vertical tabs with descriptions and icons: a highlight with accent bar glides between tabs and the panel cross-fades in the direction you moved. Full ARIA tabs keyboard model. ## UI components: Steppers - [Pipeline Stepper](https://www.assembli.design/components/pipeline-stepper.md): Async status stepper for deploys and imports: pending, running, done, failed and skipped states, a flowing connector while a step runs, and a retry action on failure. - [Dot Stepper](https://www.assembli.design/components/dot-stepper.md): Pager capsule with back and next buttons. The active dot stretches into a pill that fills with progress; the next button becomes Finish on the last step. - [Ring Stepper](https://www.assembli.design/components/ring-stepper.md): Compact step counter: a segmented ring fills arc by arc around an animated step number, with the title, description and next-up step beside it. - [Chevron Steps](https://www.assembli.design/components/chevron-steps.md): Checkout breadcrumb made of arrow-shaped segments that sweep full as you advance. The current step grows to show its label; others collapse to a number or check. - [Rail Stepper](https://www.assembli.design/components/rail-stepper.md): Vertical content stepper: a rail fills down the steps, the active step opens its panel with a smooth height animation, and finished steps collapse to an editable summary. - [Segment Stepper](https://www.assembli.design/components/segment-stepper.md): Segmented progress bar stepper: pill segments fill as you advance, the current one shows live progress, and the heading swaps with the step. - [Wizard Stepper](https://www.assembli.design/components/wizard-stepper.md): Multi-step progress tracker with a liquid connector line, drawn checkmarks and a pulsing current step. Horizontal or vertical, click-to-jump on completed steps, fully keyboard accessible. ## UI components: Toggles - [Lever Switch](https://www.assembli.design/components/lever-switch.md): A physical toggle lever with a weighted spring: drag or tap the handle, it overshoots, settles, and the status lamp lights. Keyboard and screen-reader accessible. - [Theme Segmented](https://www.assembli.design/components/theme-segmented.md): Light, system and dark selector as a segmented control: the thumb slides between icons on a spring, the active icon spins in, and arrow keys move selection like a radio group. - [Day/Night Switch](https://www.assembli.design/components/day-night-switch.md): Theme switch drawn as a tiny sky: the sun rolls across with drifting clouds, sets into a cratered moon as the sky turns indigo and stars rise. Accessible role=switch. - [Radio Cards](https://www.assembli.design/components/radio-cards.md): Selectable option cards backed by native radios: the selection ring slides between cards as one shared element and the dot springs in. Icons, meta and disabled options supported. - [Todo Checklist](https://www.assembli.design/components/todo-checklist.md): Task list with satisfying completion: the box squeezes, a check draws itself, a strike line wipes across the label and the progress bar advances. Native checkboxes underneath. - [Goo Switch](https://www.assembli.design/components/goo-switch.md): Toggle switch whose knob stretches and splits like liquid: two spring-driven blobs travel at different speeds and fuse through an SVG goo filter. Accessible role=switch, controlled or uncontrolled. ## UI components: Checkboxes - [Nested Checkbox](https://www.assembli.design/components/nested-checkbox.md): A checkbox tree for permissions and categories. Each parent shows checked, mixed or empty from the leaves beneath it, and ticking it selects or clears them all while leaving disabled ones alone. Branches fold open with a chevron and keep a running count. Only leaf ids live in the value. - [Checkbox Cards](https://www.assembli.design/components/checkbox-cards.md): Whole cards that each work as one checkbox: an icon tile, title and description, with a round check that pops into the corner while the border takes the tone and the icon tile fills. Title is the accessible name, description is linked, four tones. Lay them in a grid for multi-select onboarding. - [Chip Checkbox](https://www.assembli.design/components/chip-checkbox.md): A checkbox shaped like a filter chip. Checking it tints or fills the pill and slides a tick in from zero width, so neighbouring chips glide aside instead of jumping. Optional icon and result count, soft and solid variants, six tones and two sizes. - [Glow Checkbox](https://www.assembli.design/components/glow-checkbox.md): A checkbox for polished product UI: a glassy box with a top highlight that, once checked, fills with a two-stop gradient, lights a soft halo and runs a sheen across the glass. Four gradients (cobalt, aurora, ember, iris) that read on light and dark backgrounds, plus a mixed state. - [Brutalist Checkbox](https://www.assembli.design/components/brutalist-checkbox.md): A neo-brutalist checkbox: a thick square outline with a hard offset shadow. Hover lifts it, checking slams it into its shadow, floods it with a loud colour and stamps a heavy square-capped tick. Borders and shadows use your foreground colour, so it flips cleanly in dark mode. Five tones and a mixed state. - [Tactile Checkbox](https://www.assembli.design/components/tactile-checkbox.md): A checkbox you can almost feel: a raised keycap in a recessed socket. Checking it latches the cap down, lights it in colour and engraves the tick; pressing sinks it the rest of the way. Unlit caps follow light and dark mode, lit caps come in blue, orange, green and graphite. - [Ink Checkbox](https://www.assembli.design/components/ink-checkbox.md): A checkbox row that floods with ink from wherever you press it, flipping the text as the colour passes underneath, and drains back toward your next press. Keyboard toggles spread from the box. Optional description and a right-aligned price or count, in four tones. - [Burst Checkbox](https://www.assembli.design/components/burst-checkbox.md): A checkbox that celebrates: ticking it squashes the box, fills it and throws a ring of sparks, like a like button. Only a person's own click bursts, so select-all and controlled updates fill quietly. Five tones, a mixed state, and a plain fill under reduced motion. - [Morph Checkbox](https://www.assembli.design/components/morph-checkbox.md): A checkbox drawn as one continuous stroke: checking it unwinds the box outline and the same line runs on into a tick, then rewinds when unchecked. Pure CSS dash transitions, a tone you set with one variable, three sizes. - [Round Checkbox](https://www.assembli.design/components/round-checkbox.md): A circular, reminders-style checkbox. Checking it pops the circle in on a spring, sends a ring outward and draws the tick; the mixed state shows a bar. Seven tones (blue, green, orange, red, violet, yellow, graphite) and an optional fade for finished tasks. - [Classic Checkbox](https://www.assembli.design/components/classic-checkbox.md): The everyday checkbox, finished properly: a hairline box that firms up on hover, a primary fill with a tick that draws itself in, a dash for the mixed state, a press that gives, and invalid and disabled styles. Three sizes, an optional label and description, built on Base UI so it submits with forms. - [Doodle Checkbox](https://www.assembli.design/components/checkbox-doodle.md): Hand-drawn checkbox: the box wobbles in as a sketchy outline, the tick is scribbled on with a stroke animation and the label gets struck through. Real input underneath, so forms and screen readers just work. ## UI components: Badges - [Badge Button](https://www.assembli.design/components/badge-button.md): Buttons that carry a count or label: inline badge, GitHub-style split count and a pressed toggle that increments. - [Severity Badges](https://www.assembli.design/components/severity-badges.md): Info, success, warning and critical badges with icons, plus priority badges with signal bars. - [Feature Tags](https://www.assembli.design/components/feature-tags.md): New, Beta, Pro, Soon, Free and Deprecated tags for nav items and settings, with a shimmer on New. - [Duration Badges](https://www.assembli.design/components/duration-badges.md): Video duration overlays, due-date urgency badges and read-time badges for lists and cards. - [Label Badges](https://www.assembli.design/components/label-badges.md): Issue-tracker labels from any hex colour with readable text, in solid, soft and outline, plus an auto colour from a string. - [Streak Badge](https://www.assembli.design/components/streak-badge.md): Day-streak flame that changes colour by milestone, with a seven-day week row of checks. - [Filter Chips](https://www.assembli.design/components/filter-chips.md): Selectable filter chips with a check that slides in, optional counts and avatars, single or multi select. - [Presence Badge](https://www.assembli.design/components/presence-badge.md): Initials avatars with an online, away, busy or offline status dot, plus a standalone dot and labelled pill. - [Delta Badges](https://www.assembli.design/components/delta-badges.md): Change indicators with arrow, sign and percentage that read green or red, and flip when lower is better. - [Removable Badges](https://www.assembli.design/components/removable-badges.md): Dismissible tag chips with a close button, Backspace to remove and an animated exit that closes the gap. - [Badge Kit](https://www.assembli.design/components/badge-kit.md): The everyday badge: soft, solid, outline and dot variants in seven tones and three sizes, with icons and pill or rounded shape. - [Keycap Badges](https://www.assembli.design/components/keycap-badges.md): Physical keyboard keycaps for shortcuts that depress when the real key is pressed. - [Split Badges](https://www.assembli.design/components/split-badges.md): Shields-style two-segment status badges (label and value) whose value rolls when it changes, for READMEs and dashboards. - [Swing Tag](https://www.assembli.design/components/swing-tag.md): Hang-tag price label on a string that swings like a pendulum on hover and settles with damping. - [Corner Ribbons](https://www.assembli.design/components/corner-ribbons.md): Diagonal corner sashes and swallowtail banner tags with folded ends for New, Sale and Featured callouts. - [Rank Shields](https://www.assembli.design/components/rank-shields.md): Bronze to diamond tier shields with metallic gradients, faceted gems, star pips and a locked state. - [Verified Marks](https://www.assembli.design/components/verified-marks.md): Scalloped verification seals in blue, gold, green and graphite whose checkmark draws itself in, with a name-plus-seal inline form. - [Label Tape](https://www.assembli.design/components/label-tape.md): Embossed label-maker tape in vinyl colours with raised white lettering, a cut end and a serrated edge. - [Count Badge](https://www.assembli.design/components/count-badge.md): Notification count badge with rolling odometer digits, 99+ overflow, a ping on increase and an icon-button host. - [Enamel Pins](https://www.assembli.design/components/enamel-pins.md): Hard-enamel lapel pins with a metal rim, recessed colour fields and a glossy highlight that tilts with the pointer. - [Ticket Stub Badges](https://www.assembli.design/components/ticket-stub-badge.md): Perforated admission-ticket badges with punched notches, a tear line and a serial number. - [Ink Stamps](https://www.assembli.design/components/ink-stamp.md): Rubber stamps that thump onto the page with rough ink texture, a slight tilt and a bounce, and re-stamp on click. - [Holo Foil Badge](https://www.assembli.design/components/holo-foil-badge.md): Iridescent holographic plan badges whose rainbow foil, sparkle and specular sheen follow the pointer. - [Rotating Seal Badge](https://www.assembli.design/components/seal-badge.md): Circular badge with text set on a path that slowly rotates around a centre icon, and spins up on hover. - [Announcement Pill](https://www.assembli.design/components/announcement-pill.md): The 'Introducing X →' pill above a hero: a gradient tag chip, message and an arrow whose shaft draws in on hover, wrapped in a hairline border with a comet of light orbiting it. CSS only. - [Emoji Reactions](https://www.assembli.design/components/emoji-reactions.md): Reaction bar with count pills that roll their digits, a picker popover whose emoji swell under the pointer, and a little particle burst when you react. Controlled or uncontrolled; keyboard accessible. - [Status Badges](https://www.assembli.design/components/status-badges.md): Status-page kit: pills with live ping dots for operational, degraded, outage and maintenance, plus uptime rows of per-day bars with tooltips and a computed uptime percentage. ## UI components: Avatars - [Avatar Stack](https://www.assembli.design/components/avatar-stack.md): Overlapping avatars that fan apart on hover, lift individually with a name tooltip, show presence dots and a +N overflow chip; missing photos become stable per-name gradient monograms. - [Live Cursors](https://www.assembli.design/components/live-cursors.md): Multiplayer presence layer: named cursors with colour-matched labels wander the canvas on springs, pause to think, and ripple where they click. Includes your own cursor with click pulses. Drop it over any relative container. - [Presence Avatars](https://www.assembli.design/components/presence-avatars.md): Multiplayer presence stack: avatars ringed in each person's cursor color, idle users dimmed, typing users with animated dots. Hover fans the stack open and labels what each person is doing. ## UI components: Accordions - [Searchable Accordion](https://www.assembli.design/components/searchable-accordion.md): A help-center FAQ: search with a / shortcut and Esc to clear, category pills with live counts, Expand all, and questions grouped by category. Matches are highlighted in questions and answers, answers that match open themselves, and an empty state offers a way out. - [Feature Accordion](https://www.assembli.design/components/feature-accordion.md): A landing-page feature list with a visual stage: one feature is always open, its rail fills over a few seconds before the next opens, and the stage cross-fades to that feature's visual. Autoplay pauses on hover, focus and off screen, and the visual moves inside the open item on small screens. - [Filter Accordion](https://www.assembli.design/components/filter-accordion.md): Faceted catalogue filters as an accordion: checkbox lists with counts and Show more, color swatches, size chips with sold-out strikes and a price range with a live histogram. Closed groups show their pick count and summary, and active picks collect as removable tags with Clear all. - [Curriculum Accordion](https://www.assembli.design/components/curriculum-accordion.md): Course content as an accordion: section, lesson and running-time totals with Expand all, sections with a progress ring and their length, and lesson rows with video, reading, quiz and exercise icons, free previews, locks and an animated now-playing lesson. - [Checklist Accordion](https://www.assembli.design/components/checklist-accordion.md): An onboarding checklist as an accordion: a segmented bar tracks progress, each numbered step opens to a short explanation and its main action, and finishing a step draws its tick, strikes it through and opens the next one still to do. - [Settings Accordion](https://www.assembli.design/components/settings-accordion.md): Settings sections that open in place: each row has an icon tile, a title with a one-line description and a status pill, so the closed list reads as a summary. Open sections hold the form, with an optional footer strip for Cancel and Save. - [Boxed Accordion](https://www.assembli.design/components/boxed-accordion.md): A bordered accordion in one rounded box: rows split by hairlines, optional leading icons and quiet right-hand meta, a soft hover, a tinted open row with a turning chevron, and content indented to line up with the title. - [Divided Accordion](https://www.assembli.design/components/divided-accordion.md): The classic FAQ accordion: hairline rules between questions, optional 01–05 numbering, a round plus that folds into a minus and fills when open, and answers that ease open with a short fade. Closed answers stay findable with the browser's find-in-page. - [Disclosure Cards](https://www.assembli.design/components/disclosure-cards.md): Accordion as a stack of cards: the open card lifts with a shadow, its icon tile fills with an accent color and the content springs open; single or multiple expansion. - [File Tree](https://www.assembli.design/components/file-tree.md): Explorer-style file tree with animated folders, highlighted indent guides and type-tinted icons. Implements the WAI-ARIA tree pattern: one tab stop, arrows, Right/Left to open, close or jump to parent. ## UI components: Tables - [Swipe Actions List](https://www.assembli.design/components/swipe-actions-list.md): iOS-style list rows: drag a row sideways to reveal archive and delete actions, full swipe commits, and removed rows collapse away. - [Cohort Table](https://www.assembli.design/components/cohort-table.md): Retention heatmap for cohort analysis: each cell is tinted by retention, the hovered row and column form a crosshair while the rest recede, recent cohorts show hatched not-yet-observed weeks, and a weighted average row sums it up. Toggle percent or user counts. - [CRUD Table](https://www.assembli.design/components/crud-table.md): The full pipeline table: add rows, edit them in place with validation, delete one or many with an undo toast and countdown, select across a page, search, sort, paginate and see live totals. Rows collapse and unfold with springs; Enter saves, Esc cancels. - [Data Table](https://www.assembli.design/components/data-table.md): Generic typed table with tri-state column sorting, row selection with an indeterminate header checkbox, a sticky blurred header and a floating selection bar that slides up. - [Filter Table](https://www.assembli.design/components/filter-table.md): Directory-style table with live search that highlights matches, status filter chips with counts, tri-state column sorting, a cozy/compact density switch and a friendly empty state. Press / to focus search. - [Inline Edit Table](https://www.assembli.design/components/inline-edit-table.md): Spreadsheet-style editable grid: arrow-key navigation, type to overwrite, Enter/Tab to commit and move, Esc to cancel, ⌘Z undo. Text, number, select and boolean cells with validation, save flash, dirty-cell markers and a save/discard bar. - [Live Leaderboard](https://www.assembli.design/components/live-leaderboard.md): Ranked list that re-sorts itself as scores change: rows glide to their new positions on springs, flash green or red, show places gained or lost, and the leader wears a crown. - [Plan Comparison](https://www.assembli.design/components/plan-comparison.md): Pricing feature matrix with a sticky plan header, collapsible native
sections, check/dash glyphs with labels and a recommended column whose highlight follows column hover. - [Resizable Table](https://www.assembli.design/components/resizable-table.md): Wide data table with drag-to-resize column edges (a live guide line follows, double-click resets, arrow keys resize), pin-to-left columns with a scroll shadow, and a column visibility menu. Sticky header, fixed layout, truncating cells. - [Simple Table](https://www.assembli.design/components/simple-table.md): The calm baseline: a hairline editorial table with generous spacing, tabular numbers and a single highlight pill that glides between rows on a spring as the pointer moves. Typed columns, any cell renderer, accessible caption. - [Transaction Ledger](https://www.assembli.design/components/transaction-ledger.md): Bank-statement ledger grouped by day with sticky date headers and daily net totals; locale-aware money formatting, credits in green, and rows that expand inline to reveal details. - [Tree Table](https://www.assembli.design/components/tree-table.md): Hierarchical project table with expandable rows: children unfold with a height-and-fade spring, indent guides trace the structure, and parent progress rolls up. A real treegrid with arrow-key navigation, expand/collapse all and roving focus. - [Virtual Table](https://www.assembli.design/components/virtual-table.md): A 10,000-row table that scrolls at full speed by rendering only the rows in view. Live search across every field, sortable headers, jump-to-row with a spotlight pulse, and an honest counter showing how few rows are actually in the DOM. - [Sortable List](https://www.assembli.design/components/sortable-list.md): Drag-to-reorder checklist on motion's Reorder with handle-only dragging, Alt + arrow keyboard moves that keep focus and announce the new position, checkboxes and hover-revealed remove buttons. Fully controlled. ## UI components: Charts - [Bar List](https://www.assembli.design/components/bar-list.md): Ranked bar list for top sources, pages or countries: each bar is a soft wash behind its label so long names never fight the marks. Tabs switch views with rows gliding to their new rank, hovering a row swaps its value for its share, and Show all reveals the tail. - [Histogram Chart](https://www.assembli.design/components/histogram-chart.md): Distribution histogram with a brush: drag across the bins, or use Shift and the arrow keys, to select a range and read its count and share live in the header. Hover any bin for its exact bucket, and percentile markers (p50, p95, p99) are labelled in place on two rows so they never collide. - [Metric Table](https://www.assembli.design/components/metric-table.md): Inline analytics table: every row carries a hoverable sparkline with the latest point in the accent, the current value, a signed change pill coloured by whether that direction is good, and a share-of-total bar. Every column header sorts, rows glide to their new order, and a totals row closes it out. - [Punch Card](https://www.assembli.design/components/punch-card.md): Day-by-hour activity heatmap: five sequential classes with a stepped legend that marks the hovered cell's class, marginal bars for every day and hour, crosshair dimming of everything outside the hovered row and column, and a busiest-hour call-out. Arrow keys move a focus cell around the grid. - [Bullet Chart](https://www.assembli.design/components/bullet-chart.md): KPI scorecard of bullet charts, Stephen Few's compact gauge: each row lays its value over poor, fair and good bands with a target tick and an optional forecast bar, then states its status with an icon, a label and percent of target. Hover or focus a row to reveal its scale and target value. - [Stacked Bar Chart](https://www.assembli.design/components/stacked-bar-chart.md): Stacked column chart with a Total / Share switch that re-stacks every column to 100% on a spring. Segments sit on a 2px surface gap, totals ride the caps, and hovering a legend item isolates that series and moves the cap labels to its values. Hover or arrow keys open a column read-out with shares. - [Scatter Chart](https://www.assembli.design/components/scatter-chart.md): Scatter and bubble chart: points pop in, the pointer picks the nearest point (no pixel hunting) with guides and value pills on both axes, legend chips toggle groups without moving the scales, and an optional least-squares trend line with r and median quadrants with captions explain the cloud. Arrow keys step through points. - [Threshold Chart](https://www.assembli.design/components/threshold-chart.md): Actual-versus-target line chart: the gap between the lines is shaded blue where you're ahead and red where you're behind, split exactly at each crossing. A hit strip marks every period, the header counts periods ahead and the net variance, and the crosshair reads actual, target and the signed gap. Handles ramping plans and lower-is-better metrics. - [Line Chart](https://www.assembli.design/components/line-chart.md): Multi-series line chart: monotone lines draw in, a snapping crosshair shows every series in one tooltip, legend chips toggle series while the axis rescales smoothly, end labels dodge each other with leader lines, and numbered annotations pin notes to moments. Arrow keys scrub. - [Chart Recorder](https://www.assembli.design/components/chart-recorder.md): Strip-chart recorder: ink pens trace live channels onto scrolling graph paper with sprocket holes, a moving grid, value flags at the pen tips, selectable chart speed and a hold button. - [Chord Diagram](https://www.assembli.design/components/chord-diagram.md): Directed flows between groups drawn as ribbons inside a ring. Ribbons bloom in with a stagger, hovering or focusing a group isolates its flows and shows its share in the centre, and hovering a ribbon reads out both directions. Directly labelled, keyboard focusable, with a screen-reader matrix. - [Stream Chart](https://www.assembli.design/components/stream-chart.md): A streamgraph: stacked layers flow around a wiggling centre line, drawn in left to right on view. A scrub line snaps to each period with a tooltip of every layer, the layer under the cursor lifts while the rest dim, and layers are directly labelled where they swell. Validated colorblind-safe palette, legend and screen-reader table included. - [Bump Chart](https://www.assembli.design/components/bump-chart.md): Rankings over time as braided S-curves. Lines draw in left to right, rank badges sit on every node, and hovering or focusing a series fades the rest. - [Ridgeline Chart](https://www.assembli.design/components/ridgeline-chart.md): Joy-plot of overlapping distributions: each row rises from its own baseline, rows occlude the ones behind, and hovering isolates a ridge with a column read-out. - [Sunburst Chart](https://www.assembli.design/components/sunburst-chart.md): Hierarchical radial chart. Hover traces a path from the centre outwards and reads the share in the hub; click a slice to zoom in, click the hub to climb back out. - [Candlestick Chart](https://www.assembli.design/components/candlestick-chart.md): An OHLC candlestick chart with volume, a crosshair that reads out the candle under the pointer, a live price tag on the axis, a 20-day moving average, range switching with a staggered grow-in, and a table view. Direction is hollow versus filled plus an icon, never colour alone. - [Org Chart](https://www.assembli.design/components/org-chart.md): A collapsible org chart that lays itself out as a tidy tree. Branches grow out of their parent and connectors morph as you expand or collapse, search auto-opens the path to a match, and hovering traces the reporting line back to the top. - [Radar Chart](https://www.assembli.design/components/radar-chart.md): A multi-series radar (spider) chart in pure SVG that morphs smoothly between datasets. Pointer or arrow keys pick an axis for a side-by-side readout, the legend toggles series, and a table view is one click away. Colour-blind-validated palette. - [Sankey Flow Chart](https://www.assembli.design/components/sankey-chart.md): Pure-SVG Sankey diagram that lays out its own nodes and ribbons. Hover a node or ribbon to isolate its flow while everything else fades. - [Smooth Funnel Chart](https://www.assembli.design/components/funnel-chart.md): Conversion funnel drawn as smooth bezier bands. Stages animate in, hovering a stage reveals drop-off against the previous step. - [Treemap Chart](https://www.assembli.design/components/treemap-chart.md): A two-level squarified treemap whose tiles glide to new positions when you switch metric or filter a group. Tiles are real buttons with direct labels, groups use a colour-blind-validated palette, and hovering dims everything else for a detail readout. - [Waterfall Chart](https://www.assembli.design/components/waterfall-chart.md): Revenue bridge chart: floating bars connect with hairlines, gains and losses use distinct colours and patterns, and the running total is labelled. - [Area Chart](https://www.assembli.design/components/area-chart.md): Dependency-free SVG area chart with a smoothed spline that draws itself in, a gradient fill, a pointer crosshair driving the headline value and an automatic change badge. - [Bar Chart](https://www.assembli.design/components/bar-chart.md): Grouped bar chart in plain HTML: bars grow from the baseline in a stagger, a recessive grid, legend, and a hover column with a tooltip for every series. Colorblind-validated palette and a hidden data table. - [Radial Gauge](https://www.assembli.design/components/radial-gauge.md): Speedometer gauge: 240° track with status bands and ticks, a needle on a spring that overshoots and settles, and a counting readout labelled with the current band. - [Donut Chart](https://www.assembli.design/components/donut-chart.md): Interactive donut chart: segments draw in sequentially on view, the hovered or focused slice swells while the rest dim, and the centre counts up to the active value. Legend rows are keyboard-focusable and linked to the slices. - [Heatmap Calendar](https://www.assembli.design/components/heatmap-calendar.md): Year-long contribution heatmap with month and weekday labels, quantile-based intensity levels from any colour, a column-by-column reveal on view and a pointer-following tooltip. Timezone-safe (UTC) and hydration-safe. ## UI components: Numbers - [Odometer](https://www.assembli.design/components/odometer.md): Mechanical odometer: each digit is a 0–9 wheel that spins on a spring to its new value, lower digits trailing. Locale-aware separators and currency via Intl.NumberFormat. - [Countdown Timer](https://www.assembli.design/components/countdown-timer.md): Days, hours, minutes and seconds to a target with digits that roll in on a spring. One shared clock via useSyncExternalStore keeps every instance in sync and hydration-safe; exposes role=timer with a spoken summary and fires onComplete once. - [Animated Number](https://www.assembli.design/components/animated-number.md): Spring-animated number that counts up when scrolled into view, formatted with Intl.NumberFormat (currency, percent, compact). ## UI components: Loaders - [Counter Preloader](https://www.assembli.design/components/counter-preloader.md): Studio-style intro: a huge 0-100 counter with cycling words and a hairline progress bar, then a curved curtain lifts to reveal the page while the content settles from a slight zoom. - [Equalizer Bars](https://www.assembli.design/components/equalizer-bars.md): Audio-style equalizer that dances while playing and settles to a flat line when paused. Each bar runs its own spring-eased loop, so the pattern never visibly repeats. Great for now-playing and voice states. - [Liquid Progress](https://www.assembli.design/components/liquid-progress.md): Circular progress where the fill is water: two offset waves slosh across the surface while the level rises on a spring, and the percentage inverts colour as the water passes behind it. - [Shape Morph Loader](https://www.assembli.design/components/shape-morph-loader.md): A single shape that morphs through circle, rounded square, diamond and star on a spring, rotating and colour shifting as it goes. - [Loaders](https://www.assembli.design/components/orbit-loaders.md): Four loading indicators with personality: chasing orbit dots on offset easings, an equalizer, a rotating square-to-circle morph and shimmering text; all role=status and inherit currentColor. - [Skeleton Shimmer](https://www.assembli.design/components/skeleton-shimmer.md): Shimmering skeleton blocks plus a SkeletonReveal wrapper that swaps placeholder for content with a blur-and-rise, in the same grid cell so layout doesn't jump. Announces busy state. - [Upload Progress](https://www.assembli.design/components/upload-progress.md): Upload queue with per-file type icons, live speed and time left, progress bars that turn green or red, rings that resolve into a check or error, retry and cancel. Rows animate in and out. ## UI components: Notifications - [Printout Toasts](https://www.assembli.design/components/printout-toasts.md): Notifications as a thermal receipt printer: toasts print out of a slot with a stepped paper feed, stack down one perforated strip, and tear off with a flick or the scissors. Includes a queue hook. - [Undo Toast](https://www.assembli.design/components/undo-toast.md): Toast with a draining timer bar and an Undo action. The countdown pauses while you hover or focus, springs in from the bottom and stacks cleanly when several fire at once. - [Announcement Banner](https://www.assembli.design/components/announcement-banner.md): Site-wide top banner that rotates announcements with a vertical roll, pauses on hover, and collapses its height when dismissed so the page slides up. Animated gradient and subtle variants. - [Notification Stack](https://www.assembli.design/components/notification-stack.md): Notification pile that rests as a scaled deck and fans into a list on hover or focus; new items drop in from the top and cards dismiss with a sideways swipe or ×. - [Dynamic Island](https://www.assembli.design/components/dynamic-island.md): A pill-shaped live-activity surface that morphs between idle, timer, now-playing, call and alert states with shared-layout springs, blur cross-fades and an animated waveform. ## UI components: Alerts - [Connection Alert](https://www.assembli.design/components/connection-alert.md): The offline pill: hidden while connected, it rises in when the connection drops with a count of changes saved on the device, shows a spinner while retrying, and turns green with a synced count when you're back before tucking itself away. The pill morphs between widths. Follows navigator.onLine by default, or takes a status from your sync engine. - [Status Banner](https://www.assembli.design/components/status-banner.md): The system banner pinned above an app for scheduled maintenance, degraded performance, outages and the all-clear. Live incidents get a pulsing status dot, switching status cross-fades the message and blends the colour, and closing collapses the height so the page slides up. Soft and solid finishes, a time stamp and a status-page link. - [Session Timeout Alert](https://www.assembli.design/components/session-timeout-alert.md): The inactivity warning before an automatic sign-out: a ring that drains around a live mm:ss countdown, Stay signed in and Sign out actions, and a red, pulsing last stretch. Extending shows a short confirmation and closes itself; running out turns it into a signed-out notice. Screen readers hear milestones, not every tick. - [Quota Alert](https://www.assembli.design/components/quota-alert.md): A usage alert for metered plans (build minutes, seats, storage, API calls) that writes its own title and advice from the numbers and colours itself by level: calm below the warning line, amber past it, red with moving stripes at the limit. The meter marks where the warning starts and animates when usage changes. - [Error Summary](https://www.assembli.design/components/error-summary.md): The form error summary that appears after a failed submit: a live count and one numbered row per problem that scrolls to its field and focuses it. Rows slide away as fields are fixed, the panel resizes smoothly, and it turns into a success message when nothing is left. Takes focus on every submit for keyboard and screen-reader users. - [Docs Callout](https://www.assembli.design/components/docs-callout.md): Documentation callouts in the five GitHub-flavoured kinds (note, tip, important, warning, caution): a tinted panel with a coloured rail, labelled header and a prose body that styles links, inline code, lists and bold text. Custom titles, and a collapsible mode that animates long asides open. - [Inline Alert](https://www.assembli.design/components/inline-alert.md): The everyday in-page alert in five intents (info, success, warning, danger, neutral) and four finishes (soft, outline, accent rail, solid). Optional title, filled and quiet actions that take the alert's colour, an inline layout for one-liners, and a close button that collapses the height so the page slides up. ## UI components: Empty states - [Access Required](https://www.assembli.design/components/empty-locked.md): Permission-denied state with a padlock whose shackle teases open on hover and swings free once access is requested. Owner avatars, async request and a confirmation state. - [Awaiting First Event](https://www.assembli.design/components/empty-awaiting-data.md): Developer-dashboard empty state with a ghost chart, a radar sweep, a live listening timer and tabbed copy-paste snippets. Includes a send-test-event action that ripples on the chart. - [File Dropzone](https://www.assembli.design/components/empty-dropzone.md): Working drag-and-drop upload zone. Three document cards fan out as you drag files over, the dashed border marches, and files are filtered by accept and returned through onFiles. - [Inbox Zero](https://www.assembli.design/components/empty-inbox-zero.md): Celebratory all-caught-up state: a ring and checkmark draw themselves while a particle burst fans out over a stack of dissolving envelopes. Click the illustration to replay. Includes a stats strip. - [Nothing Yet](https://www.assembli.design/components/empty-nothing-yet.md): Editorial typographic empty state for an empty cart. Outlined echoes of the headline reverberate above it, an italic serif accent gets a hand-drawn underline, and mono meta rules frame it. - [Offline](https://www.assembli.design/components/empty-offline.md): Connection-lost state with a Wi-Fi glyph that scans while retrying, an auto-retry countdown, attempt counter and a recovered state that lights the arcs up. - [Open Week](https://www.assembli.design/components/empty-calendar.md): Empty calendar week where every open slot is a button. Hovering sketches a ghost event with its time, clicking picks it and rewrites the call to action. A now-line marks the current hour. - [Quiet Notifications](https://www.assembli.design/components/empty-quiet-bell.md): Notifications empty state with a sleeping bell and drifting Zs. Turn notifications on and the bell swings, rings out, and reveals topic toggles. - [No Results](https://www.assembli.design/components/no-results.md): Empty search state with a small animated illustration of a magnifier sweeping over blank result cards, the query echoed back, suggestion chips and room for recovery actions. - [Setup Checklist](https://www.assembli.design/components/setup-checklist.md): First-run 'get started' card: progress ring, an accordion of setup tasks with the first unfinished one open, struck-through completed tasks and per-task actions. - [Empty State](https://www.assembli.design/components/empty-state.md): Placeholder for empty lists and first-run screens with an icon halo, title, description and action slot. ## UI components: AI chat - [Studio Composer](https://www.assembli.design/components/studio-composer.md): Composer for a build-and-edit tool: a slash menu of quick edits, a scope picker, a style picker whose accent tints the glowing edge and send button, a speed picker, attachments, dictation and Enter to send. - [Letter Composer](https://www.assembli.design/components/letter-composer.md): Ruled-paper composer written like a note: a To line, an optional subject, lined body text, a word count and a wax-seal send button. - [Voice Composer](https://www.assembli.design/components/voice-composer.md): Composer whose mic swaps the field for a live waveform with a timer, cancel and confirm, then transcribes into the text. - [Terminal Composer](https://www.assembli.design/components/terminal-composer.md): Command-line style prompt with a monospace field, shell-style history on the arrow keys, an inline slash-command list, a Shift+Tab mode cycle and a context meter. - [Capsule Composer](https://www.assembli.design/components/capsule-composer.md): Single-line pill that grows with the text, a rotating placeholder, a mic that swaps to send, and suggestion chips that fill the field. - [Tray Composer](https://www.assembli.design/components/tray-composer.md): Rounded composer with a docked tray of shortcut toggles beneath it, a model picker with effort level, dictation mic and a send button that turns into a voice button when the field is empty. - [Memory Ledger](https://www.assembli.design/components/memory-ledger.md): The 'what the assistant remembers' panel as a card catalogue: each memory is a ruled index card with its source and date. Edit in place, forget with Undo, filter with folder tabs and search, pause memory entirely, and watch new memories land on top with a fresh-ink highlight. - [Research Dossier](https://www.assembli.design/components/research-dossier.md): A long-running deep research job as a dossier being assembled: pages for each report section stack up beside a phase rail, live activity, counters and the sources being read. Send it to the background as a progress pill; when it finishes the pages square up under a paper clip and the card becomes the report's cover. - [Inline Rewrite](https://www.assembli.design/components/inline-rewrite.md): A document where AI edits happen in place: select text and a toolbar floats above it with Improve, Shorten, Friendlier, Fix spelling or your own instruction. The selection shimmers while it runs, then shows as a redline with Accept, Discard and Retry. - [Plan Review](https://www.assembli.design/components/plan-review.md): An agent's plan as a route of waypoints you review before it runs: drag or arrow-key to reorder, rename, skip (the rail turns dashed) or remove steps, add your own, then approve with ⌘Enter and watch the route light up as each step runs. Or send the agent a note asking for changes. - [Response Arena](https://www.assembli.design/components/response-arena.md): Blind side-by-side comparison of two model responses: both stream in under sealed A and B tags with frosted model names, and the vote bar unlocks when both finish. Voting reveals the models, crowns the preferred answer and offers to continue with it. - [Effort Dial](https://www.assembli.design/components/effort-dial.md): Choose how hard an agent works before it runs: an instrument gauge swings its needle across Draft to Max, the readout rolls to the new credit cost and time, and a receipt itemises searches, pages and model calls with your balance before and after. - [Clarify Card](https://www.assembli.design/components/clarify-card.md): The questions an assistant asks before a big task, as a quick interview: one question at a time, numbered options you can press 1–9, multi-select and an Other field, auto-advance on single answers, and a closing brief with edit links before Start. - [Checkpoint Rewind](https://www.assembli.design/components/checkpoint-rewind.md): Undo for an agent's work as a tape you can scrub: drag the playhead back and everything after it turns to hatching, with the checkpoints and files that would be reverted and their line counts. Restore is press-and-hold so a stray click never throws work away. - [Confidence Highlights](https://www.assembli.design/components/confidence-highlights.md): An answer marked up like a proofread draft: unsure claims carry an amber or rose highlighter stroke. Hover or focus a mark for the reason and source, then Verify to re-check it; confirmed claims lose the mark and gain a source. A stacked bar shows how much of the answer is well supported. - [Branch Thread](https://www.assembli.design/components/branch-thread.md): Chat thread that keeps every version: edit a sent message or regenerate a reply and a ‹ 2 / 3 › pager flips between versions while the conversation below follows. A branch map beside the thread draws the whole tree, lights the path you're reading and jumps to any message. - [Thought Stream](https://www.assembli.design/components/thought-stream.md): Reasoning block for thinking models: a gyroscope glyph and the current thought's title shimmer in the header while a three-line peephole shows raw reasoning scrolling under a soft fade. It settles to 'Thought for 8s' and opens into the full trace as titled sections. - [Latent Batch](https://www.assembli.design/components/latent-batch.md): Text-to-image batch of four that sharpens like a diffusion preview: each tile climbs from blocky latent noise to a clean frame on its own clock with a step counter. Finished tiles offer Vary, Download and Expand, which docks the rest in a filmstrip. Ships with a seeded landscape painter. - [Parallel Agents](https://www.assembli.design/components/parallel-agents.md): Orchestrator view for subagents working at once: a fork-and-join rail whose branches flow while a lane runs and close into the merge node when it finishes, with live activity tickers, token and tool counts, hairline progress and the merged result. - [Cited Answer](https://www.assembli.design/components/cited-answer.md): Search-grounded answer from query to citation: a search, read, write stage header, query chips, a strip of source cards and a streamed answer with numbered citation pills. Hover a pill to light its source and quote the passage; hover a source to light its citations. - [Tool Approval](https://www.assembli.design/components/tool-approval.md): Permission prompt for an agent that asks before it acts: the exact command, a diff of the edit or the URL to fetch, a risk chip, the agent's reason and a live wait timer. Allow once, always allow or deny from the keyboard; decisions fold into a receipt trail. - [Slash Composer](https://www.assembli.design/components/slash-composer.md): AI composer with a / command menu whose pick becomes a token the text wraps around, @ mentions that attach files and docs as chips, an Ask, Plan or Agent mode switch with a sliding pill, full keyboard control and a live context-size estimate. - [Prompt Enhancer](https://www.assembli.design/components/prompt-enhancer.md): Prompt field with an Enhance button that rewrites the prompt in place and shows the edit as it happens: dropped words strike through and collapse, new words write in under a cooling highlight, and a +/− word count offers Undo. Bring your own rewrite function. - [Agent Glyphs](https://www.assembli.design/components/agent-glyphs.md): Nine animated line glyphs for agent states: orbiting thought, a magnifier sweeping text, a highlight reading down a page, a nib writing script, brackets with a typing cursor, a picture drawing itself, a waveform, a checklist ticking off and a final check. Pairs with a shimmering status line. - [Image Gen Reveal](https://www.assembli.design/components/image-gen-reveal.md): The text-to-image wait, designed: the picture denoises out of flickering grain through blur, saturation and scale, with a scan line, a live step counter and a regenerate button. - [Node Canvas](https://www.assembli.design/components/node-canvas.md): Workflow editor surface: drag nodes around a dotted canvas while Bézier edges follow, data pulses flow along links, and selecting a node lights up its connections. Keyboard nudging included. - [AI Prompt Box](https://www.assembli.design/components/ai-prompt-box.md): Chat composer with an auto-growing textarea, attachment chips, a model picker, suggestion pills, Enter to send and a rotating conic glow plus stop button while the model is busy. - [Chat Thread](https://www.assembli.design/components/chat-thread.md): Complete chat transcript: user bubbles, assistant replies with code blocks and a streaming caret, hover actions (copy, rate, regenerate), scroll pinning with a jump-to-latest pill and an auto-growing composer. - [Context Meter](https://www.assembli.design/components/context-meter.md): Donut gauge of an AI context window split by source (system, tools, files, conversation) with animated segments, a legend, free space and a center readout that turns amber then red as it fills. - [Model Picker](https://www.assembli.design/components/model-picker.md): Radio-card selector for AI models with intelligence and speed meters, pricing and badges; the selection ring springs between cards and arrow keys move the choice. - [Prompt Suggestions](https://www.assembli.design/components/prompt-suggestions.md): Empty-chat starter: a greeting that rises in, then suggestion cards that stagger up, lift on hover, reveal an arrow and send their prompt on click. - [Reasoning Steps](https://www.assembli.design/components/reasoning-steps.md): Collapsible agent progress panel: a vertical rail of steps with pending, running, done and error states, a shimmering heading for the active step, live details and per-step timings. - [Streaming Reply](https://www.assembli.design/components/streaming-reply.md): Assistant message for streamed output: newly arrived words blur-fade in, a block caret pulses at the end, and copy, thumbs and regenerate actions fade in only once the stream completes. - [Tool Call Log](https://www.assembli.design/components/tool-call-log.md): Compact log of an AI agent's tool calls: status icons, tool chips, human summaries and timings, with each row expanding to show its raw input and output as formatted JSON. - [Voice Orb](https://www.assembli.design/components/voice-orb.md): Voice-assistant orb: a glassy sphere of swirling conic color with a halo that breathes when idle, swells with the audio level while listening or speaking, and spins faster while thinking. ## UI components: Sidebars - [Docs Sidebar](https://www.assembli.design/components/docs-sidebar.md): Documentation sidebar with labeled sections hung off a hairline rail. The active page is a bright segment that springs along it, API pages carry their HTTP method, and the header has a version switcher. - [Helpdesk Sidebar](https://www.assembli.design/components/helpdesk-sidebar.md): Support desk sidebar with collapsible sections. A folded section keeps a running total in its header, urgent counts turn red, and the footer holds an online/away switch for the agent. - [Outline Sidebar](https://www.assembli.design/components/outline-sidebar.md): Handbook outline with every submenu open. Children hang from drawn, curved branches, and the branch from the parent down to the open page lights up. Includes a page filter. - [Floating Sidebar](https://www.assembli.design/components/floating-sidebar.md): Frosted floating sidebar for a photo studio, held off the edge with layered shadows. Submenus sit under each section, collections show a palette strip of their photos, and storage is split by file type. - [Search Sidebar](https://www.assembli.design/components/search-sidebar.md): Settings sidebar with collapsible groups and a live filter. Typing opens every group with a match, marks the matching text and also searches synonyms, so ssl finds TLS certificates. Press / to search. - [Flyout Sidebar](https://www.assembli.design/components/flyout-sidebar.md): Store admin sidebar whose submenus open as flyouts beside each item, on hover, click or the right arrow key. One panel glides between items as you sweep down the list, and the footer charts today’s sales. - [Rail Sidebar](https://www.assembli.design/components/rail-sidebar.md): Analytics sidebar that collapses to an icon rail with ⌘B. When collapsed, a single tooltip glides between icons, and the Realtime item counts live visitors. Has a site switcher and a user footer. - [Inset Sidebar](https://www.assembli.design/components/inset-sidebar.md): App shell with an inset layout: the sidebar sits on the backdrop and the page rises off it as a rounded panel. Projects show progress rings, and help and feedback sit in a quieter secondary nav. - [Mail Sidebar](https://www.assembli.design/components/mail-sidebar.md): Mail client with two nested sidebars, a folder rail and a message list. The list folds into the rail for a wide reading pane, an All/Unread switch filters it in place, and opening a message marks it read. - [Peek Sidebar](https://www.assembli.design/components/peek-sidebar.md): Notes sidebar that hides until you touch the left edge or the menu button, then slides out as a floating sheet and tucks away when you leave. Pin it to dock it beside the page. - [Explorer Sidebar](https://www.assembli.design/components/explorer-sidebar.md): Code editor explorer with open editors, a project tree tinted by git status and the current branch. Folders get a dot when something inside changed, and the open file’s indent guide lights up. - [Calendar Sidebar](https://www.assembli.design/components/calendar-sidebar.md): Calendar app sidebar with a mini month (arrow-key navigation, event dots, months that slide the way you travel), calendars you can show or hide (their dots follow), and an up-next card. - [Preferences Dialog](https://www.assembli.design/components/preferences-dialog.md): Preferences in a dialog with its own sidebar. Sections are grouped by account, workspace and data, the highlight glides between them, and each pane has real controls. Under 640px the sidebar shrinks to icons. - [Inspector Sidebar](https://www.assembli.design/components/inspector-sidebar.md): Right-hand inspector for a CRM deal. Click a stage to move it along the chevron track, edit the value in place, and read the activity timeline without leaving the list. - [Dual Sidebar](https://www.assembli.design/components/dual-sidebar.md): Team chat shell with a sidebar on each side: channels and people on the left, members, pins and files on the right. Either folds away from the header, and a huddle button shows a live audio meter. - [Console Sidebar](https://www.assembli.design/components/console-sidebar.md): Cloud console layout with a sticky site header (org, project and environment breadcrumbs) and a sidebar pinned beneath it while the page scrolls. The environment’s color runs along the header. - [Dock Rail](https://www.assembli.design/components/dock-rail.md): Vertical app navigation rail with dock-style magnification: icons swell on springs as the pointer passes, with slide-out tooltips, unread badges and an active marker. - [Workspace Sidebar](https://www.assembli.design/components/workspace-sidebar.md): App sidebar with a workspace switcher, collapsible nav sections, an active indicator that glides between items, badges, a usage meter and a collapse-to-icons mode that springs its width. ## UI components: Carousels - [Depth Carousel](https://www.assembli.design/components/depth-carousel.md): Photos stacked down a corridor of depth, like a Time Machine for a night out. Scroll, drag or use the arrow keys and the stack flies toward you: the front photo rushes past the camera and blurs away while the next rises from the haze. Each photo tints the sky with its own glow, and a side timeline scrubs the night. - [Split Slider](https://www.assembli.design/components/split-slider.md): Full-bleed slider that tears each photo down the middle. The left half slides one way and the right half the other while the next photo's halves cross in to meet at the seam. The giant title sits across the seam, so it splits and rejoins with the picture. A seam badge counts down to the next slide. Swipe, keys or tabs. - [Drift Carousel](https://www.assembli.design/components/drift-carousel.md): An endless, draggable photo strip. Throw it and it coasts on inertia before settling on a card edge. Speed shears and squeezes the cards, each photo slides inside its frame against the motion, the strip curves away at the edges and a Drag bubble stretches with velocity. It glides on its own until touched. - [Arc Carousel](https://www.assembli.design/components/arc-carousel.md): Photos ride the rim of a giant wheel whose hub sits below the frame, like plates on a specimen dial. Drag with inertia, scroll or use the arrow keys to turn it. The centre plate lifts out of the arc, a ring of ticks turns underneath, and the title swaps with a blur-and-tracking morph over a wash of the active photo's colours. - [Liquid Slider](https://www.assembli.design/components/liquid-slider.md): WebGL photo slider that floods each new image out from wherever you click as a ring wave, with radial displacement and chromatic fringing at the wavefront. A water lens follows the cursor, caustics drift across the frame and a glowing depth gauge sinks with every slide. Falls back to crossfades without WebGL. - [Shutter Slider](https://www.assembli.design/components/shutter-slider.md): Full-bleed photo slider where each new image opens through venetian-blind slats. Every slat is its own clipped copy, so they slide against each other and land perfectly aligned. Giant titles roll in letter by letter, a cursor bubble reads the halves as prev/next, and the tabs fill as timers. - [Ring Carousel](https://www.assembli.design/components/ring-carousel.md): A rotunda of photos on a 3D cylinder. Drag it with inertia and it snaps to the nearest panel, a glare sweeps across each print as it turns, side panels sink into shadow and the front one reflects on the floor. It drifts while idle and tilts toward the cursor. - [Coverflow Carousel](https://www.assembli.design/components/coverflow-carousel.md): Apple-style coverflow: the active card faces you while its neighbours fold away in 3D on springs. Click a side card, drag, swipe or use arrow keys to move. - [Peek Carousel](https://www.assembli.design/components/peek-carousel.md): Native scroll-snap carousel where the centred slide scales up and its neighbours peek in dimmed. Arrow buttons, keyboard support and a stretchy progress pill. - [Story Gallery](https://www.assembli.design/components/story-gallery.md): Full-bleed stage with a thumbnail strip: the active thumbnail widens and fills like a story timer, auto-advancing until you hover or pick one. Pauses for reduced motion. ## UI components: Calendars - [Date Time Picker](https://www.assembli.design/components/date-time-picker.md): Date and time in one popover: a calendar beside a scrolling column of time slots that centres the chosen time, slots before the minimum greyed out, a time-zone footer and a Done button. On a phone the slots become a swipeable row under the calendar. - [Month Picker](https://www.assembli.design/components/month-picker.md): Month and month-range picker for billing periods and reports: a year you page through, months laid out in quarter rows, a hover-preview band that spans years, clickable Q1–Q4 labels in range mode, and shortcuts like This quarter and Last 12 months. - [Due Date Picker](https://www.assembli.design/components/due-date-picker.md): The due-date chip from task trackers: reads like speech (Today, Tomorrow, Friday) and turns amber on the day and red when overdue. Its popover parses typed dates like “next fri”, “in 2 weeks” or “dec 12” with a live preview, offers Today, Tomorrow, This weekend and Next week, and keeps a mini calendar underneath. - [Date Field](https://www.assembli.design/components/date-field.md): Segmented date input you type into: month, day and year in the locale's order (mm/dd/yyyy, dd/mm/yyyy…), auto-advancing as you type, arrow keys to step, plus a calendar button for clickers. Validates min, max, required and impossible dates (Feb 30) with an inline message. - [Date Range Picker](https://www.assembli.design/components/date-range-picker.md): Analytics-style date range picker: a trigger that names the preset in use, a preset rail (Last 7 days, Month to date, Last year…), Start and End fields, two months with a live hover band, a day count, and Apply/Cancel so nothing changes until you confirm. Collapses to one month and preset chips on narrow screens. - [Date Picker](https://www.assembli.design/components/date-picker.md): The everyday date input: a field-style trigger that opens a calendar popover. Click the caption to zoom out to months and years, page with arrows or PageUp/PageDown, and pick with the keyboard. Today dot, blocked and out-of-range days, Today and Clear shortcuts, and a six-week grid that never changes height. - [Zone Planner](https://www.assembli.design/components/zone-planner.md): Meeting planner across time zones: a draggable playhead scrubs every city's day at once and the hours everyone is awake light up. - [Tear-off Calendar](https://www.assembli.design/components/tear-off-calendar.md): Desk tear-off calendar as a date picker: drag the top sheet up to tear the day off, or use the arrow keys. Shows day of year, ISO week, the moon phase and a handwritten note per day. - [Day Schedule](https://www.assembli.design/components/day-schedule.md): Single-day agenda grid: drag events to reschedule with 15-minute snapping, pull the bottom handle to resize, overlapping events split into columns, and a live now-line. Arrow keys move the focused event. - [Booking Picker](https://www.assembli.design/components/booking-picker.md): Scheduling card in the Cal.com mould: host details, a month calendar and a time-slot column that slides in for the chosen day. Picking a slot reveals a Confirm button, then resolves to a receipt. - [Clock Time Picker](https://www.assembli.design/components/clock-time-picker.md): Analog time picker: drag the hand around the dial to choose hours, then minutes, with AM/PM toggle and tick snapping. - [Range Calendar](https://www.assembli.design/components/range-calendar.md): Date range picker with live hover preview, a continuous selection band that wraps cleanly across weeks, animated month changes, one or two months, and full arrow-key navigation. - [Week Strip](https://www.assembli.design/components/week-strip.md): Compact week picker for schedules and habit trackers: seven day tiles with a sliding selection pill, event dots, week-by-week paging and a Today shortcut. ## UI components: Popovers - [Hover Preview Card](https://www.assembli.design/components/hover-preview-card.md): Link that opens a rich preview card on hover or focus: intent delay, a bridge so the pointer can travel into the card, auto-flip above when there's no room below, Escape to close. - [Morphing Tooltip](https://www.assembli.design/components/tooltip-morph.md): One tooltip that glides between targets instead of popping in and out. Hover a row of icons and the bubble slides, resizes and cross-fades its label on a shared layout spring. - [Selection Toolbar](https://www.assembli.design/components/selection-toolbar.md): Contextual toolbar that appears over any text you select, tracks the selection rect and flips below when there is no room. Format, highlight, comment or ask AI, with morphing panels. ## UI components: Pagination - [Collapsing Breadcrumb](https://www.assembli.design/components/breadcrumb-collapse.md): Breadcrumb trail that folds deep paths into a single ellipsis chip. Click it and the hidden crumbs unfurl in place on a spring, with the current page always emphasised. - [Load More Ring](https://www.assembli.design/components/load-more-ring.md): Load-more button wrapped in a progress ring that fills as you page through a result set. Shows loaded-of-total, a spinner while fetching and a completed check state. - [Pagination Pill](https://www.assembli.design/components/pagination-pill.md): Page controls with a sliding selection pill that glides between numbers, smart ellipsis collapsing, prev/next arrows and arrow-key paging. ## UI components: Media - [Cursor Label](https://www.assembli.design/components/cursor-label.md): A springy custom cursor that swells into a label (View, Play, Drag) over any element tagged with data-cursor, and shrinks to a dot elsewhere. One delegated pointer handler, no per-item wiring. - [Glass Lens](https://www.assembli.design/components/glass-lens.md): A draggable liquid-glass lens that really bends what is behind it: a canvas-generated displacement map feeds an SVG backdrop-filter, with a specular rim and arrow-key nudging. Falls back to frosted blur outside Chromium. - [Morph Gallery](https://www.assembli.design/components/morph-gallery.md): One set of tiles, three layouts. Switching between grid, list and mosaic is a shared-layout animation, so every tile glides to its new place, and category filters collapse the rest away. - [Cursor Image Trail](https://www.assembli.design/components/cursor-image-trail.md): Move across the stage and a trail of cards is stamped behind the cursor, each tilting, then shrinking away in order. Pure CSS artwork, no image files. - [Hover Index List](https://www.assembli.design/components/hover-index-list.md): A big typographic index where hovering a row dims the rest and a preview card chases the cursor on a spring, tilting with pointer velocity and wiping between images. Focus moves it for keyboard users. - [Image Compare](https://www.assembli.design/components/image-compare.md): Before/after slider with a draggable divider. Drag anywhere, hover-follow mode, keyboard arrows, labelled corners and a springy grip. Accepts images or any React nodes. - [Iris Gallery](https://www.assembli.design/components/iris-gallery.md): Row of panels that expand on hover while a circular clip-path iris opens from the cursor to reveal each panel's alternate artwork. Keyboard and touch friendly. - [Kaleidoscope Canvas](https://www.assembli.design/components/kaleidoscope-canvas.md): Draw with the pointer and your stroke is mirrored across N-fold symmetry with glowing, fading ink. Pick segment count, brush and palette; export to PNG. - [Magnifier Lens](https://www.assembli.design/components/magnifier-lens.md): A round loupe that glides over any content and shows it zoomed. Works on images, SVG or live DOM because the lens renders a scaled clone of its children. Spring-smoothed, with a pop-in. - [Polaroid Pile](https://www.assembli.design/components/polaroid-pile.md): A scatter of instant photos you can throw around. Drag to move, the touched print jumps to the top, and one button fans them out or scatters them back on springs. - [Vinyl Sleeve](https://www.assembli.design/components/vinyl-sleeve.md): An LP standing in 3D: a card sleeve with stacked-slice thickness and a record tucked behind it. Press play and the record slides out on a spring and spins with a fixed sheen over the grooves; pause and it tucks back in. Leans toward the cursor, with a track list and an equaliser on the playing track. - [Waveform Scrubber](https://www.assembli.design/components/waveform-scrubber.md): An audio-style waveform player where bars swell around the playhead and your cursor like liquid. Click or drag to seek, with a time tooltip, keyboard seeking, and a play/pause button. Feed it real peak data or let it generate a demo. ## UI components: Code - [Code Block](https://www.assembli.design/components/code-block.md): Tabbed code window with line numbers, highlighted lines, a lightweight built-in syntax highlighter (no dependency) and a copy button that confirms. Light and dark friendly. - [Diff View](https://www.assembli.design/components/diff-view.md): Unified code diff computed from two strings: line numbers on both sides, tinted additions and removals, a +/- summary, and unchanged stretches folded into expandable hunks. - [Install Command](https://www.assembli.design/components/install-command.md): Package-manager switcher for install snippets: npm, pnpm, yarn and bun tabs with a sliding indicator, the command swapping in place, and a copy button that confirms. - [Terminal Replay](https://www.assembli.design/components/terminal-replay.md): A terminal window that plays a scripted session: commands type out character by character, output lines stream in, then it offers a replay. Starts when scrolled into view; instant for reduced motion.