ESF — From input to output
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.
Connect INPUT → SKILL → OUTPUT with visible paths. Send the first signal from input to skill and highlight the skill box on arrival. Send a second signal to output, lighting its border and completion marker. Present this as a conceptual explanation, not a recording of live execution.
Colors used in the actual work: #071b25, #e6fbff, #c4e2e4, #477381, #102b37, #72e7d7, #153d47, #aeff70, #9fff79, #adff76, #275f4d.
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. Break the system into input, transformation and output.
2. Connect the stages with a visible signal path.
3. Time the highlights to show the order of the process.

[Actual production timeline reference — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.node',{y:35,opacity:0},{y:0,opacity:1,duration:.55,stagger:.17,ease:'power3.out'},.2);
tl.fromTo('.path',{strokeDasharray:420,strokeDashoffset:420},{strokeDashoffset:0,duration:1,ease:'power1.out'},.6);
tl.fromTo('.p1',{opacity:0},{opacity:1,duration:.2},1.1);
tl.to('.p1',{x:215,duration:1.3,ease:'none'},1.3);
tl.to('.p1',{opacity:0,duration:.15},2.6);
tl.to('.n2',{borderColor:'#aeff70',backgroundColor:'#275f4d',duration:.4,ease:'sine.inOut'},2.6);
tl.fromTo('.p2',{opacity:0},{opacity:1,duration:.15},3.4);
tl.to('.p2',{x:215,duration:1.3,ease:'none'},3.55);
tl.to('.p2',{opacity:0,duration:.15},4.85);
tl.to('.n3',{borderColor:'#aeff70',duration:.4},4.85);
tl.to('.done',{opacity:1,duration:.2},5.1);
tl.fromTo('.detail',{opacity:0},{opacity:1,duration:.6,ease:'power2.out'},5.35);

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

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