GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Claymorphism UI Kit: 9 Puffy Landing Sections

· Godrich · 9 items · 14 min read

Design trendsPage templateCSS onlyLanding pageHero sectionCTA

Claymorphism pairs a thick corner radius with one bright highlight and one dark shadow on the same surface, so a card reads like it's been pressed out of

It's a look that keeps resurfacing on Dribbble and Design Twitter, so here's a full one-page landing built in it. Scroll it top to bottom once before you look at the pieces.

Open the full page

Below, the same page is broken into nine claymorphism examples you can open one at a time, laid out as a grid. They're ordered the way a visitor actually meets them — get noticed, browse, check the price, trust, act, sign up — not by popularity. Three of the nine (hero, pricing, buttons & inputs) go past a plain card and add a real gesture: drifting, springing, or pressing. Let moving letters carry the same screen and it becomes the kinetic typography landing; fill it with bleeding light instead of soft volumes and the aurora mesh gradient sections are the neighbor.

Clay-shape hero01 hero-clay Capsule nav02 nav-clay Puffy inflated cards03 card-grid-clay Rounded icon chips04 feature-list-clay Chubby plan cards05 pricing-clay Round avatar + bubble06 testimonial-clay Pastel CTA band07 cta-band-clay Rounded-top footer08 footer-clay Clay buttons & inputs09 buttons-inputs-clay

Auto-plays · click a tile to jump to its section · all nine in one zip

01Clay-shape hero

Blobs drifting behind the card

Two organic blobs drift behind the headline while the card itself sits lit from the top-left and shadowed from the bottom-right, like it's been pressed into the background.

Clay-shape hero
Open in a new tab

01 · Clay-shape hero — Measured area 16.283% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

blob 부유radius 16이중 그림자

Only transform moves

The blob shapes are static — only transform moves.

<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-clay bg-white p-10 shadow-clay-raised">
  <p class="text-xs font-bold uppercase text-accent">Claymolt</p>
  <h1 class="text-4xl font-extrabold leading-tight">A screen that starts soft</h1>
  <button class="rounded-pill bg-ink px-6 py-3 text-sm font-bold text-cream">
    Start for free
  </button>
</div>

02Capsule nav

One pill holds the whole menu

The whole menu lives inside one pill, and a light chip slides along an inset track to mark the active item.

Capsule nav
Open in a new tab

02 · Capsule nav — Measured area 4.142% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

radius 999inset 그림자padding 8px

Why the chip is 25% wide

Set the chip to 25% of the track's width and translateX(100%) lands it exactly one slot over.

<nav class="flex items-center gap-4 rounded-pill bg-white/90 px-3 py-2
            shadow-clay-raised">
  <span class="pl-3 font-display font-extrabold text-sm">Claymolt</span>
  <div class="relative flex flex-1 rounded-pill bg-ink/5 p-1 shadow-clay-press">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-cream
                 shadow-clay-raised"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Home</span>
  </div>
</nav>

03Puffy inflated cards

Tiles puffed off the background

Every tile in the grid looks like it's puffed up off the background — a bright edge on top, a dark one underneath.

Puffy inflated cards
Open in a new tab

03 · Puffy inflated cards — Measured area 16.755% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

radius 16hover 승격2열→1열

Staggering the wave

Offset each card's animation start time and the four tiles inflate in a small wave instead of all at once.

<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <div class="flex flex-col gap-3 rounded-clay bg-white p-5 shadow-clay-raised">
    <span class="h-7 w-7 rounded-control bg-accent"></span>
    <p class="text-sm font-semibold">Fast search</p>
  </div>
</div>

04Rounded icon chips

Claymorphism icons pressed in like a stamp

Each icon sits inside a round chip that looks pressed in, like a stamp, with the label lined up beside it.

Rounded icon chips
Open in a new tab

04 · Rounded icon chips — Measured area 9.001% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

radius 999chip 40pxinset 하이라이트

The one sunken surface

The chip only carries an inset shadow, which is the one surface in this set that reads as sunken rather than raised.

<ul class="flex flex-col gap-3">
  <li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
             shadow-clay-raised">
    <span class="h-9 w-9 flex-none rounded-pill bg-accent
                 shadow-clay-press"></span>
    <span class="text-sm font-semibold">Quick start</span>
  </li>
