oneshotlm
Compare all models on this prompt →

Animated loader · ling-2.6-flash

Output generated Cost / run $0.0001 Runtime 24.4s

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.

⛨ sandboxed Open in new tab ↗

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

modelling-2.6-flash
vendorinclusionai
harnesspi-agent
generated2026-08-01

METRICS

runtime24.4s
tokens in11k
tokens out2.3k
cached5.4k
cost / run$0.0001
Transcript · 8 messages
user

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.

assistant

I'll create a self-contained HTML file with a looping animated loading sequence featuring morphing rounded shapes and a staggered row of dots using GSAP. Let me first check what's in the current directory and then create the file.

→ bash {"command":"ls /tmp/ws/"}
toolResult

gsap.min.js

assistant
→ write /tmp/ws/index.html (4926 bytes)
toolResult

Successfully wrote 4926 bytes to /tmp/ws/index.html

assistant
→ bash {"command":"cd /tmp/ws && python3 -m http.server 8080 &>/dev/null & echo $!"}
toolResult

31

assistant

The file has been created at `/tmp/ws/index.html`. Here's what it does: **Dark Background**: A deep dark background (`#0a0a0f`) with an SVG container filling the viewport. **Morphing Shapes**: Three rounded shapes that continuously morph into each other using GSAP timeline — a rounded triangle, a diamond, a soft blob, and a wide rounded rect, all using smooth `sine.inOut` easing. **Staggered Dots Row**: 9 dots arranged horizontally, each with its own staggered animation sequence — they pulse in opacity, scale, and subtle vertical movement, creating a classic loading dot ripple effect, also with `sine` easing. **Timeline Orchestration**: All animations run on continuous GSAP timelines (`repeat: -1`, `yoyo: true`) for seamless looping without any JavaScript `setInterval` or `requestAnimationFrame` logic. The design also includes a subtle expanding pulse ring in the background and a gentle floating motion for the entire scene for extra depth.