Got it, let's tackle this. First, the user wants a single index.html file with GSAP, dark background, looping loading sequence: morphing rounded shapes and staggered dots, all on a GSAP timeline.

First, I need to structure the HTML: include the gsap.min.js script first, then the custom script in a style and script tag. Wait, the user said gsap.min.js is already present in the current directory, so just <script src="gsap.min.js"></script>.

First, the HTML structure: a full-screen container, some elements for the morphing shapes (maybe two or three SVG paths that morph, or divs that transform? Wait, better to use SVG for smooth morphing, but maybe even simpler: use two overlapping rounded rectangles or circles that morph their border-radius and scale, plus a row of dot elements.

Wait, let's outline:

1. Dark background: #0f172a or something like that, full viewport.
2. A wrapper div centered both vertically and horizontally, containing the loading elements.
3. First, the staggered dots: let's say 6 or 8 small dots, in a row, each with a scale animation, staggered, looping.
4. Then the morphing shapes: maybe two circular/rounded shapes that morph between a circle, a rounded square, a pill shape, looping. Or a single shape that morphs its path, but using GSAP's morphSVG? Wait no, wait, if we use divs, we can animate border-radius, transform: scale, rotate, etc. But maybe SVG is smoother, but since we can't use external resources, just inline SVG or CSS animated divs.

Wait, but the user said morphing rounded shapes. Let's do: a main central shape that alternates between a circle, a rounded square, and a sort of squashed circle, all with smooth easing. Then a row of smaller dots below or beside it, staggered fade/scale in.

Also, need a looping GSAP timeline. Let's structure the timeline:

- For the dots: stagger their scale from 0 to 1, with a small delay between each, then back to 0, repeat.
- For the central shape: animate border-radius from 50% to 20% (rounded square) then to 60% (more rounded) then back to 50%, also scale up and down a bit, maybe rotate slightly, all with smooth easing like "sine.inOut".

Wait, let's make the central shape a div with class "morph-shape", background color a bright accent like #3b82f6 or #60a5fa, maybe with a slight glow? No, keep it simple, dark background, white or blue accents.

Wait, let's set the body to:
margin: 0;
min-height: 100vh;
background-color: #1a1a2e;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;

Then the morph shape: width 80px, height 80px, border-radius: 50%; background: #6366f1; box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);

Then the dots container: display: flex; gap: 0.5rem; Each dot is width 12px, height 12px, border-radius: 50%, background: #e2e8f0; opacity: 0; or scale 0.

Then the GSAP timeline:

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

First, animate the morph shape:
tl.to(".morph-shape", {
  borderTopLeftRadius: "20%",
  borderTopRightRadius: "20%",
  borderBottomLeftRadius: "20%",
  borderBottomRightRadius: "20%",
  scale: 1.1,
  duration: 0.6
}, 0)
.to(".morph-shape", {
  borderTopLeftRadius: "50%",
  borderTopRightRadius: "50%",
  borderBottomLeftRadius: "50%",
  borderBottomRightRadius: "50%",
  scale: 1,
  duration: 0.6
}, 0.6)
// Then add the dot stagger:
tl.fromTo(".dot", {
  scale: 0,
  opacity: 0.3
}, {
  scale: 1,
  opacity: 1,
  stagger: 0.15
}, 0.2)
.to(".dot", {
  scale: 0,
  opacity: 0.3,
  stagger: 0.15
}, 0.8)
// Also, maybe rotate the morph shape a bit?
tl.to(".morph-shape", {
  rotate: 15,
  duration: 0.3
}, 0.3)
.to(".morph-shape", {
  rotate: -15,
  duration: 0.6
}, 0.4)
.to(".morph-shape", {
  rotate: 0,
  duration: 0.3
}, 0.8)

Wait, that's a good start. Also, make sure the timeline loops forever, repeat: -1, yoyo: true? Or just repeat and restart. Wait, no, the defaults have ease sine.inOut, so the timeline will play forward and backward? Wait, no, if we set repeat: -1, then it will loop from start to end, then jump back to start. Maybe add yoyo: true so it plays forward then backward smoothly.

Wait, let's adjust the timeline:

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

Then add the morph shape animations first:

// Morph the shape from circle to rounded square, scale up
tl.to(".morph-shape", {
  borderRadius: "25%",
  scale: 1.2,
  rotate: 10,
}, 0)
// Then back to circle, scale back, rotate back
.to(".morph-shape", {
  borderRadius: "50%",
  scale: 1,
  rotate: 0,
}, 0.6)

// Then the staggered dots: fade in and scale up, then out
tl.from(".dot", {
  scale: 0,
  opacity: 0,
  stagger: 0.1,
  duration: 0.4
}, 0.3)
.to(".dot", {
  scale: 0,
  opacity: 0,
  stagger: 0.1,
  duration: 0.4
}, 0.8)

Wait, that's better. Also, the dots: let's have 5 dots, so the stagger looks nice.

Now, the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Animation</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      min-height: 100vh;
      background-color: #121212;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 2rem;
      font-family: system-ui, -apple-system, sans-serif;
    }
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }
    .morph-shape {
      width: 70px;
      height: 70px;
      background: #6366f1;
      border-radius: 50%;
      box-shadow: 0 0 25px rgba(99, 102, 241, 0.6);
      transition: none;
    }
    .dots-container {
      display: flex;
      gap: 0.6rem;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
    }
  </style>
