Animated loader · gemma-4-31b-it
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.
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.
thinking
* Goal: Single-page web app (`index.html`).
* Requirements:
* Dark background.
* Looping animated loading sequence.
* Morphing rounded shapes.
* Staggered row of dots.
* Orchestrated by GSAP timeline.
* Smooth easing.
* No external resources (except provided `gsap.min.js`).
* Single file `index.html`.
* Available library: `gsap.min.js`.
* Dark theme: Background color `#0f0f0f` or similar.
* Shapes: SVG is best for morphing. Since I don't have the MorphSVG plugin (it's a paid GSAP plugin), I'll simulate morphing by animating `border-radius` or using SVG path animations that don't require the plugin (like animating `rx`, `ry` or scaling/rotating skewed ellipses). Actually, a simple way to "morph" without MorphSVG is to animate the `border-radius` of a `div` or use `scale` and `rotate` on a rounded square to make it look like a blob. Alternatively, I can use SVG paths and animate the `d` attribute if the number of points remains the same, but that's tricky. I'll stick to animating `border-radius` and transforms for a "blobby" feel.
* Dots: A row of small circles/divs. Staggered animation (scale/opacity/position).
* Layout: Centered content.
* Container for the loader.
* A "blob" element (the morphing shape).
* A "dots" container.
* Text (e.g., "Loading...").
* Timeline: `gsap.timeline({ repeat: -1 })`.
* Blob animation: Animate `border-radius` from `50%` to `30% 70% 70% 30% / 30% 30% 70% 70%` and back. Add some rotation and slight scale changes.
* Dots animation: Animate scale and y-position of individual dots with a stagger.
* Wait, `gsap.min.js` is provided. I should load it via `<script src="gsap.min.js"></script>`.
* Dark background: `#0a0a0a`.
* Primary color: `#00d2ff` or a gradient.
* Blob: A div with `position: absolute` and a CSS gradient background.
* Dots: Flexbox layout.
* *Morphing*: I'll use a few overlapping blobs with different colors and animate their `border-radius` and `transform` randomly/periodically to create a lava-lamp-like morphing effect.
* *Dots*: 5-6 dots that pop up and down.index.html (4817 bytes)Successfully wrote 4817 bytes to index.html
I have created a self-contained `index.html` file that implements a looping animated loading sequence. The implementation features: 1. **Morphing Shapes**: Three overlapping organic "blobs" with Gaussian blurs and mix-blend modes. I simulated a morphing effect by animating the `border-radius` (using the 8-value syntax), `scale`, and `rotation` on separate intervals to create a liquid, evolving feel. 2. **Staggered Dots**: A row of white dots that animate vertically and scale using GSAP's `stagger` property for a smooth, wave-like sequence. 3. **Visual Polish**: A dark `#0a0a0a` background, linear gradients for the shapes, and a pulsing "Loading" text to tie the composition together. 4. **GSAP Orchestration**: All animations are managed via a looping `gsap.timeline` with `sine` and `power2` easing for organic motion. The `gsap.min.js` library is loaded locally as requested.
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
EVALUATION
A glowing blurred blob with 'LOADING' text and a staggered dot row animate continuously; no interactivity, as expected for a passive loader.
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.