We need answer by creating index.html in current dir. Need inspect directory. Need use gsap.min.js exact script src. Need self-contained except preprovided gsap. No external. Need build single page app. Need maybe read? Let's list.

Need create index.html. Need maybe inspect gsap version? not necessary. Need ensure no external resources. Could use SVG with blobs, CSS. Use GSAP timeline looping with morphing rounded shapes and staggered row of dots. "single-page web app" maybe include title/instructions. Need write all into one self-contained file. Use <script src="gsap.min.js"></script> then inline script. Need maybe use SVG paths morph. GSAP core doesn't include MorphSVGPlugin (commercial) unless included? We can't assume. Need morphing rounded shapes using CSS/SVG path via JS maybe animate d attribute manually? But "using gsap global". Need create shapes that morph by changing path d. GSAP can tween custom object property that updates path d. Need maybe use viewBox 0 0 600 300. Dark background. Animated loading sequence: central morphing blob shapes maybe three translucent blobs, row of dots. Use GSAP timeline repeat -1. Need smooth easing.

Need ensure works standalone. Could create HTML with CSS in style. Use SVG with defs gradients/filters. Create blobs as path elements with id blob1 etc. JS defines path generator for blob with amplitude variations. Animate an array of points? Need "morphing rounded shapes": Use cubic Bezier closed paths with varying control points. To keep smooth and no external plugin, define a set of path strings for shapes, and tween custom object values between arrays. GSAP can tween object properties with onUpdate. But tweening array property? We can create object {shape:0}; then gsap.to(obj, {shape:1, duration, ease, onUpdate:...}). Or use keyframes with arrays? GSAP can interpolate array values? Better create shapeDefinitions arrays of points and in update interpolate between arrays. Timeline can animate object phase from 0 to N? But if shapeDefs array length 4, path = interpolate shapeDefs[floor] and next with t. Need path generator with points [x,y] around center. Use cubic Bezier with radius. Need maybe morph shape not via built-in plugin but custom.

Need dots row: SVG circles or divs. Use staggered y/scale/opacity on timeline. Need orchestrated on same GSAP timeline with loops. Could include progress indicator? Single page app.

Need code. Need maybe use CSS animate? No, GSAP timeline. Need maybe include "Loading..." and accessible aria. Use prefers-reduced-motion? Could respect by reducing timeline. But user asks animation. We can include fallback. Need no external. Use gsap script. Need index.html present. Need maybe include meta viewport. Need dark background.

Let's craft robust index. Need maybe test? Could open? We'll just write. Need maybe no network. Use inline script after gsap. Since gsap.min.js present. Need maybe if gsap missing? Could include graceful message? But user says present. Need exact filename in script src: "gsap.min.js". Good.

Let's think about SVG path generator. Need morphing rounded shapes. There is issue with path d arrays with cubic commands. We can create paths with 8 lobes. For each angle, radius = base + sum sin/cos. x= cx + r cos theta, y=cy + r sin theta. For closed path, use C command between points: M x0 y0 C x0+? x? x1-? y1-? x1 y1 ... Z. Need calculate control points using tangent. Simpler: use quadratic curves: M x0 y0 Q cpx cpy x1 y1 ... Z. This yields smooth curves if control points are intersections of tangents. But for blob morph, maybe okay. Could use cubic with control points computed. Need smooth closed.

Let's implement pathFromPoints(points):
- n = points.length
- For each point p_i, previous p_prev, next p_next.
- Compute tangent at p_i as normalized (p_next - p_prev)
- Control out for segment i->i+1 = p_i + tangent * smoothness (maybe distance to next * 0.28)
- Control in for next = p_{i+1} - tangent_next * smoothnessNext
- path = `M p0 Q?` Wait cubic: M p0 C out0 in1 p1 C out1 in2 p2 ... Z.
This gives smooth. For closed path, tangent at p_i normalized p_next-p_prev. Good.
But for star-ish shape, tangent between prev and next can be weird if points uneven. Fine.

Need define shapeDefs maybe 5 arrays of points with different radii. Use center 300, 150, base 90, 11 lobes. Use deterministic sin. Let's craft with JS.

