Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/flash-cut/scene.html
HTML·97 lines·3 KB
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 .word {
24 position: absolute;
25 font-weight: 900;
26 font-size: 260px;
27 letter-spacing: -0.04em;
28 line-height: 0.95;
29 white-space: nowrap;
30 color: var(--hg-fg);
31 will-change: opacity;
32 }
33 .accent {
34 position: absolute;
35 bottom: 360px;
36 width: 220px;
37 height: 14px;
38 border-radius: 999px;
39 background: var(--hg-violet);
40 will-change: background, transform;
41 }
42 .flash {
43 position: absolute;
44 inset: 0;
45 background: #ffffff;
46 opacity: 0;
47 pointer-events: none;
48 will-change: opacity;
49 }
50 </style>
51 <div class="stage">
52 <div class="accent" id="accent"></div>
53 <div class="word" id="w0">READY</div>
54 <div class="word" id="w1">IMPACT</div>
55 <div class="word" id="w2">DONE</div>
56 </div>
57 <div class="flash" id="flash"></div>
58 <script>
59 window.__timelines = window.__timelines || {};
60 const tl = gsap.timeline({ paused: true });
61
62 // Initial state: first word visible, others hidden, accent violet.
63 tl.set("#w0", { opacity: 1 }, 0);
64 tl.set("#w1", { opacity: 0 }, 0);
65 tl.set("#w2", { opacity: 0 }, 0);
66 tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 0);
67 tl.set("#flash", { opacity: 0 }, 0);
68
69 // Two hits; during each white frame, swap underlying word + accent colour.
70 const hits = [
71 { t: 0.5, from: "#w0", to: "#w1", color: "#a855f7", scaleX: 1.45 },
72 { t: 1.2, from: "#w1", to: "#w2", color: "#f5f5fa", scaleX: 0.7 },
73 ];
74
75 hits.forEach((h) => {
76 // Instant full-frame white flash on the hit.
77 tl.set("#flash", { opacity: 1 }, h.t);
78 // While white (~2 frames at 30fps), swap the revealed state.
79 tl.set(h.from, { opacity: 0 }, h.t + 0.03);
80 tl.set(h.to, { opacity: 1 }, h.t + 0.03);
81 tl.set("#accent", { backgroundColor: h.color, scaleX: h.scaleX }, h.t + 0.03);
82 // Snap the flash back out within ~3 frames.
83 tl.set("#flash", { opacity: 0 }, h.t + 0.06);
84 });
85
86 // Graceful loop: dip back to white at the very end and restore the start
87 // state so the cycle re-enters cleanly on the next pass.
88 tl.set("#flash", { opacity: 1 }, 1.74);
89 tl.set("#w2", { opacity: 0 }, 1.77);
90 tl.set("#w0", { opacity: 1 }, 1.77);
91 tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 1.77);
92 tl.set("#flash", { opacity: 0 }, 1.8);
93
94 window.__timelines["flash-cut"] = tl;
95 </script>
96 </div>
97</template>