Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/spotlight-sweep/scene.html
HTML·102 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 .dim-layer {
17 position: absolute;
18 inset: 0;
19 background: #03030a;
20 }
21 .hero-bright,
22 .hero-dim {
23 position: absolute;
24 inset: 0;
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 font-family: "Playfair Display", serif;
29 font-weight: 900;
30 font-size: 320px;
31 letter-spacing: -0.04em;
32 white-space: nowrap;
33 }
34 .hero-dim {
35 color: rgba(245, 245, 250, 0.06);
36 }
37 .hero-bright {
38 color: var(--hg-fg);
39 text-shadow:
40 0 0 30px rgba(168, 85, 247, 0.4),
41 0 0 80px rgba(168, 85, 247, 0.2);
42 -webkit-mask-image: radial-gradient(
43 circle 360px at -400px 50%,
44 #000 0%,
45 rgba(0, 0, 0, 0.6) 60%,
46 transparent 80%
47 );
48 mask-image: radial-gradient(
49 circle 360px at -400px 50%,
50 #000 0%,
51 rgba(0, 0, 0, 0.6) 60%,
52 transparent 80%
53 );
54 will-change: mask-image;
55 }
56 .spotlight-glow {
57 position: absolute;
58 inset: 0;
59 background: radial-gradient(
60 circle 380px at -400px 50%,
61 rgba(168, 85, 247, 0.18) 0%,
62 transparent 60%
63 );
64 will-change: background;
65 mix-blend-mode: screen;
66 }
67 </style>
68 <div class="dim-layer"></div>
69 <div class="hero-dim">DISCOVER</div>
70 <div class="hero-bright" id="bright">DISCOVER</div>
71 <div class="spotlight-glow" id="glow"></div>
72 <script>
73 window.__timelines = window.__timelines || {};
74 const tl = gsap.timeline({ paused: true });
75
76 // Animate the spotlight x position via mask-image (use a proxy + onUpdate for smoothness)
77 const state = { x: -400 };
78 tl.to(
79 state,
80 {
81 x: 2300,
82 duration: 1.4,
83 ease: "power2.inOut",
84 onUpdate: function () {
85 const m = `radial-gradient(circle 360px at ${state.x}px 50%, #000 0%, rgba(0,0,0,0.6) 60%, transparent 80%)`;
86 const g = `radial-gradient(circle 380px at ${state.x}px 50%, rgba(168, 85, 247, 0.18) 0%, transparent 60%)`;
87 const bright = document.getElementById("bright");
88 const glow = document.getElementById("glow");
89 if (bright) {
90 bright.style.maskImage = m;
91 bright.style.webkitMaskImage = m;
92 }
93 if (glow) glow.style.background = g;
94 },
95 },
96 0.3,
97 );
98
99 window.__timelines["spotlight-sweep"] = tl;
100 </script>
101 </div>
102</template>