Shibori Dye

About this style

Shibori is the Japanese name for a family of resist-dyeing techniques that shape cloth before it is dyed, by folding, clamping, binding, stitching or twisting it, so the dye cannot reach the parts held tight. In itajime, the cloth is accordion-folded into a small stack and clamped between wooden boards, giving geometric patterns that mirror across every fold. It is most often dyed in indigo: cloth lifted from the vat comes out yellow-green and turns blue as the dye oxidizes in the air, and repeated dips build deeper blues. Arimatsu, in Nagoya, has made shibori since the 17th century, and textile artists and fashion labels use it widely today.

Make a 10-second itajime shibori film, seen from above: a cotton cloth is folded and clamped between boards, dipped three times in an indigo vat, turning from green to blue in the air each time, then unfolded to reveal its mirrored resist pattern.

<inputs>
If I don't give you something, use the default and don't ask.
- Studio: Tsukihana Dye Works (fictional).
- Title: "Folded, clamped, dipped"
- Line: "Itajime shibori: triangle folds between two boards, three dips in indigo."
- Air caption: "Out of the vat it is green. The air turns it blue."
- Steps: Fold · Clamp · Dip 1 · Dip 2 · Dip 3 · Unfold
- Length: 10 seconds.
</inputs>

<direction>
- Look: straight down on a persimmon-tanned work table in soft daylight from a window at the upper left: woven cotton, pale hinoki boards, a dark stoneware vat, and indigo that comes out of the vat green and turns blue in front of you.
- Palette: table kakishibu brown #8E4F2A with grain #7A4223 and paler wear #A8653A; unbleached cotton #EFE8D8 with a fine plain weave; hinoki #E6CFA2 with grain #CDB283; cotton string #F4F0E6; vat rim dark glazed stoneware #2B2724 with a highlight #57504A; indigo liquor #1B2342 with a copper bloom #9A6440 and a violet sheen #5E4A86; fresh dye green-yellow #A3AE4E; indigo after one, two and three dips #6D8DB4, #3D5F8E and #1F3763; type #F3E9D6, secondary #E2C7A6, accent #E9B48A.
- How the colors interact: indigo and persimmon brown are near-complements, so the blue reads deeper on the warm table; the green-yellow out of the vat sits between them and shifts to blue as it oxidizes; the bloom floats as copper over near-black navy; on the cloth, inner layers dye paler, so every motif steps through several blues.
- The cloth: 1300 × 644px at 1.0×, centered at (1060, 600) at the start. Folding, exactly: first an accordion fold lengthwise into four panels 161 tall, giving a strip 1300 × 161; then the strip folds back and forth along alternating 60° creases into 13 equilateral triangles of side 185.7, stacking into one triangular packet of 52 layers. Each fold is drawn in 2D as panels turning about their crease: a panel's distance from the crease is scaled by cos θ, its back face shows (6% darker) past 90°, it lifts a soft shadow (12px blur) while turning, and the crease keeps a fine shading line. Completed folds compose as reflections, so the strip and the packet are exact.
- Clamp: two hinoki triangles of side 130, inset from the packet's edges, press on top and bottom, and cotton string winds round the packet three times at each corner, each turn drawing on with a slight sheen.
- Dye, exact by construction: at load, compute the dye in packet coordinates for each of the 52 layers: d = (1 − 0.92·B)·e^(−e/λ), where e is the distance to the packet's nearest edge, B is the board mask (feathered 3px, with a faint darker line along its edge where dye pools), and λ runs from 34px on the outer layers down to 16px on the innermost, wobbling ±25% along each edge with seeded noise, as dye wicks unevenly. After n dips, a layer's color runs from cotton toward that dip's indigo by 1 − (1 − 0.62·d)^n. Then compute the open cloth by unfolding: reflect each cloth pixel through the same folds in order to find where, and in which layer, it lay in the packet, and look up its dye there (at half resolution, smoothly upscaled). So every white shape mirrors across every crease: a lattice of white hexagonal stars and triangles on graded blues, paler where the layers lay deep.
- Vat: round, 520px across inside a 40px glazed rim, its surface dark navy with the soft reflection of the window (a pale rounded rectangle at 10%) and the copper bloom, a 120px cluster of small bubbles, drifting at one side. A dip: the packet moves over the center and sinks (scale 1.0 → 0.9 as the liquor closes over it from the edges, its cover rising to 92% opacity in 0.15 s), sending out concentric ripple rings (closed-form thin highlights that fade as they spread) and pushing the bloom aside. After 0.3 s it rises (scale to 1.04, with a soft shadow on the surface beneath it), streaming drops from its corners that land as small rings.
- Oxidation: out of the vat, every dyed area is green-yellow #A3AE4E and turns to that dip's blue on easeOutCubic, from the edges inward, as the air reaches them first: over 0.55 s after the first two dips and 1.0 s after the third. Each dip ends darker than the last.
- Unfolding: the string unwinds, the top board lifts away with its shadow, and the packet opens in reverse: the 13 triangles fan open (0.05 s each), then the three accordion panels open (0.18 s each), each turn revealing more of the mirrored pattern. The open cloth keeps faint fold lines (±3% along every crease).
- Camera, as a 2D transform: 1.0× on the cloth while it folds, easing to 2.2× on the packet by 1.9 s; it follows the packet left to the vat (which lies at world (−360, 560), off the table's left side) and holds 1.3× on the vat with the vat centered at screen (700, 600) for the dips; it follows the packet back, then pulls back to 0.86× by 8.3 s, where the open cloth spans about x 500–1620, y 320–880. The table fills the frame around the work throughout.
- Type (HTML over the canvas): kicker "TSUKIHANA DYE WORKS" in Zen Maru Gothic 700, 20px, tracked 0.18em, accent, at (120, 96); title Shippori Mincho B1 700, 64px, #F3E9D6, beneath it; the line in Zen Maru Gothic 500, 26px, secondary, on baseline 280; the air caption in Zen Maru Gothic 500, 30px, #F3E9D6, at most 420px wide, at (1300, 560), right of the vat, during the last dip; the steps strip right-aligned at (1800, 1000) in Zen Maru Gothic 500, 22px, the current step #F3E9D6, done steps at 60% and upcoming ones at 35%, separated by small dots. Text rises 10px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: a pattern that is the exact unfolding of the folded packet, softer and paler on the inner layers; indigo that comes out green and turns blue in the air; a living vat with a copper bloom. Cheap: a tie-dye swirl, blue blobs printed on white, a cloth that crossfades from plain to patterned.
Banned: tie-dye spirals, patterns that don't mirror across the folds, smooth flood gradients across the whole cloth, splashes, cartoon bubbles, hands or people, kimono, cherry blossoms, torii, lanterns or other cliché props, glow, bloom, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.4s: the flat cloth on the table; the kicker and title rise in; the steps strip shows Fold.
- 0.4–1.0s: three accordion folds lengthwise, 0.2 s each, into a long strip.
- 1.0–1.9s: the strip folds back and forth into triangles, 13 quick turns of 0.07 s, stacking into the packet as the camera moves in.
- 1.9–2.4s: Clamp: the boards press on and the string winds round each corner.
- 2.4–2.8s: the camera follows the packet to the vat.
- 2.8–3.95s: Dip 1: it sinks, rises at 3.4 s and turns from green to blue.
- 3.95–5.1s: Dip 2: it rises at 4.55 s and turns a darker blue.
- 5.1–6.7s: Dip 3: it rises at 5.7 s and hangs over the vat, green turning to the deepest blue, drops falling in rings; the air caption appears at 5.8 s (the 6.0 s frame: the packet over the vat, its edges blue and its middle still green).
- 6.7–7.1s: back to the table; the string unwinds and the board lifts.
- 7.1–8.3s: Unfold: the triangles fan open, then the panels, as the camera pulls back to the whole cloth.
- 8.3–8.7s: the line rises in; the steps strip completes.
- 8.7–10.0s: hold.
For other lengths, change the time between dips; keep each dip's own timing and 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: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. Text is HTML over the canvas.
- At load, build the table, the weave, the boards, the vat and the bloom textures, the 52-layer dye in packet coordinates and the open cloth's pattern by reflecting each pixel through the folds; each frame draws the cloth as its fold panels with affine transforms computed from t, and the ripples and drops in closed form from each dip's times.
</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 the open cloth's pattern mirrors across every crease and steps paler toward the inner layers, every fold turns about its crease with no gaps or tears between panels, the packet comes out green after every dip and ends each one darker, ripples spread concentrically from the packet, the bloom never covers it, the steps strip matches the action, the type stays clear of the vat and the cloth, and the 6.0 s frame shows the packet over the vat mid-turn from green to blue. 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…