</ul>

05Chubby plan cards

A plan card one size bigger

The recommended plan card is one size bigger than the rest and springs back with a small overshoot on press — no comparison table needed to see which plan is being pushed.

Chubby plan cards
Open in a new tab

05 · Chubby plan cards — Measured area 10.817% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

강조 카드 확대radius 16press 애니메이션

Where the badge has to float

The badge has to float half outside the card's own edge, not inside its padding, or it collides with the plan name underneath.

<div class="relative flex-[1.1] rounded-clay bg-white p-6 pt-8
            shadow-clay-raised">
  <span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
               text-xs font-bold text-cream">Recommended</span>
  <p class="font-bold">Pro</p>
  <p class="mt-1 text-sm text-ink/70">$9/mo</p>
</div>

06Round avatar + bubble

An avatar nested in its frame

The avatar sits nested in a round frame while the quote bubble puffs up beside it like soft clay.

Round avatar + bubble
Open in a new tab

06 · Round avatar + bubble — Measured area 7.151% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

radius 16아바타 원형꼬리 그림자

Two objects, not one

Stagger the avatar's and the bubble's animation start times slightly and they read as two separate objects instead of one.

<div class="flex items-center gap-4">
  <span class="h-14 w-14 flex-none rounded-pill bg-accent
               shadow-clay-raised"></span>
  <div class="flex-1 rounded-clay bg-white p-5 shadow-clay-raised">
    <p class="text-sm font-semibold">"It feels like it wraps around your fingertip."</p>
  </div>
</div>

07Pastel CTA band

A thick band raised above

The wide band sits as one thick card raised above the background, with a soft glow behind the headline that blooms and fades.

Pastel CTA band
Open in a new tab

07 · Pastel CTA band — Measured area 14.983% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

radius 16press 버튼배경 대비

Keeping the glow inside

overflow: hidden on the card keeps the glow from leaking past its edges.

<div class="relative overflow-hidden rounded-clay bg-ink px-10 py-12
            shadow-clay-raised">
  <span class="absolute -right-16 -top-24 h-64 w-64 rounded-pill
               bg-accent opacity-30 blur-sm"></span>
  <h3 class="relative max-w-md text-3xl font-extrabold text-cream">
    Bring your team in today
  </h3>
</div>

08Rounded-top footer

A footer edge that curls

The footer's top edge curls into a large radius, like it's gently wrapping the section above it.

Rounded-top footer
Open in a new tab

08 · Rounded-top footer — Measured area 1.393% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

상단 radius 16칸 배경 대비4열→2열

No dividers, just tint

Each link group only gets a faint background and no divider line, so the grid pattern carries all the way to the bottom of the page.

<footer class="grid grid-cols-3 gap-4 rounded-t-clay bg-white/70 px-4
               pt-8 pb-6 shadow-clay-raised">
  <div class="rounded-control bg-ink/[.04] p-5">
    <p class="text-xs font-bold uppercase text-ink/50">Product</p>
    <p class="text-sm font-semibold">Features</p>
  </div>
</footer>

09Clay buttons & inputs

A shadow that flips inward

The button flips its shadow inward on press for a real tactile feel, and the input's border turns into a soft inner glow on focus.

Clay buttons & inputs
Open in a new tab

09 · Clay buttons & inputs — Measured area 8.907% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

press 반전radius 12focus glow

A smaller radius than the cards

Both share a slightly smaller radius than the cards around them, so the screen reads as one consistent size scale.

<form class="flex gap-3 rounded-clay bg-white p-6 shadow-clay-raised">
  <label class="relative flex-1 rounded-control bg-cream
                shadow-clay-press">
    <input class="w-full rounded-control bg-transparent px-4 py-3
                  text-sm outline-none" type="email"
           placeholder="Email address">
  </label>
  <button class="rounded-control bg-accent px-5 py-3 text-sm font-bold
                 text-cream shadow-clay-raised">Sign up</button>
</form>

Custom tailwind.config

One place for color and shadow

Colors, radii, and shadows live in one place, so the one-pager and all nine sections stay in sync.

Naming the double shadow

The double clay shadow gets a single name — shadow-clay-raised — instead of being retyped everywhere.

