Shader on Scroll

gsap.registerPlugin(ScrollTrigger);

// Shared velocity proxy for all canvases
const velocityProxy = { v: 0, s: 0 }; // v = signed, s = strength (0..1)
const clamp = gsap.utils.clamp(-2000, 2000);

// A single ScrollTrigger to compute velocity and tween back to 0
ScrollTrigger.create({
 start: 0,
 end: () => document.documentElement.scrollHeight - window.innerHeight,
 onUpdate(self) {
 const raw = clamp(self.getVelocity()); // px/s-ish
 const norm = raw / 1000; // ~ -1..1
 const strength = Math.min(1, Math.abs(norm));

 if (Math.abs(strength) > Math.abs(velocityProxy.s)) {
 velocityProxy.v = norm;
 velocityProxy.s = strength;
 gsap.to(velocityProxy, {
 v: 0,
 s: 0,
 duration: 0.8,
 ease: "sine.inOut",
 overwrite: true
 });
 }
 }
});

// Vertex shader
const vert = /* glsl */ `
 varying vec2 vUv;
 varying vec2 vUvCover;
 uniform vec2 uTextureSize;
 uniform vec2 uQuadSize;

 void main(){
 vUv = uv;

 // "cover" mapping to preserve aspect ratio
 float texR = uTextureSize.x / uTextureSize.y;
 float quadR = uQuadSize.x / uQuadSize.y;
 vec2 s = vec2(1.0);
 if (quadR > texR) { s.y = texR / quadR; } else { s.x = quadR / texR; }
 vUvCover = vUv * s + (1.0 - s) * 0.5;

 gl_Position = vec4(position, 1);
 }
 `;

// Fragment shader
const frag = `
 precision highp float;

 uniform sampler2D uTexture;
 uniform vec2 uTextureSize;
 uniform vec2 uQuadSize;
 uniform float uTime;
 uniform float uScrollVelocity; // signed -1..1
 uniform float uVelocityStrength; // 0..1, decays to 0

 varying vec2 vUv;
 varying vec2 vUvCover;

 void main() {
 vec2 texCoords = vUvCover;

 // drive distortion amount from velocity strength
 float amt = 0.03 * uVelocityStrength;

 // small wave that doesn’t depend on mouse
 float t = uTime * 0.8;
 texCoords.y += sin((texCoords.x * 8.0) + t) * amt;
 texCoords.x += cos((texCoords.y * 6.0) - t * 0.8) * amt * 0.6;

 // optional directional tint: push R/G/B differently by scroll direction
 float dir = sign(uScrollVelocity);
 vec2 tc = texCoords;

 float r = texture2D(uTexture, tc + vec2( amt * 0.50 * dir, 0.0)).r;
 float g = texture2D(uTexture, tc + vec2( amt * 0.25 * dir, 0.0)).g;
 float b = texture2D(uTexture, tc + vec2(-amt * 0.35 * dir, 0.0)).b;

 gl_FragColor = vec4(r, g, b, 1.0);
 }
 `;

// Build one tiny Three.js scene per frame
document.querySelectorAll(".frame").forEach(initFrame);

function initFrame(frameEl) {
 const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
 frameEl.appendChild(renderer.domElement);
 renderer.outputColorSpace = THREE.SRGBColorSpace;
 renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));

 const scene = new THREE.Scene();
 const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
 const geom = new THREE.PlaneGeometry(2, 2);

 const uniforms = {
 uTexture: { value: null },
 uTextureSize: { value: new THREE.Vector2(1, 1) },
 uQuadSize: { value: new THREE.Vector2(1, 1) },
 uTime: { value: 0 },
 uScrollVelocity: { value: 0 },
 uVelocityStrength: { value: 0 }
 };

 const mat = new THREE.ShaderMaterial({
 uniforms,
 vertexShader: vert,
 fragmentShader: frag,
 transparent: true
 });

 const mesh = new THREE.Mesh(geom, mat);
 scene.add(mesh);

 // Load the image for this frame
 const url = frameEl.getAttribute("data-img");
 const loader = new THREE.TextureLoader();
 loader.setCrossOrigin("anonymous");
 loader.load(url, (tex) => {
 tex.colorSpace = THREE.SRGBColorSpace;

 uniforms.uTexture.value = tex;
 uniforms.uTextureSize.value.set(tex.image.width, tex.image.height);
 layout(); // size once we know texture size
 });

 function layout() {
 const { width, height } = frameEl.getBoundingClientRect();
 renderer.setSize(width, height, false);
 uniforms.uQuadSize.value.set(width, height);
 }

 // Animate this canvas
 let last = performance.now();
 function tick(now) {
 const dt = (now - last) * 0.001;
 last = now;
 uniforms.uTime.value += dt;

 // pull shared velocity state into our uniforms
 uniforms.uScrollVelocity.value = velocityProxy.v;
 uniforms.uVelocityStrength.value = velocityProxy.s;

 renderer.render(scene, camera);
 }
 gsap.ticker.add(tick);
}

