Truchet Tiles

About this style

Truchet tiles are named after Sébastien Truchet, a French Dominican priest who in 1704 studied the patterns made by square tiles split diagonally into two colors. In 1987 the metallurgist and historian Cyril Stanley Smith described a variant with two quarter-circle arcs on opposite corners; because the arcs always meet at edge midpoints, any arrangement forms continuous winding paths. One tile and one rule generate endless variety, which makes the pattern a staple of generative art, textiles, flooring and brand systems.

Make a 10-second Truchet tile animation: quarter-circle tiles turn in waves, knit into flowing paths, and finally spell a word.

<inputs>
Word: LOOP (3–5 letters; each letter is a 5 × 7 block of tiles). Caption: "Two arcs, every path." Studio: Coilworks Pattern Studio. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: ultramarine #2337D6, deep ultramarine #18249A, cream #FFF0D4, coral #FF6A52, deep coral #E04A38, and sun yellow #FFD447 for the travelling light only.
Grid: 60px tiles, 32 × 18, filling the stage exactly. Each is a Smith tile: two quarter-circle arcs of radius 30px centered on opposite corners (A: top-left and bottom-right; B: top-right and bottom-left), stroked cream at 14px with butt caps so neighbors' arcs meet flush at every edge midpoint. Orientations start seeded random.
Regions: when fills are on, color each region by the grid corner it contains: deep ultramarine if that corner's column + row is even, ultramarine if odd, so paths read as cream ribbons between two tones. A turning tile swaps its two fills smoothly across the turn and lands matching its neighbors.
Turning: tiles turn only in the plane, 90° about their centers, over 0.42s on cubic-bezier(0.65, 0, 0.35, 1), arcs visibly parting and rejoining. A tile turns only when a wavefront reaches it: start = wave start + (distance along the wave ÷ wave speed) + seeded jitter of ±25ms.
Paths: at load, trace the arc network as it stands after wave 1 (A joins top↔left and bottom↔right edge midpoints; B joins top↔right and bottom↔left) and find its longest path. A sun-yellow light runs along it at 900px/s: a 14px stroke over the cream with a 420px tail fading back to cream.
Word: letters are 5 × 7 tile bitmaps, 2 tiles apart, centered (four letters fill columns 3–28, rows 4–10). Inside letter tiles the two region tones become coral and deep coral while the cream arcs flow straight through, so the word is made of the pattern, not laid over it.
Caption strip: tiles in rows 13–14, columns 8–23 clear away near the end, leaving plain ultramarine. Caption in Unbounded 600, 40px, cream; studio line in Unbounded 400, 22px, tracking 0.08em; both centered.
Motion is rhythmic and satisfying: one clean wavefront at a time, the network re-knitting behind it. Premium means seamless joins at every edge midpoint, a wavefront you can follow, and a pattern that keeps its logic while it changes; cheap means tiles spinning at random, visible seams, a word typed over the pattern.
Banned: 3D flips or tilts, diagonal-line tiles, round line caps, gradients other than the light's tail, shadows, glow, random or simultaneous turns, text over busy pattern, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–1.1s: ultramarine ground; each tile's arcs grow from their edge midpoints to meet in the middle (0.3s), swept diagonally from the top-left, (column + row) × 16ms apart.
1.1–3.1s: wave 1: a straight diagonal wavefront crosses from the top-left corner to the bottom-right, turning every tile 90°.
3.1–3.7s: the two-tone region fills fade up.
3.7–5.0s: the yellow light runs the longest path, then its tail drains away.
5.0–7.0s: wave 2: a ring expands from the stage center and turns every tile again; tiles inside the word land coral as they turn.
7.0–7.7s: outside the word, arcs dim to 45% cream and fills settle to plain ultramarine; caption-strip tiles shrink to nothing from the strip's center outward.
7.7–8.5s: the caption rises 12px and fades in; the studio line follows 150ms later.
8.5–10.0s: hold, nothing moving.
For other durations, scale every timestamp proportionally, keeping each turn between 0.35 and 0.5s.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. No other libraries (no three.js: this style is flat). Draw in Canvas 2D, repainting every frame from scratch, with the backing store sized from the canvas's CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the font wait matters. Trace the path network once at load. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. 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.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Zoom a rest frame to 300% and check every edge midpoint joins without a seam or notch. Check each wavefront reads as one clean line, the light stays on one continuous path, and the word reads at 1280×720. Confirm seek(duration) and seek(duration + 1) 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

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…

Bauhaus Geometry

Made by us

A primary-colored circle, square and triangle roll, drop and turn into place on a black bar, assembling a constructed B…

Constructivist Poster

Made by us

A Constructivist poster in motion: red bars, a wedge piercing a black circle, halftone fields and condensed uppercase t…