Animated loader · particle-1

Let me build the app. Design: dark background, group of rounded shapes (squares/circles) that morph scale, position, border-radius; row of 5 dots staggered. Timeline 4.5s repeating, using gsap timeline with repeat:-1.

Controls: Pause/Resume, Restart.

Choreography: a central ring of 4 shapes orbiting, scaling. Use timeline with yoyo? A repeating timeline of ~4.5s. Make it seamless: start and end states identical (or use yoyo). To avoid abrupt jump, ensure first and last keyframes match, or use repeat with smooth transitions.

I'll structure timeline: 4.8s, loop. Shapes orbit: each shape moves along positions, with scale and border-radius changes.

Let me write code carefully.

Shapes: 4 shapes in a container (280px). Use absolute positioning with a center. Use gsap.to with x/y relative? Better: give each shape a starting layout position and animate x/y.

Simplify: use a wrapper 320x320. Four shape divs 84x84, absolutely positioned at center via left/top 50% and transform translate(-50%,-50%) applied by CSS; GSAP transforms conflict with CSS translate. Instead set left/top to 50% and use xPercent/yPercent -50 in GSAP and animate x/y. GSAP handles xPercent fine.

Shapes: shape 1: big circle; shape 2: small square; shape 3: pill; shape 4: diamond/ rounded.

Timeline choreography (4.8s):
- t=0: shapes at positions A with scale 1, radius 30.
- 1.2s: move to positions B, scale 0.7-1.3, radius varies (squircle → pill).
- 2.4s: positions C.
- 3.6s: positions D.
- 4.8s back to positions A exactly (same values as start) — but the timeline's end state persists; if end values equal start values, repeat restarts smoothly.

Dots: 5 dots 12px, opacity & y bounce staggered. Use one tween per dot added at label offsets, or gsap timeline with stagger in the timeline.

Add a soft glow ring rotating continuously? Could be separate tween but requirement says coordinate; the main timeline is fine.

Use labels and repeat: -1, repeatDelay 0. Also add subtle container rotation? Keep simple.

Pause: tl.pause() records time; resume tl.play(). Restart: tl.restart(). Also update button label.

Also add a progress ring/arc? Optional. Keep nice visual: central core that pulses.

Let's write:

const shapes = [...] with data. I'll define keyframe sets as arrays of {x,y,scale,r,rot}.

Ensure no growing animation instances: only tween built once.

Also handle reduced motion? Not necessary.

Let me write index.html.

