Scene

1<template id="blur-resolve-template">
2  <div data-composition-id="blur-resolve" 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: 320px;
26        letter-spacing: -0.04em;
27        line-height: 0.95;
28        color: var(--hg-fg);
29        white-space: nowrap;
30        will-change: filter, transform, opacity;
31      }
32    </style>
33    <div class="stage">
34      <div class="hero" id="hero">FOCUS</div>
35    </div>
36    <script>
37      window.__timelines = window.__timelines || {};
38      const tl = gsap.timeline({ paused: true });
39
40      // Resolve: heavy blur + scaled-up + dim settles into perfect crisp focus.
41      tl.fromTo(
42        "#hero",
43        { filter: "blur(36px)", scale: 1.08, opacity: 0.25 },
44        { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.7, ease: "power2.out" },
45        0.05,
46      );
47
48      // Hold crisp through the middle (no keys needed — state persists to ~1.5).
49
50      // Blur-out near the end: brief defocus + dim, a cut-away that loops seamlessly.
51      tl.to(
52        "#hero",
53        { filter: "blur(24px)", opacity: 0.25, duration: 0.25, ease: "power2.in" },
54        1.7,
55      );
56
57      window.__timelines["blur-resolve"] = tl;
58    </script>
59  </div>
60</template>