Need maybe shape overlays: three paths with gradients and blur filters. Use <path id="blobA" fill="url(#gradA)"> etc. Then animate opacity and scale maybe. Need maybe path d update for all shapes. Use custom morph object:
const blob = {phase:0};
function interpolateShape(a,b,t,ease){...}
function morphTo(index,duration,ease) { gsap.to(blob,{phase:index+1,duration,ease,onUpdate:()=>{const local=gsap.utils.wrap(0,shapeDefs.length,blob.phase); const i=Math.floor(local); const t=local-i; const pts=lerpPoints(shapeDefs[i], shapeDefs[wrap(i+1)], t); path.setAttribute('d', pathFromPoints(pts));}})}
Timeline:
const tl=gsap.timeline({repeat:-1, defaults:{ease:"power2.inOut"}});
tl.to(blob,{phase:1,duration:1.25,ease:"sine.inOut", onUpdate:updatePath}, ...)
  .to(blob,{phase:2,duration:1.15,ease:"sine.inOut", onUpdate:updatePath}, "-=0.25")? But if same property overlapping with onUpdate. Need path update during all tween. Could use keyframes with onUpdate? GSAP keyframes:
tl.to(blob,{
  keyframes:[
   {phase:1,duration:1.2,ease:"sine.inOut"},
   {phase:2,duration:1.1,ease:"sine.inOut"},
   {phase:3,duration:1.4,ease:"sine.inOut"},
   {phase:4,duration:1.2,ease:"sine.inOut"}
  ],
  onUpdate:updatePath
});
Since phase from 0 to 4. But when phase > 3 wrap to 0. Need update path. At end phase=4 local=0 (wrap(0,4,4)=0), path shapeDefs[0]. Good. Then timeline repeats from phase 4 to 1? Actually repeat immediately starts same tween? It might jump from 4 to 0? Wait keyframes last ends phase=4, timeline repeats at 0? For a tween with keyframes starting at current phase? At repeat, phase is 4, keyframes from 4 to 1? Hmm keyframes first segment phase:1 from current 4, so it would morph backwards from shapeDefs[0] to shapeDefs[1] through wrap? local values 4->1 => wrap 0->1, actually forward? That's okay? But maybe discontinuity? At phase 4 local 0; first segment phase 1 local 1, so path morphs from 0 to 1. Good. At end phase 4 again. Smooth. But timeline labels maybe no issue.
Need maybe multiple shapes with phase offsets? Could have three blob elements with different shapeDefs? Or same path with phase offset? We can have three paths:
- big central blob, phase 0
- inner blob, phase maybe 1.5
- small blob, phase 2.5.
Need update multiple morph objects. Use createMorph(element, defs, initialPhase). Each has phase. But for timeline, one object maybe phase 4; other objects phase offset. In onUpdate update all. But if blobB phase = blobA.phase + 0.7; local wrap. Need morphs.

But if we use same path d for all shapes maybe shapeDefs differ by scale? We can set transform origin center and scale via SVG transform. Need group.
Maybe central: path blobA with big. inner: path blobB with smaller defs. back: path blobC. Need set d via updatePath.

Dots: create 9 circles in SVG row y=250? Need staggered row of dots orchestrated on GSAP timeline. Use circles with class dot. Timeline:
tl.to(".dot", {scale:0.65, opacity:.25, duration:.18, ease:"power1.out", stagger:{each:0.11, from:"center", repeat:-1, yoyo:true}}, 0)
But if timeline already has morphing tween and dots tween, both repeat. Need maybe timeline repeat -1. Could set `repeat: -1` on timeline. But if dot tween has repeat:-1 and yoyo:true inside repeating timeline, may be too much. Better:
const tl = gsap.timeline({repeat:-1, defaults:{ease:"power2.inOut"}});
tl.to(blobA,{phase:4,duration:5.2,keyframes... onUpdate:updateAll, ease:"none"},0)
.to(".dot", {scale:1.25, opacity:1, y:-10, duration:.38, stagger:{each:.09, from:"center", repeat:-1, yoyo:true}, ease:"power3.inOut"},0.2)
.to(".dot", {scale:.75, opacity:.45, y:0, duration:.42, stagger:{each:.09, from:"edges", repeat:-1, yoyo:true}, ease:"power2.inOut"},0.2)
But multiple tweens on same property with repeats inside timeline. Maybe simpler:
tl.to(".dot", {
 scale: 1.18,
 opacity:1,
 y:-12,
 duration:.38,
 ease:"power3.inOut",
 stagger:{each:.08, from:"center", repeat:-1, yoyo:true}
}, 0.1);
tl.to(".dot", {
 scale:.75,
 opacity:.45,
 y:0,
 duration:.42,
 ease:"power2.inOut",
 stagger:{each:.08, from:"edges", repeat:-1, yoyo:true}
}, 0.1);
But if timeline repeats after 5.2, dots with repeat -1 yoyo continue independent, not exactly orchestrated? They are on timeline but repeat indefinitely. Since timeline repeats, okay.

