ESF — Built, layer by layer
Production recreation prompt · UTF-8 TXT

This recreation guide is derived from the actual HTML/GSAP source and production brief. It is not an archived single AI prompt. It provides concrete instructions and the actual timeline for an iterative recreation; identical output is not guaranteed.

[Production prompt]
Create a landscape motion graphic at 1280 × 720, 30 fps and eight seconds. Use HyperFrames HTML with a paused, seekable GSAP timeline, Inter-style sans-serif typography and simple geometric elements.
Use five modules in one consistent axonometric view. Reveal them with staggered timing, then bring the separated layers into a single tower. Begin closing the gaps around 3.9 seconds and finish assembly around 5.3 seconds. Treat this as an explanatory model, not construction instructions.
Colors used in the actual work: #e9e4dc, #323935, #d1cdc4, #a4a59c, #ece5da, #b8b0a3, #99958b, #fff9ed, #cd7049, #a95034, #87412c.
Avoid rapid flashing and preserve readable contrast and spacing. Compose a short original instrumental score without copying existing recordings or samples. Add short audio fades and target approximately -18 LUFS. Export a fast-start H.264/yuv420p MP4 with 48 kHz stereo AAC.

[Production steps]
1. Draw a consistent axonometric module.
2. Separate the layers to reveal the assembly order.
3. Bring the layers together with a controlled stagger.

[Actual production timeline reference — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.title',{opacity:0,x:-25},{opacity:1,x:0,duration:.8,ease:'power3.out'},.2);
tl.fromTo('.slab0',{y:-45,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},0.45);
tl.fromTo('.slab1',{y:-65,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},0.81);
tl.fromTo('.slab2',{y:-85,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},1.17);
tl.fromTo('.slab3',{y:-105,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},1.53);
tl.fromTo('.slab4',{y:-125,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},1.89);
tl.to('.slab1',{y:30,duration:1.4,ease:'power3.inOut'},3.9);
tl.to('.slab2',{y:60,duration:1.4,ease:'power3.inOut'},3.9);
tl.to('.slab3',{y:90,duration:1.4,ease:'power3.inOut'},3.9);
tl.to('.slab4',{y:120,duration:1.4,ease:'power3.inOut'},3.9);
tl.fromTo('.count',{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:'circ.out'},5.5);

This is a timing reference. Build the corresponding HTML/SVG elements before using these selectors.

[Reference]
https://everyskillfinder.com/motion/modular-tower
Download the finished video with music using the MP4 button on the work page.