Scene

1<template id="staggered-exit-template">
2  <div data-composition-id="staggered-exit" data-width="1920" data-height="1080" data-duration="2">
3    <style>
4      :root {
5        --hg-violet: #7c3aed;
6        --hg-violet-2: #a855f7;
7        --hg-bg: #0a0a0f;
8        --hg-fg: #f5f5fa;
9        --hg-dim: #6b6b78;
10      }
11      * {
12        margin: 0;
13        padding: 0;
14        box-sizing: border-box;
15      }
16      .stage {
17        position: absolute;
18        inset: 0;
19        display: flex;
20        align-items: center;
21        justify-content: center;
22      }
23      .grid {
24        display: grid;
25        grid-template-columns: repeat(4, 320px);
26        grid-template-rows: repeat(2, 320px);
27        gap: 36px;
28      }
29      .card {
30        display: flex;
31        align-items: center;
32        justify-content: center;
33        border-radius: 28px;
34        background: linear-gradient(135deg, var(--hg-violet), var(--hg-violet-2));
35        color: var(--hg-fg);
36        font-weight: 900;
37        font-size: 72px;
38        letter-spacing: -0.02em;
39        box-shadow: 0 24px 60px rgba(124, 58, 237, 0.35);
40        will-change: transform, opacity;
41      }
42    </style>
43    <div class="stage">
44      <div class="grid">
45        <div class="card">NORTH</div>
46        <div class="card">EAST</div>
47        <div class="card">SOUTH</div>
48        <div class="card">WEST</div>
49        <div class="card">PEAK</div>
50        <div class="card">EDGE</div>
51        <div class="card">CORE</div>
52        <div class="card">FLUX</div>
53      </div>
54    </div>
55    <script>
56      window.__timelines = window.__timelines || {};
57      const tl = gsap.timeline({ paused: true });
58
59      const cards = gsap.utils.toArray(".card");
60      const hold = 0.4; // fully visible hold before the cascade begins
61      const step = 0.11; // per-element offset
62      const exitDur = 0.45;
63
64      // start fully visible
65      tl.set(cards, { autoAlpha: 1, y: 0 }, 0);
66
67      // ordered exit: each card slides down + fades, one after another
68      for (let i = 0; i < cards.length; i++) {
69        tl.to(
70          cards[i],
71          { y: 80, autoAlpha: 0, duration: exitDur, ease: "power3.in" },
72          hold + i * step,
73        );
74      }
75
76      // snap all back to the visible start state so the next loop begins full
77      tl.set(cards, { autoAlpha: 1, y: 0 }, 1.95);
78
79      window.__timelines["staggered-exit"] = tl;
80    </script>
81  </div>
82</template>