Lichtstralen, rustig Nieuw

<!-- Lichtstralen, rustig · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script type="module">import * as OGL from "https://esm.sh/ogl@1.0.11"; window.OGL = OGL;</script>

<div class="jouw-container">
<div class="lsr">
<div class="lsr__bg" aria-hidden="true"></div>
<div class="lsr__ct">
<h3 class="lsr__h">Open avond in de showroom</h3>
<p class="lsr__p">Donderdag 23 oktober van 19.00 tot 21.30 uur bij Keukenstudio Eemland in Amersfoort. Met koffie en een ontwerper aan tafel.</p>
<button class="lsr__btn" type="button">Aanmelden</button>
</div>
</div>
</div>

/* Lichtstralen, rustig · NedDev · eigen werk. */
.lsr{position:absolute;inset:0;background:#0a0a0a;color:#fff;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.lsr__bg{position:absolute;inset:0}
.lsr__bg canvas{display:block;width:100%;height:100%}
.lsr.is-css .lsr__bg{inset:-20px;filter:blur(7px);background:radial-gradient(120% 90% at 12% -10%,rgba(255,226,196,.22),rgba(10,10,10,0) 70%),repeating-conic-gradient(from 112deg at 14% -18%,rgba(255,230,205,.07) 0deg 3deg,rgba(255,230,205,0) 3deg 7deg,rgba(255,230,205,.04) 7deg 9deg,rgba(255,230,205,0) 9deg 14deg);-webkit-mask:radial-gradient(130% 110% at 14% -10%,#000 30%,transparent 85%);mask:radial-gradient(130% 110% at 14% -10%,#000 30%,transparent 85%)}
.lsr__ct{position:absolute;left:20px;right:20px;bottom:18px;max-width:330px}
.lsr__h{margin:0 0 6px;font:600 clamp(18px,5.2cqi,24px)/1.15 'Switzer',sans-serif;letter-spacing:-.015em}
.lsr{container-type:inline-size}
.lsr__p{margin:0 0 12px;font:400 13px/1.45 'Switzer',sans-serif;color:#d6d3ce}
.lsr__btn{min-height:34px;padding:0 14px;border:0;border-radius:4px;background:#F5480F;color:#fff;font:600 13px/1 'Switzer',sans-serif;cursor:pointer}
.lsr__btn:hover{background:#ff5c24}
.lsr__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@container (max-width:370px){.lsr__p{font-size:12px;margin-bottom:10px}.lsr__ct{left:16px;bottom:14px}}

// Lichtstralen, rustig · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.lsr');if(!w)return;var bg=w.querySelector('.lsr__bg');
function fallback(){w.classList.add('is-css');}
if(typeof OGL==='undefined'){fallback();return;}
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,renderer,gl;
try{renderer=new OGL.Renderer({alpha:false,dpr:Math.min(1.5,window.devicePixelRatio||1)});gl=renderer.gl;if(!gl)throw 0;}catch(e){fallback();return;}
bg.appendChild(gl.canvas);gl.clearColor(.04,.04,.04,1);
var frag='precision highp float;uniform float uT;uniform vec2 uR;varying vec2 vUv;'+
'float h(vec2 p){return fract(sin(dot(p,vec2(41.3,289.1)))*43758.55);}'+
'float band(float a,float f,float s,float o){return smoothstep(.35,1.,sin(a*f+uT*s+o)*.5+.5);}'+
'void main(){float asp=uR.x/uR.y;vec2 p=vec2(vUv.x*asp,vUv.y);vec2 src=vec2(asp*.12,1.22);vec2 d=p-src;float r=length(d);float a=atan(d.x,-d.y);'+
'float rays=band(a,19.,.11,0.)*.55+band(a,31.,-.08,1.7)*.35+band(a,7.,.05,3.1)*.45;'+
'float cone=smoothstep(1.35,.55,a)*smoothstep(-.15,.35,a);float fall=exp(-r*1.15);'+
'vec3 warm=vec3(1.,.88,.76);vec3 col=vec3(.04)+warm*rays*cone*fall*.42+vec3(.96,.28,.06)*cone*fall*.07;'+
'col+=(h(gl_FragCoord.xy+uT)-.5)*.018;gl_FragColor=vec4(col,1.);}';
var prog=new OGL.Program(gl,{vertex:'attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.,1.);}',fragment:frag,uniforms:{uT:{value:12},uR:{value:[1,1]}}});
var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:prog});
function resize(){var W=w.clientWidth,H=w.clientHeight;if(!W||!H)return;renderer.setSize(W,H);prog.uniforms.uR.value=[W,H];renderer.render({scene:mesh});}
resize();if('ResizeObserver' in window)new ResizeObserver(resize).observe(w);
if(rm)return;var vis=true;new IntersectionObserver(function(es){es.forEach(function(e){vis=e.isIntersecting;});}).observe(w);
(function f(t){requestAnimationFrame(f);if(!vis||document.hidden)return;prog.uniforms.uT.value=12+t*.001;renderer.render({scene:mesh});})(0);
}
init(document.querySelector('.jouw-container'));