Lichtstralen, rustig New
A calm background of soft light rays falling from the top left corner across a dark surface and shifting very slowly, like light through a window. One fragment shader in OGL on a triangle, paused off screen, a single still frame with reduced motion and a CSS fallback (conic-gradient) without WebGL. For the hero of a showroom, gallery or event where the text does the work.
Open avond in de showroom
Donderdag 23 oktober van 19.00 tot 21.30 uur bij Keukenstudio Eemland in Amersfoort. Met koffie en een ontwerper aan tafel.
How to use it
- Paste the HTML where the backgrounds & webgl should appear. Include the script tags at the top once per page.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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'));More backgrounds & webgl
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →