Skip to content

Components lab — 77 pieces

Small pieces, big feel.

Not a full site, just one part of it: a button, a navbar, a form, a card. Each runs live with its own Claude prompt, ready to drop into a site you already have. Looking for a whole page? Start with the full website designs.

See the full website designs

A newspaper-style masthead with an issue line, hairline rules and a headline whose final word swaps on a spring-loaded vertical slot.

Editorial Hero Sections

A playful studio hero where hand-cut 'stickers' scattered over the headline can be picked up and thrown with spring inertia.

Editorial Hero Sections

A cream hero where a solid charcoal disc follows the cursor with spring lag and inverts the headline beneath it — no glow, just ink.

Editorial Hero Sections

A Swiss grid hero with a numbered services index; hovering a row slides a terracotta bar in from the left and shifts the text.

Editorial Hero Sections

A poster-like hero built from primary-colored circles, squares and half-discs that rotate into a new composition on every click.

Editorial Hero Sections

Organic Blob Hero

Organic Earth

A calm wellness hero where sage and clay blobs morph slowly behind a DM Serif headline, breathing in and out.

Editorial Hero Sections

An editorial hero for a yoga studio — Studio Salt — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

An editorial hero for a coffee roaster — Fieldnote Roasters — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

An editorial hero for a architecture studio — Haddad Arch. — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

An editorial hero for a boxing gym — Third Round — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

Expanding Bento Grid

Warm Editorial

A four-tile bento where clicking any tile expands it to dominate the grid using shared layout animation; the others reflow with springs.

Bento Feature Grids

Count-Up Stats Bento

Warm Editorial

An editorial results bento whose numbers count up with spring easing the moment they scroll into view, with a hand-drawn underline.

Bento Feature Grids

A bento grid where each tile leans toward the pointer on a gentle 3D spring and lifts on a hard offset shadow — tactile, not glossy.

Bento Feature Grids

Tabbed Showcase Bento

Warm Editorial

A bento with a segmented control on top; switching tabs morphs the grid's tile arrangement and swaps content with crossfades.

Bento Feature Grids

Loud pricing cards with 3px borders and hard shadows; a chunky monthly/yearly switch slams the prices to new values.

Bento Feature Grids

A dense dashboard bento in slate and IBM Plex Mono: live-ticking metrics, a drawing sparkline and a status grid that flickers like a server rack.

Bento Feature Grids

A four-tile bento for Smile Lab where hovering a tile floods it with the accent color while the others recede — with a live count-up headline stat.

Bento Feature Grids

A four-tile bento for Third Round where hovering a tile floods it with the accent color while the others recede — with a live count-up headline stat.

Bento Feature Grids

A four-tile bento for Haddad Arch. where hovering a tile floods it with the accent color while the others recede — with a live count-up headline stat.

Bento Feature Grids

Magnetic Pull Button

Warm Editorial

A charcoal pill that gets pulled toward the cursor within a 90px field, its label lagging a bit further behind for a layered parallax.

Tactile Micro-Interaction Buttons

Squish Press Button

Warm Editorial

A neo-print button with a hard offset shadow that physically presses down into the page on tap, then springs back.

Tactile Micro-Interaction Buttons

A destructive-action button that must be held for 1.2 seconds; a terracotta fill sweeps across, and releasing early rewinds it on a spring.

Tactile Micro-Interaction Buttons

Copy Button Morph

Warm Editorial

A compact copy button whose icon morphs into a drawn checkmark while the pill widens to reveal 'Copied' — layout-animated, no layout jump.

Tactile Micro-Interaction Buttons

A heart button that pops with an overshoot and scatters small paper-cut squares and circles in terracotta, cobalt and charcoal.

Tactile Micro-Interaction Buttons

Elastic Toggle Switch

Warm Editorial

A settings toggle whose knob stretches like taffy while traveling and settles with a bounce; the track ink-fills to cobalt.

Tactile Micro-Interaction Buttons

Rounded 90s buttons with black outlines; hovering wiggles the squiggle decoration and pressing pops dots out of the button.

Tactile Micro-Interaction Buttons

Puffy pastel clay buttons with inner highlights that deflate when pressed and re-inflate with a wobble.

Tactile Micro-Interaction Buttons

An 8-bit 'PRESS START' screen: a blinking pixel prompt, a chunky stepped button that drops a pixel and a coin counter that ticks up.