</head>
<body>
  <div class="loading-container">
    <div class="morph-shape"></div>
    <div class="dots-container">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
  <script src="gsap.min.js"></script>
  <script>
    // Wait for GSAP to load
    window.addEventListener('load', () => {
      const tl = gsap.timeline({
        repeat: -1,
        yoyo: true,
        defaults: {
          ease: "sine.inOut",
          duration: 1
        }
      });

      // Animate the morphing shape
      tl.to(".morph-shape", {
        borderRadius: "20%",
        scale: 1.15,
        rotate: 12,
      }, 0)
      .to(".morph-shape", {
        borderRadius: "50%",
        scale: 1,
        rotate: 0,
      }, 0.5)

      // Animate staggered dots
      tl.from(".dot", {
        scale: 0,
        opacity: 0.2,
        stagger: 0.12
      }, 0.2)
      .to(".dot", {
        scale: 0,
        opacity: 0.2,
        stagger: 0.12
      }, 0.7)
    });
  </script>
</body>
</html>

Wait, but wait: the user said "morphing rounded shapes" — right now we're animating border-radius, which is morphing the rounded corners, that's exactly morphing rounded shapes. Also, the staggered dots, looping timeline with smooth easing.

Wait, but let's check: the script runs after window load, which is good because gsap is loaded via src="gsap.min.js". Also, all CSS is inline, no external resources. The index.html is self-contained.

Wait, but let's make the background a bit nicer, maybe #0f172a instead of #121212, more of a dark slate blue. Also, the glow on the morph shape: maybe adjust the box shadow to be more subtle? Or more prominent? The user didn't specify, but let's keep it nice.

Also, let's make sure that the dots are properly animated: when the timeline plays, they scale up from 0 to 1, then back to 0, staggered. The morph shape alternates between circle and rounded square, scales a bit, rotates a bit, all with smooth sine easing.

Wait, another thing: the yoyo: true will make the timeline play forward, then backward, which is perfect for a looping animation. So the sequence is:

0 to 0.5s: morph shape goes from circle to rounded square, scale up, rotate, dots scale in staggered.
0.5 to 1s: morph shape goes back to circle, scale back, rotate back, dots scale out staggered.
Then yoyo reverses the timeline, so it plays back the sequence, then repeats forever.

Yes, that's a smooth looping loading animation.

Now, let's write this to index.html in the current directory (/tmp/ws). So use the write function, path is "index.html", content is the full HTML code above.

Wait, let's make sure all the code is correct. Let's double-check:

- The style tag has all the CSS, no external links.
- The script tag includes gsap.min.js, which is present in the current directory as per user's note.
- The GSAP timeline is set to repeat: -1, yoyo: true, so it loops forever.
- The morph shape animates border-radius, scale, rotate — that's morphing rounded shapes.
- The dots are staggered, so they light up one after another.

Yes, that's exactly what the user asked for. Now, let's call the write function to create the index.html file.

Great, the file was written successfully. Let me just confirm that the code meets all the user's requirements:

1. Single self-contained index.html file: yes, all CSS and JS is inline, uses local gsap.min.js.
2. Dark background: #0f172a, correct.
3. Looping animated loading sequence: GSAP timeline with repeat: -1 and yoyo: true, so it loops forever.
4. Morphing rounded shapes: animates border-radius from 50% (circle) to 20% (rounded square) and back, plus scale and rotate for extra motion.
5. Staggered row of dots: 5 dots, staggered scale/opacity animation with 0.12s delay between each.
6. Smooth easing: uses sine.inOut easing, which is smooth.

All requirements are met. Now I can just tell the user that the file is created, and they can open it in a browser.