# All components 950 components, grouped by category. ## Landing pages ### SaaS > Software products: CRMs, developer tools, dashboards and B2B platforms. - [Plenum — Indoor Air Quality Landing Page](https://www.assembli.design/components/plenum-landing.md): An indoor-air landing page between hairline rails: a painted sky through a rippling louvre behind a live CO₂ floor-plan dashboard, a method that autoplays through technical figures, a bento with alerts, an API panel and a year-of-air chart, a duct diagram of integrations, per-room pricing with a slider, before-and-after stories and a wind-tunnel CTA that flows around the cursor. - [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. - [Marram — AI Bookkeeper Landing Page](https://www.assembli.design/components/marram-landing.md): A calm landing page for an AI bookkeeper on oil-on-linen landscapes (dune grass, reeds, surf, barley) painted live on canvas. A hero ledger that matches incoming transactions, stacked cards with a match-rate sparkline, a split bill and an overnight close, autoplaying use-case screens, pricing, a customer story, drifting testimonials and an FAQ. - [Sift — Reasoning Model Landing Page](https://www.assembli.design/components/sift-landing.md): A soft-focus landing page for an AI reasoning model on blurred SVG flower blooms. A hero composer that thinks in visible passes, a streaming API card, a document reader that pins "says / means" notes, field-by-field JSON validation, a call-graph code review, live production charts, citations that open their sources, and a usage estimator that picks your plan. - [Gimbal — Agent Reliability Landing Page](https://www.assembli.design/components/gimbal-landing.md): A graphite and chartreuse landing page for an agent reliability platform: a live trace-waterfall hero whose failing spans heal as they drift, keywords that settle level, a detect-explain-repair timeline, an autoplaying platform console, a setup card that highlights its code, customer stories with charts, trace-art field notes, a security ledger and an FAQ. - [Afterglow — AI Night-Shift Agents Landing Page](https://www.assembli.design/components/afterglow-landing.md): A pitch-black landing page for AI agents that work overnight, lit by a pink-to-orange afterglow: star trails, a planet horizon behind a console that queues tasks into tonight's run log, an undoable run receipt, a playable chat, a working command palette, a Build / Watch / Wire studio, a searchable integrations wall and a sunrise CTA. Every section label is an hour of the night. - [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. - [Umbra — AI Automation Agency Landing Page](https://www.assembli.design/components/umbra-landing.md): A deep-violet landing page for an AI automation agency, lit by a live eclipse whose corona flares as the agent console below finishes each step. A workload ledger eclipsed down to its automated hours, a lead relayed through five stations with an ask-first switch, a scroll-driven build Gantt, an eclipse ROI calculator, an integration constellation and a live redaction demo. - [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. ## 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. ### Rawr > Ten vinyl art-toy dinosaurs in clothes and chunky sneakers, with glassy eyes that follow your cursor and bobblehead necks that wobble when you fling them: a roaring T. rex in a school jacket, a charging triceratops, a blushing stegosaurus, a long neck in a longer scarf, a pterosaur flying ace, a spinning ankylosaur, a sprinting raptor, a hatchling, a headbutter and a spinosaurus in a swim ring. Six palettes. - [Rawr Pack](https://www.assembli.design/components/rawr-pack.md): The whole Rawr asset pack in one install: ten vinyl art-toy dinosaurs raymarched in WebGL, in clothes and chunky sneakers, with glassy eyes that follow your cursor and bobblehead necks that wobble when you fling them: Rex, Trike, Stego, Bronto, Ptero, Ankylo, Raptor, Hatch, Pachy and Spino. Six palettes, plus box-art studio tiles, a speckled-egg palette picker, a Mesozoic timeline and a hatchery. - [Spino](https://www.assembli.design/components/rawr-spino.md): Rawr pack dinosaur: a cobalt vinyl spinosaurus with a tall pink sail, a long toothy snout and swim goggles pushed up on its head, bobbing in a striped swim ring. It paddles along; every few seconds a little fish leaps past in an arc and it snaps it out of the air, gulps, and its sail flushes with pride. A tap sends a fish. Raymarched in WebGL, six palettes. - [Pachy](https://www.assembli.design/components/rawr-pachy.md): Rawr pack dinosaur: a teal vinyl pachycephalosaur with a thick knobbly dome, red boxing gloves, satin trunks and sneakers. It bounces on its toes with its guard up; every few seconds it rocks back, throws a jab and headbutts the air, then wobbles dizzily while three little stars circle its dome. A tap sets it off. Raymarched in WebGL, six palettes. - [Hatch](https://www.assembli.design/components/rawr-hatch.md): Rawr pack dinosaur: a lemon-yellow vinyl baby dinosaur sitting in a speckled eggshell, with the top of the shell for a hat, huge glassy eyes and a single tooth. It wobbles in its shell; every few seconds it hops up, its shell hat pops off and spins in the air, it gives a tiny roar with its stubby arms up, and the shell lands back askew. Raymarched in WebGL, six palettes. - [Raptor](https://www.assembli.design/components/rawr-raptor.md): Rawr pack dinosaur: a lime vinyl velociraptor in a zip-up tracksuit jacket with racing stripes, a pink feathered crest, a long snout and sneakers. It bobs and tilts its head like a curious bird; every few seconds it crouches, sprints flat out on the spot with its legs a blur and skids to a halt, crest flattened. Raymarched in WebGL, six palettes. - [Ankylo](https://www.assembli.design/components/rawr-ankylo.md): Rawr pack dinosaur: a mustard vinyl ankylosaur with a domed shell of pink studs, a heavy club on its tail, a sweatband and sneakers. Its tail club swings to and fro; every few seconds it winds up and spins right round on the spot with the club flung out wide, then wobbles dizzily to a stop. A tap sets it spinning. Raymarched in WebGL, six palettes. - [Ptero](https://www.assembli.design/components/rawr-ptero.md): Rawr pack dinosaur: a cherry-red vinyl pterosaur flying ace in a leather flying cap, brass-rimmed goggles and a scarf, with a long crest and broad wings. It hovers, wings beating; every few seconds it swoops through a full loop-the-loop, scarf streaming, and pulls out with a wobble. A tap sends it round. Raymarched in WebGL, six palettes. - [Bronto](https://www.assembli.design/components/rawr-bronto.md): Rawr pack dinosaur: a lilac vinyl sauropod with a long neck wrapped in an even longer striped knit scarf, a sleepy smile and stubby legs in sneakers. Its neck sways like a periscope; every few seconds it stretches right up for a look round, then swoops down to peer at you with a slow blink, the scarf end flapping behind. Raymarched in WebGL, six palettes. - [Stego](https://www.assembli.design/components/rawr-stego.md): Rawr pack dinosaur: a mint-green vinyl stegosaurus in a chunky knit sweater, with pink plates down its back and a spiked tail. It sways shyly with its mitts clasped; every few seconds it ducks its head and clutches its blushing cheeks while its plates flush and glow in a wave from neck to tail and its tail wags. A tap makes it blush. Raymarched in WebGL, six palettes. - [Trike](https://www.assembli.design/components/rawr-trike.md): Rawr pack dinosaur: a tangerine vinyl triceratops in denim overalls with brass buckles, a spotted pink frill, three bone horns and a beak. It munches a fern; every few seconds it scuffs the ground twice with a sneaker, lowers its horns and charges a step forward with a stamp, then shakes it off. Drag it and its heavy head wobbles. Raymarched in WebGL, six palettes. - [Rex](https://www.assembli.design/components/rawr-rex.md): Rawr pack dinosaur: a sky-blue vinyl T. rex in a stand-collar school jacket with brass buttons, a pink punk crest, a grin full of teeth, glassy amber eyes and chunky sneakers. It rocks from foot to foot; every seven seconds it rears back, stamps and roars, jaw wide, crest bristling, arms flung out. Drag it and its bobblehead wobbles. Raymarched in WebGL, six palettes. ### Flux > Ten abstract forms in iridescent liquid satin, lit by colored studio light and always in motion: a ball wrapped in churning folds, a twisting ribbon loop, a pulsing trefoil knot, a ruffled bloom, a crown splash, melting drops, a rippling torus, a wobbling drop, a wrung column and a floating cloth. Drag to turn, tap for each one's move. Six palettes, a flow control and a glowing aura. - [Flux Pack](https://www.assembli.design/components/flux-pack.md): The whole Flux asset pack in one install: ten abstract forms in iridescent liquid satin, lit by colored studio light and raymarched in WebGL. A ball in churning folds, a twisting ribbon loop, a trefoil knot, a ruffled bloom, a crown splash, melting drops, a rippling torus, a drop, a wrung column and a cloth. Six palettes and a flow control, on a velvet stage. - [Cloth](https://www.assembli.design/components/flux-cloth.md): Flux pack: a square of satin cloth floating on a breeze, soft folds rolling across it corner to corner while its edges lift and curl and the colored light slides through every crease. A tap snaps a wave out from the middle, like a sheet shaken out, and lets it settle back to drifting. Raymarched in WebGL. - [Twist](https://www.assembli.design/components/flux-twist.md): Flux pack: a fluted column of liquid satin with four deep flutes and domed ends, twisting one way and then the other like wrung silk while a slow swell travels up it. Each flute catches a different light as it winds. A tap wrings the column hard and lets it unwind with a few springy turns. Raymarched in WebGL. - [Drop](https://www.assembli.design/components/flux-drop.md): Flux pack: a drop of liquid satin hanging in the air, wobbling between round and pear-shaped as its tip sways and rings of ripple run down it from the point. The rim light wraps its belly while the cool fill pools in front. A tap bounces it flat and lets it spring back into shape. Raymarched in WebGL. - [Torus](https://www.assembli.design/components/flux-torus.md): Flux pack: a fat torus of liquid satin whose skin rolls in waves that travel round the ring and through its hole at once, so the colored light pours along it like liquid circling a drain. A tap sends a ripple bursting round the ring and lets it settle. Raymarched in WebGL. - [Merge](https://www.assembli.design/components/flux-merge.md): Flux pack: five drops of liquid satin orbiting each other on slow, out-of-step paths, melting together wherever they meet and budding off again, like a lava lamp seen up close. Light runs over the necks between them as they join and part. A tap flings the drops apart and lets them run back together. Raymarched in WebGL. - [Crown](https://www.assembli.design/components/flux-crown.md): Flux pack: a drop of liquid satin falling into a pool of the same, on a loop. A crown of liquid rises where it lands, its rim pulls up into nine points that each throw off a bead, then the crown sinks back and rings run out across the pool before the next drop falls. A tap throws a bigger splash. Raymarched in WebGL. - [Bloom](https://www.assembli.design/components/flux-bloom.md): Flux pack: three layers of ruffled liquid satin stacked like a peony around a soft twisting bud, their frilled edges rippling in waves that chase each other round the bloom, each layer at its own count of ruffles. The light catches every frill on its way round. A tap opens the petals wide and lets them fold back in. Raymarched in WebGL. - [Knot](https://www.assembli.design/components/flux-knot.md): Flux pack: a trefoil knot of fat liquid-satin tube, swelling and slimming as slow pulses run along it, while the whole knot rolls through its own loops so the light slides over and under each crossing. A tap sends one fat pulse racing all the way round the knot. Raymarched in WebGL. - [Ribbon](https://www.assembli.design/components/flux-ribbon.md): Flux pack: a wide band of liquid satin looped into a ring with three half twists, so its face and back keep trading places as the twists travel round the loop, while the loop itself rolls like a wave and the band swells and thins. The colored light pours along it as it turns. A tap whips the twists once round the loop. Raymarched in WebGL. - [Orb](https://www.assembli.design/components/flux-orb.md): Flux pack: a ball of liquid satin wrapped in its own folds. A raised swirl winds round it on an S, softer pleats ripple down the far side, and the whole skin slowly churns while a warm rim, a hot key and a cool fill sort every fold into bands of color under an iridescent sheen. A tap sends a shiver through the folds. Raymarched in WebGL. ### Optic > Ten pieces of thick optical glass with real dispersion: color pools deep in their cores, crisp rims split light into rainbow fringes, and each floats over a soft tinted shadow that glows on dark pages. Stacked slabs, an app tile that flips, fanned cards, a prism that rolls, a twisting puzzle cube, a bar chart, a switch, a frame and a twisted tower. Drag to turn, tap for each one's move. Six palettes. - [Optic Pack](https://www.assembli.design/components/optic-pack.md): The whole Optic asset pack in one install: ten pieces of thick optical glass with real dispersion, raymarched in WebGL. Color pools deep in each core, crisp rims split light into rainbow fringes, and each floats over a tinted shadow that glows on dark pages. Slabs, a tile, layers, cards, a prism, a puzzle cube, a bar chart, a switch, a frame and a twisted tower, plus a light-table stage. - [Twist](https://www.assembli.design/components/optic-twist.md): Optic pack: five square slabs of optical glass stacked into a tower, each turned a little further than the one below, with air between them so light bounces from slab to slab. The twist winds and unwinds like a slow wave. A tap sends a quarter turn rippling up the tower, one slab after another. Raymarched in WebGL. - [Frame](https://www.assembli.design/components/optic-frame.md): Optic pack: a thick square frame of optical glass with a small cube hovering in its window, balanced on its corner. The cube turns slowly and rises through the frame and back, bent and doubled by the walls around it. A tap sets the cube spinning like a top. Raymarched in WebGL. - [Toggle](https://www.assembli.design/components/optic-toggle.md): Optic pack: a switch in optical glass, a thick pill track with a domed glass puck riding on it. Every few seconds, and whenever you tap it, the puck springs across with a squash, and when it turns on, color floods the clear track behind it. It stays where you left it. Raymarched in WebGL. - [Bars](https://www.assembli.design/components/optic-bars.md): Optic pack: a bar chart in optical glass, four rounded columns standing on a thin clear plate, their color pooled in the columns and fringed with rainbow at the edges. The values wander gently up and down. A tap deals a fresh set of values that spring into place one after another. Raymarched in WebGL. - [Cube](https://www.assembli.design/components/optic-cube.md): Optic pack: a two-by-two puzzle cube of eight optical-glass cubelets with air between them, so each one refracts its neighbours. Every few seconds the top layer twists a quarter turn with a little overshoot while the gaps breathe open and shut. A tap twists it on the spot. Raymarched in WebGL. - [Prism](https://www.assembli.design/components/optic-prism.md): Optic pack: a long triangular prism of optical glass lying on one face, the shape that splits white light into a spectrum, and does here: every reflection inside it breaks into bands of rainbow. It rocks gently on its edge over a tinted shadow. A tap rolls it over onto its next face. Raymarched in WebGL. - [Cards](https://www.assembli.design/components/optic-cards.md): Optic pack: three cards of optical glass fanned out from one corner like a hand of cards, color pooled in each one and rainbow fringes along their rounded edges. The fan opens and closes as it breathes. A tap shuffles the deck: the top card slides out, drops and tucks back in at the bottom. Raymarched in WebGL. - [Layers](https://www.assembli.design/components/optic-layers.md): Optic pack: three thin sheets of optical glass hovering one above another, the classic layers mark. They breathe apart and back together in a slow wave, each casting color onto the one below and a soft shadow onto the table. A tap fans them round a quarter turn each, one after another. Raymarched in WebGL. - [Tile](https://www.assembli.design/components/optic-tile.md): Optic pack: a thick rounded-square tile of optical glass, like an app icon, with a soft square well pressed into its face. Color blooms in its core, the rims stay clear and fringe with rainbow light, and it bobs on the air above a tinted shadow. A tap flips it head over heels. Raymarched in WebGL. - [Stack](https://www.assembli.design/components/optic-stack.md): Optic pack: two thick square slabs of optical glass, one resting off-center on the other. Their color pools deep in the middle and thins to clear, crisp rims, the edges split light into thin rainbow fringes, and they float over a soft tinted shadow. The top slab drifts in a slow circle; a tap gives it a quarter turn. Raymarched in WebGL. ### Runnel > Eight design-shop desk toys in ring-grained wood, veined marble and brass, standing in low window light whose panes fall across them and the page: a marble-run tower, a seesaw, a Newton's cradle, a spiral ramp, a spinning top, an abacus that counts, a vortex funnel and a stair the ball hops down. Each one keeps moving; tap for its trick. Six wood-and-stone palettes. - [Runnel Pack](https://www.assembli.design/components/runnel-pack.md): The whole Runnel asset pack in one install: eight design-shop desk toys in ring-grained wood, veined marble and brass, raymarched in WebGL and standing in low window light whose panes fall across them and the page. A marble-run tower, a seesaw, a Newton's cradle, a spiral ramp, a spinning top, a counting abacus, a vortex funnel and a stair, plus a display stage. - [Steps](https://www.assembli.design/components/runnel-steps.md): Runnel pack: a stair of alternating wood and stone blocks falling away from a stone column, on a glazed tray, with a little wooden house at the foot. A wooden ball rises into the cup on the column, hops down the stair a step at a time, landing in a shallow dish on each, and rolls in through the house's round door. Raymarched in WebGL. - [Funnel](https://www.assembli.design/components/runnel-funnel.md): Runnel pack: a polished stone vortex funnel with a brass rim on a turned wooden stem, beside a stone lift column on a wooden base. A ball comes up into the column's cup, hops onto the funnel and circles down it, faster and faster as the circles tighten, until it drops through the middle and comes round again. Raymarched in WebGL. - [Abacus](https://www.assembli.design/components/runnel-abacus.md): Runnel pack: an abacus with wooden uprights and top rail on a stone plinth, and three brass rods of beads in wood, stone and wood. It counts on its own in fives, sliding a bead across at a time, carrying into the next rod and sending full rods back home one bead after another. A tap counts one on. Raymarched in WebGL. - [Top](https://www.assembli.design/components/runnel-top.md): Runnel pack: a lathe-turned wooden spinning top with a brass tip and inlaid brass pin, humming round a shallow stone dish on a turned wooden plinth. Its rings run round its axis, it leans and slowly precesses, and its tip wanders the dish. A tap sets it wobbling wide, and it rides the wobble out. Raymarched in WebGL. - [Spiral](https://www.assembli.design/components/runnel-spiral.md): Runnel pack: a stone column wound with a railed wooden spiral ramp, like a helter-skelter, on a lathe-turned wooden base. A wooden ball comes up through the column into the cup on top, hops onto the ramp, runs round and round it down to the foot and rolls into the column again. A tap makes it hop. Raymarched in WebGL. - [Cradle](https://www.assembli.design/components/runnel-cradle.md): Runnel pack: a Newton's cradle, five polished stone balls hung in a row on fine brass wires from a brass frame on a ring-grained wooden base. The end ball swings out and strikes, and the one at the far end flies out in its place, on and on. A tap swings two at a time; another goes back to one. Raymarched in WebGL. - [Seesaw](https://www.assembli.design/components/runnel-seesaw.md): Runnel pack: a grooved wooden plank balanced on a brass pin over a stone wedge, on a glazed tray. The plank tips, a polished stone ball rolls down its groove and knocks against the brass stop at the low end, then the plank tips back and sends it the other way. A tap nudges the plank and bounces the ball. Raymarched in WebGL. - [Tower](https://www.assembli.design/components/runnel-tower.md): Runnel pack: a stone tower capped in ring-grained wood at the end of a long routed channel, on a glazed tray with a brass plate. A wooden ball rises out of the stone cup on top, rolls off the spout, drops into the channel, rides up the dish at the far end and rolls back into the tunnel at the tower's foot. Window light falls across it. Raymarched in WebGL. ### Sheen > Ten symbols in clear glass under a soap-thin iridescent film, lit by colored light from behind so their bodies stay dark and their rims burn magenta, blue and gold: a drop, an X, a folded bubble, an ice cube, an orb with a lens of air inside, a half-molten gem, a heart, a pebble, a puffy star and a swirl. Each one moves like liquid; drag to turn, tap for its move. Six palettes. - [Sheen Pack](https://www.assembli.design/components/sheen-pack.md): The whole Sheen asset pack in one install: ten symbols in clear glass under a soap-thin iridescent film, raymarched in WebGL. Colored light washes in from behind, so bodies stay dark while rims burn magenta, blue and gold. A drop, an X, a folded bubble, an ice cube, an orb, a molten gem, a heart, a pebble, a puffy star and a swirl, plus a black stage, a film control and a live specimen sheet. - [Swirl](https://www.assembli.design/components/sheen-swirl.md): Sheen pack: a ring of clear glass whose flat section winds one and a half turns on its way round, so it reads as a swirl, and the winding flows round it endlessly like a smoke ring rolling. Colored light from behind runs through it in violet and blue under a soap-thin iridescent film. A tap whirls it. Raymarched in WebGL. - [Star](https://www.assembli.design/components/sheen-star.md): Sheen pack: a five-pointed star of clear glass blown up like a cushion. It rocks gently, and every few seconds it twinkles a fifth of a turn with a pop, while a soap-thin iridescent film slides gold and violet over its points. A tap twinkles it on the spot. Raymarched in WebGL. - [Pebble](https://www.assembli.design/components/sheen-pebble.md): Sheen pack: a river pebble of clear glass with a flat pocket of air inside. It breathes like something soft while the pocket slowly turns, so a rim of colored light slides round inside it, and a soap-thin iridescent film shifts over its back. A tap squishes it and lets it spring back. Raymarched in WebGL. - [Heart](https://www.assembli.design/components/sheen-heart.md): Sheen pack: a puffed-up heart of clear glass that beats, lub-dub, then rests. A soap-thin iridescent film turns its lobes gold and magenta, and the colored light behind it pools in the dip and down to the point. A tap gives it a big double beat. Raymarched in WebGL. - [Gem](https://www.assembli.design/components/sheen-gem.md): Sheen pack: a dodecahedron of clear glass caught halfway between cut and molten. Its faces slowly sag and lift, so the edges sharpen and soften as it turns, and each facet throws the colored studio light back in a different hue under a soap-thin iridescent film. A tap melts it soft and lets it set again. Raymarched in WebGL. - [Orb](https://www.assembli.design/components/sheen-orb.md): Sheen pack: a ball of clear glass with a lens of air trapped inside it. The lens slowly rolls and tips within the ball, so its bright inner edge sweeps round like an eye, while a soap-thin iridescent film shifts across the surface. Colored light from behind blooms through it in blue and violet. A tap spins the lens. Raymarched in WebGL. - [Cube](https://www.assembli.design/components/sheen-cube.md): Sheen pack: an ice cube of clear glass with pillowed faces and eased edges that hops and tumbles a quarter turn every few seconds, squashing as it lands. A soap-thin film rainbows over its faces, and the colored studio light behind folds through it into gold and violet streaks. A tap tumbles it on the spot. Raymarched in WebGL. - [Bubble](https://www.assembli.design/components/sheen-bubble.md): Sheen pack: a ball of clear glass with a fold pressed into its skin, a crease that winds round it on an S and slowly wanders as if it were still molten. A soap-thin iridescent film runs magenta to gold across it, and colored light from behind pools in the crease. A tap sets it wobbling like jelly. Raymarched in WebGL. - [Cross](https://www.assembli.design/components/sheen-cross.md): Sheen pack: two soft bars of clear glass crossed into an X, each wrung along its length like taffy, the twists running down them in opposite directions so it never stops writhing. A soap-thin film paints every twist magenta, gold and blue, and the crossing bends each bar through the other. A tap flips it over. Raymarched in WebGL. - [Drop](https://www.assembli.design/components/sheen-drop.md): Sheen pack: a teardrop of clear glass under a soap-thin iridescent film, breathing on a slow squash and stretch while its tip sways like the liquid it was poured from. Colored studio light washes in from behind, so its rims burn magenta, blue and gold. A tap drops it with a splash: it flattens, rebounds and wobbles still. Raymarched in WebGL. ### Taffy > Ten pieces of soft candy plastic in a bright white studio, washed from one pastel into the next: stacked marshmallow slabs, a pressable cushion, a twisting puzzle cube, a self-solving block puzzle, a fidget tower, a glass fidget cube, a ring of dough, a rope knot, a satin ribbon knot and a swirl of petals. Every one fidgets on a loop; drag to fling it, tap for its trick. Gloss or satin, six palettes. - [Taffy Pack](https://www.assembli.design/components/taffy-pack.md): The whole Taffy asset pack in one install: ten pieces of soft candy plastic, raymarched in WebGL in a bright studio and washed from one pastel into the next. Marshmallow slabs, a pressable cushion, a twisting puzzle cube, a self-solving block puzzle, a fidget tower, a glass fidget cube, a ring of dough, a rope knot, a satin ribbon knot and a swirl of petals, plus a stage and a candy-box picker. - [Stack](https://www.assembli.design/components/taffy-stack.md): Taffy pack: three marshmallow slabs in soft candy plastic, washed from butter through peach to rose. A slow breath runs up the stack, and every six seconds the top slab hops, turns a quarter and lands with a squash that runs down through the others. A tap bounces all three in turn. Drag to turn and fling. Raymarched in WebGL. - [Pillow](https://www.assembli.design/components/taffy-pillow.md): Taffy pack: two puffy marshmallow layers in soft candy plastic, a rose cushion fading to cream on a butter-and-apricot base. Every few seconds an unseen finger presses a soft dimple into the top somewhere new, holds, and lets go, and the marshmallow wobbles back. A tap presses dead center, harder. Raymarched in WebGL. - [Cube](https://www.assembli.design/components/taffy-cube.md): Taffy pack: a puzzle cube of eight soft candy blocks in rose, sky, butter, lilac and mint round a lilac band. It fidgets on a loop: the top layer twists a quarter, then the bottom the other way, then each twists back, lifting a hair and landing with a click. A tap bursts the blocks apart and snaps them back together. Raymarched in WebGL. - [Block](https://www.assembli.design/components/taffy-block.md): Taffy pack: an interlocking block puzzle in soft candy plastic, with rose and butter bars, a lilac top, a mint step and a cream base. It solves itself on a loop, one piece at a time sliding out of the block, hanging a beat and sliding home. A tap pops every piece out at once and pulls them back. Raymarched in WebGL. - [Tower](https://www.assembli.design/components/taffy-tower.md): Taffy pack: a fidget tower of rounded candy plates, with a lilac base, a clear glass block with a mint core inside, butter, sky and a rose cap, ringed by an apricot hoop. A ripple of twist runs up it, and every seven seconds it cascades a quarter turn, layer after layer, as the hoop spins the other way. A tap sends a faster cascade. Raymarched in WebGL. - [Crate](https://www.assembli.design/components/taffy-crate.md): Taffy pack: a fidget cube in clear frosted glass, wrapped in a rose strap, with a round button on its side and candy parts inside: a mint slider, a lilac drum, a butter channel and a peach block. Every six seconds the button clicks in and the parts answer, the slider shooting across and the drum rolling. A tap clicks it. Raymarched in WebGL. - [Loop](https://www.assembli.design/components/taffy-loop.md): Taffy pack: a ring of soft-touch apricot dough, thick at the bottom and thin over the top, paling to peach round its hole. Its weight slowly rolls round the ring, so the hole drifts and the loop seems to knead itself. A tap pulls it wide like taffy and lets it snap back with a wobble. Drag to turn and fling it. Raymarched in WebGL. - [Twist](https://www.assembli.design/components/taffy-twist.md): Taffy pack: a trefoil knot of fat soft rope in pulled-taffy colors, sky blue through rose to apricot and peach, the colors drifting along the rope as it slowly turns and kneads, its strands melting together where they cross. A tap pulls the knot tight and lets it relax with a wobble. Raymarched in WebGL. - [Knot](https://www.assembli.design/components/taffy-knot.md): Taffy pack: a trefoil knot of wide satin ribbon, washed from deep violet through magenta to pale lilac, its edges shifting toward sky blue side on. It tumbles slowly while its ribbons roll along themselves and the colors flow round. A tap loosens the loops, which swell open and cinch back tight. Raymarched in WebGL. - [Bloom](https://www.assembli.design/components/taffy-bloom.md): Taffy pack: a swirl of curled satin petals round an open eye, wound round a ring so they draw spirals, deep blue-violet at the center through lilac to hot pink at the edges. The petals spin like a pinwheel while the flower breathes open and shut. A tap blooms it wide and lets it curl back in. Raymarched in WebGL. ### Kami > Eleven pieces of folded origami paper in soft window light, each moving the way paper folds: a crane on two-hinged wings, a fan whose pleats peel open, a fortune teller that counts, a frog that backflips, a gliding dart, a boat on rippling water, a lotus that blooms ring by ring, a pinwheel, a fox that listens, a lantern glowing from inside and a senbazuru of sixteen cranes. Plain kami, printed washi or crinkled foil, six paper packs. - [Kami Pack](https://www.assembli.design/components/kami-pack.md): The whole Kami asset pack in one install: eleven pieces of folded origami paper, raymarched in WebGL in soft window light. A crane, a folding fan, a fortune teller, a frog, a paper dart, a boat, a lotus, a pinwheel, a fox, a glowing lantern and a senbazuru of sixteen cranes, each moving the way paper folds, plus a washi stage, paper-pack palette picker and crease-pattern picker. - [Senbazuru](https://www.assembli.design/components/kami-senbazuru.md): Kami pack: senbazuru, sixteen paper cranes on four cotton strings hanging from a bamboo rod, folded from the palette's three sheets in turn. Every string sways on its own and every crane turns its own way and beats its wings at its own pace. A tap sends a gust along the rod: the strings swing one after another and the cranes flutter hard. Raymarched in WebGL as one scene. - [Lantern](https://www.assembli.design/components/kami-lantern.md): Kami pack: an eight-sided paper lantern pleated like an accordion between black lacquer rims, lit by a candle inside. The flame flickers through the paper and its fibers, pools warm light on the ground and glows brightest on dark pages. It sways on its brass handle; a tap bounces the pleats and flares the flame. Raymarched in WebGL. - [Fox](https://www.assembli.design/components/kami-fox.md): Kami pack: a folded paper fox sitting up, its white cheeks and bib showing the plain back of the sheet, a brush of a tail curled round its feet. Its head follows the cursor, an ear twitches now and then and the tail sweeps. A tap flicks both ears and tilts its head to listen while the tail swishes. Raymarched in WebGL. - [Pinwheel](https://www.assembli.design/components/kami-pinwheel.md): Kami pack: a pinwheel folded from duo paper, the second color on its back, with four blades curled to a brass pin on a bamboo stick. It turns in a soft breeze. Each tap is a gust that spins it up fast and lets it run down slowly, and gusts stack. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Lotus](https://www.assembli.design/components/kami-lotus.md): Kami pack: a folded paper lotus of twelve cupped petals in three rings on four broad leaves, turning slowly on still water and breathing open and shut. A tap closes it into a bud, then it blooms again ring by ring from the outside in, each ring overshooting a little. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Boat](https://www.assembli.design/components/kami-boat.md): Kami pack: a folded paper boat with a pointed hull and a tall double sail, riding a gentle swell while faint rings spread round it on the water. A tap sends a wave under it: it lurches, rocks and settles as a ring races outward. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Plane](https://www.assembli.design/components/kami-plane.md): Kami pack: a paper dart with creased wings tipped up and a keel underneath, gliding in a lazy figure of eight and banking into each turn, its shadow drifting on the ground far below. A tap sends it up and over a loop-the-loop and out with a wobble. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Frog](https://www.assembli.design/components/kami-frog.md): Kami pack: a folded paper frog sitting on its haunches, two white eyes folded up on its head. It breathes, and now and then takes a little hop. A tap sets it crouching low, springing up into a backflip with its hind legs kicked straight out, and landing in a squash. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Fortune Teller](https://www.assembli.design/components/kami-fortune.md): Kami pack: a paper fortune teller of four pointed pockets that works itself like it's on fingertips, opening its mouth one way to show one color inside, then the other way to show another. A tap counts out a quick four and holds it open on your fortune. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Fan](https://www.assembli.design/components/kami-fan.md): Kami pack: a folding fan of fifteen paper pleats on bamboo ribs, its leaf painted with a sun and a border that fold with the pleats. It fans itself gently. A tap snaps it shut, then flicks the guard round so the pleats peel open one after another and settle with a shiver. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. - [Crane](https://www.assembli.design/components/kami-crane.md): Kami pack: the classic folded paper crane, hovering on slow wingbeats. Each wing hinges at the body and again halfway out, so the outer half follows a beat behind, and the body lifts on every downstroke. A tap sets it beating hard and climbing, then it glides back down. Plain kami, printed washi or crinkled foil. Raymarched in WebGL. ### Mote > Ten real things woven from tens of thousands of glinting beads, like a cabinet of curiosities scanned into point clouds: a peony that breathes, a dandelion you can blow away, a swallowtail, a moon jelly, a chambered nautilus, fly agarics shedding spores, a feather, a koi, an hourglass whose sand really runs and a steaming teacup. Each flies in from dust, sheds loose beads at its edges and parts around your cursor like smoke; tap for its trick. Six palettes. - [Mote Pack](https://www.assembli.design/components/mote-pack.md): The whole Mote asset pack in one install: ten real things woven from tens of thousands of glinting beads in WebGL, like a cabinet of curiosities scanned into point clouds. A peony, a dandelion, a swallowtail, a moon jelly, a nautilus, fly agarics, a feather, a koi, an hourglass and a teacup, plus a specimen plate, bead palette swatches and a specimen drawer. - [Teacup](https://www.assembli.design/components/mote-teacup.md): Mote pack: a fluted teacup on its saucer, with a band in the palette's second color, a looped handle, tea that shivers and four wisps of steam curling up and fading. Tap to drop a sugar cube in: a crown splashes up, rings run out to the rim and the steam billows. WebGL point cloud. - [Hourglass](https://www.assembli.design/components/mote-hourglass.md): Mote pack: an hourglass in a turned frame. Sand runs out of the top bulb into a funnel, falls through the neck as a thread of grains and builds a cone below. When the top is empty the glass turns itself over and starts again. Tap to knock it: the grains in both heaps jump and the stream sprays. WebGL point cloud. - [Koi](https://www.assembli.design/components/mote-koi.md): Mote pack: a butterfly koi swimming in place. Its body bends in a traveling wave while a long veil of a tail and trailing fins follow a beat behind, with barbels at the mouth and patches in the palette's second color. Tap to startle it: it snaps into a C, darts and swings back round. WebGL point cloud. - [Feather](https://www.assembli.design/components/mote-feather.md): Mote pack: a flight feather with a tapering shaft, two vanes of fine barbs swept toward the tip with a few natural splits, soft down at the quill and bars across the vane. It rocks like a feather falling while its barbs ripple in the air. Tap to twirl it around its shaft. WebGL point cloud. - [Fly Agaric](https://www.assembli.design/components/mote-mushroom.md): Mote pack: two fly agarics in a tuft of moss, with domed caps flecked with raised warts, fans of gills underneath and a skirt on each stem. Spores sift down from the gills and drift away. Tap to squash the big cap: it bounces back and puffs out a cloud of spores. WebGL point cloud. - [Nautilus](https://www.assembli.design/components/mote-nautilus.md): Mote pack: a chambered nautilus cut in half, the way shells are shown in a cabinet. The outer wall follows a true logarithmic spiral with stripes on its back, and inside sixteen curved septa wall off the chambers, threaded by the siphuncle. It turns slowly so you see shell, then chambers. Tap to roll it once around its spiral. WebGL point cloud. - [Moon Jelly](https://www.assembli.design/components/mote-jellyfish.md): Mote pack: a moon jellyfish with a scalloped bell over four glowing gonad rings, four frilled oral arms and a fringe of long tentacles. Each beat squeezes the bell, lifts it and sends a wave down every tentacle. Tap to fire a jet: it clenches, shoots up with its tentacles streaming, then drifts back down. WebGL point cloud. - [Swallowtail](https://www.assembli.design/components/mote-butterfly.md): Mote pack: a swallowtail butterfly with its beads laid along the veins, fanning out from the body the way real ones do, with a dark margin, pale spots and an eyespot on each tail. It opens and closes its wings slowly and pauses open. Tap to make it flutter hard, lift off, loop and settle back. WebGL point cloud. - [Dandelion](https://www.assembli.design/components/mote-dandelion.md): Mote pack: a dandelion clock, 240 seeds each drawn as a stalk and a parachute of fine filaments, on a stem that sways in the breeze. Now and then a seed lets go and floats off. Tap to blow: the windward seeds sail away one after another, tumbling on the wind, and the head fills back in. WebGL point cloud. - [Peony](https://www.assembli.design/components/mote-peony.md): Mote pack: a peony in full bloom, woven from 45,000 glinting beads. Eight rings of ruffled petals breathe one after another while ripples roll along their edges, and loose beads drift off the rims. Move the cursor through it to part the beads; tap to throw it wide open in a spray of beads that drift home. WebGL point cloud. ### Bijou > Ten jeweller's still lifes in mirror-polished metal, clear glass and glossy beads, floating over a soft shadow: pebbles round a cluster of bubbles, an hourglass that turns itself over, a wobbling ring, a lava lamp, a gimbal, a rattle, a pendulum, a shaker coin, a clam and a hopping cube. The beads are real physics, rolling and spilling as each piece moves; drag to tip them, tap for the trick. Six palettes, three metal finishes. - [Bijou Pack](https://www.assembli.design/components/bijou-pack.md): The whole Bijou asset pack in one install: ten jeweller's still lifes in mirror-polished metal, clear glass and glossy beads, raymarched in WebGL with real bead physics. Pebbles round a cluster of bubbles, an hourglass, a wobbling ring, a lava lamp, a gimbal, a rattle, a pendulum, a shaker coin, a clam and a hopping cube, plus a studio stage with a tilt level, swatches and a tray picker. - [Cube](https://www.assembli.design/components/bijou-cube.md): Bijou pack: a glass cube with a polished cap on every corner and a fine wire along every edge, beads heaped on its floor. Every few seconds it hops and turns a quarter over in the air: the beads float, then land in a heap on the new floor. A tap throws it higher and half over. Raymarched in WebGL, with real bead physics. - [Clam](https://www.assembli.design/components/bijou-clam.md): Bijou pack: a fluted, scalloped clam shell in polished metal, hinged at the back and breathing slowly open round a glass pearl full of beads, which shows in the shell's mirrored ribs. A tap snaps the lid shut on the pearl with a jolt that rattles the beads, and it eases open again. Raymarched in WebGL, with real bead physics. - [Coin](https://www.assembli.design/components/bijou-coin.md): Bijou pack: a thick metal coin with a reeded edge, a glass lens on each face and a boss through the middle, standing on its edge. It turns slowly like a drum, carrying its beads up the side until they spill back over the boss. A tap tosses it up end over end, beads flying, and it lands back on its edge. Raymarched in WebGL, with real bead physics. - [Drop](https://www.assembli.design/components/bijou-drop.md): Bijou pack: a glass teardrop of beads under a polished cap, hanging by a rod from a bar with a ball at each end. It swings like a pendulum and the beads slosh from side to side with every turn. A tap pushes it into a big swing that dies away over a few beats. Raymarched in WebGL, with real bead physics. - [Rattle](https://www.assembli.design/components/bijou-rattle.md): Bijou pack: a rattle with a glass bulb of beads on a turned, collared metal handle, swaying from the ring at its end. Every few seconds it gives itself a little shake and the beads hop; a tap shakes it hard and they clatter round the bulb before settling back into a heap. Raymarched in WebGL, with real bead physics. - [Gimbal](https://www.assembli.design/components/bijou-gimbal.md): Bijou pack: a glass globe of beads hung in three nested polished rings on a stand, like a gyroscope or an armillary sphere. Each ring turns on its own pins at its own slow pace, so the globe rolls over and over and the beads tumble round inside it. A tap spins every ring up, and they wind down again. Raymarched in WebGL, with real bead physics. - [Lamp](https://www.assembli.design/components/bijou-lamp.md): Bijou pack: a tapered glass lamp on a turned metal base, filled with glossy beads that behave like lava-lamp wax. Each one warms at the foot, rises up the middle, cools near the top and slides back down the wall, so they pass each other endlessly. A tap heats every bead at once and up they go together. Raymarched in WebGL, with real bead physics. - [Halo](https://www.assembli.design/components/bijou-halo.md): Bijou pack: a ring of glass tube clasped by two polished cuffs, wobbling like a coin settling on a table round a metal pebble that floats upright in the middle. Its low point travels round and round, and the beads inside chase it in a rolling train. A tap sets the ring wobbling hard and fast before it calms. Raymarched in WebGL, with real bead physics. - [Hourglass](https://www.assembli.design/components/bijou-hourglass.md): Bijou pack: an hourglass of two glass bulbs in a polished three-post frame, timing with glossy beads instead of sand. They funnel down and run through the neck one at a time, heap up in the lower bulb, and once the last is through the timer waits a beat and turns itself over. A tap turns it over now. Raymarched in WebGL, with real bead physics. - [Trefoil](https://www.assembli.design/components/bijou-trefoil.md): Bijou pack: three mirror-polished metal pebbles, soft as gumdrops, hovering round a cluster of three glass bubbles packed with glossy beads that drift in a slow current. The metal mirrors the beads and the studio; the glass bends them. A tap throws the pebbles outward on a spring and stirs the beads. Raymarched in WebGL, with real bead physics. ## 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. ## 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. ## Features - [Security Certificate](https://www.assembli.design/components/security-certificate.md): Security and compliance section printed like a banknote. Each certification is a certificate with its own guilloché rosette and ink that engraves itself when chosen. A UV lamp follows the pointer to reveal fibres and a hidden verification line, the hologram seal catches the light, and pending audits are stamped. Plus a controls ledger and a report request form. - [Use Case Tabs](https://www.assembli.design/components/use-case-tabs.md): Solutions-by-team section: a tab for each audience (engineering, product, design, marketing, support) over a two-sided panel with that team's headline, three benefits, a metric and customer quote, a Learn more link and a product mock of its own. Arrow keys select, the indicator slides, panels crossfade without moving the page, and the tabs scroll on phones. Autoplay is opt-in. - [Integrations Grid](https://www.assembli.design/components/integrations-grid.md): Integrations directory section: a search field with a / shortcut and category filters with live counts above a grid of integration cards. Each card has a logo tile, name, one-line description, category and an optional New, Beta or Official badge. Filtering reflows the grid with a layout animation, search marks its matches, and an empty state offers to widen the search or request the tool. - [Competitor Comparison](https://www.assembli.design/components/competitor-comparison.md): “Us vs them” comparison table: your product in a raised column with its price and call to action beside the alternatives. Grouped rows show yes, partial and no glyphs or short text, with cell notes gathered into numbered footnotes. A Differences only switch hides rows where everyone matches, and on phones a switcher picks which alternative sits beside yours. - [How It Works](https://www.assembli.design/components/how-it-works.md): Numbered process section. As the steps scroll into view they light up one after another: the number ticks, the rail draws on to the next marker and the step plays its own illustration. Steps carry optional durations that total into a closing bar with a call to action. Horizontal on large screens, a vertical rail on phones. - [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 & Grids - [Bento Grid](https://www.assembli.design/components/bento-grid.md): The bento layout primitive: a dense grid plus cards that span columns and rows, with an icon, eyebrow, title, description and a visual stacked above, laid behind or set beside the text (by the card's own width). Four tones, a soft light that follows the pointer, and link cards whose arrow nudges on hover. - [Dashboard Grid](https://www.assembli.design/components/dashboard-grid.md): A widget dashboard you can rearrange. Drag a handle and the other widgets slide out of the way, or focus it, press Space and use the arrow keys (Escape puts it back). Each widget's menu resizes it (small, medium, tall, large, wide) or removes it, with every change announced. Controlled or uncontrolled. - [Expanding Card Grid](https://www.assembli.design/components/expanding-card-grid.md): A grid of cards that each open into a full view. The card grows into a centered panel, its picture and title travelling with it, while the page dims. Closing shrinks it back into its slot. The open card is a modal dialog: focus moves in and stays there, and Escape, the close button or a click outside closes it. - [Feature Bento](https://www.assembli.design/components/feature-bento.md): A landing-page features section of five bento cards, each a small working picture of its feature: a deploy log that builds and ships branches, a traffic chart that draws in, a search box that types queries, live cursors over a comment, and a 30-day uptime strip. Animations start in view and stop under reduced motion. - [Filterable Grid](https://www.assembli.design/components/filterable-grid.md): A directory grid for templates, integrations or work: filter pills with live counts, a search box that "/" jumps to, and a sort menu. Cards slide into place as the results change, and an empty state offers a way back. Generic over any item type with render and accessor props. - [Masonry Grid](https://www.assembli.design/components/masonry-grid.md): A masonry wall that drops each item into the shortest column, in order, so reading and tab order still run top to bottom. Column count follows the container's width, items are re-placed when one resizes, and they glide to new spots. CSS columns cover the first paint, so there's no jump. Demo: a moodboard with load more. - [Spotlight Grid](https://www.assembli.design/components/spotlight-grid.md): A grid of feature cards lit by one light that follows the pointer: it catches the borders of every card in reach, so neighbouring edges glow as you move between them, and softly washes the card beneath. Set its color and reach, and a resting position for when the pointer leaves. - [Stats Bento](https://www.assembli.design/components/stats-bento.md): A "by the numbers" bento built from data: a trend card with a smooth chart you can hover or arrow through, a progress ring, quarter bars, a big number with details, a crowd of avatars and a customer quote. Every number counts up once as it scrolls into view. - [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. ## 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. ## Testimonials - [Case Study Tabs](https://www.assembli.design/components/case-study-tabs.md): Customer stories behind a row of logo tabs. Each story pairs a photo with a pull quote, the customer's name and role, and two or three headline results. Stories advance on their own with a progress bar under the current logo; hovering the logos, focusing, scrolling away or the pause button holds it, and arrow keys move between tabs. Reduced motion turns autoplay off. - [Testimonial Video](https://www.assembli.design/components/testimonial-video.md): Video testimonials: a large featured clip with a pull-quote beside three more. Picking one from the list trades places with the featured clip as its poster morphs into the big frame. Play opens an in-card player with timed captions, a seekable progress bar and a transcript you can jump around in. - [Testimonial Grid](https://www.assembli.design/components/testimonial-grid.md): Masonry wall of reviews in CSS columns. Featured cards lead with the customer's logo and a big headline result, the rest carry star ratings, the reviewer and a badge for where they posted it. The wall starts clipped behind a soft fade and "Show more" opens it to full height. - [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. ## Calls to action - [Webinar Registration](https://www.assembli.design/components/webinar-registration.md): Webinar or live-event sign-up section. The date and time show in the visitor's own time zone, beside a live countdown that turns into Live now or Replay available, an agenda and speakers. The registration card validates a work email, holds a pending state, then offers Google Calendar, an .ics download and a share link. After the event it gates the replay instead. - [Community Section](https://www.assembli.design/components/community-section.md): Join-the-community section for open-source and developer products. Channel cards for GitHub, Discord, discussions, newsletter and YouTube count their numbers up on view, a contributors wall shows a gliding hover card per face and ends in a +N chip, a list of good first issues links each one, and a weekly community call shows in the visitor's own time zone. - [App Download](https://www.assembli.design/components/app-download.md): "Get the app" section: App Store and Google Play badges, a star rating and a real, scannable QR code (encoded in the file from a url prop) for desktop visitors, beside a phone showing a live app screen whose next task ticks itself off on view. Phones get full-width store buttons instead of the QR. Optional desktop builds highlight the visitor's own OS. - [Newsletter Section](https://www.assembli.design/components/newsletter-section.md): Newsletter signup for a product blog: headline, topic chips, an email field and a reader avatar stack beside the latest three issues. The address is checked inline, the button holds a spinner while onSubscribe runs, and the form folds into a confirmation that repeats the address and says to check the inbox. - [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. ## Logo clouds - [Press & Awards](https://www.assembli.design/components/press-awards.md): "As featured in" section: a row of publication wordmarks that work as tabs. Hover, click or arrow to a publication and its pull-quote eases in with author, date and a link to the article. Quotes advance slowly on their own, with a hairline filling under the active mark, and pause on hover, focus or the pause button. Below, laurel-wreath award badges drawn in SVG. - [Logo Cloud Switch](https://www.assembli.design/components/logo-cloud-switch.md): A row of six logos that hands over to the next set every few seconds, slot by slot, each mark blurring out as the next rises in. A segmented filter narrows the cloud by industry, and a pause button with a countdown ring stops the rotation. Hover or focus also holds it, the row never changes height, and reduced motion gets a static set. - [Logo Grid](https://www.assembli.design/components/logo-grid.md): Hairline logo grid where a soft glow follows the pointer along the lines and the hovered cell lights up in its brand colour, lifting the logo to reveal a one-line customer result and a story link. Tap toggles a cell on touch, focus reveals it from the keyboard, and an optional resting cell keeps one result showing. - [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. ## Stats - [Uptime Monitor](https://www.assembli.design/components/uptime-monitor.md): A status page in one component: an overall banner that takes the worst current status, then a row per service with ninety days of bars colored by each day's worst status and the uptime over the window. Point at a bar, or focus a row and use the arrow keys, to read that day's date, uptime and incidents. Services nest into groups that show the worst of their children and expand to list them. - [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. ## FAQs - [FAQ Search](https://www.assembli.design/components/faq-search.md): Help-centre FAQ: a large search field filters answers live and highlights the matched words, a 2×3 grid of topic cards shows how many answers match in each, and results open as a divided accordion. Every answer ends with a thumbs up or down that confirms inline, and an empty search offers to contact support. - [FAQ Split](https://www.assembli.design/components/faq-split.md): Two-column FAQ: a sticky heading, intro and contact card with an avatar and two actions on the left; topic pills with counts filter an accordion on the right. The open answer lifts into a card, the plus turns to a cross, and every question is deep-linkable with a hash and a copy-link button. - [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. ## Team - [About Values](https://www.assembli.design/components/about-values.md): About-page section. A large mission statement brightens word by word as it scrolls into view, over a collage of three framed, captioned photos (a neutral placeholder frame until you pass your own). Then the company story beside a key-facts list, a numbered values grid with a cursor-lit hover, and a milestones strip that runs across on large screens and down on phones. - [Open Roles](https://www.assembli.design/components/open-roles.md): Careers list grouped by department. Search, department pills with live counts and a Remote / Hybrid / On-site switch filter the roles; each row shows location, workplace, type and salary band, and opens in place to a summary, highlights, an apply button and a copyable deep link. No matches shows an empty state with a reset and an open-application link. - [Team Grid](https://www.assembli.design/components/team-grid.md): Team section with portrait cards filtered by department pills that carry counts. Each photo shows the person's city and live local time; hover, focus or tap warms it to full colour and lifts a short bio with social links over it. Cards glide into place as the filter changes, and a dashed closing tile points at open roles. ## Blog - [Post Index](https://www.assembli.design/components/post-index.md): Editorial archive with one line per post under sticky year labels, plus search and category chips. On a mouse, hovering a row dims the rest while its cover trails the pointer on a spring, tilting with speed and flipping sides near the edge; keyboard focus pins the preview beside the row. Small screens show an inline thumbnail instead. - [Blog Grid](https://www.assembli.design/components/blog-grid.md): Blog index section: a featured post in a wide card above a three-column grid of recent posts, each with a cover, category, date, reading time and stacked author avatars. Category tabs with a sliding underline filter the posts, cards glide into place, and Load more adds the next page with a short stagger. Whole cards are links; the title underline draws in on hover. ## Contact - [Book a Demo](https://www.assembli.design/components/book-demo.md): B2B demo booking section. The pitch, what the call covers, the rep you'll meet and a quote sit beside a two-step card: a short form (work email check, company size, optional notes), then a month calendar with arrow-key navigation and the day's times in the visitor's time zone. Confirming shows the booked time, an Add to calendar .ics download and a reschedule link. - [Support Hub](https://www.assembli.design/components/support-hub.md): Help-centre front door: a large search that answers from your articles as you type, with highlighted matches, arrow-key navigation, Enter to open and popular searches to start from. Below it, contact channel cards show live status, and phone-style channels with opening hours say whether they're open right now in their own time zone and when that changes. - [Contact Split](https://www.assembli.design/components/contact-split.md): Contact section with support channels on the left and a routed form on the right. Topic cards swap in each topic's own fields (text inputs or chip choices), message prompt and response time; validation runs on send with inline errors and focus on the first one, then the card turns into a confirmation that says who will reply and when. ## Footers - [Footer CTA](https://www.assembli.design/components/footer-cta.md): A closing call to action that runs into a compact footer. The band sits on a faint 24-column time-zone grid lit at the current UTC hour, and the page ends on a row of live office clocks showing each city's local time, day or night, whether it's open, and how far it is from the viewer. - [Footer Mega](https://www.assembli.design/components/footer-mega.md): A full product footer: brand column with logo mark, tagline and a newsletter field with inline error and success states, four link columns that fold into accordions on phones, and a bottom bar with a system-status pill, social links, a language select, a light/dark/system switch and the legal row. - [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. ## 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. ## Backgrounds - [Moiré Screens](https://www.assembli.design/components/moire-screens.md): WebGL op-art from two printed transparencies laid one over the other. Concentric rings (or straight rules) beat into broad moiré fans that swim as the top sheet drifts or follows the pointer, every rule box-filtered over the pixel so only the designed interference shows. By day the rules print in graphite, riso or tomato ink; at night they glow on black and cancel where they cross. - [Fogged Glass](https://www.assembli.design/components/fogged-glass.md): WebGL window fogged with condensation over out-of-focus lights: a garden by day, a rainy city at night. Beads speckle the glass, each a tiny lens showing the world flipped and sharp; drops run down in fits and starts and leave clear trails. The pointer wipes the glass like a fingertip, and the fog creeps back over the stroke. - [Ink Bloom](https://www.assembli.design/components/ink-bloom.md): WebGL ink dropped into a clear tank. Each drop sinks as a curling vortex ring with a stem back to where it fell, then slows and tears into wisps in the water's slow turbulence. By day the inks absorb the light behind them; at night milk and pigments glow against black. Drops arrive on their own; a click adds one and the pointer stirs the water. - [Chladni Plate](https://www.assembli.design/components/chladni-plate.md): WebGL sand on a metal plate bowed into one tone after another. Grains bounce loose, scatter and gather on the nodal lines of each new mode, every grain drawn with its own shadow. Graphite on bead-blasted aluminium by day, salt on black anodised metal at night, with brass and cobalt finishes. The pointer brushes the sand aside and a click changes the tone. - [Soap Film](https://www.assembli.design/components/soap-film.md): WebGL soap film draining in its frame. Gravity thins it to black at the top, slow convection and rising plumes churn the soap, and every color is real thin-film interference summed across the visible spectrum, so the bands run gold, magenta, blue and green in their true order. Pastel over a light box by day, vivid against black at night. The pointer blows eddies into the film. - [Aerial Dunes](https://www.assembli.design/components/aerial-dunes.md): WebGL flyover of a sand sea seen from above: sinuous transverse dunes with crisp crests and slip faces, wind ripples on the windward slopes and long shadows marched toward a low sun that the pointer swings across the sky. White gypsum by day, moonlit at night, with Sahara, Namib and dusk sands too. Pauses off-screen and holds a still frame for reduced motion. - [Sea Glint](https://www.assembli.design/components/sea-glint.md): WebGL sea horizon at golden hour, moonlit after dark. Eighteen wave trains roll at deep-water speeds, and each hands its slope to a roughness lobe once a pixel can't resolve it, so the glitter sparkles up close and calms into a streak at the hazy horizon. The sun follows the pointer; stirring freshens the wind. Pauses off-screen; still frame for reduced motion. - [Marbled Paper](https://www.assembli.design/components/marbled-paper.md): WebGL Turkish stone marbling floating in its bath: Voronoi stones of concentric ink drops, combed into waves and slowly swirled, with veins at the seams, pigment granulation and paper fibres. Dragging the pointer pulls a stylus through the ink, which relaxes back over a few seconds. Six ink sets or your own five colors. Pauses off-screen and holds a still frame for reduced motion. - [Window Light](https://www.assembli.design/components/window-light.md): WebGL sunlight falling through a window and a tree onto a plaster wall. Mullion shadows soften with distance, leaves at two depths flutter in a gusting breeze, penumbras run warm and the light rakes across the plaster. Five hours from morning to moonlight; pointer movement stirs the wind. Pauses off-screen and holds a still frame for reduced motion. - [Reeded Glass](https://www.assembli.design/components/reeded-glass.md): WebGL fluted glass panel over drifting colored lights and plant stems. Each reed is a lens that squeezes, flips and splits what stands behind it into color, with groove shadows, a highlight down every reed and adjustable frosting. Set the reed width and angle; one light follows the pointer. Pauses off-screen and holds a still frame for reduced motion. - [Caustic Pool](https://www.assembli.design/components/caustic-pool.md): WebGL view down into a tiled swimming pool. Caustics come from the curvature of the moving water itself, split into color at their edges, so pointer ripples and dropped stones focus rings of light on the mosaic. Sunlit by day, lamplit at night. Pauses off-screen and holds a still frame for reduced motion. - [Silk Drape](https://www.assembli.design/components/silk-drape.md): WebGL satin filling a section: slow folds and creases catch an anisotropic sheen that runs across the weave, and the pointer lifts the cloth from underneath. Pearl in light mode, ink in dark, with six tones or your own colors. Pauses off-screen and holds a still frame for reduced motion. - [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. ## Text effects - [Saturn Type](https://www.assembli.design/components/saturn-type.md): Headline set as a planet with a ring of type around it. The ring letters orbit in real 3D, crossing in front of the word and behind it, and the far side reads mirrored like a printed band. Inside, a ring of dust counter-rotates. Drag sideways to fling the ring, which coasts back to cruising speed, or drag up or down to tilt the view. Sized in container units. - [Pendulum Letters](https://www.assembli.design/components/pendulum-letters.md): Headline whose letters hang from threads on a rail, each a damped pendulum with its own length. Swipe through them and they swing out and twist on the thread, taps flick them, and a breeze ripples through when nobody is touching. The physics runs in one loop that sleeps when everything is still. - [Echo Stack Text](https://www.assembli.design/components/echo-stack-text.md): Headline extruded into a stack of outlined echoes that fade from one colour to another. Your cursor acts as a light and the stack falls away from it, with the farther echoes on looser springs, so quick moves bend it into a tail. Click to punch the extrusion out, and when the pointer leaves the light circles on its own. It's em-based, so it scales with the font. - [Liquid Fill Text](https://www.assembli.design/components/liquid-fill-text.md): Letters drawn as glass vessels with liquid inside. It pours up to its level the first time it scrolls into view and runs in or out when the level changes. The surface rolls in two layers with a bright meniscus, sideways cursor shakes slosh it on a loose spring, a click stirs it, and bubbles rise and pop at the waterline. Single-line SVG that inherits your font and scales to its container. - [Slice Words](https://www.assembli.design/components/slice-words.md): Rotating headline word cut diagonally in two. On each change a glowing blade runs along the cut, the old word's halves slide off in opposite directions with motion blur, and the next word's halves slide in from the other sides and lock together with a hairline offset. Sits inline in any heading, keeps its slot as wide as the longest word, and pauses on hover. - [Shatter Text](https://www.assembli.design/components/shatter-text.md): Headline that breaks like glass where you tap. A shockwave cracks each letter into wedges, which tumble away in 3D under drag and gravity. They hang for a moment, then the flight plays back in reverse and the word rebuilds itself. It breaks on its own every few seconds until someone interacts, and Enter or Space breaks it too. Under reduced motion it rests cracked but whole. - [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. ## 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. ## Timelines - [Public Roadmap](https://www.assembli.design/components/public-roadmap.md): Now / Next / Later product roadmap with upvotes. Area chips with counts and a search filter the board with layout transitions; cards expand in place to show details and status history. Votes are optimistic, roll their count, persist per item in localStorage and call onVote. Has a Recently shipped strip linked to the changelog, plus an inline Suggest a feature form. Columns become tabs on phones. - [Activity Feed](https://www.assembli.design/components/activity-feed.md): An issue's activity timeline: comments as cards on a rail, every other change as a compact line with its own icon (status pills, assignees, labels, priority, due dates, commits, files), grouped by day. Long runs fold into "Show n more", reactions toggle, times read relative with the full date on hover, an All / Comments / History filter, and a composer that posts on ⌘↩. - [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. ## 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. ## Buttons - [Social Sign-in Buttons](https://www.assembli.design/components/social-sign-in-buttons.md): Continue-with buttons for Google, GitHub, Apple, Microsoft and X with their real marks: outline buttons that follow your theme or brand buttons in each provider's own light and dark colours. Loading turns the logo into a spinner in place; icon-only and full-width layouts, plus an 'or' divider. - [Button Group](https://www.assembli.design/components/button-group.md): Attached buttons that read as one control: a shared frame, hairline dividers and outside-only corners, with styled pressed and current states. Outline, solid and soft variants, three sizes, horizontal or vertical, plus a text slot for counts. Covers toolbars, pagers, split actions and view switches. - [Arrow Button](https://www.assembli.design/components/arrow-button.md): The classic marketing-site hover arrow done properly: a chevron at rest, then on hover the stem draws in behind it and the tip slides forward. Five variants (including link), three sizes, four directions, and renders an anchor when given href. CSS only. - [Flip Button](https://www.assembli.design/components/flip-button.md): A solid block that rolls forward on hover: the face tips away like the top of a box while a gradient face climbs up from underneath with a springy overshoot and the contact shadow squashes. Two faces, sized to the wider label. CSS only. - [Spotlight Border Button](https://www.assembli.design/components/spotlight-border-button.md): A quiet button whose hairline border catches a light that follows the pointer, with a faint wash on the face beneath. Wrap a toolbar in SpotlightBorderGroup and one pointer lights every button, so neighbours glow along their nearest edges. Neutral or any colour. - [Warp Button](https://www.assembli.design/components/warp-button.md): A pill of deep space: tinted stars drift outward over a two-colour nebula at rest, and on hover they stretch into streaks and rush past as the core brightens and the label picks up a chromatic edge, a jump to hyperspace. CSS only. - [Gooey Button](https://www.assembli.design/components/gooey-button.md): A button made of liquid under an SVG goo filter: droplets ooze from its underside at rest, a droplet stretches out toward your pointer when it nears an edge and lets go when you pull away, and a click splashes drops out that the body swallows back. - [Wave Fill Button](https://www.assembli.design/components/wave-fill-button.md): Outline pill that floods with liquid on hover: two gradient wave layers roll at different speeds, the front one rises with a slight overshoot, bubbles drift up through it and the label turns white as the tide passes. CSS only. - [Download Button](https://www.assembli.design/components/download-button.md): A download button whose icon acts it out: the arrow dips, its head flattens into a tray as the stem sinks in, a ring fills with real progress around the chip, then the tray folds up into a check. Path morphs on springs. - [Border Trace Button](https://www.assembli.design/components/border-trace-button.md): The outline is the loader: while the action runs, a glowing gradient comet laps the pill's border, then a green stroke draws the ring closed on success (red, with a shake, on failure). The perimeter is measured, so any width works. - [Progress Button](https://www.assembli.design/components/progress-button.md): Determinate progress inside the button: a gradient fill sweeps across while the label flips from dark to white exactly at the fill edge and the percentage counts in tabular digits, then it settles green with a drawn check (or red on failure). - [Loading Button](https://www.assembli.design/components/loading-button.md): A standard button with a calm loading state: a ring, dots or bars spinner slides in from a collapsed column and the label blur-swaps to optional loading text without the width jumping. Five variants, three sizes, aria-busy, CSS only. - [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. ## Inputs - [Amount Field](https://www.assembli.design/components/amount-field.md): A money input that formats as you type without moving the caret. Grouping, decimal mark and symbol side follow the locale; decimals stop where the currency does (none for yen). Type 2k or 1.5m, paste "$1,234.56" or "1.234,56 €", nudge with arrow keys, switch currency or pick a preset or Max. Reports minor units for payment APIs and flags amounts out of range. - [Scrub Field](https://www.assembli.design/components/scrub-field.md): The number field from Figma and Framer. Drag its label to scrub (Shift for steps of ten, Alt for tenths), or type arithmetic like "168*1.5" with or without the unit. Arrow keys step, Enter commits, Escape restores, double-clicking the label resets, and a bad entry shakes. Bounded fields can show a fill and angles wrap. Reads as a spinbutton; the demo is an inspector driving a live canvas. - [Scoped Search](https://www.assembli.design/components/scoped-search.md): The big search bar for help centres, docs and marketplaces: a scope picker on Base UI's Select, the field and a search button in one pill, with popular queries underneath that fill in and search in one tap. Each scope brings its own placeholder, the scope label folds to its icon on phones, Escape clears, and it submits as a role="search" form with the query and scope. - [Expanding Search](https://www.assembli.design/components/expanding-search.md): A header search that waits as an icon button and springs open into a full pill field on click or / from anywhere, growing from whichever edge its row anchors it to. The field takes focus, Escape clears and then folds it away, and it collapses when focus leaves while empty. Collapsed it's one labelled button, open a search form whose icon submits. Controlled or not, so a header can make room. - [Filter Search](https://www.assembli.design/components/filter-search.md): A search bar that understands filters, like GitHub's and Linear's. Type status: (or just start a value, like "urg") and it suggests keys and values; picking one turns it into a chip that reads "Status is Open" while free text stays free text. Arrows, Enter and Tab drive the list, Backspace at the start selects and then removes the last chip, and it's a proper ARIA combobox. - [Autocomplete Search](https://www.assembli.design/components/autocomplete-search.md): A search box with grouped suggestions on Base UI's Autocomplete, so arrows, Enter, Escape and screen readers just work. Empty, it shows recent searches you can remove one by one or clear; typing filters every group by label, description and keywords (accent- and case-insensitive, every word must match) and bolds the matching letters. Icon tiles, an empty state, a key-hint footer and a / shortcut. - [Email Field](https://www.assembli.design/components/email-field.md): An email field that catches mistakes before they cost you a sign-up: while you type the domain it completes common ones in ghost text (Tab or → accepts), and on blur it spots likely typos like gmial.com or outlook.con with a one-tap "Did you mean…?". Format errors wait until blur, a quiet tick confirms a good address, and you can pass your own domain list. - [Autosize Textarea](https://www.assembli.design/components/autosize-textarea.md): A textarea that grows with what you write, from a minimum to a maximum number of rows, then scrolls. Its footer holds your tools, a ring that fills toward a soft character limit (the count appears near the end and goes negative past it), and an optional send button that also answers ⌘/Ctrl+Enter and shows a spinner while an async submit runs. - [Username Field](https://www.assembli.design/components/username-field.md): A handle field that checks availability as you type: input is cleaned per keystroke, the lookup waits for a pause and aborts stale requests, and the verdict shows in the border, a trailing badge and a status line read to screen readers. Taken names offer one-tap suggestions; works with any async check. - [Copy Field](https://www.assembli.design/components/copy-field.md): A read-only field for API keys, links and shell commands with a copy button that confirms itself: the icon turns to a tick and the word rolls to "Copied", announced to screen readers. Clicking the value selects all of it, secrets stay masked with their prefix and last four visible until revealed, and the copy always takes the real value. - [Inline Edit Field](https://www.assembli.design/components/inline-edit-field.md): Text that edits in place, like titles and descriptions in Linear or Notion. It reads as plain text until hovered, opens on click with the text selected, saves on Enter or blur and cancels on Escape. Both modes share one box so nothing jumps. Heading, title and body sizes, a growing multiline mode, validation, async saves with a spinner, thrown errors that keep it open, and a quiet saved flash. - [Floating Label Field](https://www.assembli.design/components/floating-label-field.md): A text field whose label doubles as its placeholder, then glides up and shrinks on focus or once filled: into a notch cut in the border (outline) or the top of a tinted well that clears on focus (filled). Pure CSS on :placeholder-shown, so autofill and server values float too. Leading icons, trailing buttons, required marks, descriptions and errors. - [Text Field](https://www.assembli.design/components/text-field.md): The everyday text field with the whole anatomy: label, hint, description, leading and trailing icons, attached prefix and suffix segments, a live character count, and an error that swaps in for the description. Three sizes, a border that firms on hover, a soft focus ring, and every message wired up with aria-describedby. - [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. - [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. - [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. - [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. ## Selects - [Assignee Picker](https://www.assembli.design/components/assignee-picker.md): The inline assignee control from issue trackers: a bare avatar for list rows or an avatar-and-name chip for property panels, opening a searchable list of people. You come first, then suggested people and the team, with presence dots and notes like "Away until Mon". Single mode picks and closes; multiple stacks avatars and can cap picks. Press i to assign yourself. - [Time Zone Select](https://www.assembli.design/components/timezone-select.md): A time zone picker with cities instead of IANA ids. Each row shows its live local time, current GMT offset, a day or night glyph and the weekday when it's already tomorrow there. Your own zone is pinned on top (or preselected with "auto"), and search takes cities, countries, abbreviations like PST or IST, and offsets like +5:30. Matches every other select. - [Country Select](https://www.assembli.design/components/country-select.md): A searchable country picker: flag, name and dial code on every row, a Suggested group on top and the picked flag in the trigger. Search by name, ISO code or dial code. Also exports PhonePrefixSelect, a compact flag and dial-code trigger for phone numbers, and PhoneInput, which attaches it to a phone field in the same shell as text-field. - [Searchable Select](https://www.assembli.design/components/searchable-select.md): A select with a search field inside its popup, on Base UI's Combobox. Results stay grouped and bold the matching text, rows take an avatar or icon plus secondary text, and there's an empty state, a Create row for new entries and async loading with a spinner row. Arrow keys move through results from the search field, Enter picks and Escape closes. - [Native Select](https://www.assembli.design/components/native-select.md): A styled native select for forms and phones: the platform's own picker and keyboard handling in the same shell as the other selects. Label, hint, description and error, a custom chevron, a leading icon, a greyed placeholder, optgroups, disabled options and three sizes, with no JavaScript beyond React. - [Multi Select](https://www.assembli.design/components/multi-select.md): Pick several values from one field. Picks show as removable chips that fold into a "+N" chip when they run out of room, with a clear button in the trigger. Checkbox rows stay open while you toggle them, groups and descriptions carry over from Select, and a footer offers Select all and Clear. An optional max disables the rest once it's reached. - [Select](https://www.assembli.design/components/select.md): The everyday select, sized to sit flush beside a text field: label, hint, description and error, a placeholder, a leading icon, labelled groups with separators, a quiet second line per option, disabled options and three sizes. The popup can open over the trigger with the picked option on the value, and typeahead, Home/End and Escape come from Base UI. ## Forms - [Avatar Upload](https://www.assembli.design/components/avatar-upload.md): A profile photo field with a real cropper. Drop an image on the avatar or browse, then frame it in a round mask: drag or arrow keys to move, slider, wheel or +/− to zoom, quarter-turn rotate, a thirds grid while dragging. Saves a square JPEG from a canvas, checks type and size up front, Adjust reframes the original rather than the crop, and Remove falls back to initials. - [Comment Composer](https://www.assembli.design/components/comment-composer.md): A comment thread with a reply box built from Autosize Textarea. The box grows as you write and stops at eight lines, a ring counts toward a soft limit, attach, mention and emoji tools sit in its footer, ⌘/Ctrl+Enter posts with a spinner while your async save runs, and the new comment slides into a fixed-height thread that scrolls to the newest reply. - [API Keys Panel](https://www.assembli.design/components/api-keys-panel.md): An API keys settings section built from Copy Field. A Live/Test switch swaps the key set, publishable keys and the webhook URL copy in one tap, and the secret stays masked until revealed. Rolling the secret asks for confirmation inline, spins while your async roll runs, then shows the new key with a note that the old one no longer works. - [Claim Handle Form](https://www.assembli.design/components/claim-handle-form.md): A sign-up step for picking a handle, built from Username Field. A live profile card previews the avatar initial and the profile address as you type, availability is checked while you pause with stale lookups cancelled, taken names offer one-tap suggestions, and Continue only unlocks once the handle is confirmed free. - [Invite Team Form](https://www.assembli.design/components/invite-team-form.md): A team invite form built from Email Field: one row per teammate with a role, domain completion that favours your company's domains, and "Did you mean…?" fixes for typos like gmial.com. Rows add and remove with focus following, blank rows are ignored, duplicates and bad addresses are flagged on send, and a summary confirms who was invited. - [Shipping Details Form](https://www.assembli.design/components/shipping-details-form.md): A checkout shipping step built from Floating Label Field, in outline or filled style: name, email, street address, city and postcode side by side, and an optional phone. Every field carries the right autocomplete token so browsers fill it in one go, errors appear on blur or submit, the first missing field takes focus, and the button stays busy while your async continue runs. - [Create Workspace Form](https://www.assembli.design/components/create-workspace-form.md): A create-workspace form built from Text Field: a name with a live count, a URL slug that follows the name until you edit it, a billing email checked on blur and an optional budget with $ and USD segments. Submit validates everything, focuses the first error, keeps the button busy while your async create runs, then shows a done state. - [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. - [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. - [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. - [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. - [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. - [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. - [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. ## Authentication - [Phone Sign-in](https://www.assembli.design/components/phone-sign-in.md): Sign in with a phone number and a texted code. A searchable country list (names, ISO codes or +44; arrow keys, Enter, Escape) sits on the field, and the number formats as you type in that country's style, drops a trunk zero and accepts pasted international numbers. The code step auto-submits, counts down to a resend and then offers a call instead. - [Sign-in Dialog](https://www.assembli.design/components/sign-in-dialog.md): Sign-in in a modal: a centred mark and title over full-width Google, GitHub and Apple buttons, then an email path that sends a magic link and turns the dialog into a Check your inbox confirmation without closing. It eases to each new height, keyboard opens land on the first provider, a footer offers sign-up, and it starts fresh each time it opens. - [Magic Link Sign-in](https://www.assembli.design/components/magic-link-sign-in.md): Passwordless email sign-in. One email field with domain completion, then the card eases into a confirmation: a letter rises out of an envelope, a button opens the right webmail for the address (Gmail, Outlook, iCloud, Yahoo, Proton), a resend link counts down, and Enter a code instead reveals a six-digit code for links opened on another device. - [Account Chooser](https://www.assembli.design/components/account-chooser.md): A Choose an account screen for apps that remember who signed in on this device. Rows show an avatar, name, email, session status and a Last used tag. Signed-in accounts continue in place with a spinner; signed-out ones slide to a password step that greets you by name. Manage mode swaps chevrons for remove buttons and rows fold away as you clear them. - [SSO Sign-in](https://www.assembli.design/components/sso-sign-in.md): Identifier-first sign-in for teams. Type a work email and the domain is checked with a quiet spinner: companies on SSO get a card naming the organisation and its identity provider and a Continue with Okta button, everyone else gets a password field that eases in. Results are cached per domain, and a workspace-URL route sits in the footer. - [Sign-up Card](https://www.assembli.design/components/signup-card.md): A complete sign-up: social buttons, first and last name, a work email that completes domains and catches typos, and a password whose four requirements tick off as you type. Terms are required, updates optional. Submit validates and focuses the first problem, then the card eases to a six-digit email code with a resend countdown and a way back, and ends on a welcome state. - [Two-factor Challenge](https://www.assembli.design/components/two-factor-challenge.md): The second step after a password, with four methods. An authenticator code submits itself on the last digit, a text is sent on request with a resend countdown, a security key waits for a touch and lets you retry, and a backup code formats as XXXX-XXXX. Try another way lists the other methods, the card eases between them, and a trust-this-device checkbox rides along. - [Sign In / Sign Up Card](https://www.assembli.design/components/auth-card.md): One card for signing in and creating an account. A sliding tab switches sides, the card eases to its new height and what you typed comes with you. Social buttons sit above the email form; sign-in has a reveal toggle, Forgot password? and Keep me signed in, sign-up adds a name and a live strength meter. Submit validates, focuses the first problem and ends on a welcome state. - [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. - [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. - [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. - [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. ## Sliders - [Slider](https://www.assembli.design/components/slider.md): The everyday slider: a soft track, a white knob with a real shadow and a halo on hover, and a value bubble that rises over the thumb you're dragging. One thumb or a range, a formatted readout in the label row, ticks that light up inside the fill, mark labels you can click to jump to, and icons at either end. Built on Base UI, with arrows, Page Up/Down, Home/End, form submission and aria-valuetext. - [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. - [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. - [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. - [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. ## Pickers - [Emoji Picker](https://www.assembli.design/components/emoji-picker.md): An emoji picker that feels native: about 540 emoji inline, search by name, keyword or :shortcode:, a category bar that follows your scroll, sticky headers, recents remembered across visits, six skin tones (🧑‍💻 → 🧑🏽‍💻) and a preview footer. Arrow keys move row by row across sections, Enter picks. Inline, or as EmojiPickerPopover on any button. - [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. - [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. - [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. - [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. - [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. ## 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. ## Dialogs - [Sheet](https://www.assembli.design/components/sheet.md): The side sheet for details, inspectors, filters and edit forms, on Base UI's Drawer. It slides from any edge, floating or flush, and swipes away on touch. Header and footer stay pinned, with dividers only once content scrolls under them. Nested sheets stack, the one behind stepping back and dimming. confirmClose turns every dismissal into a "Discard unsaved changes?" bar. - [Shortcuts Dialog](https://www.assembli.design/components/shortcuts-dialog.md): The keyboard shortcuts sheet: press ? anywhere to open it, then filter by action or by keys ("⌘K", "g i"). Groups flow into two columns, chords render as keycaps (⌘⇧K on Mac, Ctrl + Shift + K on Windows), sequences read "G then I", and every binding has a spoken label. Mac or Windows keys are detected, with a switch. Also exports KeyCombo. - [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. ## Menus - [Bulk Action Bar](https://www.assembli.design/components/bulk-action-bar.md): The floating bar that rises when rows are selected: a rolling count with Clear and Select all, actions with single-key shortcuts and a More menu. Destructive actions ask in place, async ones spin, and a returned result turns the bar into "3 files archived · Undo" with a draining line that pauses on hover. Escape clears; labels fold to icons when narrow. - [Editor Toolbar](https://www.assembli.design/components/editor-toolbar.md): A rich-text formatting toolbar: undo/redo, a block menu that previews each style, bold/italic/underline/strike/code toggles, link, a highlighter with swatches, lists and alignment, with tooltips naming every shortcut. Groups fold into a More menu as it narrows. Editor-agnostic: pass state, handle onAction with Tiptap, Lexical or your own. Base UI Toolbar with roving arrow keys. - [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. ## 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. ## 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. ## Toggles - [Switch](https://www.assembli.design/components/switch.md): The everyday switch: a thumb that stretches toward where it's going while you press, travels on a soft spring and casts a real shadow. Optional on/off glyphs so state doesn't rest on color alone, a loading state that spins in the thumb while a change saves, labels on either side for settings rows, and three sizes. Built on Base UI. - [Radio Group](https://www.assembli.design/components/radio-group.md): The everyday radio group: a hairline ring that fills with primary and a dot that springs in, labels with descriptions, vertical or horizontal layout, three sizes, disabled options and an error state under a fieldset legend. Also exports RadioList, bordered rows with a right-aligned price and a tinted selected row. Built on Base UI, arrow keys included. - [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. ## 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. ## 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. - [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. - [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. ## Chips - [Overflow Chips](https://www.assembli.design/components/overflow-chips.md): Label chips that never wrap: as many as fit stay visible, measured live as the container resizes, and the rest fold into a +N chip that opens a popover on hover or tap listing them. The first frame is already trimmed. Built for table cells, cards and toolbars. - [Suggestion Chips](https://www.assembli.design/components/suggestion-chips.md): Prompt and search suggestions as tappable chips. On one scrolling line the edge fades only on the side with more to see, round arrow buttons page through on pointer devices and the row snaps to chip edges on touch; or let the chips wrap, with a trailing arrow that nudges up on hover. - [Avatar Chips](https://www.assembli.design/components/avatar-chips.md): People as chips: an avatar seated in the leading curve with a presence dot on its rim, a name and an optional role or handle, and a remove button that also answers Backspace. The list folds everyone past `max` into a chip that previews their faces with a +N, and opening it springs them in one after another. - [Tag Group](https://www.assembli.design/components/tag-group.md): An accessible tag group in the WAI-ARIA grid pattern: one tab stop, arrow keys, Home and End to move, Space or Enter to select one or many, and Backspace or Delete to remove the focused tag and hand focus to its neighbour. Read-only, single and multiple selection, disabled tags, icons, a label, help text and an empty state. - [Interest Chips](https://www.assembli.design/components/interest-chips.md): An onboarding picker for topics, cuisines or skills. Each picked chip fills with its own colour while its plus folds into a tick, a segmented meter counts towards `min`, and at `max` the rest dim and a tap shakes the counter. Toggle buttons with aria-pressed, controlled or uncontrolled. - [Choice Chips](https://www.assembli.design/components/choice-chips.md): A single-choice chip group that works like a radio group: the highlight springs from the old choice to the new one, even across wrapped rows, and arrow keys, Home and End move and select. Solid or soft highlight, icons, counts, disabled choices, two sizes and a one-line scrolling mode. - [Chip](https://www.assembli.design/components/chip.md): The base chip: soft, solid, outline, dot and faded variants in six tones and three sizes, pill or rounded, with a leading icon, an avatar seated in the curve, a trailing count or a close button. Closeable chips take focus and remove on Backspace or Delete. - [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. - [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. ## Avatars - [Avatar](https://www.assembli.design/components/avatar.md): The everyday avatar on Base UI: the photo once loaded, else initials on a tint derived from the name, else a person icon. Six sizes, circle or rounded square, a status dot and count badge seated on the corner arc, and an active ring. AvatarGroup overlaps them left to right and collapses the rest into a +N chip whose tooltip lists the hidden names. - [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. ## 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. ## Tables - [Inbox List](https://www.assembli.design/components/inbox-list.md): A mail-style message list like Gmail's. Avatars turn into checkboxes on hover, shift-click selects a run, and the toolbar swaps to bulk actions. Hovering a row trades its time for archive, read and snooze buttons, and removed rows fold away with an Undo. Keyboard first: j and k move, x selects, e archives, s stars, u toggles read, # deletes. Unread rows are bold, grouped under "Today". - [Permissions Matrix](https://www.assembli.design/components/permissions-matrix.md): The roles and permissions grid from team settings: roles across the top, permissions grouped by resource down the side. Group rows hold a tri-state checkbox per role and collapse. Permissions can require others, so granting delete grants edit and revoking edit takes delete. Cells light their row and column, changes get a dot and a save bar counts them. Filterable, keyboard-driven, Owner locked. - [Description List](https://www.assembli.design/components/description-list.md): The key/value details panel every admin screen needs: a semantic dl with a titled header and action, rows that put each term beside its value and stack in narrow containers, or a term-over-value grid. Values can carry a copy button that confirms with a check, terms a hint tooltip, IDs set in monospace, and empty values show a quiet dash. Shown as payment details. - [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. ## 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. ## Numbers - [Relative Time](https://www.assembli.design/components/relative-time.md): A live relative timestamp: "just now", "42 seconds ago", "in 2 hours", "yesterday", then the date past a cutoff. Every instance shares one clock and re-renders only when its text changes, days follow the calendar, and hover shows the exact moment in local time, UTC and Unix. Long, short or narrow in any locale, with no hydration mismatch. - [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). ## Loaders - [Storage Meter](https://www.assembli.design/components/storage-meter.md): A storage breakdown like cloud drives and OS settings have: one rounded bar split into colored segments, a summary that turns amber then red as space runs out, and a legend with each category's icon and size plus what's left. Point at a segment or row and the rest dim while a bubble shows its share. Sweeps in on load, has a compact sidebar variant, and reads out as a Base UI Meter. - [Progress Bar](https://www.assembli.design/components/progress-bar.md): The everyday progress bar on Base UI: a label with a right-aligned value that counts with the fill, an indeterminate sweep, a buffered layer, segments, three heights and four intents. Also exports StepProgress for "3 of 5 steps", UsageBar, a stacked storage meter with a legend, and ProgressCircle, a small ring for inline use. - [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. ## Toasts - [Toaster](https://www.assembli.design/components/toaster.md): A complete toast system: call toast(), toast.success() or toast.promise() from anywhere and a Toaster renders them as a collapsed deck that fans out on hover. Six positions, swipe or Escape to dismiss, timers that hold on hover and in hidden tabs, morphing icons when a promise settles, and Alt+T to jump to the stack. - [Toast](https://www.assembli.design/components/toast.md): The toast on its own, ready for any toaster: five intents (neutral, success, info, warning, error) in five finishes (card, tinted, accent rail, solid, inverse), with a title, description, filled and quiet actions that take the finish's colours, a close button and an optional draining timer that pauses on hover. - [Promise Toast](https://www.assembli.design/components/promise-toast.md): One toast for one async job: a spinner and progress bar while it runs, then it settles in place. The spinner pops into a drawn check or cross with a ripple, the title cross-fades, the bar folds away and follow-up actions slide in. Errors shake once. Controlled, so it fits any promise, mutation or deploy. - [Message Toast](https://www.assembli.design/components/message-toast.md): A chat notification you can answer in place: avatar with an app badge, sender, channel, time and a two-line preview, one-tap emoji reactions, and a Reply button that opens an inline composer. Enter sends, Escape backs out, and the toast confirms before it leaves. - [Upload Toast](https://www.assembli.design/components/upload-toast.md): The upload tray that sits in a corner while files go up: batch total, time left and an overall bar in the header, and a collapsible list with a file-type icon and progress ring per file. Hover a ring to cancel, retry a failed file, and close the summary when everything has landed. - [Pill Toast](https://www.assembli.design/components/pill-toast.md): A compact, inverted confirmation pill for quick feedback such as "Link copied" or "Moved to Archive". Only one shows at a time: a new message stretches or shrinks the pill to fit while its content cross-fades. Tinted icons for success and errors, an optional Undo, and hover holds the timer. - [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. ## Notifications - [Notification Settings](https://www.assembli.design/components/notification-settings.md): The notification preferences panel: event sections down the side, in-app, email, mobile and Slack across the top, a checkbox per cell. Column headers toggle a channel (mixed when partly on), required cells lock with a reason, unavailable ones show a dash. Email cadence, quiet hours and a Pause all menu sit alongside, and changes autosave with Saving… / Saved. - [Notification Center](https://www.assembli.design/components/notification-center.md): An inbox behind a bell with an unread count: All, Mentions and Unread tabs, rows grouped by day with avatars or app tiles, rich text, unread dots, comment previews and Accept / Decline for invites. Mark all as read, per-row read and archive on hover or focus, an empty state per tab, arrow-key navigation and a fixed-height list that never jumps. - [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. ## 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. ## Empty states - [Not Found Page](https://www.assembli.design/components/not-found-page.md): A full-page 404 for a product site. Large digits drift with the pointer above a trace that drops out, and a kind line echoes the missing path. Below: "Did you mean" links ranked by edit distance with the corrected characters marked, search (callback or ?q= link), Go home and a hydration-safe Go back, popular destinations and a broken-link report. - [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. ## 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. ## 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. ## 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. ## Calendars - [Time Range Picker](https://www.assembli.design/components/time-range-picker.md): The time range control from Grafana and Datadog dashboards. The trigger names the window ("Last 24 hours") with a live dot, and arrows step it back or forward by its own width, snapping back to live. The popover takes shorthand like "15m", "last 90 minutes" or "yesterday" with a preview of the exact window, plus quick ranges, exact from and to fields with the span worked out, and recent ranges. - [Event Calendar](https://www.assembli.design/components/event-calendar.md): A month view calendar like Google Calendar's. Multi-day events run as bars across the days they cover, timed events sit as rows with a dot and start time, and full days show "+N more". Click an event for its time, place and your own actions, or open a day's agenda. Arrows move by day and week, Page Up and Down by month, and Enter opens the focused day. Months slide in the way you travel. - [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. ## Popovers - [Product Tour](https://www.assembli.design/components/product-tour.md): A guided onboarding walkthrough: the page dims around a spotlight that glides from target to target, and a step card anchors beside each with an arrow, flipping sides when there's no room and following its target through scroll and resize. Progress dots, Back/Next/Done, Skip, arrow keys and Escape; a modal dialog that traps Tab, announces steps and returns focus. - [Popover](https://www.assembli.design/components/popover.md): An anchored panel on Base UI with a bordered arrow, title, description, corner close button and an optional footer strip, in three widths. It flips and shifts to stay on screen, moves focus in on open and back to the trigger on close. Shown as a Dimensions editor with a locked aspect ratio and presets, and a Share link panel with an access select and a copy field. - [Tooltip](https://www.assembli.design/components/tooltip.md): The everyday tooltip on Base UI: an inverted high-contrast label or a bordered card, a tip on any of four sides that flips and shifts at the screen edge, keyboard shortcut chips, an optional muted description for two-line hints, and a provider that groups delays so moving along a toolbar opens each tooltip instantly. - [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. ## Pagination - [Breadcrumb](https://www.assembli.design/components/breadcrumb.md): The everyday breadcrumb: icons, chevron or slash separators, aria-current on the current page and router-friendly links. It measures itself and folds middle crumbs into a "…" menu, listed as an indented path, until the trail fits, then truncates the last label if it has to. Crumbs with siblings get a switcher beside them, so the trail doubles as a team, project or branch picker. - [Pagination](https://www.assembli.design/components/pagination.md): Classic numbered pagination with siblings, boundaries and ellipses that never shift the controls, Previous and Next that drop to icons in narrow containers, aria-current, and links or buttons. Also exports TablePagination, a table footer with rows per page, "21–40 of 312" and first, previous, next and last, plus SimplePagination for "Page 3 of 16". - [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. ## Media - [Image Cropper](https://www.assembli.design/components/image-cropper.md): A photo cropper for avatars and covers: drag to reposition, scroll or pinch to zoom toward the pointer, straighten on a ruler dial, rotate and flip. The image always covers the crop at any angle, thirds appear while you adjust, and the outside dims (round for avatars). Keyboard pan, zoom and rotate, natural-pixel coordinates, plus drawCrop and cropToBlob to export. - [Video Player](https://www.assembli.design/components/video-player.md): Custom controls over a native video: poster with a big play button, auto-hiding control bar, chaptered scrubber with buffered range and hover-time tooltip, skip, volume, speed menu, captions from inline WebVTT, picture-in-picture, fullscreen and YouTube-style keyboard shortcuts. - [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. ## Code - [JSON Viewer](https://www.assembli.design/components/json-viewer.md): A collapsible JSON inspector for API responses and logs: colored values with color swatches, links and dates, devtools-style previews of collapsed branches, indent guides, a filter that opens exactly the matching branches, and a path bar that copies the selected node's accessor ($.users[0].email). A WAI-ARIA tree: arrows, Enter to toggle, C to copy a value. - [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.