Setting the file. One moment. Scene · Music To Video · heygen-com/hyperframes · Skills DocsGsap Min
(opens in a new tab)
references/motion-primitives/electric-arc/scene.html
HTML·105 lines·3 KB
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 .arc-svg {
25 position: absolute;
26 inset: 0;
27 }
28 .arc-path {
29 fill: none;
30 stroke: var(--hg-fg);
31 stroke-width: 3;
32 stroke-linecap: round;
33 filter: drop-shadow(0 0 8px var(--hg-cyan)) drop-shadow(0 0 16px var(--hg-cyan));
34 stroke-dasharray: 1200;
35 stroke-dashoffset: 1200;
36 will-change: stroke-dashoffset, opacity;
37 }
38 .arc-flash {
39 position: absolute;
40 inset: 0;
41 background: radial-gradient(circle at 50% 50%, rgba(42, 255, 240, 0.3) 0%, transparent 40%);
42 opacity: 0;
43 will-change: opacity;
44 }
45 .arc-label {
46 font-weight: 900;
47 font-size: 240px;
48 letter-spacing: -0.04em;
49 color: var(--hg-fg);
50 position: relative;
51 z-index: 2;
52 }
53 </style>
54 <div class="stage">
55 <svg class="arc-svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
56 <path
57 class="arc-path"
58 id="arc1"
59 d="M 200 540 L 380 480 L 440 580 L 620 500 L 720 600 L 880 510 L 960 540"
60 />
61 <path
62 class="arc-path"
63 id="arc2"
64 d="M 1720 540 L 1540 600 L 1480 500 L 1300 580 L 1200 480 L 1040 570 L 960 540"
65 />
66 <path class="arc-path" id="arc3" d="M 960 200 L 920 360 L 1040 420 L 940 520 L 960 540" />
67 </svg>
68 <div class="arc-flash"></div>
69 <div class="arc-label">CHARGE</div>
70 </div>
71 <script>
72 window.__timelines = window.__timelines || {};
73 const tl = gsap.timeline({ paused: true });
74
75 tl.fromTo(
76 ".arc-label",
77 { opacity: 0, scale: 0.9 },
78 { opacity: 1, scale: 1, duration: 0.3, ease: "power3.out" },
79 0.5,
80 );
81 const arcs = ["#arc1", "#arc2", "#arc3"];
82 arcs.forEach((p, i) => {
83 tl.fromTo(
84 p,
85 { strokeDashoffset: 1200, opacity: 0 },
86 { strokeDashoffset: 0, opacity: 1, duration: 0.18, ease: "power4.out" },
87 0.15 + i * 0.05,
88 );
89 });
90 tl.to(arcs.join(","), { opacity: 0.3, duration: 0.04, ease: "steps(1)" }, 0.55);
91 tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.6);
92 tl.to(arcs.join(","), { opacity: 0.5, duration: 0.04, ease: "steps(1)" }, 0.7);
93 tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.78);
94 tl.fromTo(
95 ".arc-flash",
96 { opacity: 0 },
97 { opacity: 1, duration: 0.06, ease: "steps(1)" },
98 0.5,
99 );
100 tl.to(".arc-flash", { opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
101
102 window.__timelines["electric-arc"] = tl;
103 </script>
104 </div>
105</template>