Masthead Hero with Rotating Serif Word
Warm EditorialA newspaper-style masthead with an issue line, hairline rules and a headline whose final word swaps on a spring-loaded vertical slot.
Components lab — 77 pieces
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 designsA newspaper-style masthead with an issue line, hairline rules and a headline whose final word swaps on a spring-loaded vertical slot.
A playful studio hero where hand-cut 'stickers' scattered over the headline can be picked up and thrown with spring inertia.
A cream hero where a solid charcoal disc follows the cursor with spring lag and inverts the headline beneath it — no glow, just ink.
A Swiss grid hero with a numbered services index; hovering a row slides a terracotta bar in from the left and shifts the text.
A poster-like hero built from primary-colored circles, squares and half-discs that rotate into a new composition on every click.
A calm wellness hero where sage and clay blobs morph slowly behind a DM Serif headline, breathing in and out.
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.
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.
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.
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.
A four-tile bento where clicking any tile expands it to dominate the grid using shared layout animation; the others reflow with springs.
An editorial results bento whose numbers count up with spring easing the moment they scroll into view, with a hand-drawn underline.
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.
A bento with a segmented control on top; switching tabs morphs the grid's tile arrangement and swaps content with crossfades.
Loud pricing cards with 3px borders and hard shadows; a chunky monthly/yearly switch slams the prices to new values.
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.
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.
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.
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.
A giant word split into letters; hovering sends a sine wave through them with per-letter spring delays, like a finger brushing piano keys.
An infinite editorial marquee that slows to a crawl when hovered and can be flicked faster or reversed by dragging.
An airport split-flap board that shuffles random letters before landing on each word of a rotating headline.
A statement banner where key words slide up through clip masks one by one, and the accent word gets a hand-drawn terracotta circle.
A 70s banner with stacked sunset stripes that roll in like a record label while a fat Shrikhand word bobs to a groove.
A zine headline printed in two riso inks; the pink and blue layers drift out of registration following the cursor, overlapping in multiply.
A statement banner for Crumb & Co. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.
A statement banner for Petal & Stem whose words drop in one by one with springy rotation, then lean away from the cursor on hover.
A statement banner for Haddad Arch. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.
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.
A postcard built from flat paper layers — sky, hills, sun, stamp — that separate in depth as the pointer moves, like a pop-up book.
A type-specimen card that flips in true 3D on click to reveal the glyph's metrics on the back, with a springy overshoot.
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.
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.
A Y2K membership card in brushed chrome; tilting it slides a holographic foil band across the surface and a starburst spins.
Three offering cards for Smile Lab stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
Three offering cards for Open Door stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
Three offering cards for Fieldnote Roasters stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
Three offering cards for Haddad Arch. stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
Three offering cards for Margins stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
A numbered FAQ with hairline rules where the plus rotates into a cross and answers unfold on measured-height springs.
Five vertical panels side by side; the hovered panel widens to reveal its story while the rest compress into rotated spine labels.
A vertical process timeline where opening a step draws the connecting line down to it and checks off every earlier step.
A service list where opening an item reveals a color-block 'photo' that wipes in from a clip-path, paired with its deliverables.
A Japanese-minimal accordion of tall vertical-text columns; opening one unrolls it like a scroll and stamps a vermilion seal.
An emerald-and-gold accordion with stepped corners and a sunburst that fans open behind each answer.
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.
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.
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.
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.
A three-step project brief with chip selectors, a segmented budget control and a progress rail; steps slide horizontally with direction-aware springs.
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.
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.
A beveled 1995-desktop dialog box: the progress bar fills in chunky blocks and the window can be dragged around the teal desktop.
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.
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.
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.
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.
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.