Animated loader · ling-2.6-1t
Output generated Cost / run $0.0033 Runtime 30.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 · 4 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.
I'll create a single-page web app with a looping animated loading sequence featuring morphing rounded shapes and staggered dots, all orchestrated on a GSAP timeline.
/tmp/ws/index.html (12038 bytes)Successfully wrote 12038 bytes to /tmp/ws/index.html
I've created a complete single-page web app with a looping animated loading sequence featuring: **Key Features:** - **Dark background** (`#0a0a0f`) with ambient radial gradient orbs that pulse in and out - **Four morphing rounded shapes** with gradient fills and glow effects that: - Appear sequentially with bounce effects - Morph through different sizes, border-radius values, positions, and rotations - Use varied easing functions (elastic, power2, sine, back) for organic motion - **Five staggered dots** in a row that: - Scale up with staggered delays using `stagger` - Pulse in harmony with the shapes - Use elastic easing for bounce effects - **GSAP Timeline** orchestrating all animations with: - Negative overlaps (`-=`) for seamless transitions - `repeat: -1` for infinite looping - `repeatDelay: 0.5` for breathing room between cycles - **Interactive hover effects** on both shapes and dots (scale transforms) - **"Loading" label** that fades in/out with the cycle The animation cycle flows: ambient orbs fade in → shapes appear and morph individually → all shapes morph together → dots stagger in with bounce → label appears → ambient pulse → shapes reform → dots pulse → everything dissolves → restart.