Animated loader · kimi-k3

Let me create index.html with GSAP-based loading animation. Use a timeline with shapes (SVG or divs) morphing scale/position/border-radius, plus 5 dots with stagger. Controls: Pause/Resume, Restart. Loop seamlessly (yoyo or repeat with symmetric timeline).

I'll build a timeline of total ~4.8s, repeat: -1, yoyo: true to avoid jumps. Use gsap.timeline({repeat:-1, yoyo:true}).

Design: 4 shapes (square, circle-ish, triangle-ish via border-radius) in a row, animating. Dots below with stagger scale/opacity.

Let me write it, then test with browser tool, sampling at moments (use gsap timeline time via console? browser tool inspect returns DOM/console). I can add a small status readout showing timeline progress to verify via screenshots. Also test pause/resume/restart buttons by clicking.

Write file.

Page loads, no console errors. Timeline running (t=0.16). Let me sample at several moments with screenshots, then test pause/resume/restart. Use motion or multiple screenshots.

Wait — the readout shows total=5.49 and time=5.42, but duration should be 4.8 and yoyo should reverse... At t=5.49 total with duration 4.8, tl.time() should wrap. The readout shows t=5.42 total=5.42 — hmm, tl.time() should be within [0, duration]. Unless duration isn't 4.8. Let me check: my last shape tween ends at at+3.6+1.2 = at max 0.75+4.8 = 5.55! shapes i=3: at=0.75, phase D at 0.75+3.6=4.35, duration 1.2 → ends 5.55. So duration is 5.55, not 4.8. That's fine (3–6s range, 5.55 ≤ 6). But the padding tl.to({}, {duration:0.01}, 4.79) is useless. Actually total duration = 5.55s, within 3-6s requirement. Yoyo repeat means full cycle = 11.1s, seamless.

Hmm, but frames show total up to 5.49 which exceeds... t=5.42 with duration 5.55 — consistent. OK, good.

One concern: yoyo repeats — at repeat, rotation goes back from 270 to 0 smoothly. Fine.

Frames show morphing shapes (diamond pink, rotated squares, circles) and staggered dots (first dot big, rest small). 

Now test Pause: click pause, verify time freezes, then resume, verify continues; then restart, verify t=0.

Paused: t=3.30, total=18.90, paused=true, button shows "Resume". Confirm it stays frozen with another screenshot, then click Resume.

Frozen at t=3.30, total=18.90 — identical. Now click Resume (same button position).

Resumed from ~t=3.2 (yoyo reverse direction, so time decreasing — consistent since total was 18.9, past the 16.65 midpoint of the 3rd half-cycle, so playing backward). paused=false, composition same as paused frame, continuing. Now test Restart.

Restart works: t=0.05, total=0.05, composition back to initial state (matching first frame). 

One thing to double check: seamless looping. Total duration 5.55s, yoyo repeat — at the repeat boundary the timeline plays back to 0 then forward again; endpoints are identical states, so no jump. Rotation is continuous throughout. Since yoyo, there's no snap. Verified via readout total crossing 5.55 earlier? Frames showed total=4.81, 5.42, then later 18.90 → multiple loops completed with no errors and t stayed within [0, 5.55]. Good.

Also remove readout? It's subtle and useful; keep it — it's a small debug element, harmless. Could leave. It's fine.

Done. Report.