Scene

1<template id="braam-punch-template">
2  <div data-composition-id="braam-punch" 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      .hero {
24        font-weight: 900;
25        font-size: 280px;
26        letter-spacing: -0.04em;
27        line-height: 0.95;
28        color: var(--hg-fg);
29        white-space: nowrap;
30        will-change: transform, text-shadow;
31      }
32      .glow-ring {
33        position: absolute;
34        width: 900px;
35        height: 900px;
36        border-radius: 50%;
37        background: radial-gradient(circle, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0) 65%);
38        filter: blur(20px);
39        will-change: transform, opacity;
40        opacity: 0;
41      }
42      .flash {
43        position: absolute;
44        inset: 0;
45        background: #fff;
46        opacity: 0;
47        pointer-events: none;
48        will-change: opacity;
49      }
50    </style>
51    <div class="stage">
52      <div class="glow-ring"></div>
53      <div class="hero" id="hero">BRAAM</div>
54    </div>
55    <div class="flash"></div>
56    <script>
57      window.__timelines = window.__timelines || {};
58      const tl = gsap.timeline({ paused: true });
59
60      tl.set("#hero", { scale: 0.92, opacity: 0 }, 0);
61      tl.set(".glow-ring", { scale: 0.6, opacity: 0 }, 0);
62      tl.to("#hero", { opacity: 1, duration: 0.18, ease: "power2.out" }, 0.05);
63      tl.to(".glow-ring", { scale: 1.2, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.05);
64      tl.to(
65        "#hero",
66        {
67          scale: 1.18,
68          textShadow: "0 0 60px rgba(168,85,247,0.9)",
69          duration: 0.12,
70          ease: "power4.out",
71        },
72        0.25,
73      );
74      tl.to(
75        "#hero",
76        {
77          scale: 1.0,
78          textShadow: "0 0 0px rgba(168,85,247,0)",
79          duration: 0.7,
80          ease: "elastic.out(1, 0.5)",
81        },
82        0.37,
83      );
84      tl.fromTo(
85        ".flash",
86        { opacity: 0 },
87        { opacity: 0.85, duration: 0.06, ease: "power4.out" },
88        0.25,
89      );
90      tl.to(".flash", { opacity: 0, duration: 0.35, ease: "power3.in" }, 0.31);
91      tl.to(
92        ".glow-ring",
93        { scale: 1.45, opacity: 0.4, duration: 1.0, ease: "power2.out", overwrite: "auto" },
94        0.55,
95      );
96
97      window.__timelines["braam-punch"] = tl;
98    </script>
99  </div>
100</template>