Scene

1<template id="binary-decrypt-template">
2  <div data-composition-id="binary-decrypt" data-width="1920" data-height="1080" data-duration="2">
3    <style>
4      :root {
5        --hg-violet: #7c3aed;
6        --hg-violet-2: #a855f7;
7        --hg-cyan: #2afff0;
8        --hg-bg: #0a0a0f;
9        --hg-fg: #f5f5fa;
10        --hg-dim: #6b6b78;
11      }
12      * {
13        margin: 0;
14        padding: 0;
15        box-sizing: border-box;
16      }
17      .stage {
18        position: absolute;
19        inset: 0;
20        display: flex;
21        align-items: center;
22        justify-content: center;
23      }
24      .crypt {
25        font-family: "JetBrains Mono", monospace;
26        font-weight: 700;
27        font-size: 200px;
28        letter-spacing: 0.02em;
29        color: var(--hg-cyan);
30        text-shadow: 0 0 30px rgba(42, 255, 240, 0.5);
31      }
32      .crypt .char {
33        display: inline-block;
34        min-width: 1ch;
35      }
36    </style>
37    <div class="stage">
38      <div class="crypt">
39        <span class="char" data-target="D">_</span><span class="char" data-target="E">_</span
40        ><span class="char" data-target="C">_</span><span class="char" data-target="R">_</span
41        ><span class="char" data-target="Y">_</span><span class="char" data-target="P">_</span
42        ><span class="char" data-target="T">_</span>
43      </div>
44    </div>
45    <script>
46      window.__timelines = window.__timelines || {};
47      const tl = gsap.timeline({ paused: true });
48
49      const SCRAMBLE = "01█▓▒░▀▄■◆◇▪▫";
50      function scrambleChar(charIdx, phase) {
51        const tick = Math.floor(phase * 60);
52        const i = (charIdx * 7 + tick * 13 + 3) % SCRAMBLE.length;
53        return SCRAMBLE.charAt(i);
54      }
55      const cryptState = [{ p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }];
56      cryptState.forEach((state, idx) => {
57        tl.to(
58          state,
59          {
60            p: 1,
61            duration: 0.85,
62            delay: idx * 0.05,
63            ease: "power2.out",
64            onUpdate: function () {
65              const spans = document.querySelectorAll(".crypt .char");
66              const span = spans[idx];
67              if (!span) return;
68              const target = span.getAttribute("data-target");
69              if (state.p >= 0.72) {
70                span.textContent = target;
71                span.style.color = "var(--hg-fg)";
72                span.style.textShadow = "0 0 30px rgba(168, 85, 247, 0.8)";
73              } else {
74                span.textContent = scrambleChar(idx, state.p);
75              }
76            },
77          },
78          0.15,
79        );
80      });
81
82      window.__timelines["binary-decrypt"] = tl;
83    </script>
84  </div>
85</template>