Tangram Puzzle

About this style

The tangram is a Chinese dissection puzzle: seven flat pieces, five triangles, a square and a parallelogram, cut from one square and rearranged into silhouettes that use all seven without overlapping. It reached Europe and America in the early 19th century and set off a craze there, and thousands of figures have been published since. Its strict geometry and playful results make it a favorite for educational content, logo systems and shape-based motion design.

Make a 10-second tangram film: seven pieces cut from one square slide and rotate into a cat, then a rabbit, then back into their square beside a word.

<inputs>
- Brand: "Tanbury Puzzle Co." (fictional); the word is "Tanbury".
- Figure names: "cat", "rabbit".
- Line: "One square. Seven pieces."
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: ground deep teal #0E4A47 with a faint seeded paper grain at 3%; large triangles coral #FF6B57 and sun #FFC23D, medium triangle mint #7FE0C2, square cream #FFF3DF, small triangles sky #8EC5FF and pink #FF9EC7, parallelogram tangerine #FF8F3D; type cream #FFF3DF, secondary #9CC9C2.
Type: Lexend. Figure names 600 at 64px, lowercase, centered under each figure at y 960; the word 700 at 150px; the line 400 at 36px in the secondary color.
Geometry in units, y up, with r = 1.4142 and h = 2.8284. These figures are verified (all seven pieces, no overlaps, total area 16); use them as given, don't redesign them.
Square (origin at its bottom-left): large A (0,0) (4,0) (2,2); large B (0,0) (2,2) (0,4); medium (4,4) (2,4) (4,2); square (2,2) (3,1) (4,2) (3,3); small A (3,1) (4,0) (4,2); small B (2,2) (3,3) (1,3); parallelogram (1,3) (3,3) (2,4) (0,4).
Cat, facing right (origin at the middle of its base): large A (−h,0) (0,0) (0,h); large B (0,0) (h,0) (0,h); medium (r,r) (0,h) (r,4.2426); square (0.4142,3.2426) (r,4.2426) (0.4142,5.2426) (−0.5858,4.2426); small A, left ear, (−0.5858,4.2426) (0.4142,5.2426) (−0.5858,6.2426); small B, right ear, (0.4142,5.2426) (r,4.2426) (r,6.2426); parallelogram, tail, (−h,0) (−r,r) (−h,r) (−4.2426,0).
Rabbit, facing left: large A and B as in the cat; medium (−r,r) (0,h) (−r,4.2426); square (−0.4142,3.2426) (−r,4.2426) (−0.4142,5.2426) (0.5858,4.2426); parallelogram, long ear, (0.5858,4.2426) (−0.4142,5.2426) (−0.4142,7.2426) (0.5858,6.2426); small B, short ear, (−0.4142,5.2426) (−r,4.2426) (−r,6.2426); small A, tail, (h,0) (1.8284,1) (h,2). The rabbit's parallelogram is the mirror image of the cat's, so it must flip over on the way in and flip back on the way home: it is the only piece with a mirror image.
Placement: one unit = 92px. Figures stand on an invisible ground line at y 840 with their origin at x 960. The opening square is centered on the stage. The final square sits at x 540–908, y 316–684, with the word left-aligned at x 980 (baseline y 520) and the line beneath it (baseline y 600).
Each piece is a rigid polygon inset 2px, so a hairline of ground shows between neighbors, with 3px rounded corners. Move pieces only by rigid transforms (rotation in multiples of 45° plus translation, and a flip for the parallelogram), derived for each figure by matching the piece's vertices, never by tweening vertex lists, so nothing deforms.
Motion: a move is lift, travel, set down. Lift: scale 1.04 with a shadow of rgba(0,0,0,0.28), 12px offset and 18px blur, over 0.15s. Travel: the centroid follows a shallow arc (sagitta 8% of the distance) on cubic-bezier(0.65, 0, 0.35, 1) over 0.7–0.9s; rotation takes the shortest way and finishes 0.1s before arrival; the parallelogram flips by scaling its local x through 0 at mid-travel, darkening 12% when edge-on. Set down: a 0.12s settle (scale 1.04 → 0.99 → 1) as the shadow tightens to 2px at 25%. Pieces leave one after another, 90ms apart, largest first; lifted pieces may pass over resting ones.
Premium: exact geometry with even hairline gaps, pieces that feel like solid tiles placed by a hand, figures that read instantly. Cheap: shapes morphing into each other, overlapping or gappy silhouettes, everything sliding at once.
Banned: deforming pieces or scaling them beyond the lift, overlaps in a finished figure, extra shapes, outlines, gradients on pieces, resting angles that aren't multiples of 45°, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the square fades up as one solid tile in the center (pieces butted together); at 0.5s the hairline gaps open over 0.3s, revealing the cuts.
- 0.8–3.2s: the pieces travel into the cat, 90ms apart, largest first; "cat" rises 16px and fades in beneath it at 3.0s.
- 3.2–4.2s: hold the cat.
- 4.2–6.6s: the cat becomes the rabbit: the neck, head and ears cross to the other side, the tail becomes the long ear (flipping over on the way), a small ear becomes the tail; "cat" lifts away and "rabbit" rises in at 6.4s.
- 6.6–7.4s: hold the rabbit.
- 7.4–8.8s: the pieces travel home into the square at its final left position, the parallelogram flipping back; "rabbit" lifts away; at 8.6s the word slides from x 1020 to 980 as it fades up, with the line 120ms later.
- 8.8–10.0s: hold.
Other lengths: give extra time to the holds on each figure; keep every move 0.7–0.9s.
</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.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative (growth, simulation, particles) is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Past the end, hold 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>; await document.fonts.load() for each face before assigning window.seek.
- Engine: inline SVG; each piece is a polygon in local coordinates whose transform (translate, rotate, flip, lift scale) is set from seek, with an feDropShadow filter whose offset and blur follow the lift.
</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. At the cat, the rabbit and the final square, compute that no two pieces overlap, shared edges match within 0.5px and the hairline gaps are even; every resting rotation is a multiple of 45°; only the rabbit's parallelogram is flipped; labels and the word never touch a piece. 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

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…