Components
Component Library
Browse the full set of UI components, interaction studies, and motion primitives.
62 components · 8 free · 54 Pro
AI
An AI thinking pill that cycles through phase labels like Searching and Writing, then pops a check when it finishes.
An AI chat composer with an auto-growing input, a model picker, and a send button that turns into a stop button while a response streams.
An assistant message that develops in like ink — a soft-feathered edge sweeps down the text with an iridescent glow riding the write-frontier, then copy, regenerate, and feedback actions fade in without shifting the layout.
A collapsible thinking panel that streams reasoning steps one at a time, then folds down to a short summary you can reopen.
A full chat experience that ties the AI components together. Send a prompt and watch the reasoning stream, the reply type out, and the view pin to the bottom.
Media
A vinyl sleeve player. The record lifts out, spins, and responds to the transport controls.
A handheld retro media player with a CRT display, a speaker grill, and spring-loaded transport buttons.
Hyperlinks that show an image tooltip on hover, tracking your cursor with a parallax tilt on the artwork.
A flip card that swings toward the side your cursor enters from, with a tracked sheen, parallax tilt, and a lifting shadow.
A two-column client index. Hover a name and its preview scales into focus while the row drifts under your cursor.
A center card ringed by smaller cards. Hovering the center scatters them outward with spring overshoot; leaving snaps them back behind.
A fanned arc of overlapping artwork cards. Hover one and it springs forward while its neighbors nudge aside.
A swipeable card deck. The front card drags off in your swipe direction, then tucks behind a fanned stack. Built for touch, with a reduced-motion fallback.
An Apple-style analog clock whose tick ring and numerals wrap the card's own rounded corners, with a vermillion sweeping second hand.
A now-playing card that resolves tracks straight from iTunes search URLs and plays their previews, shuffling through the list and auto-advancing between songs.
A GitHub contribution graph with a linked profile header, hover tooltips, and a staggered reveal. Point it at any username for live data, or feed it your own counts.
Avatars fly in from the blurred foreground and pack into a slowly orbiting rosette, computed for any head-count.
A feature card that grows from its place in the grid into a full detail view, artwork welded to the card the whole way, with body copy that lands after it settles.
The iOS world-clock widget as a live component — a tick ring fills with the passing seconds around rolling digits, a city label, and the offset from your local time.
An image grid that flies the tapped photo into a fullscreen viewer. Swipe between shots, then drag down and let go — it shrinks in your hand and flicks back to its cell.
A YouTube player on an IMAX-style curved screen, backlit by ambient light that tracks playback, with YouTube's own controls left in charge. Letterboxed films are measured and cropped to fit.
A cursor-tilted card with trading-card foil — an iridescent sheen shifts with the tilt angle, glare tracks the light source, and a rainbow ring rides the edges.
Carousels
A 3D coverflow carousel with spring physics. Navigate by drag, scroll wheel, or keyboard, with optional reflection and audio feedback.
A gallery that stretches whichever frame you hover into focus.
Portrait cards ride a curved arc, tilting and dropping toward the edges as they auto-scroll past. Drag to scrub, hover to slow.
Controls
Segmented tabs with a pill that stretches as it moves and settles into the selected tab.
A number input with rolling digits and plus and minus buttons that spring on press.
An email signup that expands from a button and animates from idle into a success state.
A command palette with grouped results, fuzzy search, and a useCommandPalette hook that wires up Cmd+K for you.
A realistic rotary knob with depth, spring-loaded momentum, and lighting that reacts as you turn it.
Stacked notification cards that fan out into a full list, then collapse back into a compact peek.
A calendar picker with spring month transitions and day cells that stagger in as you navigate.
A searchable, grouped select that becomes a drag-to-dismiss bottom sheet on mobile and a spring popover on desktop.
A nested-card command palette that springs open, staggers its groups with a blur-fade, and drives fully from the keyboard.
A one-time-code input with rolling digit entry, an animated caret, error shake, and a success pop. Paste-friendly and accessible.
A Like button that reveals a reaction picker on hover. Your pick flies back along a curved path and becomes the active reaction.
An iOS-style bottom sheet with detents. Drag between resting heights, rubber-band past the top, flick down to dismiss — all velocity-aware.
A thermal printer that feeds out a receipt line by line, then waits for you to grab the paper and tear it off — resistance first, then the rip.
Click the document and a stamp slams down — the card dips under the impact, and the ink lands at a slightly different angle every time.
Drag-select where the marquee is an elastic band — it bows behind fast movement, items pop as it overtakes them, and on release it snaps tight around the selection.
Physics
Nine pendulums of different lengths drift out of sync to form a travelling wave, driven entirely by their physics.
A grid of nodes lit by spreading wavefronts. It fires on its own every few seconds, or click to start one.
Radial spikes pulse outward in a staggered sine wave. A distinctive loading animation.
Particles scatter out of noise and converge into text. A clean AI-generation reveal.
An interactive 3D Rubik's cube. Drag to orbit, click a face to twist a layer. Built with CSS 3D transforms.
A globe of dots that drift in space and scatter from your cursor; tap to send a shockwave rippling through them. Toggle to a smooth perspective spin.
Text or an image rendered as drifting dots that scatter from your cursor; tap to send a shockwave rippling through the glyph.
Text
On hover, the label fades out and new text resolves character by character, each glyph shimmering up before it settles.
An airport departure board that flips through characters mechanically to spell each phrase, every cell cascading at its own pace.
Sections
A pricing section with a billing toggle, prices that roll when you switch, and a highlighted popular tier.
Two rows of testimonials that scroll in opposite directions and slow down when you hover. Loops forever.
An FAQ accordion where rows pop in, panels unfold on a spring, and the plus icon twists into a close mark.
Integration logos fire a synchronized wave of light pulses along drawn beams that converge on a central hub, which swells and ripples as they land together.
A dotted world map where comets of light arc between cities, each landing with a ripple. Markers pulse idly and reveal their labels on hover.
A rotating globe of land dots with your locations glowing as accent markers, each sending out a slow ripple. Drag to spin it — momentum hands back to the idle rotation.
A radar with a glowing sweep arm that lights up blips as it passes, each flaring with a ripple before fading until the next pass.
Notification cards stream in from the top, springing the stack down as older ones dissolve through a soft fade at the bottom.
A layered network that lights up in a real forward pass — each layer fires into the next until the output reveals a result.
Templates
A full landing page for AI automation products, built from the section components with scroll-triggered reveals: hero, feature grid, testimonials, pricing, CTA, and footer.
Heroes
A bright, centered hero with an avatar trust badge, a two-line headline, and a painted valley that settles with a slow Ken Burns drift.
An image-first hero with a floating pill nav, a framed classical painting, a serif headline accent, and inline email capture.
A landing hero with pill nav, badge, headline, and two CTAs over a painted dusk landscape. Pure SVG, no image assets.