Skip to content

3D and parallax card examples

Cards that react to the pointer and to touch: tilt toward the cursor, separate into paper layers, flip over or get flung across the screen.

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

Questions, answered

What is Specimen Design?

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.

How do I use a Claude prompt to design a website?

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.

Are the designs free to use?

Yes. All designs and code are free to use in personal and commercial projects under the MIT license.

How do I make an AI-built website not look AI-generated?

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.

Which design styles are included?

28 design languages, including Neo-Brutalist, Bauhaus, Swiss, Japanese Minimal, Luxury Noir, Retro 70s, Memphis, Y2K, Claymorphism, Risograph, Art Deco and 8-bit.

Can you build a custom website for my business?

Yes. Use the brief form on the homepage and you will get a reply within one working day.