Toy Letter Blocks

About this style

Teaching letters with wooden blocks goes back at least to John Locke, who suggested gluing letters onto the sides of dice in Some Thoughts Concerning Education (1693). Classic hardwood alphabet blocks carry a letter, a numeral or a picture on each face, often raised inside a carved border and painted in primary colors, with the bare wood showing between. Because a cube is cut from a board, four faces show long grain and two show the growth rings of end grain. They are still made the same way, and their look runs through nursery brands, children's books and education campaigns.

Make a 10-second 3D film of hardwood alphabet blocks that roll, drop, tip and stack to spell a word on a sunny play table.

<inputs>
If I don't give you something, use the default and don't ask.
- Word: STORY
- Shop: Little Lantern Books (fictional)
- Tagline: "Story time every Saturday at 10"
- Picture blocks for the tower: a crescent moon, a star, a lantern
- Length: 10 seconds.
</inputs>

<direction>
- Palette: a warm cream seamless sweep #F4EEE2 behind; a pale sage felt play mat #D8E6D3 underfoot with fine fibrous noise; maple #E3C79A with grain #C9A36E and end-grain rings #B98E58; paints red #C8362E, blue #2B5CA8, green #3D8A4C and yellow #E8B23A; text #2C2A26.
- Each block is a real hardwood alphabet block, 1 unit on a side (about 4.5cm): RoundedBoxGeometry (radius 0.06, 4 segments). The grain follows how a cube is cut from a board: four faces show long side grain, and two opposite faces show end grain with growth rings. Every face has a raised border 0.07 units wide around a slightly recessed panel, and a raised letter, numeral or picture in the panel, painted, with the border and panel left as bare wood. Build each face's maps once at load on canvases: a color map (wood plus paint, with a little paint worn off the raised corners), a height map (letter and border raised about 1.2mm, softened by a small blur) converted into a normal map, and a roughness map (paint 0.42, wood 0.7). Letters and numerals are "Bevan" 400, about 62% of the face height. Like real blocks, each one carries different letters, numerals or pictures on its other faces, and each face its own paint color.
- Physics, choreographed and solved from t, never loosely simulated: a cube rolls only by pivoting 90° about its leading bottom edge, its center tracing an arc of radius √2/2, each quarter turn 0.2–0.26 s on easeInOutSine; drops fall from 4–6 units up under real gravity for the scale (a unit is 4.5cm, so g is about 218 units/s²: quick and heavy, never floaty) and bounce once with restitution 0.25, then rock on an edge and settle. Blocks never interpenetrate and never slide without rolling, except one short skid. Rolling along the row turns a block about the axis pointing at the camera, so its front face stays toward the camera and its letter turns in the plane: give each block whatever starting orientation leaves its letter upright after its last turn. Every block ends upright with its spelling face square to the camera (yaw within ±4°, seeded, for a hand-placed look).
- Light, bright and clear from the first frame: a warm key DirectionalLight #FFF3E2 at 2.6 from the upper left like a window, with soft shadows (PCFSoftShadowMap, 2048 map, shadow radius 4) so every block casts a soft contact shadow on the felt; a HemisphereLight (#FFFFFF over #E6DCCB, 0.9); a soft fill from the right at 0.5; a PMREM RoomEnvironment at 0.35 for gentle sheen on the paint. ACESFilmic, exposure 1.05, sRGB output. The raking key must make the raised letters read in relief.
- Camera: fov 30, 16° above the table, a slow dolly in with a 10° arc to the right across the piece on easeInOutSine, ending square on the row with the tower in frame.
- Final frame: the five blocks in a row on the felt with 0.08-unit gaps, the row centered at screen x 860 with its letters' centers near y 560; the three picture blocks stacked 0.6 units to the right of the Y, the top one turned 10°. Shop name in "Nunito" 800, 30px, tracked 0.08em, top-left at (120, 100); tagline in Nunito 700, 40px, centered on baseline y 900.
- Premium: true hardwood blocks with end grain, raised painted letters that catch the light, quarter-turn rolls and weighty drops with soft contact shadows. Cheap: smooth plastic cubes with flat printed letters sliding or spinning in the air.
Banned: plastic or glossy blocks, flat printed letters with no relief, blocks sliding or floating, interpenetration, rubbery bounces, bloom, dark or moody lighting, real toy brands, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.4s: the empty felt in warm daylight; the camera already easing in.
- 0.4–1.8s: S, T and O roll in from the left in single file (four, three and two quarter turns), each stopping in its place in the row.
- 1.8–2.8s: the R drops from above into its place, lands tilted on one bottom edge, tips flat and rocks to rest.
- 2.8–3.9s: the Y rolls in from the right in three quick quarter turns, skids the last 0.15 units and stops at its gap; STORY reads.
- 3.9–5.2s: the tower: the moon block drops beside the Y, then the star block onto it and the lantern block on top, 0.4 s apart, each bouncing once and rocking slightly; the top one lands turned 10°.
- 5.2–6.2s: everything at rest; the camera continues its arc; the shop name rises 12px as it fades in.
- 6.2–7.2s: the tagline rises in.
- 7.2–7.8s: the camera eases to its final view.
- 7.8–10.0s: hold, perfectly still.
For other lengths, stretch the camera arc and the hold; 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 drawing the face textures and defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Each block's motion is a fixed list of segments (roll, fall, bounce, rock, tip, skid) with closed-form transforms, so its pose at t is computed directly.
</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 STORY reads left to right with every letter upright and square to the camera by 4 s, the letters show relief under the key light, blocks never interpenetrate or slide while rolling, contact shadows are soft, both the end grain and the side grain are visible on some block, and the scene is bright from the first frame. 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

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

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…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…