oneshotlm
Compare all models on this prompt →

Animated loader · glm-4.7

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 ↗
transcript · 4 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
thinking
The user wants me to create a single-page web app with a looping animated loading sequence. The requirements are:

1. Dark background
2. Morphing rounded shapes
3. A staggered row of dots
4. Orchestrated on a GSAP timeline with smooth easing
5. Everything in one index.html file
6. Use the provided gsap.min.js (already in the directory)
7. No external resources, CDNs, or network requests
8. CSS in <style> tag, JS in <script> tag

Let me create this now.

I'll create a looping animated loading sequence with morphing shapes and staggered dots using GSAP. Let me build this in a single HTML file.

write /workspace/index.html (7908 bytes)
toolResult

Successfully wrote 7908 bytes to /workspace/index.html

assistant
thinking
The file was created successfully. Let me verify it exists by reading it back to make sure everything is correct.

I've created a complete looping animated loading sequence with: **Morphing Shapes:** - Three layered rounded shapes with gradient colors (purple, pink, cyan) - Smooth border-radius morphing creating organic blob-like transformations - Combined rotation and scaling effects - Different timing for each shape to create layered complexity - Uses various easing functions (power2.inOut and back.inOut) **Staggered Dots:** - Seven dots in a row with alternating gradient colors - Wave-style scale animation with stagger (0.15s intervals) - Y-axis bounce effect with back.out easing - Opacity pulse for additional visual interest - Continuously repeats with yoyo (back-and-forth) **Loading Text:** - Subtle pulse animation synchronized with the overall rhythm **Features:** - Dark background (#0a0a0f) for high contrast - Smooth GSAP timeline orchestration - All animations loop infinitely - No external dependencies except the provided gsap.min.js - Fully self-contained in a single HTML file The animation is ready to view at `/workspace/index.html`.

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

modelglm-4.7
vendorZ.ai · GLM
harnesspi-agent
generated2026-07-22

EVALUATION

3/5 working

Small morphing blob shape with staggered dots and 'LOADING' text loops on a dark background, no interactivity beyond the idle animation.

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion1.3%
on click1.0%
on drag1.2%
on wheel1.2%
on enter + space1.2%
on arrow keys1.4%
on w/a/s/d1.5%
frame spread14.7 / 255
console errors0
js errors none

METRICS

runtime117.7s
tokens in92
tokens out2.6k
cached5.4k
cost / run$0.0051