theme: {
  extend: {
    colors: {
      cream: "#fff7e6",
      ink: "#17141a",
      accent: "#2f6df6",
    },
    borderRadius: {
      clay: "16px",
      control: "12px",
      pill: "999px",
    },
    boxShadow: {
      "clay-raised": "8px 8px 16px rgba(23,20,26,.28), -8px -8px 16px rgba(255,255,255,.5)",
      "clay-press": "inset 4px 4px 8px rgba(23,20,26,.28), inset -4px -4px 8px rgba(255,255,255,.5)",
    },
    spacing: {
      gutter: "16px",
    },
  },
},

Vibe-coding prompt

A short instruction is enough

Paste the config above into your project, then hand Claude Code or Cursor a short instruction like the one below. The full prompt lives in the zip's prompt.md.

Corners on cards, buttons, and inputs should all use rounded-clay (16px) or
rounded-control (12px) — pick one consistently.
Use shadow-clay-raised (one dual light+dark shadow) for every raised surface.
Don't vary the shadow depth from card to card.
Anything pressable (cards, buttons) should have shadow-clay-press ready for
its pressed state.
Keep the background a single cream tone and reserve accent for emphasis only.

What it produced

Here's what that instruction produced when applied to page/index.html, captured full-page at a 1280px viewport.

result

Where it breaks (the trap)

Breaking at 320px

The first thing that broke was the 320px width. The hero, the card grid, and the icon list all fixed their blob size and card padding, and at a narrow viewport the content pushed past its own box by up to 3px, since the blob positions were set in percentages while the container's own height was resolving from its content — the two calculations fought each other. Switching the blob size and card padding to clamp(), and the blob position from percentages to fixed pixel offsets, cleared it on every item at 320px.

A badge that collides

The second trap was contrast: the nav's active chip was painted the same ink color as the menu labels, so wherever it overlapped a label, that word disappeared entirely. The password y3sdrgr2 on this zip unlocks the fixed version, where the chip is a light cream capsule instead, so the label under it stays legible no matter which item is active. Rounded shadows collapsing back into boxes shows up worst in the transactional email templates, where shadow support is thinnest.

A third trap sits in the pricing card's badge placement: put it inside the card's own padding and it collides with the plan name text below it, so it has to float half outside the card's top edge instead.

What reduced motion leaves

Every one of the nine demos also follows MDN's prefers-reduced-motion docs and, when that's on, drops the animation and freezes on a final state (cards stay raised, buttons stay unpressed). Visitors who've turned on reduced motion lose the drifting blobs and the press feedback, but every card, button, and input is still fully there — nothing is missing, only the motion is gone.

Accessibility

Small text and the accent color

Small text placed on the accent (#2f6df6) background reads with fairly low contrast, so anything badge-sized stays on a cream background, and only large headings get the dark-background, light-text pairing.

Inset and outset in one property

Every card's box-shadow follows MDN's box-shadow docs for stacking an inset layer against a non-inset one in the same property, which is how one declaration carries both the puffy outer look and the pressed inner one.

Where to go next

Other trend write-ups live in the design trends category, and the about page explains what this whole site covers.

FAQ

How is claymorphism ui design different from neumorphism?

Neumorphism keeps the card almost the same color as the background and relies on shadow alone for depth. Claymorphism gives the card a clearly different color from the background and adds a thick radius on top of the shadow, so contrast and depth both come from the same move — which also makes claymorphism the easier one to keep accessible.

Doesn't a double shadow on every card slow things down?

All nine demos here keep the box-shadow value itself fixed and only animate transform/opacity (item 09 is the one exception, crossfading box-shadow for the press feel), so the shadow isn't recalculated every frame. On a screen with a lot of these cards, the double shadow does add some paint cost, so it's safer to skip the animation on any card that scrolls past quickly.

Does claymorphism work in dark mode?

Yes, but the highlight and shadow strengths need to flip from the light version. On a dark background, the light highlight's opacity should drop and the dark shadow's opacity should rise, or the card ends up blending straight into the background instead of sitting above it. For cut-and-pasted flat texture instead of puffy volume, the paper cutout landing kit builds the same set of parts from another material.

Enter the archive password

The password is inside this article. You will find it as you read.