Mosaic Tile Flip

About this style

Tile-flip reveals borrow from split-flap departure boards and kinetic facades, where many small units changing in sequence add up to one image. The pleasure is rhythmic: a clear wavefront crossing the grid, depth as each piece turns, light glinting off surfaces in passing. Brands use it for launches and rebrands because it literally turns an old surface into a new one.

<inputs>
- BRAND. Default: "TESSELLO".
- TAGLINE. Default: "Handmade tile studio".
- PATTERN. Default: Truchet arcs.
- COLORS. Default: navy #14233D, terracotta #D2693C, sand #EBDABF, teal #2E7D77, cream #F7F1E6.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Thick tiles flip in sweeping waves: sand to bold mosaic, then the logo. Physical, rhythmic, satisfying.
- Grid: 32×18 tiles, 56 units each with 4 units of grout, 9 units thick, filling the frame; camera fov 18, distance set so the grid fits exactly. Grout #1B1A1F.
- Rendering: one InstancedMesh of BoxGeometry, matrices set in seek. A small ShaderMaterial gives the +z face the tile's slice of image FRONT and the −z face its slice of BACK; sides darker sand. FRONT swaps from A to C while facing away (rotation 90°–270°), so three images share two faces; sample BACK flipped vertically so it reads upright.
- Images, drawn once to 1920×1080 canvases: A, plain sand with ±3% seeded per-tile lightness; B, Truchet quarter-circle arcs in terracotta and teal on cream, one motif per tile, seeded orientation; C, navy with the brand in DM Serif Display 300px cream, centered, every letter spanning at least 4 tiles.
- Shader lighting: upper-left key, ambient, Lambert diffuse and a narrow specular (0.35) so each tile glints near 90°.
- Flip: 0.7s per tile, easeInOutCubic, about X in both waves (wave 1 turns 0→180°, wave 2 180→360°). Mid-flip each tile lifts toward camera by sin(πp)·22 units and scales up 4% so it reads as lifting off the wall. Start = wave start + (distance from origin ÷ max distance) × 1.9s + seeded jitter ±0.03s.
- Tagline (HTML): DM Sans 500, 28px, uppercase, letter-spacing 0.3em, cream, centered under the logo.
- Premium: one clean wavefront, glints traveling like light on water.
Banned: random or simultaneous flips, more than three waves, text too small for the grid, per-tile gradients, motion-blur smears, bounce, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: blank sand wall; the key light slides across.
- 0.8–3.4s: wave 1 from the top-left corner reveals the Truchet pattern.
- 3.4–4.6s: hold; camera drifts 1.5° in yaw.
- 4.6–7.4s: wave 2 radiates from the center and reveals the logo.
- 7.4–8.2s: tiles under the letters lift 6 units and settle, once, left to right, without flipping.
- 8.2–9.0s: tagline rises 10px and fades in.
- 9.0–10.0s: hold.
For other lengths scale the wave spread; keep each flip 0.6–0.8s.
</structure>

<build>
- One self-contained index.html, 1920×1080 (16:9) stage, designed for 60fps.
- window.seek(t), t in seconds, computes every visual from t: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames (anything cumulative is solved analytically from t or re-simulated from 0 at a fixed step), randomness only from a seeded PRNG.
- No ?render in the URL: drive seek from requestAnimationFrame. With ?render: don't start that loop. Define seek once fonts and assets load.
- Google Fonts via <link> are fine.
- three.js as an ES module from a CDN, version pinned (import map: `three` and `three/addons/` to three@0.160.0 on jsDelivr). WebGLRenderer with preserveDrawingBuffer: true; render once per seek call.
</build>

<check>
Before showing me, screenshot one frame per second (t = 0…10) and look at each. Fix overlaps, clipped or cramped text, and anything that reads as a cheap demo. The wavefront must read as one clean line, image slices must align across the grout, and the tagline must clear the letters. Confirm the final frame holds as a composed end card.
</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…