ESF — A mark in motion
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 an E-like symbol made of three white bars inside two circular orbits on the left. Animate an acid-green satellite through one revolution. Place ESF. and Every skill. / One creative orbit. on the right. Reveal the bars from their left edges and settle the wordmark gently.
Colors used in the actual work: #1225db, #ffffff, #788cff, #d8ff54.
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. Reduce the identity to a small set of geometric elements.
2. Give each element a path toward a shared center.
3. Resolve the movement into a readable brand lockup.

[Actual production timeline reference — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.bar',{scaleX:0},{scaleX:1,transformOrigin:'left center',duration:.65,stagger:.16,ease:'expo.out'},.25);
tl.fromTo('.disc',{scale:.7,opacity:0},{scale:1,opacity:1,duration:1.2,ease:'circ.out',stagger:.12},.25);
tl.fromTo('.lock',{y:32,opacity:0,scale:1.05},{y:0,opacity:1,scale:1,duration:.85,ease:'power3.out'},1.4);
tl.fromTo('.sat',{scale:0},{scale:1,duration:.4,ease:'back.out(1.5)'},1.35);
tl.to('.orbit',{rotation:360,duration:5.6,ease:'power1.inOut'},1.4);
tl.to('.bar:nth-child(2)',{scaleX:1.4,duration:.6,ease:'power2.inOut'},4.1);
tl.to('.bar:nth-child(2)',{scaleX:1,duration:.6,ease:'power3.inOut'},4.85);

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

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