Alternative define dot keyframes on timeline:
const dotKeys = Array.from({length:9}, (_, i)=> ({scale: i%2?1.15:.75, opacity: i%2?1:.45, y: i%2?-10:0, duration:.15}));
But staggered row more natural.

Could create a timeline with labels:
tl.to(".dot", {scale:1.18, opacity:1, y:-12, duration:.16, stagger:{each:.09, from:"center"}, ease:"power3.out"}, 0.1)
 .to(".dot", {scale:.62, opacity:.35, y:0, duration:.22, stagger:{each:.09, from:"edges"}, ease:"power2.inOut"}, 0.7)
 .to(".dot", {scale:1.18, opacity:1, y:-12, duration:.16, stagger:{each:.09, from:"center"}, ease:"power3.out"}, 1.3)
 .to(".dot", {scale:.75, opacity:.55, y:0, duration:.5, stagger:{each:.08, from:"edges"}, ease:"power2.inOut"}, 1.8)
 .to(".dot", {scale:1.18, opacity:1, y:-12, duration:.16, stagger:{each:.09, from:"center"}, ease:"power3.out"}, 2.4)
 .to(".dot", {scale:.75, opacity:.55, y:0, duration:.9, stagger:{each:.08, from:"edges"}, ease:"power2.inOut"}, 2.8)
 .to(".dot", {scale:1.18, opacity:1, y:-12, duration:.16, stagger:{each:.09, from:"center"}, ease:"power3.out"}, 3.7)
 .to(".dot", {scale:.75, opacity:.55, y:0, duration:1.5, stagger:{each:.08, from:"edges"}, ease:"power2.inOut"}, 4.0)
tl.repeat(-1). Works. But dots will reset every 5.5s with timeline, not yoyo. Good.

Need morphing shape timeline maybe use keyframes:
tl.to(morphA, {phase:4, duration:5.2, keyframes:[...], ease:"none", onUpdate:updateAll},0)
But if `morphA` has phase property, onUpdate updates all. Need maybe use `phase: 4` keyframes. In GSAP, if keyframes array, duration total? I think `duration` applies to total duration, keyframe durations relative? Actually keyframes can have duration; if duration and keyframes duration maybe total? Need not rely. Could use individual to tweens:
tl.to(morphA,{phase:1,duration:1.15,ease:"sine.inOut",onUpdate:updateAll},0)
 .to(morphA,{phase:2,duration:1.05,ease:"sine.inOut",onUpdate:updateAll},"-=0.15")
 .to(morphA,{phase:3,duration:1.35,ease:"sine.inOut",onUpdate:updateAll},"-=0.1")
 .to(morphA,{phase:4,duration:1.25,ease:"sine.inOut",onUpdate:updateAll},"-=0.15")
This overlaps shapes. At end time maybe 1.15+0.9+1.25+1.1? Let's compute labels: first 0-1.15; second at 1.0-1.95; third at 1.85-3.2; fourth at 3.05-4.3. Total 4.3. Fine. Then timeline repeats. But when repeat starts, morphA phase jumps from 4 to 1? Hmm timeline tween starts at phase 4 and ends phase 1 (local 0->1), okay. But morphB phase offset? morphB phase starts maybe 1.5 and ends 2.5? It will wrap. Good.

Need maybe use `onUpdate:updateAll` each tween. It will update all morphs. Good.

Need maybe central shape path d uses same shapeDefs but morphB with shapeDefs shifted. Could create `defsA`, `defsB`, `defsC` with different seed. Use `makeDefs(seed, base, lobes)`.

