Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/text-spectral-rays/scene.html
HTML·280 lines·11 KB
11
data-height
=
"1080"
12 data-duration="4"
13 >
14 <style>
15 :root {
16 --hg-violet: #7c3aed;
17 --hg-violet-2: #a855f7;
18 --hg-bg: #000000;
19 --hg-fg: #f5f5fa;
20 --hg-dim: #6b6b78;
21 }
22 * {
23 margin: 0;
24 padding: 0;
25 box-sizing: border-box;
26 }
27 .vfx-canvas {
28 position: absolute;
29 inset: 0;
30 width: 1920px;
31 height: 1080px;
32 display: block;
33 }
34 .label {
35 position: absolute;
36 left: 48px;
37 bottom: 40px;
38 font-size: 22px;
39 font-weight: 600;
40 letter-spacing: 0.18em;
41 text-transform: uppercase;
42 color: rgba(255, 255, 255, 0.6);
43 mix-blend-mode: screen;
44 pointer-events: none;
45 }
46 </style>
47 <canvas class="vfx-canvas" width="1920" height="1080" aria-hidden="true"></canvas>
48 <div class="label">text_spectral_rays</div>
49 <script>
50 window.__timelines = window.__timelines || {};
51 const tl = gsap.timeline({ paused: true });
52
53 (function () {
54 const W = 1920;
55 const H = 1080;
56
57 const defaults = {
58 text: "SPECTRAL",
59 textColor: "#f6ff7a",
60 bgColor: "#000000",
61 sweepSpeed: 1,
62 };
63 const vars = Object.assign(
64 {},
65 defaults,
66 window.__hyperframes && window.__hyperframes.getVariables
67 ? window.__hyperframes.getVariables()
68 : {},
69 );
70
71 const canvas = document.querySelector(".vfx-canvas");
72 const gl = canvas.getContext("webgl", {
73 premultipliedAlpha: false,
74 preserveDrawingBuffer: true,
75 });
76
77 // animated state — GSAP tweens these; mouse (the light cursor) is derived
78 const state = { progress: 0, effectMix: 0 };
79 const mouse = { x: 0, y: H * 0.5 };
80 const speed = Number(vars.sweepSpeed) || 1;
81
82 // ── Rasterize the wordmark into a white MASK + a coloured SRC canvas ──
83 function drawWord(ctx, fill) {
84 ctx.clearRect(0, 0, W, H);
85 let fs = 340;
86 const stack = "900 " + fs + 'px "Arial Black", Impact, "Inter", system-ui, sans-serif';
87 ctx.font = stack;
88 const maxW = 1600;
89 const measured = ctx.measureText(vars.text).width || 1;
90 if (measured > maxW) {
91 fs = Math.floor((fs * maxW) / measured);
92 ctx.font = "900 " + fs + 'px "Arial Black", Impact, "Inter", system-ui, sans-serif';
93 }
94 ctx.textAlign = "center";
95 ctx.textBaseline = "middle";
96 ctx.fillStyle = fill;
97 ctx.fillText(vars.text, W * 0.5, H * 0.5);
98 }
99 const maskCanvas = document.createElement("canvas");
100 maskCanvas.width = W;
101 maskCanvas.height = H;
102 drawWord(maskCanvas.getContext("2d"), "#ffffff");
103 const colorCanvas = document.createElement("canvas");
104 colorCanvas.width = W;
105 colorCanvas.height = H;
106 drawWord(colorCanvas.getContext("2d"), vars.textColor);
107
108 // ── WebGL fallback: flat fill (keeps the timeline registered) ──
109 if (!gl) {
110 const ctx = canvas.getContext("2d");
111 ctx.fillStyle = vars.bgColor;
112 ctx.fillRect(0, 0, W, H);
113 tl.to(state, { progress: 1, duration: 3.6, ease: "none" }, 0.2);
114 window.__timelines["text-spectral-rays"] = tl;
115 return;
116 }
117
118 const VERT = [
119 "attribute vec2 position;",
120 "varying vec2 vUv;",
121 "void main(){",
122 " vUv = position * 0.5 + 0.5;",
123 " gl_Position = vec4(position, 0.0, 1.0);",
124 "}",
125 ].join("\n");
126
127 // Volumetric spectral light-rays cast by the text mask toward a moving
128 // light cursor — ported from the vfx-text-cursor golden sample, made
129 // generic (reads any text mask/colour). All state from uniforms.
130 const FRAG = [
131 "precision highp float;",
132 "varying vec2 vUv;",
133 "uniform vec2 resolution;",
134 "uniform vec2 mouse;",
135 "uniform float maskY;",
136 "uniform float maskScale;",
137 "uniform float effectMix;",
138 "uniform sampler2D src;",
139 "uniform sampler2D colorSrc;",
140 "#define PI 3.141593",
141 "#define SAMPLES 112.0",
142 "float hash(vec2 p){ return fract(sin(dot(p, vec2(489.0,589.0))) * 492.0) * 2.0 - 1.0; }",
143 "float hash(vec3 p){ return fract(sin(dot(p, vec3(489.0,589.0,58.0))) * 492.0) * 2.0 - 1.0; }",
144 "vec2 hash2(vec3 p){ return vec2(hash(p), hash(p + 1.0)); }",
145 "vec4 readMask(vec2 uv){ if(uv.x<0.0||uv.x>1.0||uv.y<0.0||uv.y>1.0){return vec4(0.0);} return texture2D(src, uv); }",
146 "vec4 readColor(vec2 uv){ if(uv.x<0.0||uv.x>1.0||uv.y<0.0||uv.y>1.0){return vec4(0.0);} return texture2D(colorSrc, uv); }",
147 "vec3 spectrum(float x){ return cos((x - vec3(0.0,0.5,1.0)) * vec3(0.6,1.0,0.5) * PI); }",
148 "void main(){",
149 " vec2 uv = vUv;",
150 " vec2 center = vec2(0.5, 0.5);",
151 " vec2 maskUv = (uv - center) / maskScale + center + vec2(0.0, maskY / resolution.y);",
152 " float mask = readMask(maskUv).r;",
153 " vec4 col0 = readColor(maskUv);",
154 " vec2 p = uv * 2.0 - 1.0;",
155 " p.x *= resolution.x / resolution.y;",
156 " vec2 mp = mouse / resolution;",
157 " mp.y = 1.0 - mp.y;",
158 " mp = mp * 2.0 - 1.0;",
159 " mp.x *= resolution.x / resolution.y;",
160 " vec2 rp = p;",
161 " vec2 d = (mp - p) / SAMPLES;",
162 " float acc = 0.0;",
163 " for(float i = 0.0; i < SAMPLES; i++){",
164 " rp += d;",
165 " rp += hash2(vec3(rp, i)) * 0.5 / SAMPLES;",
166 " vec2 uv2 = rp;",
167 " uv2.x /= resolution.x / resolution.y;",
168 " uv2 = uv2 * 0.5 + 0.5;",
169 " vec2 rayUv = (uv2 - center) / maskScale + center + vec2(0.0, maskY / resolution.y);",
170 " acc += readMask(rayUv).r / SAMPLES;",
171 " }",
172 " vec4 c = vec4(0.0, 0.0, 0.0, 1.0);",
173 " c -= acc * 0.24;",
174 " c += vec4(spectrum(cos(acc * 4.9)), 1.0) * acc * 3.65;",
175 " c.rgb = max(c.rgb - 0.035, 0.0);",
176 " c.rgb *= 1.16;",
177 " float cursorX = mouse.x / resolution.x;",
178 " float sweep = exp(-pow((uv.x - cursorX) * 6.2, 2.0));",
179 " float textProximity = smoothstep(0.006, 0.34, acc);",
180 " float longRay = smoothstep(0.004, 0.18, acc);",
181 " vec3 sweepColor = vec3(0.14, 0.65, 0.85) + spectrum(cursorX * 1.8) * 0.28;",
182 " c.rgb += sweepColor * sweep * (0.34 + textProximity * 2.35);",
183 " c.rgb += spectrum(cursorX + acc * 2.0) * longRay * 0.58;",
184 " c.rgb += col0.rgb * acc * 1.18;",
185 " c.rgb += col0.rgb * sweep * mask * 0.92;",
186 " c.rgb *= effectMix;",
187 " c.rgb = mix(c.rgb, col0.rgb, smoothstep(0.02, 0.75, col0.a));",
188 " c.rgb += vec3(1.0) * smoothstep(0.04, 0.38, mask) * 0.12 * effectMix;",
189 " float grain = hash(vec3(uv.xyy + mouse.x * 0.0007));",
190 " float dust = smoothstep(0.02, 0.38, acc) + smoothstep(0.03, 0.22, mask);",
191 " c.rgb += grain * 0.07 * (0.42 + dust) * effectMix;",
192 " c.rgb += spectrum(grain + cursorX) * abs(grain) * 0.045 * smoothstep(0.02, 0.5, acc) * effectMix;",
193 " c.a = 1.0;",
194 " gl_FragColor = c;",
195 "}",
196 ].join("\n");
197
198 function compile(type, source) {
199 const s = gl.createShader(type);
200 gl.shaderSource(s, source);
201 gl.compileShader(s);
202 return s;
203 }
204 const program = gl.createProgram();
205 gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT));
206 gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG));
207 gl.linkProgram(program);
208 gl.useProgram(program);
209
210 function createTexture(source) {
211 const t = gl.createTexture();
212 gl.bindTexture(gl.TEXTURE_2D, t);
213 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
214 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
215 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
216 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
217 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
218 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
219 return t;
220 }
221 const maskTex = createTexture(maskCanvas);
222 const colorTex = createTexture(colorCanvas);
223
224 const buffer = gl.createBuffer();
225 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
226 gl.bufferData(
227 gl.ARRAY_BUFFER,
228 new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
229 gl.STATIC_DRAW,
230 );
231 const posLoc = gl.getAttribLocation(program, "position");
232 const L = (n) => gl.getUniformLocation(program, n);
233 const uRes = L("resolution");
234 const uMouse = L("mouse");
235 const uMaskY = L("maskY");
236 const uMaskScale = L("maskScale");
237 const uMix = L("effectMix");
238 const uSrc = L("src");
239 const uColorSrc = L("colorSrc");
240
241 function render() {
242 mouse.x = state.progress * W;
243 mouse.y = H * 0.5;
244 gl.viewport(0, 0, W, H);
245 gl.clearColor(0, 0, 0, 1);
246 gl.clear(gl.COLOR_BUFFER_BIT);
247 gl.useProgram(program);
248 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
249 gl.enableVertexAttribArray(posLoc);
250 gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
251 gl.activeTexture(gl.TEXTURE0);
252 gl.bindTexture(gl.TEXTURE_2D, maskTex);
253 gl.uniform1i(uSrc, 0);
254 gl.activeTexture(gl.TEXTURE1);
255 gl.bindTexture(gl.TEXTURE_2D, colorTex);
256 gl.uniform1i(uColorSrc, 1);
257 gl.uniform2f(uRes, W, H);
258 gl.uniform2f(uMouse, mouse.x, mouse.y);
259 gl.uniform1f(uMaskY, 0);
260 gl.uniform1f(uMaskScale, 1);
261 gl.uniform1f(uMix, state.effectMix);
262 gl.drawArrays(gl.TRIANGLES, 0, 6);
263 }
264 render(); // initial frame (seek-to-0 correctness)
265
266 // All repaint via the timeline's onUpdate — fully seek-safe, no rAF.
267 tl.eventCallback("onUpdate", render);
268
269 // effect punches in, the light cursor sweeps L→R across the wordmark,
270 // then fades for a clean loop.
271 tl.set(state, { progress: 0, effectMix: 0 }, 0);
272 tl.to(state, { effectMix: 1, duration: 0.45, ease: "power3.out" }, 0.15);
273 tl.to(state, { progress: 1, duration: 3.4 / speed, ease: "none" }, 0.2);
274 tl.to(state, { effectMix: 0, duration: 0.4, ease: "power2.in" }, 3.6);
275
276 window.__timelines["text-spectral-rays"] = tl;
277 })();
278 </script>
279 </div>
280</template>