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.
Paper tones, Swiss type and one warm accent color.
A 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 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.
A charcoal pill that gets pulled toward the cursor within a 90px field, its label lagging a bit further behind for a layered parallax.
A neo-print button with a hard offset shadow that physically presses down into the page on tap, then springs back.
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.
A compact copy button whose icon morphs into a drawn checkmark while the pill widens to reveal 'Copied' — layout-animated, no layout jump.
A heart button that pops with an overshoot and scatters small paper-cut squares and circles in terracotta, cobalt and charcoal.
A settings toggle whose knob stretches like taffy while traveling and settles with a bounce; the track ink-fills to cobalt.
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 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 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 centered nav with a charcoal pill that glides under the hovered link via shared layout, returning to the active page when you leave.
A hamburger that morphs into a cross and unrolls a full-bleed terracotta menu with giant staggered links rising through masks.
A bottom app dock whose icons swell based on cursor distance, with labels that pop above — flat paper icons, no gloss.
A header that tucks away when you scroll down, slides back on the slightest scroll up, and shows a reading-progress hairline.
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.
Three offering cards for Smile Lab stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
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 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 statement banner for Crumb & Co. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.
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.
Three offering cards for Open Door stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
A navigation bar for Open Door with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.
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.
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.
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 navigation bar for Hill 412 with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.
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 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.
Three offering cards for Fieldnote Roasters stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
A statement banner for Petal & Stem whose words drop in one by one with springy rotation, then lean away from the cursor on hover.
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.
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 statement banner for Haddad Arch. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.
Three offering cards for Haddad Arch. stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
A navigation bar for Haddad Arch. with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.
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.
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 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.
Three offering cards for Margins stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.
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.
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 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 navigation bar for Crumb & Co. with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.
A free library of full website designs. Every design runs live in your browser and comes with a detailed prompt you can paste into Claude to build it. Single UI components live separately, in the components lab.
Open any design, press “Copy Claude Prompt” and paste it into Claude. You get a complete React component with Tailwind CSS and Framer Motion that you can drop into a Next.js site.
Yes. All designs and code are free to use in personal and commercial projects under the MIT license.
Start from a clear design language instead of defaults: a deliberate typeface pairing, a strict palette with one accent, and motion with real spring physics. Every prompt here spells those choices out.
28 design languages, including Neo-Brutalist, Bauhaus, Swiss, Japanese Minimal, Luxury Noir, Retro 70s, Memphis, Y2K, Claymorphism, Risograph, Art Deco and 8-bit.
Yes. Use the brief form on the homepage and you will get a reply within one working day.