llms.txt
+60 −90
https://www.assembli.design/llms.txt
− - [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.− ## UI components: 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.− ## UI components: 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.− ## UI components: Cards− - [Listing Card](https://www.assembli.design/components/listing-card.md): Stay or property listing card: swipeable scroll-snap photo carousel with arrows and dots, save-to-wishlist heart, guest favourite badge, rating, dates and nightly plus total price.− - [Integration Card](https://www.assembli.design/components/integration-card.md): App integration card for settings pages: connect switch with a pending state, inline confirm before disconnecting, sync status, and a permissions disclosure.− - [Event Card](https://www.assembli.design/components/event-card.md): Event card with a calendar date tile, time zone aware times, location with directions, a capacity bar, Going/Maybe/Can't RSVP that updates the count, and a real Add to calendar (.ics) download.− - [Metric Card](https://www.assembli.design/components/metric-card.md): Dashboard KPI card: big value with a delta badge, a 7D/30D/90D range switch and an area sparkline you can scrub with pointer or arrow keys to read any day.− - [Article Card](https://www.assembli.design/components/article-card.md): Blog post card: inset cover with category chip, whole-card link, clamped excerpt, author byline with date and read time, copy-link share and a bookmark toggle.− - [Profile Card](https://www.assembli.design/components/profile-card.md): Person card with a cover band, presence dot and verified mark, follow button that updates the follower count in place, message action, stat row and mutual followers.− - [Card Fan](https://www.assembli.design/components/card-fan.md): A hand of cards fanned in an arc. Hover lifts and straightens one card while neighbours part, click flips it forward.− - [Comment Thread](https://www.assembli.design/components/comment-thread.md): Threaded comments with inline replies, live-reacting emoji chips, relative timestamps and an expandable composer.− - [Diorama Card](https://www.assembli.design/components/diorama-card.md): Shadow-box card: paper cut-outs stand at different depths inside a box with real inner walls behind a mat-board window. Tilting toward the cursor reveals the walls, slides the layers past each other with drop shadows, and moves a soft glare across the frame. Bring any backdrop and layers.− - [Disintegrate Card](https://www.assembli.design/components/disintegrate-card.md): Wrap any card and flip a prop to make it crumble into a grid of shards and dust that drift away on the wind, sweeping left to right. Siblings slide up when it is gone. Falls back to a fade for reduced motion.− - [Glass Folder Cards](https://www.assembli.design/components/glass-folder-cards.md): A folder drawn as an object: generated liquid-marble artwork on the back panel, real file cards inside, and a frosted-glass front that leans on hover, falls open on click to fan the files, and takes new files with a drop-and-bump. Keyboard menu, light and smoked-glass tones, zero dependencies.− - [Holo Card](https://www.assembli.design/components/holo-card.md): Collectible foil card: tilts toward the pointer on springs while a rainbow foil layer and a specular glare slide across the surface in sync. Light-source realism without WebGL.− - [Kanban Board](https://www.assembli.design/components/kanban-board.md): Drag cards between columns with pointer or keyboard. Columns highlight as drop targets, cards reflow with layout animation, and counts update live.− - [Lanyard Card](https://www.assembli.design/components/lanyard-card.md): A conference badge hanging from a real rope simulation. Verlet physics swings it in, you can grab and fling it, and a holographic sheen slides across the card as it tilts. Arrow keys give it a nudge; reduced motion shows it still.− - [Peel Card](https://www.assembli.design/components/peel-card.md): A card with a curling paper corner: hover teases the fold, click peels it back on a spring to reveal what is underneath. The flap is real geometry with a back face, fold gradient and drop shadow that follows the cut.− - [Scratch Card](https://www.assembli.design/components/scratch-card.md): A canvas scratch-off: holographic foil with a coin cursor that you rub away with mouse or finger. Tracks how much is cleared, auto-reveals past a threshold with a sparkle burst, and gives keyboard users a Reveal button.− - [Sticky Note Board](https://www.assembli.design/components/sticky-note-board.md): A tactile whiteboard of sticky notes: drag from anywhere except the text, notes lift and straighten under your hand, the last one touched stays on top, edit in place, add in five colours, and drop a note on the bin to crumple it away.− - [Weather Card](https://www.assembli.design/components/weather-card.md): Glanceable weather card with an animated scene per condition: a spinning sun, drifting clouds or falling rain, a sky gradient that crossfades between them, big temperature and an hourly strip.+ - [Citewell — GEO Landing Page](https://www.assembli.design/components/citewell-landing.md): A blueprint-blue landing page for a generative engine optimisation (GEO) company: an isometric line-art city where ChatGPT, Claude, Gemini, Perplexity and Grok beam each tracked prompt to the sources they cite, with citation flags rising from every quoted building.+ - [Strand — Infinite Wall Poster Designer Portfolio](https://www.assembli.design/components/strand-folio.md): A poster and identity designer's portfolio as an endless wall you drag, scroll, pinch and arrow-key through. Each tile is an SVG scene of an original piece taped, clipped, leant, boxed or bound under window light; the lights flicker on as you shuffle. A floating profile card, an index view, discipline filters and case pages that grow out of their tile.+ - [Halfwheel — Indoor Cycling Studio Landing Page](https://www.assembli.design/components/halfwheel-landing.md): A dark landing page for an indoor cycling studio lit by the five heart-rate zones: taped italic keywords, a live ride profile that rides, scrubs and reshapes for each class, and a booking card for studio, class and time.+ ### Gyre+ > Spinning tops in spun brass and chrome with turned walnut, on a pale table in late window light that falls through a blind in long bars. The spin is real: each top sleeps, precesses, wobbles wider, topples and rolls round faster and faster like Euler's disk before it stops, and is spun again. Motion blur follows a shutter speed, so spokes veil as they spin and sharpen as they slow. Drag across one to spin it.+ - [Gyre Pack](https://www.assembli.design/components/gyre-pack.md): The whole Gyre asset pack in one install: eight spinning tops in spun brass, chrome and turned walnut, raymarched in WebGL in late window light, with real spin physics and shutter-speed motion blur. A disc top, a spoked wheel, the two together, Euler's disk, a tippe top, a gyroscope, a humming top and a trompo, plus a light-table stage with a tachometer, shutter dial, swatches and a tray picker.+ - [Trompo](https://www.assembli.design/components/gyre-trompo.md): Gyre pack: a trompo, a pear of turned walnut on a steel point, inlaid with two bands of metal and capped with a spun brass crown. Its grain smears into rings as it spins; it sleeps and wanders, wobbles wider, falls on its side and rolls round its point to a stop, then is spun again. Drag across it to spin it up, tap to knock it. Raymarched in WebGL.+ - [Humming Top](https://www.assembli.design/components/gyre-hum.md): Gyre pack: a humming top, a round shell of spun brass on a point with a slotted band of chrome round its shoulder and a twisted pump rod topped with a walnut knob. Each push of the knob screws the rod down and spins the shell faster, its slots blurring into a dark band; when it slows it gets three quick pumps. Tap to pump it, drag across to spin it. Raymarched in WebGL.+ - [Gyroscope](https://www.assembli.design/components/gyre-gyroscope.md): Gyre pack: a gyroscope, a spun brass flywheel with four windows in a cage of three chrome rings, its foot set in a cup on a turned walnut tower and its axle held out sideways in mid air. It precesses round the tower, faster as the spin bleeds away, the axle drooping and nodding until it's spun up and lifts level again. Tap to spin it up. Raymarched in WebGL.+ - [Tippe Top](https://www.assembli.design/components/gyre-tippe.md): Gyre pack: a tippe top, a ball of spun brass cut flat with a walnut stem and a ring of engraved dots. Spun on its ball, it climbs over in a widening wobble and stands on its stem upside down, still spinning the same way as its own spin reverses, then slows and lies down on its side. Tap to spin it again, drag across it to speed it up. Raymarched in WebGL.+ - [Euler's Disk](https://www.assembli.design/components/gyre-euler.md): Gyre pack: Euler's disk, a heavy disk of spun brass rolling on its edge on a mirror set into a walnut ring. As it settles lower its wobble races faster and faster, the lean closing as a power of the time left, while the disk itself barely turns, then it slaps down flat with a shudder and is spun up again. Tap or drag across it to spin it now. Raymarched in WebGL.+ - [Duet](https://www.assembli.design/components/gyre-duet.md): Gyre pack: the brass disc top and the chrome wheel top spinning side by side in window light. They wander, drift together and clack rims, each knocked into a wobble, then slow, topple and roll to a stop on their own clocks, the wheel's spokes sharpening as it slows. Drag across to spin them up, tap to knock them. Raymarched in WebGL, with motion blur set by a shutter speed.+ - [Wheel](https://www.assembli.design/components/gyre-wheel.md): Gyre pack: a chrome wheel top with a rolled lip, five spokes and a wooden ball in its hub. Spinning hard, its spokes blur into a veil you can see the table through, exactly as far as it turned while the shutter was open, and sharpen as it slows, wobbles, topples and rolls to a stop. Drag across it to spin it up, tap to knock it. Raymarched in WebGL.+ - [Disc](https://www.assembli.design/components/gyre-disc.md): Gyre pack: a wide disc top in spun brass with a turned walnut handle, sleeping on its point in window light. Its spin really decays: it precesses, wobbles wider, topples onto its rim and rolls round like Euler's disk, faster and faster, then stops dead and is spun again. Drag across it to spin it up, tap to knock it. Raymarched in WebGL, with motion blur set by a shutter speed.+ ### Vane+ > Kinetic sculptures cut from thick acrylic, glossy black and clear tint: a whorl that turns over to color wherever you sweep it, a camera iris, a swatch fan, sequin louvres, a spiral stair, a Möbius band, toppling dominoes, a chime and a 3D arrow cursor. Every blade is traced exactly, so light really bends through the tint. Six palettes.+ - [Vane Pack](https://www.assembli.design/components/vane-pack.md): The whole Vane asset pack in one install: nine kinetic sculptures in thick glossy black and clear tinted acrylic, traced exactly in WebGL so light bends through every slab. A bloom, an iris, a fan deck, louvres, a helix, a Möbius band, dominoes, a chime and a 3D cursor, with a studio-sweep stage, swatch-deck palettes and a tray picker.+ - [Cursor](https://www.assembli.design/components/vane-cursor.md): Vane pack: the arrow pointer in 3D, cut from thick glossy black acrylic with a polished chrome bevel. It points its tip at your mouse wherever it is on the page and leans toward it; each click dips it and throws a ring of small tinted acrylic petals out from its tip. Idle, it bobs, turns to show its bevel and clicks now and then. Drag to turn it. Traced exactly in WebGL.+ - [Chime](https://www.assembli.design/components/vane-chime.md): Vane pack: eight slats of acrylic in different lengths hanging on cords from a chrome bar, every other one glossy black. They sway in a slow breeze, clack into each other and trade their swing like a Newton's cradle, and turn on their cords to show their other face. Run your pointer along them to strum, tap one to knock it. Traced exactly in WebGL.+ - [Domino](https://www.assembli.design/components/vane-domino.md): Vane pack: twenty acrylic dominoes, tinted and black, standing in an arc on the page. Knocked, each tips over its front edge onto the next and the chain runs to the end, every slab casting a soft shadow tinted by its color; then they stand back up as if the film ran backwards and go again. Tap one to knock it, or tap a fallen chain to stand it up. Traced exactly in WebGL.+ - [Möbius](https://www.assembli.design/components/vane-mobius.md): Vane pack: a Möbius band of thirty-six slats of glossy black acrylic, with half a turn of twist that rolls round as the ring turns. A comet of color runs round it on its own, turning each slat over to clear tinted acrylic as it passes and back to black behind it. Tap for a wave both ways from where you hit, drag to spin the ring. Traced exactly in WebGL.+ - [Helix](https://www.assembli.design/components/vane-helix.md): Vane pack: a spiral stair of thirty acrylic blades, tinted and black, threaded on a chrome spindle and held at a twist from each other by springs, so it winds and unwinds as it turns. Stroke it sideways and the blades at that height turn with your hand; tap to send a wave up the stack that flips each blade over as it passes, drag to wind the top. Traced exactly in WebGL.+ - [Louvre](https://www.assembli.design/components/vane-louvre.md): Vane pack: eleven tall slats of acrylic on chrome axles, glossy black on one face and clear tint on the other. They work like sequins: brush right across them with your pointer and each one turns over to its color, brush back and it turns home; when nobody is pointing a ghost hand brushes it. Tap for a ripple out from the slat you hit. Traced exactly in WebGL.+ - [Fan Deck](https://www.assembli.design/components/vane-fan.md): Vane pack: a swatch fan of ten clear tinted acrylic blades between two glossy black covers on a chrome rivet. It fans open, out to a full circle and shut again, each blade dragged a beat behind the one above it, and the blade under your pointer slides out of the deck like a swatch being picked. Tap to fan on, drag to spread it. Traced exactly in WebGL.+ - [Iris](https://www.assembli.design/components/vane-iris.md): Vane pack: a camera iris of nine curved acrylic blades, tinted and black, pinned inside a chrome ring and swinging in to close over a white light that turns every blade into colored glass. It breathes on its own; point at the middle and it opens wide, tap to snap it shut like a shutter with a flash, drag to turn it. Traced exactly in WebGL, with real refraction.+ - [Bloom](https://www.assembli.design/components/vane-bloom.md): Vane pack: thirty paddles of glossy black acrylic in a whorl round a white-hot core. Every blade your pointer crosses turns over to clear tinted acrylic, holds while you linger and turns back to black; when nobody is pointing, a ghost hand sweeps it. Tap for a wave right round, drag to spin it. Traced exactly in WebGL, with real refraction.+ ### Contour+ > 354 everyday icons with soft squircle corners, drawn once and rendered three ways: a 1.5px line, a tinted duo and a solid with its details cut out. The whole Feather catalogue under the same names, plus the app icons it lacks: undo, sort, wallet, receipt, kanban, sidebar panels. Same props as Plume, plus variant and tone.+ - [Contour Icons](https://www.assembli.design/components/contour-icons.md): 354 everyday interface icons with soft squircle corners, drawn once and rendered three ways: a 1.5px line, a tinted duo and a solid with its details cut out as negative space. Covers the whole Feather catalogue under the same names plus the app icons it lacks (undo, sort, wallet, kanban, panels). Typed React components with a part that moves the way it means.+ - [Signup Hero](https://www.assembli.design/components/signup-hero.md): Split SaaS hero with an inline email signup: announcement pill, headline and copy over a form that validates on submit (the field shakes and explains), shows a spinner while your handler runs, then morphs into a check-your-inbox card. Avatars and a rating add proof. Beside it, a product window shows a doc edited live: a teammate's cursor types, a task ticks off, a sync toast slides in.+ - [Review Summary](https://www.assembli.design/components/review-summary.md): Customer reviews section: the average, partial stars and a five-row breakdown where every row is a filter, beside the reviews. Mentioned-in-reviews chips filter by topic and highlight it in the text, a select sorts, long reviews expand in place, Helpful counts the visitor's vote, and team replies sit under the review they answer. Active filters show as removable tokens.+ - [Logo Marquee](https://www.assembli.design/components/logo-marquee.md): "Trusted by" logo strip that scrolls forever in one or two rows running opposite ways. Each row is measured and repeated just enough to cover the frame, so the loop never gaps at any width. Hovering eases the strip to a crawl and lifts the logo under the pointer while the rest dim; a pause button stops it, and reduced motion lays the logos out still.+ - [Stats Section](https://www.assembli.design/components/stats-section.md): "By the numbers" marketing section: heading and intro over a hairline grid of large figures that count up in a staggered wave when the row scrolls into view. Each figure can carry a prefix or unit, a short description, a before/after bar that fills beside a muted baseline, and a footnote that links to its source under the grid. Server and reduced-motion views show final values.+ - [FAQ Tabs](https://www.assembli.design/components/faq-tabs.md): The classic centred FAQ section: category tabs with counts over a hairline accordion, one answer open at a time or several. Search looks across every topic, groups hits under their category, highlights the matched words and opens answers where the match is. Questions deep-link by hash, find-in-page opens closed answers, and a "Still have questions?" card with team avatars closes it.+ - [Careers Benefits](https://www.assembli.design/components/careers-benefits.md): Benefits section for a careers page: up to three headline figures above the full list, grouped by category with each label pinned beside its perks. A location switch handles benefits that differ by country: values and descriptions cross-fade in place, perks not offered there fold away and group counts update. Ends with small print and a link to open roles with a count.+ - [Blog Magazine](https://www.assembli.design/components/blog-magazine.md): A blog front page set like a newspaper: masthead with dateline and section nav, a lead story with a big serif headline and standfirst, secondary headlines and a numbered Most read rail divided by hairline rules. A newsletter strip confirms in place, then section rows of four stories turn into swipeable rows on phones. Whole stories are links; headlines underline on hover.+ - [Article Layout](https://www.assembli.design/components/article-layout.md): A blog post page: breadcrumb, title, standfirst, authors and reading time over a wide cover. The table of contents is built from the post's own headings, pins beside the text, tracks the section you're reading and folds into a menu on phones. A progress bar, a share rail, heading anchors, author bios and related posts frame it, with figure, callout and pull-quote parts for the body.+ - [Office Locations](https://www.assembli.design/components/office-locations.md): Offices section for contact and about pages. A 24-hour timeline in the visitor's own time zone shows each office's working day, a live now line and the longest stretch when most offices are open at once. A card per office shows its local time, open or closed and when that changes, a sky arc tracing the sun or moon, the address with copy, directions, email and phone.+ - [Footer Minimal](https://www.assembli.design/components/footer-minimal.md): Compact site footer for products that don't need a sitemap: brand and tagline beside one row of links with hover underlines and an optional badge, then a bottom bar with copyright and legal links, a live status pill, a language select, a light/system/dark switch with a sliding thumb and arrow-key support, social icons and back to top. Each optional piece hides when unset.+ - [Page Header](https://www.assembli.design/components/page-header.md): The header at the top of an app page: breadcrumbs, an icon, the title with a status dot, a description, a row of facts, actions with an overflow menu and tabs with counts underneath. Secondary actions fold into the menu on narrow pages. The tab bar pins as you scroll, and once the title is gone a small copy of it slides in beside the tabs with the primary action.
Showing the first 40 of each.