Need maybe add `filter blur` for glow. CSS. Need maybe use `mix-blend-mode: screen`? In SVG can use `filter="url(#glow)"`.

Need maybe add background grid/stars with CSS radial gradients. No external.

Need maybe include `aria-live`? Loading sequence.

Need maybe use `body::before` for vignette.

Need maybe use `button`? Single-page web app maybe not just animation. Could include "Loading" card. But user asks create loading sequence. We can have app shell with centered stage. Maybe enough.

Need perhaps "morphing rounded shapes" not just one path? Could include three morphing blobs. Dots row. Good.

Need maybe include `gsap.config({nullTargetWarn:false})`? no.

Need maybe if GSAP not loaded, display message. But no external. Could include `<script> if (!window.gsap) ...`? But if gsap script missing, inline still runs. Need not.

Need maybe create file. Need final concise.

Let's write index.html. Need ensure `script src="gsap.min.js"` exact. Since current directory. No external. Use no network. Need maybe if local file opened, script loads.

Let's craft code carefully.

Potential issue with GSAP timeline: `tl.to(morphA, {phase: 1, duration: 1.15, ease:"sine.inOut", onUpdate:updateAll}, 0)` and next `tl.to(morphA, {phase: 2, duration:1.05, ease:"sine.inOut", onUpdate:updateAll}, "-=0.15")`. When second starts at 1.0, morphA current phase ~0.87, not 1, so smooth. Good.
At end morphA phase=4, repeat jumps to start tween from phase 4 to phase 1, local wraps 0->1. Fine. At exact repeat, path shapeDefs[0], then morphs to shapeDefs[1]. Good.

Need create morph objects:
const morphA = {phase: 0};
const morphB = {phase: 1.35};
const morphC = {phase: 2.65};
function updateMorph(morph, defs, element) {
 const local = gsap.utils.wrap(0, defs.length, morph.phase);
 const i = Math.floor(local);
 const next = (i+1)%defs.length;
 const t = local - i;
 const pts = interpolatePoints(defs[i], defs[next], t);
 element.setAttribute("d", pathFromPoints(pts));
}
function updateAll() { ... }
Need `gsap.utils.wrap` available. Yes.

Need generate shape defs:
function shapeDefs(seed, base, lobes, amp) {
 const arr = [];
 for s=0; s<4; s++ arr.push(makePoints(seed + s*31, base + s*4, lobes + (s%2), amp*(1 - s*0.04)));
 return arr;
}
function makePoints(seed, base, lobes, amp) {
 const pts = [];
 for (let i=0;i<lobes;i++){
   const a = (i/lobes)*Math.PI*2;
   const r = base + amp*(
      Math.sin(a*3 + seed*0.37) +
      0.55*Math.sin(a*5 - seed*0.21) +
      0.35*Math.cos(a*2 + seed*0.63)
   );
   pts.push([cx + Math.cos(a)*r, cy + Math.sin(a)*r]);
 }
 return pts;
}
Need ensure r positive. base 110, amp 30. good.
Maybe shapeDefs length 4. Good.

Path from points:
function pathFromPoints(points) {
 const n=points.length;
 let d=`M ${round(points[0][0])} ${round(points[0][1])}`;
 for (let i=0;i<n;i++){
   const p0=points[i], p1=points[(i+1)%n];
   const pPrev=points[(i-1+n)%n];
   const pNext=points[(i+2)%n];
   const t0=normalize([p1[0]-pPrev[0], p1[1]-pPrev[1]])? Wait tangent at p0 should be p1 - pPrev. Use p1 and pPrev. tangent at p1 should be pNext - p0.
   const dist = hypot(p1-p0);
   const out = [p0[0]+t0[0]*dist*0.32, p0[1]+t0[1]*dist*0.32];
   const t1=normalize([pNext[0]-p0[0], pNext[1]-p0[1]]);
   const distPrev = hypot(p1-p0); same dist
   const inn = [p1[0]-t1[0]*dist*0.32, p1[1]-t1[1]*dist*0.32];
   d += ` C ${round(out[0])} ${round(out[1])} ${round(inn[0])} ${round(inn[1])} ${round(p1[0])} ${round(p1[1])}`;
 }
 return d + " Z";
}
Potential issue tangent at p0 if p1-pPrev zero? no.

Need maybe set `vector-effect: non-scaling-stroke` for dots? not needed.

Need dot row. Use JS create circles:
const dotGroup = document.getElementById('dots');
const dots = [];
for (let i=0; i<9; i++) { const c = document.createElementNS(svgNS,'circle'); c.setAttribute('cx', 300 + (i-4)*34); c.setAttribute('cy', 235); c.setAttribute('r', 7); c.classList.add('dot'); c.style.transformOrigin = `${cx}px ${cy}px`; dotGroup.appendChild(c); dots.push(c);}
Could set initial transform? CSS `.dot { transform-box: fill-box; transform-origin:center; opacity:.45; }`.
Timeline for dots:
tl.to(".dot", {scale:1.25, y:-12, opacity:1, duration:.18, ease:"power3.out", stagger:{each:.075, from:"center"}}, 0.2)
 .to(".dot", {scale:.68, y:0, opacity:.38, duration:.28, ease:"power2.inOut", stagger:{each:.075, from:"edges"}}, 0.75)
 .to(".dot", {scale:1.22, y:-10, opacity:1, duration:.16, ease:"power3.out", stagger:{each:.075, from:"center"}}, 1.35)
 .to(".dot", {scale:.72, y:0, opacity:.42, duration:.55, ease:"power2.inOut", stagger:{each:.075, from:"edges"}}, 1.75)
 .to(".dot", {scale:1.22, y:-10, opacity:1, duration:.16, ease:"power3.out", stagger:{each:.075, from:"center"}}, 2.55)
 .to(".dot", {scale:.72, y:0, opacity:.42, duration:.85, ease:"power2.inOut", stagger:{each:.075, from:"edges"}}, 2.95)
 .to(".dot", {scale:1.22, y:-10, opacity:1, duration:.16, ease:"power3.out", stagger:{each:.075, from:"center"}}, 4.05)
 .to(".dot", {scale:.72, y:0, opacity:.42, duration:1.05, ease:"power2.inOut", stagger:{each:.075, from:"edges"}}, 4.45);
Need timeline total maybe 5.5. Morph tweens total 4.3. Dots fill. Could include morph in 5.2. Maybe extend with final hold? Could use morph keyframes total 5.4:
tl.to(morphA,{phase:1,duration:1.2,...},0)
 .to(morphA,{phase:2,duration:1.15,...}, "-=0.15") // start 1.05 end 2.2
 .to(morphA,{phase:3,duration:1.35,...}, "-=0.15") // start 2.05 end 3.4
 .to(morphA,{phase:4,duration:1.25,...}, "-=0.10") // start 3.3 end 4.55
 .to(morphA,{phase:4,duration:0.9, ease:"none", onUpdate:updateAll}, 4.55) hold? But phase same, onUpdate no need but path stable. Timeline total 5.45.
Dots last ends 5.5. Good.
Need maybe timeline repeat -1. At repeat, morph phase 4->1, local 0->1, smooth. Good.

Need maybe animate group rotation? Could use timeline `tl.to("#orbital", {rotation:8, transformOrigin:"50% 50%", duration:5.4, ease:"none", repeat:-1, yoyo:true},0)`? But "morphing rounded shapes" maybe enough. Could add subtle rotation of blob group. But if path morph and group rotation, okay. Need maybe not overdo.

Need maybe add "loading sequence" text with animated ellipsis. Use CSS? Could animate with GSAP too. But user specifically GSAP timeline. Could include "Loading" text and dots. Use CSS for ellipsis? Better use GSAP timeline for text:
tl.to(".loadingText", {x:4, duration:.25, ease:"power1.out", yoyo:true, repeat:-1},0)
But timeline repeat. Not necessary.
Need maybe use CSS only for background.

Potential issue with `filter` blur and `feGaussianBlur` maybe okay. Need maybe heavy but fine.
Need maybe ensure `id="blobFront"` path has fill. In HTML:
<svg id="loaderSvg" viewBox="0 0 600 320" role="img" aria-label="Animated loading sequence">
 <defs>
  <radialGradient id="gradA" ...>
...
 </defs>
 <g id="blobGroup" filter="url(#softGlow)">
  <path id="blobBack" ... />
  <path id="blobMid" ... />
  <path id="blobFront" ... />
 </g>
 <g id="dots"></g>
</svg>
Need set path d initially by JS. But if JS disabled, empty. Fine.
Need maybe use `transform-origin` for SVG groups? CSS `#blobGroup { transform-origin: 300px 150px; transform-box: view-box; }` In SVG CSS transform-origin with view-box maybe okay. Or use GSAP `transformOrigin:"50% 50%"`.
Timeline:
tl.to("#blobGroup", {rotation: 4, duration: 5.4, ease:"none", yoyo:true, repeat:-1}, 0)
Maybe if transformOrigin not set, GSAP sets? `tl.to("#blobGroup", {rotation:5, transformOrigin:"50% 50%", ...})`.

Need maybe use `will-change: transform`.

Need maybe create `const svg = document.getElementById("loaderSvg"); const NS = "http://www.w3.org/2000/svg";` etc.

Need maybe respect reduced motion:
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduceMotion) {
  updateAll();
  gsap.set(".dot", {scale:1, opacity:.8, y:0});
} else { build timeline ... }
But user wants animation. Could include reduced motion optional. Good. But maybe if reduced motion, no animation. Fine.

Need maybe avoid network. Good.

Need maybe include `window.addEventListener('load', init);` Since inline script after SVG and after gsap, DOM loaded enough. Could call init immediately.

Need maybe include comments? Fine.

Let's draft full HTML. Need maybe include `<title>GSAP Loading Sequence</title>`.

Let's ensure no external resources:
- no fonts external. Use system font.
- no images.

Need maybe maybe use CSS "backdrop-filter" okay.

Need maybe use `background: radial-gradient...` no network.

Need maybe make app responsive:
.card width min(92vw, 760px). svg width 100%, height auto. Dots positions scale with viewBox. Good.

Need maybe if window resized, SVG viewBox fixed. Good.

Need maybe use `preserveAspectRatio`.

Potential issue: `document.createElementNS(NS, "circle")` and `classList.add("dot")` works for SVG? Yes.

Need maybe `cx` values. Dot y maybe 250. Use viewBox 0 0 600 320. Dots at 248. Dot row below blobs. Loading text at 286? Wait SVG viewBox height 320, text maybe in HTML. Dots at 244. Good.

Maybe create HTML text below SVG:
<div class="copy">
  <h1>Loading</h1><p>Preparing your experience</p>
</div>
But dots inside SVG. Could include text outside. Need maybe "single-page web app" with loading. Good.

Need maybe `aria-busy="true"`.
Need maybe `role="status"`.
Need maybe no button.

Let's think if "morphing rounded shapes" maybe using pathFromPoints but not actual morph plugin. Need maybe "morphing" visible. Good.
Need maybe "staggered row of dots orchestrated on a GSAP timeline" yes.

Need maybe include `gsap.registerPlugin`? No plugin. Need no MorphSVGPlugin.

Potential issue with GSAP `transform` on SVG circles: `.dot` scale/y uses GSAP transform. For SVG elements, transform origin default center? Need set style transformOrigin center. `gsap.set(".dot", { transformOrigin: "50% 50%", transformBox: "fill-box" });` GSAP property transformBox? It can set CSS. Could set `transformOrigin:"50% 50%"`. For SVG, transformBox may not work? GSAP handles. Alternatively set each circle's transform attribute with matrix. GSAP does. Good.
Need maybe `cx/cy` fixed, y transform moves.

Need maybe use `gsap.set("#blobGroup", { transformOrigin:"50% 50%", transformBox:"view-box" });`
Could set CSS `#blobGroup { transform-origin: 300px 150px; }` But GSAP sets.

Need maybe `path` d initial. In updateAll, after DOM. Good.
Need maybe `round` function returns number.toFixed(2) maybe string. Fine.

Need maybe create defs with seed and `base` etc. Need ensure path defs not too large. Good.

