Animated loader · granite-4.1-8b
Output generated Cost / run $0.0003 Runtime 9.2s
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.
index.html (1952 bytes)Successfully wrote 1952 bytes to index.html
The single‑page web app has been created as **index.html** in the current directory. It contains: - A dark background (`#111`) with centered content. - SVG `<svg>` element that morphs between two rounded shapes, animated via **GSAP** with smooth `power2.out` easing and infinite looping (`repeat: -1`, `yoyo: true`). - A row of dots (`<div class="dot">`) that fades in, scales up, and then scales back down in a staggered sequence, also driven by GSAP with `power2.out` easing. All required libraries are loaded directly from the provided `gsap.min.js` file using a plain `<script src="gsap.min.js"></script>`. No external resources or CDNs are used, ensuring the artifact runs fully sandboxed without network access. You can open `index.html` in any web browser to view the looping animated loading sequence.