smpnjn

    vDistortion = snoise(vUv.xx * 3. - vec2(u_time / u_rand.x, u_time / u_rand.x) + cos(vUv.yy) * u_rand.y) * u_height;
    xDistortion = snoise(vUv.xx * 1.) * u_height * u_rand.x / 10.;
    vec3 pos = position;
    pos.z += (vDistortion * 55.);
    pos.x += (xDistortion * 55.);
    pos.y += (sin(vUv.y) * 55.);
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);

smpnjn

    vec3 highColor = rgb(u_highColor.r, u_highColor.g, u_highColor.b);
    
    vec3 colorMap = rgb(u_lowColor.r, u_lowColor.g, u_lowColor.b);

    colorMap = mix(colorMap, highColor, vDistortion);
    
    gl_FragColor = vec4(colorMap, 1.);

smpnjn

    let mousedown = false;
    let initialPosition = 0;
    let selectedItem;
    let currentDelta = 0;

    document.querySelectorAll(config.carouselId).forEach(function(item) { 
        item.style.width = `${config.carouselWidth}px`;
    });
    
    document.querySelectorAll(config.carouselId).forEach(function(item) {

smpnjn

// Please see Github or Codepen for the full code, this is only an example
document.querySelectorAll('.button').forEach(function(item) {

  const elWidth = (parseFloat(window.getComputedStyle(item).width) + parseFloat(window.getComputedStyle(item).paddingLeft) * 2) + 200;
  const elHeight = (parseFloat(window.getComputedStyle(item).height) + parseFloat(window.getComputedStyle(item).paddingTop) * 2) + 200;

  // Set sizes and set scene/camera
  renderer.setSize( elWidth, elHeight );
  document.body.appendChild( renderer.domElement )
  renderer.setPixelRatio( elWidth/elHeight );

smpnjn

void main() {
    // We need to adjust the size of the effect to the screen resolution
    vec2 res = (gl_FragCoord.xy + 100.) / (u_resolution.xy * u_scale);
    // Then we access the colors we defined in JS
    vec3 highColor = rgb(u_highColor.r, u_highColor.g, u_highColor.b);
    vec3 lowColor = rgb(u_lowColor.r, u_lowColor.g, u_lowColor.b);
    vec3 color = vec3(0.0);
    
    // Then we do one run through of FBM using various variables we defined

smpnjn

<picture>
    <source srcset="241220204.webp" type="image/webp" />
    <img src="241220204.png" alt="Some alt text goes here" />
</picture>

smpnjn

for f in $(find /link/to/your/directory/goes/here -name '*.png' -or -name '*.jpg' -or -name '*.jpeg'); do cwebp -q 60 $f -o ${f%.*}.webp; done

smpnjn

const vapidKey = '<<Your Public Vapid Key>>';

document.getElementById('subscribe').addEventListener('click', async function(e) {
    const registration = await navigator.serviceWorker.register('worker.js', {scope: '/'});
    const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(vapidKey)
    });
    await fetch('/subscribe', {
        method: 'POST',

smpnjn

npm i web-push -g
web-push generate-vapid-keys

smpnjn

// Service Worker Notifications
const publicVapidKey = '<<<Public Vapid Key>>>';
const privateVapidKey = '<<<Private Vapid Key>>>';

webpush.setVapidDetails('mailto:[email protected]', publicVapidKey, privateVapidKey);

app.post('/subscribe', jsonParser, async function(req, res) {
    try {
        let hash = objectHash(req.body);
        let subscription = req.body;