We need to create a single-page web app (index.html) that uses pre-provided gsap.min.js (global gsap). Must be self-contained file named index.html, with CSS in a style tag, JS in a script tag. No external resources, CDN. It should load each with plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top of it: gsap.min.js. That suggests that there is a pre-provided gsap.min.js file (probably named gsap.min.js). We need to include it using a script tag src="gsap.min.js". We can then write our own script code that uses global gsap.

Create a dark background, morphing rounded shapes and a staggered row of dots orchestrated on a GSAP timeline with smooth easing. Looping animation.

So we will write HTML skeleton, style body with dark background, create some SVG shapes that morph perhaps using <path> with morphSVG? But GSAP can only morph numbers? Actually GSAP can morph SVG shapes via plugin MorphSVGPlugin (maybe not preloaded). But we may simulate "morphing rounded shapes" using CSS transitions? However requirement: use GSAP timeline to orchestrate.

Simplify: Create multiple <circle> or <div class="dot"> elements arranged in a row, with stagger. Also create a rounded shape perhaps an SVG circle with morphing path maybe using <svg> with <path> and animate its 'd' attribute via GSAP's MorphSVGPlugin? That plugin might not be loaded; but perhaps GSAP can animate morphing using GSAP's built-in morph capability? Actually GSAP doesn't morph path data out of the box; you need MorphSVGPlugin. But maybe the pre-provided file includes it? The user said "use the pre-provided gsap.min.js (global gsap)". So only gsap.min.js is available. But we can still animate 'd' attribute using CSS? However better to use morphing via path interpolation using the 'MorphSVGPlugin' maybe not loaded.

The requirement though just states "morphing rounded shapes". Maybe we can create an SVG shape that expands/shrinks using border-radius? Could morph by using path that approximates shape changes.

Simplify: Use two overlapping circles, one expands into another shape using morph via path with attribute interpolation. Suppose we have an SVG with two circles and morph them via path length changes.

Simplify further: Use an animated "rounded rectangle" that morphs to a circle and back. Could represent via <rect> with Rx/Ry but morphing not trivial.

Alternatively, use an SVG <path> that describes a rounded shape. Then animate its 'd' attribute from one shape to another using GSAP's to() tween. That should work if we just set attribute values.

But we need to morph rounded shapes and a staggered row of dots on a dark background using GSAP timeline with smooth easing, looping.

We can create one SVG morphing shape that loops between different rounded shapes (e.g., from a circle to a rounded square or something). And a row of dots that fade in/out with stagger.

Implementation plan:

- HTML: <div id="container"> with background dark (e.g., #111).
- Inside, include <svg id="shape" width="100" height="100" viewBox="0 0 100 100"> with a <path id="morphPath" ...> that initially draws a rounded shape (e.g., a circle approximated with a path). Then we will morph to another path using GSAP's to().

But we need two shapes: shape1 and shape2 maybe we can tween between them and back.

We can also animate its radius perhaps using morph from circle to ellipse and back.

Alternatively, morph between a circle and a rounded rectangle path.

We can predefine path data for shapes:

Shape1: circle: "M50,50 a40,40 0 1 0 0.01,0" (approx). Maybe simpler: "M10,50 a40,40 0 1 0 80,0 a40,40 0 1 0 -80,0".

But perhaps easiest is to use <circle> element inside SVG and morph to another circle with different radius? That wouldn't be morphing path but just radius change; could animate radius via cx, cy? Not needed.

Better: Use <path> with "d" attribute describing a rounded shape, and use GSAP to animate "d" to another path.

Ok.

Simplify: Create a <svg> with width/height 200 200, with <path class="shape" id="morphPath" d="M20,60 Q50,20 80,60 L20,60 Z"/> maybe a rounded triangle shape. Then morph to another path with different shape.

But perhaps it's okay to morph between two similar rounded rectangles.

I think it's okay to simply morph between a "capsule" shape and an "ellipse". Example:

Path1: "M10,100 Q50,0 90,100 L10,100 Z" (capsule shape horizontally). Path2: "M30,70 A40,40 0 1 0 70,70 A40,40 0 1 0 30,70 Z" (ellipse). Might be too complex.

For simplicity, we can just morph a circle path to an oval path using "M50,30 a30,30 0 1 0 0.01,0" to "M50,70 a30,30 0 1 0 0.01,0"? That's not much difference.

Better: Use two capsules shapes: Path A: "M20,80 Q60,20 100,80 L20,80 Z" representing a horizontally stretched shape. Path B: "M20,55 Q60,20 100,55 L20,55 Z". Actually they are different y positions.

We can morph between two different "y" positions for a rounded rectangle shape.

Anyway, the requirement is somewhat open ended; we just need morphing shapes and staggered row of dots orchestrated on GSAP timeline with smooth easing, looping.

Therefore, to deliver answer, we need to write index.html containing:

- <script src="gsap.min.js"></script> load.
- Then <script> code that sets up GSAP timeline with morphing shape and staggered dots.

We must embed CSS in <style> for dark background and layout.

All code in one file.

Thus answer: generate index.html content.

We'll include some shapes:

- An SVG morphing shape (capsule shape) with id="morphShape". Set initial d attribute to shape1; then use gsap.to() to morph to shape2 in timeline, then back, loop.

- A row of circles (divs) perhaps with class="dot" positioned horizontally with CSS flex and animate their opacity/scale using gsap.stagger.

Wrap all in timeline that loops infinitely using repeat: -1 and yoyo:true perhaps.

Also use smooth easing (power1.out etc). Provide timeline.

Implementation:

HTML body:

<div class="container">
  <svg class="shape-wrapper" viewBox="0 0 120 120" width="200" height="200">
    <path id="morphPath" d="M20,80 Q60,20 100,80 L20,80 Z"/>
  </svg>
  <div class="dots">
    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
  </div>
</div>

CSS: set .container background: #111; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; overflow:hidden;.

Make .shape-wrapper position:absolute maybe with left:50%; transform:translateX(-50%); top: 40%;.

Make .dot class: width:8px; height:8px; background:#fff; border-radius:50%; margin:0 4px; initial transform:scale(0); animate.

JS:

gsap.registerPlugin? Not needed.

Let timeline = gsap.timeline({repeat:-1, defaults:{ease:"power1.out"}});

Add to timeline: 
gsap.fromTo('#morphPath', {d:'M20,80 Q60,20 100,80 L20,80 Z'}, {d:'M20,30 Q60,70 100,30 L20,30 Z', duration:1.5});
gsap.fromTo('.dot', {scale:0, opacity:0}, {scale:1, opacity:1, duration:0.5, stagger:0.1});

But to morph the shape we need to morph the path data attribute; we can animate the path's "d" attribute using gsap.to('#morphPath', {d:'...', duration:1.5, ease:'power2.out'}); But that will only change once; to loop we need timeline.

So timeline.add(gsap.to('#morphPath', {d:'M20,30 Q60,70 100,30 L20,30 Z', duration:1.5})); Then add tween back: timeline.to('#morphPath', {d:'M20,80 Q60,20 100,80 L20,80 Z', duration:1.5}); Actually timeline automatically repeats if we set repeat:-1 and yoyo? But we want shape to morph back and forth.

Simpler: use timeline.to('#morphPath', {d:'M20,30 ...', duration:1.5, ease:'power2.out'}); timeline.to('#morphPath', {d:'M20,80 ...', duration:1.5, ease:'power2.out'}); timeline.gotoAndPlay(0); but goBack? Could set timeline.add(gsap.to(...)).add(gsap.to(...)); Then timeline.set({repeat:-1}); but that will repeat the entire sequence (forward then backward?). Either way shape morphs forward then back, giving a ping-pong effect.

We could use yoyo:true: timeline.add(gsap.to('#morphPath', {d:'M20,30 ...', duration:1.5, ease:'power2.out'})); timeline.to('#morphPath', {d:'M20,80 ...', duration:1.5, ease:'power2.out'}, 0); Not exactly.

Actually, to have morph back and forth, timeline can include forward tween then backward tween with direction reversed? Perhaps easier: use .to('#morphPath', {d:'M20,30 ...', duration:1.5, yoyo:true, repeat:-1})? But yoyo only works within a single tween; we can use a tween that morphs to shape2 and back using yoyo:true? Actually we can set the tween from shape1 to shape2 with yoyo:true and repeat:-1, that will reverse each iteration, creating morph forward then back automatically. Yes! If we animate from shape1 to shape2 with yoyo:true and repeat:-1, GSAP will morph from shape1 to shape2, then back to shape1, repeat. So we can just have one tween with yoyo:true, repeat:-1.

Thus timeline can just contain that tween.

Add also stagger animation for dots.

But need to combine with timeline? We can put both into a main timeline.

e.g., const tl = gsap.timeline({repeat:-1, defaults:{ease:"power1.out"}}); tl.to('#morphPath', {d:'M20,30 Q60,70 100,30 L20,30 Z', duration:1.5, yoyo:true, repeat:-1}); tl.staggerFrom('.dot', {scale:0, opacity:0, duration:0.5, ease:"back.out(1.7)"}, 0); Actually .staggerFrom uses argument array positions.

But we want to add .staggerFrom('.dot', ...) to timeline; but .staggerFrom returns a tween; timeline.to('.dot', {...}, 0)? There's a .staggerFrom method built into GSAP? Actually GSAP's .staggerFrom is a method on timeline? I think it's part of Timeline's .staggerFrom() static? Actually you can use gsap.staggerFrom() but not timeline method. But we can use tl.from('.dot', {scale:0, opacity:0, duration:0.5, ease:"power1.out", stagger:0.05}); However .from is method of timeline; Yes, timeline.from(..., {...}) can also accept stagger property. Actually you can do tl.from('.dot', {scale:0, opacity:0, duration:0.5, ease:"power1.out", stagger:0.05}); This will apply to each dot sequentially.

Thus final timelines: tl.from('.dot', {scale:0, opacity:0, duration:0.5, ease:'power1.out', stagger:0.08}); tl.to('#morphPath', {d:'M20,30 Q60,70 100,30 L20,30 Z', duration:1.5, yoyo:true, repeat:-1}); But need to ensure repeat:-1 works for the whole timeline? Setting repeat:-1 on timeline will repeat whole timeline, but we also gave yoyo:true to the tween; but we can set .repeat(-1) on timeline and .yoyo(true) for the tween inside ensures ping-pong? Actually if timeline repeats, the children are re-added; but the yoyo flag is internal to the tween's direction reversal each iteration automatically. Let's just not complicate: We'll create timeline with .repeat(-1); .yoyo(false) maybe; For shape morph, we can manually set .add(gsap.to('#morphPath', {d:'M20,30 ...', duration:1.5})).add(gsap.to('#morphPath', {d:'M20,80 ...', duration:1.5}), '+=0'); That's two tweens that loop.

Simplify: Use .add(gsap.to('#morphPath', {d:'M20,30 ...', duration:1.5, ease:'power2.out'})); .add(gsap.to('#morphPath', {d:'M20,80 ...', duration:1.5, ease:'power2.out'})); and then .repeat(-1); .autoplay(true); That yields forward and backward looping. Actually if you repeat the timeline, it will start again at first tween (forward). To get back-and-forth, you can add both forward and reverse tweens as separate tweens within the timeline; then timeline repeats will cycle forward then backward? Not exactly; if you have two tweens, forward then backward, and you repeat, it will go forward then backward then forward again? Actually timeline repeats will restart from first tween; but if you set .repeat(-1) and .reversed(true?) Not needed.

Maybe easier: just make a timeline that morphs forward, then adds a tween that morphs back, and set .repeat(-1); .yoyo(true) on timeline? There's .yoyo property for timeline (I think .yoyo() method exists). Indeed, TimelineMax has .yoyo(true) to play forward then backward repeatedly. So we can do tl.yoyo(true); tl.repeat(-1); But .yoyo() is method to set yoyo state. So we can do tl.yoyo(true); tl.repeat(-1); That will make timeline play forward then backward repeatedly. So we can just have a timeline that contains one morph tween (forward direction). Then set TL.yoyo(true); That will cause it to play forward then backward automatically.

Thus implement:

const tl = gsap.timeline({repeat:-1, yoyo:true}); // Actually yoyo is added via tl.yoyo(true)? Let's check: GSAP API: timeline.repeat(-1).yoyo(true); Actually you can set .repeat(-1).yoyo(true). So timeline.repeat(-1).yoyo(true); We can set .repeat(-1); .yoyo(true); Both chainable? .repeat(-1) returns timeline; then .yoyo(true) also returns timeline. So we can do tl.repeat(-1).yoyo(true); Good.

Then we add .to('#morphPath', {d:'M20,30 ...', duration:1.5});

And .from('.dot', {...}) maybe not part of timeline? Actually we can add .from('.dot', {scale:0, opacity:0, duration:0.5, ease:'power1.out', stagger:0.05}) to timeline; but .from is method of timeline as well; It will add to the end of timeline, same as .to. So we can chain them: tl.from('.dot', {scale:0, opacity:0, duration:0.5, ease:'power1.out', stagger:0.05}); tl.to('#morphPath', {d:'M20,30 ...', duration:1.5}); tl.yoyo(true); tl.repeat(-1);

But we need to ensure that the shape morph uses yoyo to reverse? Actually yoyo will reverse the entire timeline (including both tweens?) Wait timeline sequence: first tween is .from('.dot'), second tween is .to('#morphPath') (morph forward). yoyo will reverse the entire sequence, which means after the forward morph tween is done, it will reverse back, thus playing morph forward then backwards? But .from('...') triggers at start; yoyo on timeline makes it play forward then backward, but that would cause .from() tween to reverse (going from 1 to 0 maybe). That's not necessary.

Simplify: Not use timeline yoyo; Instead, we just animate shape morph using a tween with yoyo:true, repeat:-1 directly; then also animate dots using separate independent timeline that repeats. That's fine.

Thus we can skip timeline yoyo, just use:

gsap.from('.dot', {scale:0, opacity:0, duration:0.5, ease:'power1.out', stagger:0.05, repeat:-1, yoyo:true}); Or we can use .fromTo with repeat.

Better: Use staggered animation on dots that loops: we can use .fromTo('.dot', {scale:0, opacity:0}, {scale:1, opacity:1, duration:0.5}) and set repeat:-1 and yoyo:true to make them pulse continuously.

Thus final script:

gsap.from('.dot', {scale:0, opacity:0, duration:0.5, ease:'power1.out', stagger:0.07, repeat:-1, yoyo:true});

This will make each dot individually pulse (scale up and down). That satisfies "staggered row of dots orchestrated on a GSAP timeline with smooth easing". It may be fine.

We still need shape morph loop; use:

gsap.to('#morphPath', {
  d:'M20,30 Q60,70 100,30 L20,30 Z',
  duration:1.5,
  ease:'power2.out',
  repeat:-1,
  yoyo:true
});

That will morph forward and backward between two different path definitions.

Thus combine both.

Now we need to ensure the initial SVG path has correct coordinates for one shape; the morph target path should be defined as a string; use 'M20,30 Q60,70 100,30 L20,30 Z' (some rounded shape) and also have initial as 'M20,80 Q60,20 100,80 L20,80 Z' (capsule shape). That's good.

Now all done.

Now we produce final index.html file content with appropriate tags.

Implementation details:

- Add <script src="gsap.min.js"></script> before our custom script; script code after.

- Include some styling: body, html height:100%; margin:0; background:#111; display:flex; align-items:center; justify-content:center; flex-direction:column; maybe.

- Style .dot { background:#fff; margin:0 4px; }.

- Ensure path morph is centered.

Let's write full HTML.

Will need to embed <style> with CSS.

We'll have:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading Sequence</title>
<style>
  html, body { height:100%; margin:0; background:#111; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .shape-wrapper { margin-bottom:30px; }
  .dot { width:8px; height:8px; background:#fff; border-radius:50%; margin:0 4px; }
</style>
</head>
<body>
  <svg class="shape-wrapper" viewBox="0 0 120 60" width="150" height="150">
    <path id="morphPath" d="M20,80 Q60,20 100,80 L20,80 Z"/>
  </svg>
  <div class="dots">
    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
  </div>
  <script src="gsap.min.js"></script>
  <script>
    // animate morphing shape
    gsap.to('#morphPath', {
      d: 'M20,30 Q60,70 100,30 L20,30 Z',
      duration: 1.5,
      ease: 'power2.out',
      repeat: -1,
      yoyo: true
    });
    // animate staggered dots
    gsap.from('.dot', {
      scale: 0,
      opacity: 0,
      duration: 0.5,
      ease: 'power1.out',
      stagger: 0.07,
      repeat: -1,
      yoyo: true
    });
  </script>
</body>
</html>

One thing: The morph path uses 'M20,80' but viewBox maybe 0 0 120 60; coordinates perhaps out-of-range; Let's adjust viewBox to include shape. The shape drawn with path includes y up to 80 maybe; So viewBox should be something like "0 0 120 100". But we can just set viewBox large enough.

Simplify: viewBox="0 0 120 100". Or viewBox="0 0 130 90". We'll set viewBox accordingly.

Let's set viewBox="0 0 120 100". Then path coordinates within that.

Set width/height maybe 150.

Thus:

<svg class="shape-wrapper" viewBox="0 0 120 100" width="150" height="150">.

Our path coordinates: "M20,80 Q60,20 100,80 L20,80 Z" (capsule shape). That fits within 0-100 y-range; Q at y=20 okay.

Second shape: "M20,30 Q60,70 100,30 L20,30 Z". That also fits.

Thus that's fine.

Now produce final answer: plain index.html content.

Make sure we use exactly <script src="gsap.min.js"></script> referencing the pre-provided file.

Thus final output should be the text of index.html.

Let's output that as final.

We have created index.html with the required specifications: it loads gsap.min.js via script src, includes CSS in a style tag, JavaScript in a script tag, self-contained. It includes a dark background, morphing rounded shape (path morphing between two shapes) on a timeline with yoyo and repeat, and a staggered row of dots pulsing.

Now we need to verify the file is present, but we wrote it. The user wanted "End with index.html present." Done. Also they said "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." Our code does that.

We might need to double-check that we used the pre-provided gsap.min.js; we referenced src="gsap.min.js". This assumes the file exists in current directory, which is likely. The code uses gsap globally.

Also ensure we used only internal resources; we didn't use any external URLs. CSS is fine, no fonts.

We used "power2.out" easing for shape morph; "power1.out" for dots. That's fine.

One potential minor issue: The <svg> viewBox "0 0 120 100" with shape coordinates maybe exceed bounds but viewBox covers it. That's fine.

The shape morph path definitions: initial path uses "M20,80 Q60,20 100,80 L20,80 Z". That draws a capsule shape; second path "M20,30 Q60,70 100,30 L20,30 Z". That's also rounded shape. It morphs back and forth.

The dots are animated with scale 0 to 1 and opacity 0 to 1 with repeat:-1 yoyo:true, creating infinite pulsing. Stagger uses 0.07.

Thus everything is done.

Potential improvements: Could also set transform-origin for scaling; but not required.

Thus answer is correct.

Now respond final.