ESF — Make ideas move
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.
Set MAKE, IDEAS and MOVE in three large lines. Reveal MAKE from the left, IDEAS from the right and MOVE from below with staggered timing. Rotate a square, fill the outline of MOVE, then shift IDEAS sideways and back. Finish with an up-right arrow and a readable final hold.
Colors used in the actual work: #e6ff3c, #172012.
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. Set the phrase in bold type and build a clear hierarchy.
2. Choreograph the words with changes of scale and position.
3. Hold the final composition so the message has time to land.

[Actual production timeline reference — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.w1',{x:-660,opacity:0},{x:0,opacity:1,duration:.65,ease:'expo.out'},.2);
tl.fromTo('.w2',{x:750,opacity:0},{x:0,opacity:1,duration:.58,ease:'power4.out'},.72);
tl.fromTo('.w3',{y:170,opacity:0},{y:0,opacity:1,duration:.7,ease:'back.out(1.1)'},1.22);
tl.fromTo('.square',{scale:0,rotation:-90},{scale:1,rotation:0,duration:.72,ease:'back.out(1.6)'},.9);
tl.to('.square',{rotation:180,duration:2,ease:'power3.inOut'},2.9);
tl.to('.w3',{color:'#172012',duration:.28,ease:'power1.out'},3.6);
tl.to('.w2',{x:130,duration:.55,ease:'power2.inOut'},4.4);
tl.to('.w2',{x:0,duration:.55,ease:'power3.inOut'},5.1);
tl.fromTo('.slash',{x:-40,y:40,opacity:0},{x:0,y:0,opacity:1,duration:.4,ease:'circ.out'},5.65);

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

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