ESF — Numbers, with rhythm
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.
Place Small steps. / Visible growth. and +24 / step on the left. On the right, show bars for 24, 48, 72 and 96 on one zero baseline and a shared scale. Grow the bars sequentially from the bottom, then reveal their values. Label the values ILLUSTRATIVE DATA rather than real performance.
Colors used in the actual work: #f7efe3, #132e25, #214e3f, #357359, #57a078, #c8dc6d.
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. Choose four illustrative values and one consistent scale.
2. Stagger the bar reveals while preserving their proportions.
3. Leave the labels and final values visible for comparison.

[Actual production timeline reference — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.headline',{x:-60,opacity:0},{x:0,opacity:1,duration:.75,ease:'power3.out'},.2);
tl.fromTo('.bar',{scaleY:0},{scaleY:1,duration:1.25,stagger:.45,ease:'power2.out'},1);
tl.fromTo('.value',{opacity:0},{opacity:1,duration:.25,stagger:.45,ease:'power1.out'},2);
tl.fromTo('.unit',{y:28,opacity:0},{y:0,opacity:1,duration:.6,ease:'back.out(1.1)'},3.3);
tl.to('.bar:last-child',{borderRadius:'18px 18px 0 0',duration:.8,ease:'sine.inOut'},5);

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

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