Scene

1<template id="screen-shake-template">
2  <div data-composition-id="screen-shake" 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      .hero {
17        font-weight: 900;
18        font-size: 280px;
19        letter-spacing: -0.04em;
20        line-height: 0.95;
21        color: var(--hg-fg);
22        white-space: nowrap;
23      }
24      .shake-stage {
25        position: absolute;
26        inset: 0;
27        display: flex;
28        align-items: center;
29        justify-content: center;
30        will-change: transform;
31      }
32      .impact-bg {
33        position: absolute;
34        inset: 0;
35        background: radial-gradient(circle at 50% 50%, rgba(255, 42, 74, 0.18) 0%, transparent 60%);
36        opacity: 0;
37        will-change: opacity;
38      }
39    </style>
40    <div class="impact-bg"></div>
41    <div class="shake-stage"><div class="hero">IMPACT</div></div>
42    <script>
43      window.__timelines = window.__timelines || {};
44      const tl = gsap.timeline({ paused: true });
45
46      tl.fromTo(
47        ".hero",
48        { scale: 0.6, opacity: 0 },
49        { scale: 1, opacity: 1, duration: 0.15, ease: "power4.out" },
50        0.3,
51      );
52      tl.fromTo(
53        ".impact-bg",
54        { opacity: 0 },
55        { opacity: 1, duration: 0.06, ease: "steps(1)" },
56        0.3,
57      );
58      tl.to(".impact-bg", { opacity: 0, duration: 0.6, ease: "power2.in" }, 0.4);
59
60      const shakeStart = 0.32;
61      const shakeAmps = [28, -24, 20, -22, 16, -18, 14, -14, 10, -8, 6, -5, 3, -2];
62      shakeAmps.forEach((amp, i) => {
63        tl.to(
64          ".shake-stage",
65          { x: amp, y: amp * 0.7 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
66          shakeStart + i * 0.03,
67        );
68      });
69      tl.to(
70        ".shake-stage",
71        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
72        shakeStart + shakeAmps.length * 0.03,
73      );
74
75      window.__timelines["screen-shake"] = tl;
76    </script>
77  </div>
78</template>