Animated loader · glm-5.3
Output generated Cost / run $0.0114 Runtime 23.7s
Prompt for this run
Using the pre-provided gsap.min.js (global gsap), create a looping animated loading sequence on a dark background: morphing rounded shapes and a staggered row of dots orchestrated on a GSAP timeline with smooth easing.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
METRICS
Transcript · 6 messages
Using the pre-provided gsap.min.js (global gsap), create a looping animated loading sequence on a dark background: morphing rounded shapes and a staggered row of dots orchestrated on a GSAP timeline with smooth easing.
{"command":"ls /tmp/job-iv69Uw"}events.jsonl gsap.min.js
/tmp/job-iv69Uw/index.html (4023 bytes)Successfully wrote 4023 bytes to /tmp/job-iv69Uw/index.html
Done — `index.html` is ready in `/tmp/job-iv69Uw`. It loads the local `gsap.min.js` and contains no network resources. What's in the loop: - **Three layered morphing shapes** with gradient fills and `screen` blend modes, cycling through 4 organic `border-radius` presets while rotating at alternating speeds, plus offset "breathing" scale pulses. - **A staggered row of 5 dots** that wave upward (pink glow) then back down, followed by a second cyan wave originating from the opposite end. - **"Loading" label** with an opacity/letter-spacing pulse synced to the timeline. Everything runs on a single repeating GSAP timeline (`repeat: -1`) with `power2.inOut` / `sine.inOut` easing for a smooth ~7.4s loop.