Design details: background radial gradient dark (#0a0d14 → #05070b), shapes with gradient fills (linear-gradient) and box-shadow glow. Acrylic look: background: linear-gradient(145deg, rgba(120,180,255,.9), rgba(80,90,220,.6)); border radius animated.

Timeline durations: 4.8s total. Use easing "sine.inOut" for moves, and stagger for dots.

Let me define:

const tl = gsap.timeline({repeat:-1, defaults:{ease:"sine.inOut", duration:1.2}});

frames each 1.2s:
for each shape i, positions:

Shape A (large circle-ish): 
- start: x:-70, y:-60, scale:1.15, radius:50%, rot:0
- f1: x:70, y:-70, scale:0.85, radius:28%, rot:90
- f2: x:75, y:60, scale:1.3, radius:50%, rot:180
- f3: x:-60, y:70, scale:0.9, radius:20%, rot:270
- end: back to start with rot 360? Radius 50% etc. Rotation 360 makes seamless.

But animating borderRadius percent between 50% and 28% - GSAP can tween border-radius strings? GSAP can animate borderRadius as complex string values ("50% 50% 50% 50%"). Safer: use borderRadius with px values per corner? GSAP handles "borderRadius: '20px'" fine. Percentages might work too since it's a string with units; gsap parses complex strings if format matches. Use px for safety: shape 88px, so 44px = circle, 6px = square.

Let me use px radii on 4 corners: e.g. "44px 44px 44px 44px" to "12px 44px 12px 44px". GSAP can handle borderRadius complex strings as long as same structure. I'll just animate a single `borderRadius` px value mostly, plus use scale.

Actually with varying scales, radius in px scales too. Fine.

Shape sizes: 96, 64, 80, 56.

Positions chosen so they orbit around center in a loose cluster.

Let me define four shapes:
1. size 96, gradient violet, positions: start (-64,-56, scale 1.1), f1 (52,-68, .85), f2 (66,58, 1.25), f3 (-58,62, .9), end back to start.
2. size 60, gradient cyan: start (66,-62, 1.0), f1 (78,44, .7), f2 (-52,66, 1.1), f3 (-70,-58, .8), end start.
3. size 76, gradient pink: start (58,66, .9), f1 (-66,58, 1.2), f2 (-70,-56, .8), f3 (62,-66, 1.15), end start.
4. size 44, gradient amber: start (-70,66... hmm too many overlapping. Let's do (10,-96)? Keep within 320 box. Use small offsets.

Shape 4: size 40, start (-88,-4), f1 (-6,-96), f2 (92,10), f3 (0,96), end start. That's an orbit of the small dot around center.

Border radius per shape: base radius 50% → px = size/2 for circle. Animate between circle and rounded square.

Set shapes with width/height and borderRadius animated via px.

Dots: 5 dots, each animate y -10 → 0 with scale and opacity, staggered 0.08, repeated within timeline. Add multiple pulse segments? One stagger tween per loop with repeat? Simpler: add a tween for dots group at label positions 0 and 2.4:

tl.to('.dot', {y:-14, opacity:1, scale:1.25, duration:0.6, stagger:{each:0.12, from:'start', yoyo:true, repeat:1}}, 0)

Hmm yoyo with repeat:1 within timeline: total 1.2s ending back at base. Stagger + yoyo is fine. But repeat inside timeline: the tween's repeats are part of the timeline's duration and fine.

Better approach: for each dot, add separate tweens at staggered positions computed in JS so it's clearly staggered:

dots.forEach((dot,i)=>{
  tl.to(dot, {y:-16, scale:1.3, backgroundColor:'#a78bfa', duration:0.5, ease:'power2.out'}, i*0.15)
    .to(dot, {y:0, scale:0.75, backgroundColor:'#3f4a6b', duration:0.6, ease:'power2.in'}, i*0.15+0.5)
})

then later repeat at 2.6s offsets. But then the final state of each dot could differ from start → jump. Ensure end state matches initial. With sequence at i*0.15 and i*0.15+0.5, last ends at 4*0.15+1.1 = 1.7. Then second cluster starting at 2.4 + i*0.15, ends at 2.4+0.6+1.1=4.1. Final state y0 scale .75, so initial CSS must be scale .75 → use opacity/idle scale via GSAP set. Set dots initial via gsap.set(dot,{scale:0.75, y:0}).

Also add a slow continuous ring pulse and center core rotation... could add to timeline as keyframes across full 4.8s, e.g. tl.to('.ring', {rotation:360, duration:4.8, ease:'none'}, 0) → seamless. And the center core: tl.to('.core', {scale:1.15, duration:2.4, yoyo:true, repeat:1, ease:'sine.inOut'}, 0) — ends at start.

Also text "Loading" with letter opacity? Not required. Maybe small label with animated dots. Keep it.

Overall timeline duration 4.8s → within 3-6s. Good.

Also add progress indicator using tl.eventCallback('onUpdate',...) to show time? Nice: a thin progress bar. That's optional but helps verify. Add a subtle progress arc/bar under composition.

Let's write code.

For the shapes, use CSS transitions none, will-change transform.

Also blurred glow behind shapes (blobs) that also animate? Could add extra blobs in timeline for depth: tl.to('.glow-a',{x:30,y:-20,scale:1.2,duration:2.4,yoyo:true,repeat:1},0).

Compose DOM:

<div class="stage">
  <div class="glow glow-a"></div>
  <div class="glow glow-b"></div>
  <div class="ring"><span class="ring-dot"></span>? maybe just a dashed ring rotating</div>
  <div class="shapes" id="shapes">
    <div class="shape s1"></div>...
  </div>
  <div class="core"></div>? Core overlaps shapes. Skip core, use ring.
</div>
<div class="dots" id="dots">5 spans</div>
<div class="controls">buttons</div>
<div class="progress"><i></i></div>

Layout: body flex column center, gap.

Ensure visible at 1200x800 viewport. Use vmin-based sizing for stage 320px fixed fine.

Let me write the file.

CSS for shape: position absolute; left 50%; top 50%; translate via GSAP xPercent:-50,yPercent:-50; then x/y offsets. Note: gsap transform order with xPercent and x both applied → fine.

Important: set in JS via gsap.set(shape, {xPercent:-50, yPercent:-50, force3D:true}).

Ring: absolute dashed circle 260px centered, border 1px dashed rgba, rotating.

Progress bar: width 200px, height 3px, fill width updated by onUpdate.

Buttons styling with hover.

Write it.

Timeline construction:

const tl = gsap.timeline({repeat:-1, repeatDelay:0, paused:false, onUpdate: ...});

Actually for restart, tl.restart() works with repeat -1.

Keyframes config array per shape:

const moves = [
 {x:-64,y:-54,scale:1.12,r:34,rot:0},
 ...
]

Use function:

shapes.forEach((el, i)=>{
  const k = keyframes[i]; // array of 5 frames [start, f1, f2, f3, end]
  gsap.set(el, {xPercent:-50,yPercent:-50,x:k[0].x,y:k[0].y,scale:k[0].scale,borderRadius:k[0].r+'px',rotation:k[0].rot});
  for(let f=1; f<k.length; f++){
    tl.to(el, {x:k[f].x,y:k[f].y,scale:k[f].scale,borderRadius:k[f].r+'px',rotation:k[f].rot, duration:1.2, ease:'sine.inOut'}, (f-1)*1.2);
  }
});

Wait border radius px with different corners: keep single value (all corners same) → equal radius. That's fine: circle at 44px, squircle at 10px. Add asymmetry for interest: animate borderRadius string "44px 44px 44px 44px" vs "8px 44px 8px 44px"? GSAP handles string interpolation of complex values typed same structure. I'll try optional; risk of error. Use gsap's ability — GSAP 3 can tween complex strings if number of values match. It should work. But to be safe, I'll use single-value px for shape 1&2, and for shape 3 use asymmetric? Keep simple: single radius all. Interest comes from rotation + scale.

Actually rounded-corner morphing is a required-nice feature: animating border-radius px from 44 to 8 is clearly changing corner radius. Good.

Hmm, radius should be relative: with scale changes the visible radius scales. Fine.

Duration notes: 5 frames → 4 segments × 1.2 = 4.8s.

Dots: 5 spans. Purple accent.

Dot cluster timings: first at t=0.2, second at 2.6? Timeline repeats at 4.8. Ensure second cluster ends by 4.8: start 2.6 + 0.6 + 1.0 → last dot offset: 2.6+4*0.15=3.2 start, +0.5 up +0.6 down = 4.3. OK.

Also idle opacity animation for dots? Set base opacity 0.55, and up state opacity 1, base .55. Final state must equal start: after down tween set opacity back to 0.55. I'll include opacity in down tween.

Buttons: pause/resume toggle text; restart. Also keyboard space? optional.

Progress bar update: tl.progress() from onUpdate.

Let me also disable pointer on shapes.

Now code writing.

Use gsap.to for glows inside tl with yoyo repeat 1 over 2.4 each → total 4.8 ends at start. 

Ring rotation: tl.to('.ring',{rotation:360+? }) — starting rotation 0, animating to 360 over 4.8 ends at 360 → visually seamless but numeric 360 vs 0 at restart: fine visually.

Also ring scale pulse via separate tween? skip.

Write file now.

Initial state looks good. Let me sample mid-animation states. The screenshot shows one dot starting to lift. Let me capture samples at several points using JS eval? The browser tool doesn't have eval. I can use screenshots at different times by taking screenshots after waiting... The browser tool only gives screenshot at current moment. I could use motion action which captures frames.

Let me take motion frames and screenshots at intervals. There's no sleep tool but bash sleep + screenshot.

Shapes moved, dots staggered. Good. Now test pause/resume: click Pause, wait, screenshot twice to verify freeze; then Resume, verify continues; then Restart check start composition.

Note the browser tool doesn't allow evaluating JS, so I'll rely on visuals. Also verify no console errors.

Pause click at (532, 634).

Button changed to "Resume". Now wait 1.5s and screenshot to verify frozen state (progress bar should stay same; shapes same).

Frozen correctly (identical frames). Now resume and check it continues.

Resumed from the paused position (progress bar slightly advanced, shapes moved a bit further). Good.

Now test restart — click Restart, then screenshot quickly to see near-start composition.

Restart returned to initial composition (all shapes circles at frame 0 positions, progress bar reset). Good.

Now check loop continuity: sample near the loop boundary. Timeline duration 4.8s; restart happened, so now sample ~4.6s and ~4.9s to check seamless wraparound. But screenshots are timing-sensitive; hard to hit exactly. Let me instead verify via a headless check? There's no JS eval tool. Alternative: I can trust the design (end frame = start frame by construction). But I can do a quick spot check of dots at a later phase to make sure the second wave works and colors change.

Also I could add a tiny deterministic check using a temporary page? Simplest: load index.html in Chrome headless via node? Not available maybe. Let me just take screenshots at ~2.0s and ~3.6s after restart.

Actually, the loop boundary: shapes' last frame equals first exactly, so with repeat -1 there's no jump. Dots return to base state at 4.28s; nothing after — fine, they stay at base until loop end 4.8s and then next wave starts at 0.18. Ring ends at 360 → equals 0 visually. Glows yoyo end at start. Good.

One issue: dots have periods of ~0.5s of no motion between waves; that's acceptable.

Let me sample mid-loop for visual verification.

Dots are at base here (progress ~55%, between waves ends 1.7 and second starts 2.58 — actually progress bar looks ~0.55 → time 2.64, so second wave just starting but still looks flat; maybe slight). Shapes are mid-transition with rotated rounded corners — good.

One concern: the dots spend a lot of the loop idle, making staggered motion less obvious at random sampling. Perhaps make dot waves continuous / more frequent, e.g. waves at 0.1, 1.2, 2.4, 3.6 to keep them lively. That improves perceived loading. Also dot color change makes it clear.

Also, sampling screenshots can't catch the dot peak easily. Let me increase waves frequency: 4 waves at 0, 1.2, 2.4, 3.6 with each wave ~0.42+0.55 plus stagger 4*0.14=0.56 → wave span 1.53 which overlaps next wave at 1.2. Overlapping is fine (same tween start times on different dots? No—second wave starts on dot 0 at 1.2 while dot 0's first wave ends at 1.53 → overlapping tweens on same property, gsap will handle but may cause a jump due to conflict). Better: stagger 0.1 and shorter: up 0.35, down 0.45 → span 4*0.1+0.8 = 1.2, waves at 0.05, 1.3, 2.55, 3.8 → last ends at 5.0 > 4.8. Hmm.

Use waves at 0.05, 1.25, 2.45, 3.65 with span 1.2 → ends 4.85 slightly over; shrink stagger to 0.08 → span 1.12 → last ends 4.77. Good. And final state equals base so loop is seamless.

Let me update dotWave with stagger param and shorter durations. I'll also verify mid-wave by taking screenshot ~0.5s after reload.

Also dot positions: dot baseline y=0 final. Good.

Edit the dotWave function and calls.

Now the first dot is lifted/lit — staggered wave visible. Let me sample a bit later to see the stagger across more dots and mid-morph.

Excellent: dots show a clear staggered ladder — dot 1 down, dots 2–5 rising, colors lighting up. Shapes at a fully different arrangement with rounded-square corners. 

Now check loop seamlessness. Hard to hit boundary exactly, but I can check with a quick offline computation? The frames are identical by construction; also I want to confirm no flash/pop at 4.8. Let me take screenshots at ~4.55s and ~4.95s relative to reload. Timing via bash sleep is approximate. Instead I could add a temporary test? Simpler: sample around the boundary twice.

I'll reload then sleep 4.55, screenshot; sleep 0.5, screenshot. Frames should be similar (near-end vs near-start frames are identical states, but positions differ slightly by distance from boundary; near-end at 4.55 = frame value just before start, near-start at 0.25 after loop...). Compare: state at 4.55 (0.25 before end) should equal state at ~0.25 after start. So the two screenshots should look very similar.

Let me do that.

Hmm, this is slightly past start (~0.1s), shapes still near start. Good.

To check the boundary, I'd like deterministic sampling. I can add a temporary URL hash feature? Actually I could add a small permanent feature: `?t=4.7` to seek for testing—harmless. But simpler: use bash to run a headless browser? Let me check if node/puppeteer exists.

Actually let me just do the timing test: reload, sleep 4.6, screenshot, sleep 0.45, screenshot.

Careful that screenshots + tool latency (~a few hundred ms) add; timing imprecise. Alternative: pause the timeline near the boundary via two clicks at quick succession? Not precise.

Better idea: temporarily create a test copy test.html that imports same content and seeks timeline to specific times via __loader.timeline.pause(t). But the browser tool only runs index.html. I could temporarily add script that reads location.hash and seeks, then test index.html#4.7 and #0.1, then remove the hash handler... but removing after testing means final file differs. Keep a tiny dev-only hash seek? It's harmless and self-contained; but may be seen as extra. I'll add it temporarily and remove it afterward, accepting that the final file is unchanged in behavior.

Actually a cleaner permanent approach: nothing needed. The construction guarantees equality. But visual confirmation of the loop boundary would be nice. I'll do the temporary hash seek approach quickly.

Actually simpler: I can make the check within index.html using gsap set... no.

Let me check if python/playwright or node chrome available for scripted sampling — that would let me sample arbitrary times reliably.

Playwright is available. I can write a script to load index.html, seek to times, sample states. Let's do it — much more reliable verification.

Use playwright chromium; check browsers installed.

All checks pass: seamless start/end equality, staggered dot waves, pause freezes at exactly 1.5, resume continues from 1.5 → 2.09, restart back near 0. No console errors.

One improvement: dots at t=1.2 and 3.6 are all at base (between waves) — that's a brief 0.2s idle gap which is okay, but a loading animation ideally has continuous dot motion. Waves at 0.06,1.26,2.46,3.66 with span 1.14 → gap ~0.06s. Wait at t=1.2 dots are base because wave 1 ends at 0.06+4*0.08+0.76 = 1.14 and wave 2 starts at 1.26. So idle 1.14→1.26 = 0.12s. Fine.

Let me take a screenshot of the final rendering to confirm visuals, and view /tmp/shot.png (which was taken after restart, near-start composition). Let me also take a mid-wave screenshot via playwright to confirm dot visuals, plus a final full-view screenshot to check centering at 1200x800. Already saw that in browser screenshots.

Let me look at shot.png.

Looks good. One nit: the composition sits slightly high relative to the viewport? It spans y≈140-655, fairly centered. Fine.

Final check: no external requests. The only script src is gsap.min.js. Good. Also confirm index.html present.

One more: keyboard space handler — after clicking a button, focus on button, so space triggers button; body check handles otherwise. Fine.

Done. Report checks.