Let's maybe implement:
function makeShapeSet(seed, base, lobes, amp) {
  const sets = [];
  for (let k=0;k<4;k++){
    const phase = k/4 * Math.PI*2;
    const pts = [];
    for (let i=0;i<lobes;i++){
      const angle = (i/lobes)*Math.PI*2;
      const wave =
        Math.sin(angle*3 + seed + phase) +
        0.62 * Math.sin(angle*5 - seed*0.7 + phase*0.4) +
        0.38 * Math.cos(angle*2 + seed*1.3 - phase);
      const r = base + wave * amp;
      pts.push([cx + Math.cos(angle)*r, cy + Math.sin(angle)*r]);
    }
    sets.push(pts);
  }
  return sets;
}
Maybe shapeDefsA = makeShapeSet(0.3, 105, 11, 26), B = makeShapeSet(2.1, 78, 9, 20), C = makeShapeSet(4.2, 58, 10, 15).
Need maybe `lobes` maybe 11 and 13. Good.

Need maybe pathFromPoints control point `smoothness=0.32`. Good.

Need maybe central shapes:
- blobBack at opacity .35, fill gradBack, filter maybe.
- blobMid at opacity .55
- blobFront at opacity .85
Could set GSAP animate opacities maybe:
tl.to("#blobBack", {opacity:0.22, duration:2.7, ease:"sine.inOut", yoyo:true, repeat:-1},0)
tl.to("#blobMid", {opacity:0.62, scale:1.04, duration:2.7, ease:"sine.inOut", yoyo:true, repeat:-1},0.2)
tl.to("#blobFront", {opacity:0.88, scale:1, duration:2.7, ease:"sine.inOut", yoyo:true, repeat:-1},0.4)
But if timeline repeats, these tweens repeat -1 independent? They are on timeline with repeat, okay. But if each tween has repeat -1 and yoyo, timeline repeats maybe they continue. Could avoid because timeline repeats. Need no repeat in each.
tl.to("#blobBack", {opacity:0.28, duration:2.7, ease:"sine.inOut", yoyo:true},0)
tl.to("#blobMid", {opacity:0.58, scale:1.04, duration:2.7, ease:"sine.inOut", yoyo:true},0.2)
tl.to("#blobFront", {opacity:0.86, scale:1, duration:2.7, ease:"sine.inOut", yoyo:true},0.4)
Since timeline repeat -1, yoyo true within 2.7 then repeat? Wait yoyo true means tween goes 0.28->0.42 then back? Timeline repeats after 2.7? Actually duration 2.7, yoyo true means total tween duration 5.4? In GSAP, yoyo true doubles duration? It alternates within tween. If timeline repeats after 5.4? Hmm yoyo affects tween's totalDuration. It will last 5.4. Could complicate. Avoid yoyo. Use simple:
tl.to("#blobBack", {opacity:0.25, scale:1.06, duration:2.7, ease:"sine.inOut"},0)
 .to("#blobBack", {opacity:0.42, scale:0.98, duration:2.7, ease:"sine.inOut"},2.7)
This within timeline. Similar.
But timeline already has morph. Maybe enough.

Need maybe `transformOrigin` for paths:
gsap.set("#blobGroup", { transformOrigin: "50% 50%" });
tl.to("#blobGroup", { rotation: 3, duration: 5.4, ease: "none", yoyo: true }, 0);
No need opacity.

Need maybe `tl.to("#blobFront", {scale:1.08, duration:2.7, ease:"sine.inOut"},0)` and back. But scale property on individual path may affect transform origin. Set transformOrigin center. Fine.

Need maybe create `tl.to("#blobFront", {scale:1.05, duration:2.7, ease:"sine.inOut"},0); tl.to("#blobFront",{scale:0.98,duration:2.7,ease:"sine.inOut"},2.7);`
`#blobBack` inverse maybe. Good.
Need maybe `#blobMid` shift x? not needed.

Need maybe timeline total: morph ends 5.45, dots ends 5.5, group rotation 5.5. Good.

Need maybe if `repeat:-1`, timeline restarts. Dot tweens reset at repeat. Good.

Need maybe `tl.eventCallback("onRepeat", updateAll);` maybe no need. But to ensure path at start. Could include `onRepeat: updateAll`.
Need maybe `tl.play();`.

Need maybe if reduced motion, `gsap.set(".dot", {scale:1, y:0, opacity:.8}); gsap.set("#blobGroup",{rotation:0}); updateAll();` Good.

Need maybe no external. Good.

Let's write file.

Need maybe verify file present and maybe no external. Use grep? Need maybe maybe check script tag.