Expanding Bento Grid
Warm EditorialA four-tile bento where clicking any tile expands it to dominate the grid using shared layout animation; the others reflow with springs.
Bento grids show several features at once without a wall of text. Each layout here animates on its own terms, from tiles that expand in place to live data panels.
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 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.