/* StyleGallery host styles: independent replacement for unavailable shared Pen CSS. */
:root{--color-just-black:#111522;--color-surface-white:#f7f3ec;--color-surface75:#cfccc6;--color-surface50:#898e9f;--color-surface25:#414859;--color-shockingly-green:#95efd2;--color-lt-green:#b5f4da;--color-pink:#fbadce;--color-purple:#897dff;--color-lilac:#b5a1ff;--color-orangey:#ffd28c;--color-blue:#75d8ed;--color-ui-gradient:linear-gradient(135deg,#fbadce,#897dff);--color-ui-gradient-background:linear-gradient(135deg,#fbadce,#897dff);--color-text-gradient:linear-gradient(135deg,#fbadce,#897dff);--gradient-summer-fair:linear-gradient(135deg,#ffd28c,#fbadce);--gradient-lipstick:linear-gradient(135deg,#fbadce,#fc7f8e);--gradient-macha:linear-gradient(135deg,#b5f4da,#75d8ed);--color-grey:#898e9f;--color-grey-dark:#414859;--color-scroll-pink-lt:#fbadce;--color-text-purple:#b5a1ff;--surface50:#898e9f;--light:#f7f3ec;--dark:#111522;--mid:#898e9f}
*{box-sizing:border-box}body{background:#111522;color:#f7f3ec;font-family:system-ui,sans-serif;margin:0;min-height:100vh;width:100%}button,input{font:inherit}button,.button{background:#111522;border:1px solid #898e9f;border-radius:.55rem;color:#f7f3ec;cursor:pointer;padding:.65rem 1rem}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #95efd2;outline-offset:4px}h1,h2,h3,h4{line-height:1.15}h4{font-weight:500}code{font-family:ui-monospace,monospace}.heading-l{font-size:clamp(2rem,6vw,5rem)}.heading-text{font-size:clamp(1.5rem,4vw,3rem)}.box{background:#95efd2;border-radius:14px;height:clamp(38px,12vw,80px);width:clamp(38px,12vw,80px)}.green{background:#95efd2}.purple{background:#897dff}.orange{background:#ffd28c}.gradient-pink{background:linear-gradient(140deg,#fbadce,#fc7f8e)}.gradient-purple{background:linear-gradient(140deg,#b5a1ff,#537ff7)}.center{align-items:center;display:flex;justify-content:center}.text-center{text-align:center}.panel{min-height:100vh;width:100%}.flair:not(img){background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDgiIGhlaWdodD0iMjQ4IiB2aWV3Qm94PSIwIDAgMjQ4IDI0OCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNiNWExZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3NWQ4ZWQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2cpIj48cGF0aCBkPSJNODcgMjBoNzR2NjdoNjd2NzRoLTY3djY3SDg3di02N0gyMFY4N2g2N1oiLz48L2c+PC9zdmc+");background-position:center;background-repeat:no-repeat;background-size:contain;height:80px;width:80px}.flair--3:not(img){background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDgiIGhlaWdodD0iMjQ4IiB2aWV3Qm94PSIwIDAgMjQ4IDI0OCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiM5NWVmZDIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1MzdmZjciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2cpIj48Y2lyY2xlIGN4PSIxMjQiIGN5PSIxMjQiIHI9Ijg4IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iNDgiLz48Y2lyY2xlIGN4PSIxODMiIGN5PSI2MCIgcj0iMjMiIGZpbGw9IiNmNmYzZWIiLz48L2c+PC9zdmc+")}.braces{font-size:1rem}img{max-width:100%}
/* External font programs are omitted; preserve readable fallback typography. */
body,button,input,h1,h2,h3,h4,p,span,div{font-family:inherit}body{font-family:system-ui,sans-serif}code,pre{font-family:ui-monospace,monospace}

window.__STYLEGALLERY_ASSETS__={};
gsap.registerPlugin(ScrollTrigger);
const velocityProxy = { v: 0, s: 0 };
const clamp = gsap.utils.clamp(-2e3, 2e3);
ScrollTrigger.create({
  start: 0,
  end: () => document.documentElement.scrollHeight - window.innerHeight,
  onUpdate(self) {
    const raw = clamp(self.getVelocity());
    const norm = raw / 1e3;
    const strength = Math.min(1, Math.abs(norm));
    if (Math.abs(strength) > Math.abs(velocityProxy.s)) {
      velocityProxy.v = norm;
      velocityProxy.s = strength;
      gsap.to(velocityProxy, {
        v: 0,
        s: 0,
        duration: 0.8,
        ease: "sine.inOut",
        overwrite: true
      });
    }
  }
});
const vert = (
  /* glsl */
  `
 varying vec2 vUv;
 varying vec2 vUvCover;
 uniform vec2 uTextureSize;
 uniform vec2 uQuadSize;

 void main(){
 vUv = uv;

 // "cover" mapping to preserve aspect ratio
 float texR = uTextureSize.x / uTextureSize.y;
 float quadR = uQuadSize.x / uQuadSize.y;
 vec2 s = vec2(1.0);
 if (quadR > texR) { s.y = texR / quadR; } else { s.x = quadR / texR; }
 vUvCover = vUv * s + (1.0 - s) * 0.5;

 gl_Position = vec4(position, 1);
 }
 `
);
const frag = `
 precision highp float;

 uniform sampler2D uTexture;
 uniform vec2 uTextureSize;
 uniform vec2 uQuadSize;
 uniform float uTime;
 uniform float uScrollVelocity; // signed -1..1
 uniform float uVelocityStrength; // 0..1, decays to 0

 varying vec2 vUv;
 varying vec2 vUvCover;

 void main() {
 vec2 texCoords = vUvCover;

 // drive distortion amount from velocity strength
 float amt = 0.03 * uVelocityStrength;

 // small wave that doesn’t depend on mouse
 float t = uTime * 0.8;
 texCoords.y += sin((texCoords.x * 8.0) + t) * amt;
 texCoords.x += cos((texCoords.y * 6.0) - t * 0.8) * amt * 0.6;

 // optional directional tint: push R/G/B differently by scroll direction
 float dir = sign(uScrollVelocity);
 vec2 tc = texCoords;

 float r = texture2D(uTexture, tc + vec2( amt * 0.50 * dir, 0.0)).r;
 float g = texture2D(uTexture, tc + vec2( amt * 0.25 * dir, 0.0)).g;
 float b = texture2D(uTexture, tc + vec2(-amt * 0.35 * dir, 0.0)).b;

 gl_FragColor = vec4(r, g, b, 1.0);
 }
 `;
document.querySelectorAll(".frame").forEach(initFrame);
function initFrame(frameEl) {
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  frameEl.appendChild(renderer.domElement);
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
  const scene = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  const geom = new THREE.PlaneGeometry(2, 2);
  const uniforms = {
    uTexture: { value: null },
    uTextureSize: { value: new THREE.Vector2(1, 1) },
    uQuadSize: { value: new THREE.Vector2(1, 1) },
    uTime: { value: 0 },
    uScrollVelocity: { value: 0 },
    uVelocityStrength: { value: 0 }
  };
  const mat = new THREE.ShaderMaterial({
    uniforms,
    vertexShader: vert,
    fragmentShader: frag,
    transparent: true
  });
  const mesh = new THREE.Mesh(geom, mat);
  scene.add(mesh);
  const url = frameEl.getAttribute("data-img");
  const loader = new THREE.TextureLoader();
  loader.setCrossOrigin("anonymous");
  loader.load(url, (tex) => {
    tex.colorSpace = THREE.SRGBColorSpace;
    uniforms.uTexture.value = tex;
    uniforms.uTextureSize.value.set(tex.image.width, tex.image.height);
    layout();
  });
  function layout() {
    const { width, height } = frameEl.getBoundingClientRect();
    renderer.setSize(width, height, false);
    uniforms.uQuadSize.value.set(width, height);
  }
  let last = gsap.ticker.time;
  function tick(now) {
    const dt = now - last;
    last = now;
    uniforms.uTime.value += dt;
    uniforms.uScrollVelocity.value = velocityProxy.v;
    uniforms.uVelocityStrength.value = velocityProxy.s;
    renderer.render(scene, camera);
  }
  gsap.ticker.add(tick);
}
addEventListener("load", () => requestAnimationFrame(() => {
  document.querySelector(".frame").scrollIntoView({ block: "center", behavior: "instant" });
  ScrollTrigger.update();
}));

<!--

Copyright (c) 2025 - GreenSock - https://codepen.io/GreenSock/pen/EaVbXeM

Permission is hereby granted, free of charge, to any person 
obtaining a copy of this software and associated documentation 
files (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify, 
merge, publish, distribute, sublicense, and/or sell copies of 
the Software, and to permit persons to whom the Software is 
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall 
be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
DEALINGS IN THE SOFTWARE.

-->


GSAP 3.15.0
Copyright 2026, GreenSock. All rights reserved.
Subject to the Standard No Charge License: https://gsap.com/standard-license.
The full notice in each original GSAP library file is preserved.

The MIT License

Copyright © 2010-2023 three.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

StyleGallery host adapter and replacement SVG subjects: locally authored.