16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T1f68,'use client'; import { useEffect, useRef, useState, type CSSProperties } from 'react'; import { createNativeGL, nativeColor, nativeClamp } from './native-gl'; import { effectRuntime } from './effect-runtime'; import { thermalFragment } from './thermal-shaders'; export type HourlyWeather = { time: string; temperature: number; smoke?: boolean; }; export type ThermalSmokeProps = { city?: string; temperature?: number; condition?: string; warmColor?: string; coldColor?: string; smokeDensity?: number; flowSpeed?: number; hourlyData?: HourlyWeather[]; autoTriggerIntro?: boolean; paused?: boolean; compact?: boolean; className?: string; }; function Smoke({ warm, cold, density, speed, paused, compact, replay, mini = false, onCount, }: { warm: string; cold: string; density: number; speed: number; paused: boolean; compact: boolean; replay: number; mini?: boolean; onCount?: (n: number) => void; }) { const host = useRef(null), canvas = useRef(null), invalidate = useRef<() => void>(() => {}), values = useRef({ warm, cold, density, speed, paused, replay, onCount }); values.current = { warm, cold, density, speed, paused, replay, onCount }; const [generation, restart] = useState(0), [failed, setFailed] = useState(false); useEffect(() => { let gpu: ReturnType | undefined; const element = host.current!, surface = canvas.current!; let clock: ReturnType | undefined; setFailed(false); try { gpu = createNativeGL(surface); const pass = gpu.pass(thermalFragment); let elapsed = replay > 0 ? 0 : 3, lastReplay = replay, lastCount = -1; clock = effectRuntime( element, surface, (time, dt) => { const o = values.current; if (o.replay !== lastReplay) { lastReplay = o.replay; elapsed = 0; lastCount = -1; } const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; elapsed += dt; const intro = mini || reduced || o.paused ? 1 : Math.min(1, elapsed / 2.25); gpu!.draw(pass, null, { uResolution: [surface.width, surface.height], uTime: time, uDensity: nativeClamp(o.density, 0.2, 2.5), uIntro: 1 - Math.pow(1 - intro, 3), uSpeed: nativeClamp(o.speed, 0, 3), uWarm: nativeColor(o.warm, '#ffb55c'), uCold: nativeColor(o.cold, '#729eff'), uMini: mini ? 1 : 0, }); const count = Math.min(2, Math.floor(intro * 2.99)); if (count !== lastCount) { lastCount = count; o.onCount?.(count); } }, () => values.current.paused, undefined, compact, ); invalidate.current = clock.invalidate; } catch (error) { console.error('ThermalSmoke:', error); gpu?.dispose(); element.dataset.failed = 'true'; setFailed(true); } const lost = (e: Event) => { e.preventDefault(); clock?.dispose(); gpu?.dispose(); setFailed(true); }; const restored = () => restart((n) => n + 1); surface.addEventListener('webglcontextlost', lost); surface.addEventListener('webglcontextrestored', restored); return () => { invalidate.current = () => {}; clock?.dispose(); gpu?.dispose(); surface.removeEventListener('webglcontextlost', lost); surface.removeEventListener('webglcontextrestored', restored); }; }, [compact, mini, generation]); useEffect(() => invalidate.current(), [warm, cold, density, speed, paused, replay]); return (

); } export default function ThermalSmoke({ city = 'Stockholm', temperature = 26, condition = 'Partly cloudy', warmColor = '#ffb55c', coldColor = '#729eff', smokeDensity = 1.35, flowSpeed = 0.8, autoTriggerIntro = true, paused = false, compact = false, className = '', }: ThermalSmokeProps) { const root = useRef(null), [replay, setReplay] = useState(0), [count, setCount] = useState(2); useEffect(() => { if (autoTriggerIntro && !compact && !paused) { setReplay((n) => n + 1); setCount(0); } }, [autoTriggerIntro, compact]); const displayTemperature = Math.round(nativeClamp(temperature, -99, 99)) - 2 + count; return (

{city}

{condition}

7 m/s 45% 850 hPa

); } const styles = ` .mq-thermal-stage{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:220px;overflow:hidden;background:#000;container-type:size} .mq-thermal-card{position:relative;isolation:isolate;width:min(94cqw,76cqh,520px);color:#f5f5f5;font-family:inherit;container-type:inline-size} .mq-thermal-card header{height:19cqw;display:flex;justify-content:center;align-items:center;position:relative;z-index:2} .mq-thermal-card h2{font-size:clamp(12px,4.8cqw,18px);font-weight:500;letter-spacing:-.02em;margin:0} .mq-thermal-main{height:100cqw;position:relative;margin-top:-5cqw} .mq-thermal-smoke{position:absolute;inset:0}.mq-thermal-smoke>canvas{width:100%;height:100%;display:block} .mq-thermal-temperature{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;gap:3px} .mq-thermal-temperature strong{font-size:17cqw;line-height:1;font-weight:600;letter-spacing:-.07em;font-style:italic} .mq-thermal-temperature sup{font-size:8cqw;vertical-align:top;line-height:1.5;margin-left:2px;font-weight:400} .mq-thermal-temperature>span{font-size:3.2cqw;color:#d7d7da;margin-top:2cqw} .mq-thermal-metrics{display:flex;justify-content:center;gap:6cqw;margin:3cqw 0;color:#b5b5bc} .mq-thermal-metrics span{display:flex;gap:1.5cqw;align-items:center;font-size:2.8cqw} .mq-thermal-metrics svg{width:4.5cqw;height:4.5cqw;fill:none;stroke:currentColor;stroke-width:1;opacity:.65} .mq-thermal-smoke-failed:after{content:'';position:absolute;left:25%;top:25%;width:50%;height:50%;border:1px solid var(--thermal-warm,#ffb55c);border-radius:50%} @media(prefers-reduced-motion:reduce){.mq-thermal-card *{animation:none!important;transition:none!important}} `; 18:Ta84,export const thermalFragment = ` uniform vec2 uResolution;uniform float uTime,uDensity,uIntro,uSpeed,uMini;uniform vec3 uWarm,uCold; float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453123);} float noise(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*f*(f*(f*6.-15.)+10.);return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+1.),f.x),f.y);} vec2 curlNoise(vec2 p){ vec2 i=floor(p),f=fract(p),u=f*f*f*(f*(f*6.-15.)+10.),du=30.*f*f*(f-1.)*(f-1.); float a=hash(i),b=hash(i+vec2(1,0)),c=hash(i+vec2(0,1)),d=hash(i+1.),k=a-b-c+d; vec2 gradient=du*vec2(b-a+k*u.y,c-a+k*u.x); return vec2(gradient.y,-gradient.x); } float fbm(vec2 p){float f=0.,a=.52;mat2 m=mat2(.8,-.6,.6,.8);for(int i=0;i<5;i++){f+=a*noise(p);p=m*p*2.07+19.13;a*=.49;}return f;} float fluid(vec2 p,float seed,float t){ vec2 n=normalize(p+vec2(.001)),v=p*5.2-n*t*.32; vec2 q=vec2(fbm(v+seed),fbm(v+vec2(4.7,9.2)+seed)); vec2 w=vec2(fbm(v+q*3.6+vec2(t*.11,1.8)),fbm(v+q*3.6+vec2(8.1,-t*.09))); // Analytic gradient of a scalar potential, rotated 90 degrees: divergence-free 2D curl. vec2 curl=curlNoise(v+vec2(seed,t*.1))*.18;return fbm(v+w*4.+curl*2.4+seed); } void main(){ vec2 p=(vUv-.5)*uResolution/min(uResolution.x,uResolution.y);float r=length(p),angle=atan(p.y,p.x),t=uTime*uSpeed; float inner=mix(.19,.255,uIntro);float a=fluid(p,2.7,t),b=fluid(p*1.12,31.9,t*.83+.7); float ridge=inner+(noise(p*35.+t*.08)-.5)*.009; float smokeRadius=inner+.16*uIntro; float diagonal=.5+.5*cos(angle*2.-2.35);float reach=.16+pow(diagonal,2.)*.27; float outer=1.-smoothstep(inner+.035,inner+reach*uIntro,r); float innerMask=smoothstep(inner-.006,inner+.025,r); float fingers=pow(clamp(a*1.9-.45,0.,1.),1.25)*outer; float wisps=pow(max(0.,1.-abs(a-.49)*9.),2.5)*outer; float coldOuter=1.-smoothstep(inner+.1,inner+reach*uIntro+.07,r); float cold=pow(clamp(b*1.75-.48,0.,1.),1.5)*coldOuter*innerMask; float warm=(fingers*.9+wisps*.4)*innerMask*uDensity; cold*=uDensity*(.45+.55*smoothstep(.15,.7,b-a)); float rim=exp(-abs(r-ridge)*230.)*(.65+noise(p*47.-t*.18)*.65); float ignition=1.+1.1*exp(-pow((uIntro-.45)*5.,2.)); vec3 color=uCold*cold*.85; color=mix(color,uWarm*(warm*1.3),clamp(warm*1.7,0.,.88)); color+=uWarm*(exp(-abs(r-ridge)*55.)*.2+rim*1.5)*ignition; color+=vec3(1.,.53,.5)*pow(rim,3.)*.6; if(uMini>.5){color=uCold*(warm+cold)*1.4+mix(uCold,vec3(.85,.98,1.),.7)*rim*1.6;} color*=smoothstep(inner-.003,inner+.002,r)*uIntro; color+=vec3(.043,.047,.063)*(1.-smoothstep(inner-.004,inner,r)); color*=1.-smoothstep(.58,.76,r);color*=smoothstep(0.,.07,vUv.x)*smoothstep(0.,.07,1.-vUv.x)*smoothstep(0.,.07,vUv.y)*smoothstep(0.,.07,1.-vUv.y);fragColor=vec4(color,1.); }`; 19:T1be1,export type GLTarget = { texture: WebGLTexture; framebuffer: WebGLFramebuffer; width: number; height: number; }; type Uniform = number | readonly number[] | { texture: WebGLTexture } | { vec4Array: Float32Array }; export type GLPass = { program: WebGLProgram; locations: Map; }; const vertex = `#version 300 es precision highp float;out vec2 vUv; void main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);vUv=p;gl_Position=vec4(p*2.-1.,0.,1.);}`; const header = `#version 300 es precision highp float;precision highp sampler2D;in vec2 vUv;out vec4 fragColor; `; /** Small WebGL2 owner shared by the native fluid and brush renderers. */ export function createNativeGL(canvas: HTMLCanvasElement, alpha = false) { const context = canvas.getContext('webgl2', { alpha, premultipliedAlpha: false, antialias: false, depth: false, stencil: false, powerPreference: 'high-performance', }); if (!context) throw Error('WebGL2 is unavailable'); const gl = context; const programs = new Set(), textures = new Set(), targets = new Set(); let disposed = false; const vao = gl.createVertexArray(); if (!vao) throw Error('Vertex array unavailable'); gl.bindVertexArray(vao); gl.disable(gl.DEPTH_TEST); gl.disable(gl.BLEND); function pass(body: string): GLPass { const shaders: WebGLShader[] = []; let program: WebGLProgram | null = null; try { for (const [type, code] of [ [gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, header + body], ] as const) { const shader = gl.createShader(type); if (!shader) throw Error('Shader unavailable'); shaders.push(shader); gl.shaderSource(shader, code); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw Error(gl.getShaderInfoLog(shader) || 'Shader compilation failed'); } program = gl.createProgram(); if (!program) throw Error('Program unavailable'); shaders.forEach((s) => gl.attachShader(program!, s)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error(gl.getProgramInfoLog(program) || 'Program linking failed'); programs.add(program); return { program, locations: new Map() }; } catch (error) { if (program) gl.deleteProgram(program); throw error; } finally { shaders.forEach((s) => gl.deleteShader(s)); } } function texture() { const t = gl.createTexture(); if (!t) throw Error('Texture unavailable'); textures.add(t); gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]), ); return t; } function upload(t: WebGLTexture, source: TexImageSource) { gl.bindTexture(gl.TEXTURE_2D, t); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source); } finally { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); } } function target(width: number, height: number, floating = false): GLTarget { const t = texture(), framebuffer = gl.createFramebuffer(); if (!framebuffer) { gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer unavailable'); } gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texImage2D( gl.TEXTURE_2D, 0, floating ? gl.RGBA16F : gl.RGBA8, width, height, 0, gl.RGBA, floating ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE, null, ); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) { gl.deleteFramebuffer(framebuffer); gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer is not renderable'); } const result = { texture: t, framebuffer, width, height }; targets.add(result); gl.viewport(0, 0, width, height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); return result; } function release(t: GLTarget) { if (!targets.delete(t)) return; gl.deleteFramebuffer(t.framebuffer); gl.deleteTexture(t.texture); textures.delete(t.texture); } function draw( p: GLPass, destination: GLTarget | null, uniforms: Record = {}, ) { gl.bindVertexArray(vao); gl.useProgram(p.program); gl.bindFramebuffer(gl.FRAMEBUFFER, destination?.framebuffer ?? null); gl.viewport( 0, 0, destination?.width ?? canvas.width, destination?.height ?? canvas.height, ); let unit = 0; for (const [name, value] of Object.entries(uniforms)) { if (!p.locations.has(name)) p.locations.set(name, gl.getUniformLocation(p.program, name)); const location = p.locations.get(name)!; if (location === null) continue; if (typeof value === 'number') gl.uniform1f(location, value); else if ('texture' in value) { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, value.texture); gl.uniform1i(location, unit++); } else if ('vec4Array' in value) gl.uniform4fv(location, value.vec4Array); else if (value.length === 2) gl.uniform2f(location, value[0], value[1]); else if (value.length === 3) gl.uniform3f(location, value[0], value[1], value[2]); else if (value.length === 4) gl.uniform4f(location, value[0], value[1], value[2], value[3]); } gl.drawArrays(gl.TRIANGLES, 0, 3); } return { gl, pass, texture, upload, target, release, draw, dispose() { if (disposed) return; disposed = true; targets.forEach(release); programs.forEach((p) => gl.deleteProgram(p)); programs.clear(); textures.forEach((t) => gl.deleteTexture(t)); textures.clear(); gl.deleteVertexArray(vao); }, }; } export const nativeClamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, Number.isFinite(n) ? n : lo)); export function nativeColor(hex: string, fallback: string): [number, number, number] { const h = /^#[\da-f]{6}$/i.test(hex) ? hex : fallback; return [ parseInt(h.slice(1, 3), 16) / 255, parseInt(h.slice(3, 5), 16) / 255, parseInt(h.slice(5, 7), 16) / 255, ]; } 1a:T8b2,/** A demand-driven clock shared by the standalone optical effects. */ export function effectRuntime( host: HTMLElement, canvas: HTMLCanvasElement, render: (time: number, dt: number) => void | boolean, paused: () => boolean, resize?: (width: number, height: number, dpr: number) => void, compact = false, ) { let frame = 0, disposed = false, visible = true, last = 0, time = 2.5, dirty = true; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); function tick(now: number) { frame = 0; if (disposed || !visible || document.hidden) return; const still = paused() || reduced.matches; const dt = Math.min((now - (last || now)) / 1000, 0.04); last = now; if (!still) time += dt; if (dirty || !still) { dirty = false; if (render(time, still ? 0 : dt) !== false) host.dataset.ready = 'true'; } if (!still) frame = requestAnimationFrame(tick); } function invalidate() { dirty = true; if (!disposed && !frame && visible && !document.hidden) frame = requestAnimationFrame(tick); } const ro = new ResizeObserver(() => { const w = Math.max(1, host.clientWidth), h = Math.max(1, host.clientHeight), dpr = Math.min(devicePixelRatio || 1, compact ? 1.5 : 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); resize?.(w, h, dpr); invalidate(); }); ro.observe(host); const io = new IntersectionObserver((entries) => { visible = entries[0].isIntersecting; last = 0; if (visible) invalidate(); else { cancelAnimationFrame(frame); frame = 0; } }); io.observe(host); function visibility() { last = 0; if (document.hidden) { cancelAnimationFrame(frame); frame = 0; } else invalidate(); } document.addEventListener('visibilitychange', visibility); reduced.addEventListener('change', invalidate); invalidate(); return { invalidate, dispose() { disposed = true; cancelAnimationFrame(frame); ro.disconnect(); io.disconnect(); document.removeEventListener('visibilitychange', visibility); reduced.removeEventListener('change', invalidate); }, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"thermal-smoke":[{"name":"thermal-smoke.tsx","code":"$17"},{"name":"thermal-shaders.ts","code":"$18"},{"name":"native-gl.ts","code":"$19"},{"name":"effect-runtime.ts","code":"$1a"}]},"initialElement":"thermal-smoke","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]