Tactile Micro-Interaction Buttons

Kinetic Type 10

All in this category

A giant word split into letters; hovering sends a sine wave through them with per-letter spring delays, like a finger brushing piano keys.

Kinetic Typography Banners

An infinite editorial marquee that slows to a crawl when hovered and can be flicked faster or reversed by dragging.

Kinetic Typography Banners

Split-Flap Headline

Warm Editorial

An airport split-flap board that shuffles random letters before landing on each word of a rotating headline.

Kinetic Typography Banners

A statement banner where key words slide up through clip masks one by one, and the accent word gets a hand-drawn terracotta circle.

Kinetic Typography Banners

A 70s banner with stacked sunset stripes that roll in like a record label while a fat Shrikhand word bobs to a groove.

Kinetic Typography Banners

A zine headline printed in two riso inks; the pink and blue layers drift out of registration following the cursor, overlapping in multiply.

Kinetic Typography Banners

A statement banner for Crumb & Co. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

A statement banner for Petal & Stem whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

A statement banner for Haddad Arch. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

A statement banner for Ben-Ami & Katz whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

A postcard built from flat paper layers — sky, hills, sun, stamp — that separate in depth as the pointer moves, like a pop-up book.

Parallax/3D Interactive Cards

Specimen Flip Card

Warm Editorial

A type-specimen card that flips in true 3D on click to reveal the glyph's metrics on the back, with a springy overshoot.

Parallax/3D Interactive Cards

A stack of testimonial cards you can fling left or right; the top card rotates with drag and the next one rises to take its place.

Parallax/3D Interactive Cards

A product card whose object floats forward in Z on hover while the price tag swings on a pin, with a spring-driven shadow underneath.

Parallax/3D Interactive Cards

A Y2K membership card in brushed chrome; tilting it slides a holographic foil band across the surface and a starburst spins.

Parallax/3D Interactive Cards

Three offering cards for Smile Lab stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

Three offering cards for Open Door stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

Three offering cards for Fieldnote Roasters stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

Three offering cards for Haddad Arch. stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

Three offering cards for Margins stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

A numbered FAQ with hairline rules where the plus rotates into a cross and answers unfold on measured-height springs.

Dynamic Accordions

Five vertical panels side by side; the hovered panel widens to reveal its story while the rest compress into rotated spine labels.

Dynamic Accordions

A vertical process timeline where opening a step draws the connecting line down to it and checks off every earlier step.

Dynamic Accordions

A service list where opening an item reveals a color-block 'photo' that wipes in from a clip-path, paired with its deliverables.

Dynamic Accordions

Washi Vertical Tabs

Japanese Minimal

A Japanese-minimal accordion of tall vertical-text columns; opening one unrolls it like a scroll and stamps a vermilion seal.

Dynamic Accordions

Art Deco FAQ

Art Deco

An emerald-and-gold accordion with stepped corners and a sunburst that fans open behind each answer.

Dynamic Accordions

A single-open accordion listing what Margins offers; the open row gets an accent bar that grows from the left and its detail unfolds on a spring.

Dynamic Accordions

A single-open accordion listing what Hill 412 offers; the open row gets an accent bar that grows from the left and its detail unfolds on a spring.

Dynamic Accordions

A single-open accordion listing what Third Round offers; the open row gets an accent bar that grows from the left and its detail unfolds on a spring.

Dynamic Accordions

A minimal contact form with floating labels and an underline that draws from the caret side on focus, plus a send button that flies its arrow away.

Interactive Forms

Multi-Step Brief Form

Warm Editorial

A three-step project brief with chip selectors, a segmented budget control and a progress rail; steps slide horizontally with direction-aware springs.

Interactive Forms

Typewriter OTP Input

Warm Editorial

A six-digit verification code input where each digit drops into its slot like a typewriter key and the row stamps green-free 'Verified' in cobalt.

Interactive Forms

Spring Budget Slider

Warm Editorial

A range slider with a chunky draggable thumb that squashes on grab, a tick ruler, and a price label that rolls digits as you drag.

Interactive Forms

A beveled 1995-desktop dialog box: the progress bar fills in chunky blocks and the window can be dragged around the teal desktop.

Interactive Forms

A compact booking form for Grain House: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Studio Salt: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Ben-Ami & Katz: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Fieldnote Roasters: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Petal & Stem: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms