Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/bg-flow-field/scene.html
HTML·294 lines·11 KB
11
]'
12 data-width="1920"
13 data-height="1080"
14 data-duration="4"
15 >
16 <style>
17 :root {
18 --hg-violet: #7c3aed;
19 --hg-violet-2: #a855f7;
20 --hg-bg: #050507;
21 --hg-fg: #f5f5fa;
22 --hg-dim: #6b6b78;
23 }
24 * {
25 margin: 0;
26 padding: 0;
27 box-sizing: border-box;
28 }
29 .field {
30 position: absolute;
31 inset: 0;
32 width: 1920px;
33 height: 1080px;
34 display: block;
35 }
36 .label {
37 position: absolute;
38 left: 48px;
39 bottom: 40px;
40 font-size: 22px;
41 font-weight: 600;
42 letter-spacing: 0.18em;
43 text-transform: uppercase;
44 color: rgba(255, 255, 255, 0.7);
45 mix-blend-mode: screen;
46 pointer-events: none;
47 }
48 </style>
49 <canvas class="field" width="1920" height="1080"></canvas>
50 <div class="label">bg_flow_field</div>
51 <script>
52 window.__timelines = window.__timelines || {};
53 const tl = gsap.timeline({ paused: true });
54
55 // ── Variables (palette + speed); falls back to defaults standalone ──
56 const defaults = {
57 bgColor: "#050507",
58 colorLow: "#0a1430",
59 colorMid: "#6a6f9e",
60 colorHigh: "#e8f0ff",
61 accentColor: "#aee4ff",
62 flowSpeed: 1,
63 };
64 const vars = Object.assign(
65 {},
66 defaults,
67 window.__hyperframes && window.__hyperframes.getVariables
68 ? window.__hyperframes.getVariables()
69 : {},
70 );
71
72 // sRGB hex -> linear-light [r,g,b] (shader works in linear, gamma-encodes at end)
73 function hexLin(hex) {
74 let h = String(hex).replace("#", "").trim();
75 if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
76 const r = parseInt(h.substr(0, 2), 16) / 255;
77 const g = parseInt(h.substr(2, 2), 16) / 255;
78 const b = parseInt(h.substr(4, 2), 16) / 255;
79 const lin = (c) => Math.pow(c, 2.2);
80 return [lin(r), lin(g), lin(b)];
81 }
82
83 const canvas = document.querySelector(".field");
84 const gl = canvas.getContext("webgl", {
85 antialias: false,
86 alpha: false,
87 preserveDrawingBuffer: true,
88 });
89
90 const VERT = [
91 "attribute vec2 position;",
92 "varying vec2 vUv;",
93 "void main(){",
94 " vUv = position * 0.5 + 0.5;",
95 " gl_Position = vec4(position, 0.0, 1.0);",
96 "}",
97 ].join("\n");
98
99 // Curl-noise flow field — ported verbatim from the held-message-living-field
100 // template's "living field" background. All visible state comes from uniforms.
101 const FRAG = [
102 "precision highp float;",
103 "varying vec2 vUv;",
104 "uniform float uTime;",
105 "uniform float uPhase;",
106 "uniform float uReveal;",
107 "uniform float uChromAb;",
108 "uniform float uVignette;",
109 "uniform float uIntensity;",
110 "uniform float uSpeed;",
111 "uniform vec2 uResolution;",
112 "uniform vec3 uColLow;",
113 "uniform vec3 uColMid;",
114 "uniform vec3 uColHigh;",
115 "uniform vec3 uAccent;",
116 "float hash21(vec2 p){",
117 " p = fract(p * vec2(123.34, 456.21));",
118 " p += dot(p, p + 45.32);",
119 " return fract(p.x * p.y);",
120 "}",
121 "float noise2(vec2 p){",
122 " vec2 i = floor(p);",
123 " vec2 f = fract(p);",
124 " vec2 u = f * f * (3.0 - 2.0 * f);",
125 " float a = hash21(i);",
126 " float b = hash21(i + vec2(1.0, 0.0));",
127 " float c = hash21(i + vec2(0.0, 1.0));",
128 " float d = hash21(i + vec2(1.0, 1.0));",
129 " return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);",
130 "}",
131 "float fbm(vec2 p){",
132 " float v = 0.0;",
133 " float a = 0.5;",
134 " for(int i=0;i<5;i++){",
135 " v += a * noise2(p);",
136 " p *= 2.02;",
137 " a *= 0.5;",
138 " }",
139 " return v;",
140 "}",
141 "vec2 curl(vec2 p, float t){",
142 " float e = 0.6;",
143 " float n1 = fbm(p + vec2(0.0, e) + t*0.18);",
144 " float n2 = fbm(p + vec2(0.0, -e) + t*0.18);",
145 " float n3 = fbm(p + vec2( e, 0.0) + t*0.18);",
146 " float n4 = fbm(p + vec2(-e, 0.0) + t*0.18);",
147 " return vec2(n1 - n2, -(n3 - n4));",
148 "}",
149 "vec3 palette(float t){",
150 " t = clamp(t, 0.0, 1.0);",
151 " vec3 lowMid = mix(uColLow, uColMid, smoothstep(0.0, 0.5, t));",
152 " return mix(lowMid, uColHigh, smoothstep(0.5, 1.0, t));",
153 "}",
154 "vec3 sampleField(vec2 uv, float t, float energy){",
155 " vec2 p = (uv - 0.5) * vec2(uResolution.x/uResolution.y, 1.0) * 2.4;",
156 " vec2 c = curl(p * 0.9, t);",
157 " vec2 q = p + c * (0.45 + 0.55 * energy);",
158 " float flow = fbm(q * 1.6 + vec2(t * 0.11, -t * 0.07));",
159 " float bands = sin(flow * 14.0 + t * 1.1);",
160 " bands = smoothstep(0.0, 1.0, 0.5 + 0.5 * bands);",
161 " float r = length(p);",
162 " float core = smoothstep(1.5, 0.05, r) * (0.6 + 0.4 * energy);",
163 " float glow = exp(-r * 1.6) * (0.55 + 0.45 * energy);",
164 " float k = clamp(flow * 0.85 + 0.15 * bands + 0.25 * core + 0.6 * glow, 0.0, 1.4);",
165 " vec3 col = palette(k * 0.9 + 0.1 * sin(t * 0.4));",
166 " col *= 0.7 + 0.6 * energy;",
167 " col += uAccent * core * 0.55;",
168 " return col;",
169 "}",
170 "void main(){",
171 " vec2 uv = vUv;",
172 " float t = uTime * uSpeed;",
173 " float e = uIntensity;",
174 " vec2 dir = normalize(uv - 0.5 + 1e-6);",
175 " float ca = uChromAb * (0.004 + 0.012 * length(uv - 0.5));",
176 " vec3 cR = sampleField(uv + dir * ca, t, e);",
177 " vec3 cG = sampleField(uv, t, e);",
178 " vec3 cB = sampleField(uv - dir * ca, t, e);",
179 " vec3 col = vec3(cR.r, cG.g, cB.b);",
180 " float lum = dot(col, vec3(0.299, 0.587, 0.114));",
181 " col = mix(vec3(lum), col, 1.05);",
182 " float rev = uReveal;",
183 " float sweep = smoothstep(0.0, 0.6, rev) * (1.0 - smoothstep(0.6, 1.0, rev));",
184 " col += uColHigh * sweep * 0.35;",
185 " vec3 phaseTint = mix(vec3(0.85, 0.92, 1.05), vec3(1.05, 0.95, 0.85), uPhase);",
186 " col *= phaseTint;",
187 " float v = length(uv - 0.5);",
188 " col *= 1.0 - smoothstep(0.45, 0.95, v) * uVignette;",
189 " col = col / (col + 1.0);",
190 " col = pow(col, vec3(1.0/2.2));",
191 " gl_FragColor = vec4(col, 1.0);",
192 "}",
193 ].join("\n");
194
195 function compile(type, src) {
196 const s = gl.createShader(type);
197 gl.shaderSource(s, src);
198 gl.compileShader(s);
199 return s;
200 }
201 const prog = gl.createProgram();
202 gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
203 gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
204 gl.linkProgram(prog);
205 gl.useProgram(prog);
206
207 // full-screen triangle
208 const buf = gl.createBuffer();
209 gl.bindBuffer(gl.ARRAY_BUFFER, buf);
210 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
211 const posLoc = gl.getAttribLocation(prog, "position");
212 gl.enableVertexAttribArray(posLoc);
213 gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
214 gl.viewport(0, 0, 1920, 1080);
215
216 const L = (n) => gl.getUniformLocation(prog, n);
217 const uLoc = {
218 uTime: L("uTime"),
219 uPhase: L("uPhase"),
220 uReveal: L("uReveal"),
221 uChromAb: L("uChromAb"),
222 uVignette: L("uVignette"),
223 uIntensity: L("uIntensity"),
224 uSpeed: L("uSpeed"),
225 uResolution: L("uResolution"),
226 uColLow: L("uColLow"),
227 uColMid: L("uColMid"),
228 uColHigh: L("uColHigh"),
229 uAccent: L("uAccent"),
230 };
231
232 // animated uniform state (GSAP tweens these .value fields)
233 const u = {
234 uTime: { value: 0 },
235 uPhase: { value: 0.1 },
236 uReveal: { value: 0 },
237 uChromAb: { value: 0 },
238 uVignette: { value: 0 },
239 uIntensity: { value: 0.3 },
240 };
241 const speed = Number(vars.flowSpeed) || 1;
242 const cLow = hexLin(vars.colorLow);
243 const cMid = hexLin(vars.colorMid);
244 const cHigh = hexLin(vars.colorHigh);
245 const cAcc = hexLin(vars.accentColor);
246
247 function render() {
248 gl.uniform1f(uLoc.uTime, u.uTime.value);
249 gl.uniform1f(uLoc.uPhase, u.uPhase.value);
250 gl.uniform1f(uLoc.uReveal, u.uReveal.value);
251 gl.uniform1f(uLoc.uChromAb, u.uChromAb.value);
252 gl.uniform1f(uLoc.uVignette, u.uVignette.value);
253 gl.uniform1f(uLoc.uIntensity, u.uIntensity.value);
254 gl.uniform1f(uLoc.uSpeed, speed);
255 gl.uniform2f(uLoc.uResolution, 1920, 1080);
256 gl.uniform3fv(uLoc.uColLow, cLow);
257 gl.uniform3fv(uLoc.uColMid, cMid);
258 gl.uniform3fv(uLoc.uColHigh, cHigh);
259 gl.uniform3fv(uLoc.uAccent, cAcc);
260 gl.drawArrays(gl.TRIANGLES, 0, 3);
261 }
262 render(); // initial frame so a seek to 0 / first paint is correct
263
264 // ── Energy-envelope drive (the "living field" breath): all repaint is via
265 // onUpdate, so the field is fully determined by the timeline position — no
266 // requestAnimationFrame, seek-safe. ──
267 tl.eventCallback("onUpdate", render);
268
269 tl.to(u.uTime, { value: 4, duration: 4, ease: "none" }, 0);
270
271 // energy: settle-in → breathe → SURGE → settle dark for the hold
272 tl.to(u.uIntensity, { value: 0.6, duration: 1.2, ease: "sine.inOut" }, 0);
273 tl.to(u.uIntensity, { value: 1.0, duration: 0.7, ease: "power2.in" }, 1.3);
274 tl.to(u.uIntensity, { value: 0.35, duration: 2.0, ease: "power2.out" }, 2.0);
275
276 // chromatic light-leak: light at entry, spikes on the surge, then settles
277 tl.fromTo(u.uChromAb, { value: 0 }, { value: 0.4, duration: 1.2, ease: "sine.in" }, 0);
278 tl.to(u.uChromAb, { value: 1.4, duration: 0.5, ease: "power3.in" }, 1.4);
279 tl.to(u.uChromAb, { value: 0.2, duration: 1.6, ease: "power2.out" }, 1.9);
280
281 // a brief highlight sweep across the surge
282 tl.fromTo(u.uReveal, { value: 0 }, { value: 1, duration: 0.7, ease: "none" }, 1.3);
283 tl.set(u.uReveal, { value: 0 }, 2.0);
284
285 // colour-temperature drift
286 tl.to(u.uPhase, { value: 0.6, duration: 2.2, ease: "sine.inOut" }, 0.6);
287
288 // black mask settles the field to near-black + central glow for the hold
289 tl.to(u.uVignette, { value: 0.85, duration: 1.6, ease: "power2.out" }, 1.9);
290
291 window.__timelines["bg-flow-field"] = tl;
292 </script>
293 </div>
294</template>