<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Narrative — Creative Agency</title> <meta name="description" content="Narrative is a creative agency crafting digital experiences that define culture." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif&display=swap" rel="stylesheet" /> <style> /* ===== base ===== */ *{margin:0;padding:0;box-sizing:border-box;border-color:#26282a} :root{--accent:#c0f748;--fg:#eceeef;--bg:#0a0a0a} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:'Inter',sans-serif;overflow-x:hidden; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5} button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .serif{font-family:'Instrument Serif',serif} ::selection{background:var(--accent);color:#0a0a0a} /* ===== nav ===== */ .nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center; gap:32px;padding:12px 32px;border-radius:999px;transition:background .5s ease; background:rgba(255,255,255,.02);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1)} .nav.scrolled{background:rgba(255,255,255,.05)} .nav .group{display:flex;align-items:center;gap:24px} .nav .link{font-size:14px;opacity:.7;transition:opacity .3s;color:var(--fg)} .nav .link:hover{opacity:1} .nav .brand{margin:0 16px;font-size:20px;letter-spacing:-.02em;color:var(--fg)} .nav .plus{margin-left:8px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--accent);transition:transform .3s} .nav .plus:hover{transform:scale(1.1)} @media(max-width:720px){.nav{gap:14px;padding:10px 16px}.nav .group{gap:14px}.nav .link{font-size:13px} .nav .brand{margin:0 6px;font-size:17px}} /* ===== hero ===== */ .hero{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:center;overflow:hidden;background:var(--bg)} .hero-overlay{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center; text-align:center;padding:0 24px} .hero-glow{position:absolute;inset:0;z-index:-10;transform:scale(1.5); background:radial-gradient(ellipse at center,rgba(10,10,10,.9) 0%,transparent 70%)} .eyebrow{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;margin-bottom:24px;color:var(--accent)} .hero h1{font-family:'Instrument Serif',serif;color:var(--fg);line-height:.9;letter-spacing:-.02em; font-size:clamp(4rem,10vw,12rem)} .hero .sub{margin-top:24px;font-size:1.125rem;opacity:.6;max-width:28rem} .btn-accent{background:var(--accent);color:#0a0a0a;border-radius:999px;font-size:14px;font-weight:500; padding:12px 32px;transition:transform .3s} .btn-accent:hover{transform:scale(1.05)} .hero .explore{margin-top:40px} .scroll-ind{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column; align-items:center;gap:8px;opacity:.4} .scroll-ind span{font-size:12px;text-transform:uppercase;letter-spacing:.15em} .scroll-ind .line{width:1px;height:32px;background:linear-gradient(to bottom,var(--fg),transparent)} /* ===== marquee statement ===== */ .marquee-statement{width:100%;padding:96px 0;overflow:hidden;background:#eceeef} .marquee-track{display:flex;width:max-content;animation:marquee-scroll 10s linear infinite} .marquee-content{display:flex;align-items:center;gap:4rem;padding-right:4rem;font-size:8vw; font-family:'Instrument Serif',serif;color:#1a1c1d;will-change:transform} @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== thesis (pinned grid) ===== */ #thesis-section{position:relative;width:100%;height:100vh;background:var(--bg)} .progress-bar{position:absolute;top:0;left:0;height:4px;z-index:20;transform-origin:left; background:var(--accent);width:100%;transform:scaleX(0)} .sticky-container{position:sticky;top:0;width:100%;height:100vh;overflow:hidden} .grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);gap:4px} .grid-item{width:100%;height:100%;background-size:cover;background-position:center;opacity:0} .overlay-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10; padding:0 32px;opacity:0;transform:translateY(50px)} .overlay-text p{font-family:'Instrument Serif',serif;text-align:center;max-width:56rem;line-height:1.15; font-size:clamp(1.8rem,4vw,3.5rem);color:var(--fg)} /* ===== services spotlight ===== */ .services{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;background:var(--bg)} .services .inner{width:100%;max-width:80rem;margin:0 auto;padding:96px 32px;display:flex; flex-direction:column;align-items:center;gap:64px} .services .col{flex:1;display:flex;flex-direction:column;gap:32px;width:100%} .services .eyebrow2{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)} .services h2{font-family:'Instrument Serif',serif;color:var(--fg);line-height:1.15;font-size:clamp(2.5rem,4vw,3.5rem)} .services ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:16px} .services li{display:flex;align-items:center;gap:16px;font-size:1.125rem;opacity:.8} .services li .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)} .services .lead{margin-top:16px;font-size:1rem;opacity:.5;max-width:28rem;line-height:1.65} .spotlight{flex:1;position:relative;width:100%;aspect-ratio:1;max-width:32rem} .spotlight .glass{position:absolute;inset:0;border-radius:24px;z-index:10;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.05);backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1)} .spotlight .glass span{font-size:14px;opacity:.4;text-transform:uppercase;letter-spacing:.15em} .spotlight canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:24px;cursor:crosshair} @media(min-width:1024px){.services .inner{flex-direction:row}} /* ===== parallax showcase ===== */ #work{position:relative;width:100%;height:150vh;background:var(--bg)} #work .sticky{position:sticky;top:0;width:100%;height:100vh;overflow:hidden} .work-label{position:absolute;top:48px;left:32px;z-index:20;font-size:12px;font-weight:500; text-transform:uppercase;letter-spacing:.1em;color:var(--accent)} .parallax-layer{position:absolute;overflow:hidden;border-radius:16px;width:35vw;aspect-ratio:3/4; box-shadow:rgba(0,0,0,.4) 0px 8px 24px} .parallax-layer img{width:100%;height:100%;object-fit:cover} .work-bottom{position:absolute;bottom:48px;left:32px;right:32px;display:flex;justify-content:space-between; align-items:flex-end;z-index:20} .work-bottom p{font-size:14px;opacity:.5;max-width:20rem} .work-bottom .num{font-family:'Instrument Serif',serif;font-size:3.75rem;opacity:.1} /* ===== footer ===== */ #contact{position:relative;width:100%;display:flex;flex-direction:column;justify-content:flex-end; min-height:70vh;background:#141617} .footer-marquee{width:100%;padding:32px 0;overflow:hidden;background:var(--bg); border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)} .footer-marquee-track{display:flex;width:max-content;animation:footer-marquee 12s linear infinite} .footer-marquee-track span{font-family:'Instrument Serif',serif;color:var(--fg);opacity:.2;white-space:nowrap; padding:0 32px;font-size:clamp(4rem,8vw,8rem)} @keyframes footer-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .footer-body{width:100%;padding:64px 32px} .footer-top{max-width:80rem;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between; align-items:flex-start;gap:64px} .footer-cta h2{font-family:'Instrument Serif',serif;color:var(--fg);line-height:1;font-size:clamp(3rem,7vw,7rem)} .footer-start{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:16px 32px;border-radius:999px; font-size:1rem;font-weight:500;background:var(--accent);color:#0a0a0a;transition:transform .3s} .footer-start:hover{transform:scale(1.05)} .footer-start svg{transition:transform .3s} .footer-start:hover svg{transform:translateX(4px)} .footer-links{display:flex;flex-wrap:wrap;gap:64px} .footer-col{display:flex;flex-direction:column;gap:12px} .footer-col .h{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.4;margin-bottom:8px} .footer-col a,.footer-col button{font-size:14px;opacity:.6;transition:opacity .3s;text-align:left} .footer-col a:hover,.footer-col button:hover{opacity:1} .footer-col .muted{font-size:14px;opacity:.4} .footer-bottom{max-width:80rem;margin:64px auto 0;padding-top:32px;display:flex;flex-direction:column; justify-content:space-between;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.06)} .footer-bottom .name{font-family:'Instrument Serif',serif;font-size:20px;opacity:.6} .footer-bottom .copy{font-size:12px;opacity:.3} @media(min-width:1024px){.footer-top{flex-direction:row}.footer-cta{flex:1}} @media(min-width:640px){.footer-bottom{flex-direction:row}} /* ===== reduced motion ===== */ @media(prefers-reduced-motion:reduce){ .marquee-track,.footer-marquee-track{animation:none} *{transition:none!important} } </style> </head> <body>  <nav class="nav" id="nav"> <div class="group"> <button class="link" data-to="work">Work</button> <button class="link" data-to="about">About</button> </div> <button class="serif brand" data-to="top">Narrative</button> <div class="group"> <button class="link" data-to="studio">Studio</button> <button class="link" data-to="contact">Contact</button> </div> <button class="plus" data-to="contact" aria-label="Contact"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#0a0a0a" stroke-width="1.5" stroke-linecap="round"/></svg> </button> </nav>  <section id="hero" class="hero"> <div class="hero-overlay"> <div class="hero-glow"></div> <span class="eyebrow">Creative Agency</span> <h1 class="serif">Narrative</h1> <p class="sub">We craft digital experiences that define culture.</p> <button class="btn-accent explore" data-to="work">Explore Work</button> </div> <div class="scroll-ind"> <span>Scroll</span> <div class="line"></div> </div> </section>  <section id="about" class="marquee-statement"> <div class="marquee-track"> <div class="marquee-content"> <span> * crafting digital futures * </span><span> * crafting digital futures * </span> <span> * crafting digital futures * </span><span> * crafting digital futures * </span> </div> <div class="marquee-content"> <span> * crafting digital futures * </span><span> * crafting digital futures * </span> <span> * crafting digital futures * </span><span> * crafting digital futures * </span> </div> </div> </section>  <section id="thesis-section"> <div class="progress-bar"></div> <div class="sticky-container"> <div class="grid" id="thesis-grid"></div> <div class="overlay-text"> <p class="serif">Our approach is a convergence of aesthetic precision and technical mastery.</p> </div> </div> </section>  <section id="studio" class="services"> <div class="inner"> <div class="col"> <span class="eyebrow2">Capabilities</span> <h2 class="serif">End-to-end digital craftsmanship.</h2> <ul> <li><span class="dot"></span>Branding</li> <li><span class="dot"></span>Web Design</li> <li><span class="dot"></span>Creative Development</li> <li><span class="dot"></span>Motion</li> </ul> <p class="lead">From initial brand strategy to final deployment, we handle every aspect of the creative process with meticulous attention to detail.</p> </div> <div class="spotlight"> <div class="glass"><span>Move your cursor</span></div> <canvas id="spotlight-canvas"></canvas> </div> </div> </section>  <section id="work"> <div class="sticky"> <div class="work-label">Selected Work</div> <div class="parallax-layer" style="top:15%;left:20%" data-speed="0.3"><img src="parallax-1.jpg" alt="Portfolio piece 1" loading="lazy" /></div> <div class="parallax-layer" style="top:25%;left:40%" data-speed="0.6"><img src="parallax-2.jpg" alt="Portfolio piece 2" loading="lazy" /></div> <div class="parallax-layer" style="top:10%;left:60%" data-speed="0.9"><img src="parallax-3.jpg" alt="Portfolio piece 3" loading="lazy" /></div> <div class="work-bottom"> <p>Every project is a story waiting to be told through design.</p> <span class="serif num">03</span> </div> </div> </section>  <footer id="contact"> <div class="footer-marquee"> <div class="footer-marquee-track"> <span>Let's work together  —  Let's work together  —  Let's work together  — </span> <span>Let's work together  —  Let's work together  —  Let's work together  — </span> </div> </div> <div class="footer-body"> <div class="footer-top"> <div class="footer-cta"> <h2 class="serif" id="footer-cta-text">Let's Talk.</h2> <a href="mailto:hello@narrative.studio" class="footer-start"> Start a project <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10h12M12 6l4 4-4 4" stroke="#0a0a0a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> </a> </div> <div class="footer-links"> <div class="footer-col"> <span class="h">Navigate</span> <button data-to="work">Work</button> <button data-to="about">About</button> <button data-to="studio">Studio</button> <button data-to="contact">Contact</button> </div> <div class="footer-col"> <span class="h">Social</span> <a href="#">LinkedIn</a><a href="#">Twitter</a><a href="#">Instagram</a><a href="#">Dribbble</a> </div> <div class="footer-col"> <span class="h">Contact</span> <a href="mailto:hello@narrative.studio">hello@narrative.studio</a> <span class="muted">New York, NY</span> </div> </div> </div> <div class="footer-bottom"> <span class="serif name">Narrative</span> <span class="copy" id="footer-copy">© 2026 Narrative Studio. All rights reserved.</span> </div> </div> </footer>  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <script> (function () { var RM = window.matchMedia('(prefers-reduced-motion: reduce)').matches; var hasGSAP = typeof window.gsap !== 'undefined'; if (hasGSAP && window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger); /* ---------- footer year ---------- */ document.getElementById('footer-copy').innerHTML = '© ' + new Date().getFullYear() + ' Narrative Studio. All rights reserved.'; /* ---------- native scrolling (no smooth-scroll delay) ---------- */ // ScrollTrigger tracks native window scroll directly, so pinned/scrub // effects work without any inertia layer. /* ---------- nav: scroll-to + background on scroll ---------- */ function scrollToId(id) { if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; } var el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); } document.querySelectorAll('[data-to]').forEach(function (b) { b.addEventListener('click', function () { scrollToId(b.getAttribute('data-to')); }); }); var nav = document.getElementById('nav'); window.addEventListener('scroll', function () { nav.classList.toggle('scrolled', window.scrollY > 50); }, { passive: true }); /* ---------- thesis: pinned grid reveal ---------- */ (function thesis() { var grid = document.getElementById('thesis-grid'); if (!grid) return; var order = [1,2,3,4,5,6,7,8,9,1,3,5,7,9,2,4]; order.forEach(function (n) { var d = document.createElement('div'); d.className = 'grid-item'; d.style.backgroundImage = 'url(grid-' + n + '.jpg)'; grid.appendChild(d); }); if (!hasGSAP || !window.ScrollTrigger) { // static fallback: show first frame grid.querySelectorAll('.grid-item').forEach(function (el) { el.style.opacity = '.25'; }); var ot = document.querySelector('.overlay-text'); if (ot) { ot.style.opacity = '1'; ot.style.transform = 'none'; } return; } var gridItems = grid.querySelectorAll('.grid-item'); var overlayText = document.querySelector('.overlay-text'); var progressBar = document.querySelector('.progress-bar'); var master = gsap.timeline({ scrollTrigger: { trigger: '#thesis-section', start: 'top top', end: '+=4000', pin: true, scrub: 1, onUpdate: function (self) { if (progressBar) gsap.set(progressBar, { scaleX: self.progress }); } } }); var tl = gsap.timeline({ defaults: { duration: 0.4, ease: 'power1.inOut' } }); gridItems.forEach(function (element, index) { var row = Math.floor(index / 4), col = index % 4, delay = (row + col) * 0.04; tl.to(element, { opacity: 1, scale: 1.05 }, delay); tl.to(element, { opacity: 0, scale: 1 }, delay + 0.2); }); master.add(tl, 0); if (overlayText) master.to(overlayText, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' }, 'reveal'); })(); /* ---------- parallax showcase ---------- */ (function parallax() { if (!hasGSAP || !window.ScrollTrigger) return; var section = document.getElementById('work'); if (!section) return; section.querySelectorAll('.parallax-layer').forEach(function (layer) { var speed = parseFloat(layer.getAttribute('data-speed')) || 0.5; ScrollTrigger.create({ trigger: section, start: 'top bottom', end: 'bottom top', scrub: 1, onUpdate: function (self) { gsap.set(layer, { y: (self.progress - 0.5) * 200 * speed }); } }); }); })(); /* ---------- footer reveal ---------- */ (function footerReveal() { if (!hasGSAP || !window.ScrollTrigger || RM) return; var text = document.getElementById('footer-cta-text'); var footer = document.getElementById('contact'); if (!text || !footer) return; gsap.fromTo(text, { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: 1.2, ease: 'power3.out', scrollTrigger: { trigger: footer, start: 'top 80%' } }); })(); /* ---------- services: WebGL spotlight shader ---------- */ (function spotlight() { var canvas = document.getElementById('spotlight-canvas'); if (!canvas) return; var gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false }); if (!gl) return; var VERT = [ 'attribute vec2 a_position;', 'varying vec2 v_uv;', 'void main(){ v_uv = a_position * 0.5 + 0.5; gl_Position = vec4(a_position, 0.0, 1.0); }' ].join('\n'); var FRAG = [ 'precision highp float;', 'varying vec2 v_uv;', 'uniform float u_time;', 'uniform vec2 u_mouse;', 'uniform vec2 u_resolution;', 'uniform float u_intensity;', 'float S(float a, float b, float x){ return smoothstep(a,b,x) * smoothstep(b,a,x); }', 'float fn(vec2 p){', ' vec2 f = floor(p * 20.0);', ' vec2 fr = fract(p * 20.0);', ' float g = fract(sin(dot(f, vec2(127.1,311.7))) * 43758.5453);', ' float h = fract(sin(dot(f + vec2(1.0,0.0), vec2(127.1,311.7))) * 43758.5453);', ' float i = fract(sin(dot(f + vec2(0.0,1.0), vec2(127.1,311.7))) * 43758.5453);', ' float j = fract(sin(dot(f + vec2(1.0,1.0), vec2(127.1,311.7))) * 43758.5453);', ' fr = fr * fr * (3.0 - 2.0 * fr);', ' return mix(mix(g,h,fr.x), mix(i,j,fr.x), fr.y);', '}', 'void main(){', ' vec2 uv = v_uv;', ' vec2 mouseUV = u_mouse / u_resolution;', ' float mouseDist = length(uv - mouseUV);', ' float t = u_time * 0.3;', ' float line = sin(uv.x * 3.14159 + t * 2.0 + mouseDist * 5.0) * 0.4 + 0.5;', ' float mask = smoothstep(line - 0.1, line + 0.1, uv.y);', ' float mask2 = S(line - 0.15, line + 0.15, uv.y);', ' float noise = fn(uv + t * 0.1) * 0.15 + fn(uv * 2.0 + t * 0.2) * 0.075 + fn(uv * 4.0 + t * 0.3) * 0.0375;', ' float lightAngle = atan(uv.y - mouseUV.y, uv.x - mouseUV.x);', ' vec2 lightDir = vec2(cos(lightAngle), sin(lightAngle));', ' float light = dot(normalize(uv - mouseUV), lightDir);', ' float glow = smoothstep(0.3, 1.0, light) * (1.0 - mouseDist);', ' vec3 baseColor = vec3(0.04, 0.04, 0.04);', ' vec3 green1 = vec3(0.753, 0.969, 0.282);', ' vec3 white1 = vec3(0.93, 0.93, 0.94);', ' vec3 color = mix(baseColor, green1 * 1.5, mask * 0.6);', ' color = mix(color, white1, mask2 * 0.5 * glow);', ' color += noise * 0.1;', ' color += glow * 0.3;', ' float finalMask = smoothstep(0.1, 0.12, mask);', ' gl_FragColor = vec4(color, finalMask * 0.95);', '}' ].join('\n'); function compile(type, src) { var sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { gl.deleteShader(sh); return null; } return sh; } var vs = compile(gl.VERTEX_SHADER, VERT), fs = compile(gl.FRAGMENT_SHADER, FRAG); if (!vs || !fs) return; var program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return; gl.useProgram(program); var vertices = new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]); var buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var aPosition = gl.getAttribLocation(program, 'a_position'); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); var uTime = gl.getUniformLocation(program, 'u_time'); var uMouse = gl.getUniformLocation(program, 'u_mouse'); var uResolution = gl.getUniformLocation(program, 'u_resolution'); var uIntensity = gl.getUniformLocation(program, 'u_intensity'); gl.uniform1f(uIntensity, 1.0); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); function resize() { var rect = canvas.getBoundingClientRect(); var dpr = Math.min(window.devicePixelRatio, 2); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(uResolution, canvas.width, canvas.height); } resize(); window.addEventListener('resize', resize); var mouse = { x: 0, y: 0 }, target = { x: 0, y: 0 }; window.addEventListener('mousemove', function (e) { var rect = canvas.getBoundingClientRect(); var dpr = Math.min(window.devicePixelRatio, 2); target.x = (e.clientX - rect.left) * dpr; target.y = (rect.height - (e.clientY - rect.top)) * dpr; }); var start = performance.now(); function render() { var elapsed = (performance.now() - start) / 1000; mouse.x += (target.x - mouse.x) * 0.08; mouse.y += (target.y - mouse.y) * 0.08; gl.uniform1f(uTime, elapsed); gl.uniform2f(uMouse, mouse.x, mouse.y); gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(render); } requestAnimationFrame(render); })(); })(); </script> </body> </html>

Code & assets

Design System