Clay 3D Feature Icons

About this style

Soft 3D icons that look modeled from clay spread through SaaS marketing in the early 2020s, as 3D tools became common in design teams and feature sections moved from flat icons to tactile objects. The look borrows from stop-motion clay animation, the craft Aardman made famous with Wallace & Gromit: matte surfaces, rounded edges and forms that look pressed by hand. Companies use it to give abstract features a friendly physical stand-in that reads at a glance in a feature row, an app store screenshot or an onboarding screen. It works when the materials stay matte, the light is soft and the motion uses squash and stretch, the first of the twelve principles Disney animators Frank Thomas and Ollie Johnston set out in The Illusion of Life (1981).

Make a 10-second feature-row film in soft clay 3D: five chunky, matte icons drop onto a warm cream stage one per beat, squash on landing, bounce twice and settle into a labeled row under a headline, then each one plays a tiny action of its own before the row does a little wave.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Thimblebox, the back office for small shops (fictional). Wordmark: "thimblebox", all lowercase.
- Headline, two lines: "Everything your shop runs on." / "Pressed into one app."
- Features, left to right (icon · label · sub-label):
  1. Calendar · "Bookings" · "Clients pick their own slot"
  2. Chat bubble · "Messages" · "Every reply in one inbox"
  3. Coin stack · "Payments" · "Paid out in 2 days"
  4. Bar chart · "Reports" · "Sales by the week"
  5. Shield · "Backups" · "Saved every hour"
- Footer: the wordmark, "Free for 14 days · No card needed" and a button "Start free".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a tabletop set of objects pressed by hand from soft modeling clay, shot in flat, gentle studio light on a seamless cream sweep. Everything is rounded, chunky and matte, with the faint waviness of a thumb-pressed surface. The charm comes from weight and timing, never from shine.
- Palette: the stage is a vertical gradient from #F7F0E5 at the top to #EEE2D0 at the bottom, painted behind a transparent WebGL canvas. Clay colors: coral #F27A5E (calendar), sky #7DB7E6 (chat), marigold #F2B544 (coins), mint #63C3A0 (chart), lilac #B7A4E6 (shield); clay cream #FFF4E4 for every detail (calendar page, chat dots, chart base, check mark); a lighter marigold #F8CF72 for the coin's inner ring. Text ink #2E2620, secondary text #7A6C60, button fill #2E2620 with a #FFF4E4 label. Contact shadows #8C6E55. No pure white, no black, no gradients on the clay itself.
- Layout, in stage pixels: the headline centered, line 1 baseline at y 168 and line 2 at y 244, Bricolage Grotesque 800 at 72px, letter-spacing −0.02em, line 1 in ink and line 2 in #7A6C60. Five icons resting with their centers at x 336, 648, 960, 1272 and 1584 (312px apart), their bases on a floor line at y 600, each fitting a 210 × 210px box. Under each icon, the label centered at baseline y 690 in Bricolage Grotesque 700, 34px, ink, and the sub-label at baseline y 728 in Figtree 500, 21px, #7A6C60. The footer is one centered row at y 905: a 30px marigold circle with a 10px cream hole (the logo mark), a 12px gap, the wordmark in Bricolage Grotesque 800, 34px; a 44px gap; "Free for 14 days · No card needed" in Figtree 500, 21px, #7A6C60; a 44px gap; the button, 176 × 56px, radius 28, its label in Figtree 700, 21px.
- 3D setup: an OrthographicCamera whose frustum is the stage in pixels (left −960, right 960, top 540, bottom −540, camera at z 2000 looking down −z), so one world unit is one pixel and the positions above land exactly (world y = 540 − stage y). The camera never moves. Each icon is a Group with its pivot at the center of its base, tilted by rotation.x +0.32 rad so its top face shows, and fanned toward the middle: rotation.y +0.30, +0.15, 0, −0.15, −0.30 from left to right.
- Clay material: MeshPhysicalMaterial with roughness 0.85, metalness 0, sheen 0.5, sheenRoughness 0.8, sheenColor #FFFFFF, no clearcoat, no environment map. Build every mesh with enough segments to be smooth (RoundedBoxGeometry from three/addons with 6 segments, lathes with 48 radial segments, extrusions with 8 bevel segments), then displace each vertex along its normal by seeded 3D value noise (frequency 0.03 per px, amplitude 1.4px) and recompute normals: surfaces look hand-pressed, never faceted or lumpy.
- Lighting, so nothing comes out dark: outputColorSpace SRGBColorSpace, toneMapping NoToneMapping; a HemisphereLight with sky #FFF8EE, ground #E8D6BF, intensity 2.2; a key DirectionalLight #FFF2E0 at 2.4 from the upper left (−600, 900, 1000); a fill DirectionalLight #E4ECFF at 0.8 from the right (800, 200, 700); a rim DirectionalLight #FFFFFF at 1.0 from behind (0, 500, −900). No shadow maps. Tune the intensities until each icon's lit top-left face reads within about 8% of its hex in a screenshot and its shaded underside is never darker than 55% of it.
- Contact shadows: under each icon a flat ellipse on a camera-facing plane, textured with a radial gradient made in a canvas at load (#8C6E55 at 26% alpha in the middle falling to 0 at the edge), 180 × 30px at rest, centered 4px below the floor line. While the icon is in the air the shadow shrinks with height (to 55% width and 8% alpha at 300px up); when the icon squashes, it widens with it. It is always soft: never a hard grey slab.
- The icons, sizes in px, all in clay:
  1. Calendar: a coral rounded box 168 × 150 × 44 (radius 18); a cream page 140 × 96 × 10 (radius 8) on the lower half of its front face; on the page a 3 × 2 grid of raised coral dots (spheres, radius 9, 34px apart), the top-middle one marigold for today; two cream binding rings on top (capsules, radius 9, length 26, standing upright at x ±42).
  2. Chat bubble: a sky rounded box 176 × 124 × 44 (radius 36); a rounded tail at its lower left (a cone, radius 24, height 38, tipped down-left and blended in by the same vertex noise); three cream spheres (radius 12) across its front at x −40, 0 and 40.
  3. Coin stack: three marigold coins, each a lathe of a rounded puck (radius 66, thickness 22, edge radius 9), stacked with hand-placed offsets (x −4, +6, 0) and small tilts (±0.05 rad); the top coin carries a raised ring (a torus, radius 40, tube 5) in #F8CF72. The stack tips toward the viewer an extra 0.35 rad so the top coin's face reads.
  4. Bar chart: a cream base slab 184 × 26 × 84 (radius 12); three mint bars, rounded boxes 42 wide and 42 deep (radius 12), at x −54, 0 and 54 with final heights 64, 106 and 150; a marigold sphere (radius 13) resting on the tallest bar.
  5. Shield: an extruded shield outline (a flat top with 26px rounded corners, sides curving in to a soft point at the bottom), 152 wide and 178 tall, depth 34, bevelThickness 14, bevelSize 12, bevelSegments 8, curveSegments 32, in lilac; a cream check mark on its face made of two capsules (radius 10, lengths 44 and 82) meeting at a rounded corner.
- Drop and bounce, for each icon from its beat b (heights are of the base above the floor):
  - b → b+0.30 s: falls from 560px above (out of frame) on easeInQuad, stretched to scaleY 1.14 and scaleX/Z 0.93, turning 0.4 rad about y toward its fan angle.
  - b+0.30 → b+0.38 s: lands and squashes to scaleY 0.70 and scaleX/Z 1.20, pivoting at its base so it never sinks through the floor.
  - b+0.38 → b+0.78 s: bounces 72px high on a true parabola (up easeOutQuad, down easeInQuad), at scaleY 1.06 and scaleX/Z 0.97 near the top.
  - b+0.78 s: a smaller squash (0.86 / 1.08) and a 20px hop that lands at b+1.00 s.
  - From b+1.00 s: scale settles to 1.0 on a damped spring (ω 22 rad/s, ζ 0.4), and rotation settles onto the fan angle on the same spring; at rest by about b+1.4 s.
  - Beats: b = 0.55, 1.00, 1.45, 1.90 and 2.35 s.
- Micro-actions, one per icon, each ending back on its rest pose: calendar (3.80 s): today's dot pops from scale 1.0 to 1.6 and back on easeOutBack 1.6 over 0.35 s; chat (4.10 s): the three dots bob up 10px in a wave, 0.10 s apart, twice; coins (4.45 s): the top coin hops 46px, flips one full turn about its x axis and lands with a 0.9 squash; chart (4.80 s): the bars, which landed at 35% of their heights, grow to full one after another, 0.10 s apart, on easeOutBack 1.4, the marigold sphere riding up on the tallest; shield (5.15 s): the check mark grows along its length, short stroke then long (0.12 s + 0.16 s), and the shield squashes to 0.94 for 0.1 s as if stamped.
- Text motion: the headline lines rise 28px out of a mask with their words staggered 0.06 s on easeOutCubic (line 1 from 0.05 s, line 2 from 0.30 s). Each label rises 14px and fades in over 0.30 s on easeOutCubic from b+0.85 s, its sub-label 0.08 s later. The footer rises 18px and fades in at 3.55–3.95 s.
- Premium: real volume and weight, matte clay with a hand-pressed surface, colors that keep their hue in light and shade, squash and stretch that keeps the volume, landings on a steady beat, soft contact shadows. Cheap: glossy plastic, glass or chrome, icons that just scale up from nothing, objects floating with no shadow, dark or muddy undersides, bloom, everything bouncing at once.
- Banned: specular highlights or reflections, metalness, environment maps, outlines or toon edges, emoji, glassmorphism, bloom, gradients on the clay, purple-on-navy, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.5s: the cream stage; the headline rises in, line 1 then line 2.
- 0.55–3.75s: the five icons drop one per beat, left to right, each landing, squashing, bouncing twice and settling while its label and sub-label rise in.
- 3.55–3.95s: the footer rises in.
- 3.80–5.45s: the micro-actions run one after another: today's dot pops, the chat dots bob, the top coin flips, the bars grow, the check mark draws.
- 5.45–6.3s: everything at rest. The 6.0 s frame is the hero: the headline, all five icons upright in their row with soft shadows, every label and sub-label, the footer.
- 6.40–7.50s: a wave: each icon hops 34px with a small squash and a spring settle, 0.12 s apart from left to right, its shadow following.
- 7.50–8.70s: the button presses once (scale 0.96 for 0.10 s and back on the spring) and everything settles.
- 8.70–10.0s: hold on the full row, nothing moving.
For other lengths, keep the beat spacing and bounce timings and stretch the gaps between sections; keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js, pinned with an importmap from jsDelivr ("three": https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js, "three/addons/": https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/). WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true }), setPixelRatio(devicePixelRatio), sized to the 1920×1080 stage; seek sets every transform and renders once. Bounces, springs and squashes are closed-form functions of the time since each trigger. The headline, labels and footer are HTML over the canvas, positioned in stage pixels, with their transforms and opacity set from t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 1.0 s the calendar is down and bouncing; at 3.0 s four icons are down and the fifth is mid-bounce; no icon ever sinks into the floor; each icon reads at once as its object (calendar, chat bubble, coin stack, bar chart, shield) and as matte clay, with no shine and no dark or near-black side; the contact shadows stay soft; the 6.0 s frame shows the headline, all five icons at rest with their labels and the footer; and the final frame is the same full row, still. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…