4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T40b7,"use client"; import { useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react"; // A greyscale photo that the cursor paints back into colour. Two small WebGL1 shaders: // one keeps a "trail" texture (where the brush has been, fading a little every step), the // other draws the photo in grey and mixes the colour back in wherever the trail is. Noise wobbles // the edge of the paint, and a glow mask lets only the bright, colourful pixels take colour. export type ColourTrailProps = { /** The photo to paint. Remote images need CORS (WebGL reads their pixels). */ src: string; /** Describes the photo for screen readers. Empty means the photo is decoration. */ alt?: string; /** Radius of the brush, as a share of the height. */ brushSize?: number; /** How fast the paint fades, per step (60 steps a second). 0 keeps it forever. */ fade?: number; /** How much the paint's edge wobbles. 0 is a clean circle. */ wobble?: number; /** How much paint a stroke lays down at a given speed. */ intensity?: number; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Content shown over the photo. The brush keeps painting under it. */ children?: ReactNode; }; const vertexShader = ` attribute vec2 position; varying vec2 uv; void main() { uv = position * 0.5 + 0.5; gl_Position = vec4(position, 0.0, 1.0); }`; // Last step's trail, a little faded, plus a soft line from the brush's last spot to its new one const trailShader = ` precision highp float; varying vec2 uv; uniform sampler2D trail; uniform vec2 from; uniform vec2 to; uniform float aspect; uniform float size; uniform float strength; uniform float fade; void main() { float paint = texture2D(trail, uv).r - fade; vec2 point = (uv - from) * vec2(aspect, 1.0); vec2 line = (to - from) * vec2(aspect, 1.0); float along = clamp(dot(point, line) / max(dot(line, line), 0.00001), 0.0, 1.0); float stroke = 1.0 - smoothstep(0.0, size, length(point - line * along)); gl_FragColor = vec4(paint + stroke * strength, 0.0, 0.0, 1.0); }`; // The photo in grey, with its colour mixed back in where the (wobbled) trail is const photoShader = ` precision highp float; varying vec2 uv; uniform sampler2D photo; uniform sampler2D trail; uniform vec2 scale; uniform vec2 offset; uniform float aspect; uniform float time; uniform float wobble; float random(vec2 point) { return fract(sin(dot(point, vec2(12.9898, 78.233))) * 43758.5453); } float noise(vec2 point) { vec2 cell = floor(point); vec2 blend = smoothstep(0.0, 1.0, fract(point)); float a = random(cell); float b = random(cell + vec2(1.0, 0.0)); float c = random(cell + vec2(0.0, 1.0)); float d = random(cell + vec2(1.0, 1.0)); return mix(mix(a, b, blend.x), mix(c, d, blend.x), blend.y); } void main() { vec3 color = texture2D(photo, uv * scale + offset).rgb; vec3 gray = vec3(dot(color, vec3(0.299, 0.587, 0.114))); vec2 point = uv * vec2(aspect, 1.0) * 6.0; vec2 shift = vec2(noise(point + time * 0.4), noise(point - time * 0.4 + 9.0)) - 0.5; float reveal = smoothstep(0.4, 0.6, texture2D(trail, uv + shift * wobble).r); float glow = smoothstep(0.03, 0.12, max(color.g, color.b)); gl_FragColor = vec4(mix(gray, color, reveal * glow), 1.0); }`; // The path the brush paints by itself once on touch screens, so people see what it does const hintPath = [ [0.2, 0.6], [0.4, 0.7], [0.6, 0.66], [0.8, 0.62], [0.88, 0.5], ] as const; function pointOnHint(progress: number): [number, number] { const eased = -(Math.cos(Math.PI * progress) - 1) / 2; const segments = hintPath.length - 1; const index = Math.min(Math.floor(eased * segments), segments - 1); const local = eased * segments - index; const [ax, ay] = hintPath[index]!; const [bx, by] = hintPath[index + 1]!; return [ax + (bx - ax) * local, ay + (by - ay) * local]; } // prefers-reduced-motion, live function subscribeToMotion(onChange: () => void) { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; type Trail = { texture: WebGLTexture; framebuffer: WebGLFramebuffer; width: number; height: number }; export function ColourTrail({ src, alt = "", brushSize = 0.13, fade = 0.01, wobble = 0.06, intensity = 1, className = "", children }: ColourTrailProps) { const boxRef = useRef(null); const hostRef = useRef(null); const settings = useRef({ brushSize, fade, wobble, intensity }); const reducedMotion = useSyncExternalStore(subscribeToMotion, prefersReducedMotion, () => false); // The src that failed (no WebGL, or the image won't load); a new src tries again const [failedSrc, setFailedSrc] = useState(null); const failed = failedSrc === src; const [ready, setReady] = useState(false); // The render loop reads these every frame, so changing a prop never rebuilds WebGL useEffect(() => { settings.current = { brushSize, fade, wobble, intensity }; }, [brushSize, fade, wobble, intensity]); useEffect(() => { const box = boxRef.current; const host = hostRef.current; if (!box || !host || reducedMotion || failed) return; // A fresh canvas every time: a canvas whose context was released can't make a new one const canvas = document.createElement("canvas"); canvas.setAttribute("aria-hidden", "true"); canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block"; host.appendChild(canvas); const gl = canvas.getContext("webgl", { antialias: false, premultipliedAlpha: false }); if (!gl) { canvas.remove(); setFailedSrc(src); return; } const context = gl; let alive = true; let frame = 0; let visible = true; let trails: Trail[] = []; let trailProgram: WebGLProgram | null = null; let photoProgram: WebGLProgram | null = null; let photoTexture: WebGLTexture | null = null; let buffer: WebGLBuffer | null = null; let width = 1; let height = 1; let lastTime = performance.now(); let leftover = 0; const pointer = { x: 0.5, y: 0.5 }; const brush = { x: 0.5, y: 0.5 }; let brushPlaced = false; let touched = false; let hintStart = -1; const image = new Image(); image.crossOrigin = "anonymous"; image.decoding = "async"; image.src = src; function createProgram(fragmentShader: string) { const program = context.createProgram()!; for (const [type, source] of [ [context.VERTEX_SHADER, vertexShader], [context.FRAGMENT_SHADER, fragmentShader], ] as const) { const shader = context.createShader(type)!; context.shaderSource(shader, source); context.compileShader(shader); context.attachShader(program, shader); context.deleteShader(shader); } context.bindAttribLocation(program, 0, "position"); context.linkProgram(program); return program; } function createTexture(w: number, h: number, source?: HTMLImageElement) { const texture = context.createTexture()!; context.bindTexture(context.TEXTURE_2D, texture); if (source) context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, source); else context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, w, h, 0, context.RGBA, context.UNSIGNED_BYTE, null); context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR); context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.LINEAR); context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_S, context.CLAMP_TO_EDGE); context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_T, context.CLAMP_TO_EDGE); return texture; } function createTrail(w: number, h: number): Trail { const texture = createTexture(w, h); const framebuffer = context.createFramebuffer()!; context.bindFramebuffer(context.FRAMEBUFFER, framebuffer); context.framebufferTexture2D(context.FRAMEBUFFER, context.COLOR_ATTACHMENT0, context.TEXTURE_2D, texture, 0); return { texture, framebuffer, width: w, height: h }; } function deleteTrails() { for (const trail of trails) { context.deleteTexture(trail.texture); context.deleteFramebuffer(trail.framebuffer); } trails = []; } function draw(program: WebGLProgram, uniforms: Record, textures: Record, target?: Trail) { context.useProgram(program); for (const [name, value] of Object.entries(uniforms)) { const location = context.getUniformLocation(program, name); if (Array.isArray(value)) context.uniform2fv(location, value); else context.uniform1f(location, value); } Object.entries(textures).forEach(([name, texture], unit) => { context.activeTexture(context.TEXTURE0 + unit); context.bindTexture(context.TEXTURE_2D, texture); context.uniform1i(context.getUniformLocation(program, name), unit); }); context.bindFramebuffer(context.FRAMEBUFFER, target ? target.framebuffer : null); context.viewport(0, 0, target ? target.width : canvas.width, target ? target.height : canvas.height); context.drawArrays(context.TRIANGLES, 0, 3); } // The canvas matches the box; the trail runs at half size (it's soft anyway) function resize() { width = Math.max(1, box!.clientWidth); height = Math.max(1, box!.clientHeight); const pixelRatio = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(width * pixelRatio); canvas.height = Math.round(height * pixelRatio); if (!trailProgram) return; deleteTrails(); const w = Math.max(1, Math.round(width / 2)); const h = Math.max(1, Math.round(height / 2)); trails = [createTrail(w, h), createTrail(w, h)]; } // object-fit: cover for the photo function cover() { const boxAspect = width / height; const photoAspect = image.width / image.height; const scale = boxAspect > photoAspect ? [1, photoAspect / boxAspect] : [boxAspect / photoAspect, 1]; return { scale, offset: [(1 - scale[0]!) / 2, (1 - scale[1]!) / 2] }; } // One fixed step: the brush eases toward the pointer and paints the line it travelled function paintTrail() { const from = [brush.x, brush.y]; brush.x += (pointer.x - brush.x) * 0.25; brush.y += (pointer.y - brush.y) * 0.25; const speed = Math.hypot(brush.x - from[0]!, brush.y - from[1]!); const { brushSize: size, fade: fading, intensity: amount } = settings.current; draw( trailProgram!, { from, to: [brush.x, brush.y], aspect: width / height, size, strength: Math.min(speed * 60 * amount, 1), fade: fading }, { trail: trails[0]!.texture }, trails[1], ); trails.reverse(); } function render(now: number) { if (!alive) return; frame = requestAnimationFrame(render); if (!visible) { lastTime = now; return; } // The brush on touch screens paints its hint path until the first touch if (hintStart > 0 && !touched && now >= hintStart) { const progress = Math.min((now - hintStart) / 2000, 1); const [x, y] = pointOnHint(progress); pointer.x = x; pointer.y = y; if (!brushPlaced) { brush.x = x; brush.y = y; brushPlaced = true; } if (progress === 1) hintStart = -1; } // 60 trail steps a second whatever the screen's refresh rate, so the look is the same at 120 Hz leftover = Math.min(leftover + now - lastTime, 100); lastTime = now; while (leftover >= 1000 / 60) { leftover -= 1000 / 60; paintTrail(); } const { scale, offset } = cover(); draw(photoProgram!, { scale, offset, aspect: width / height, time: now / 1000, wobble: settings.current.wobble }, { photo: photoTexture!, trail: trails[0]!.texture }); } function place(event: PointerEvent) { const rect = box!.getBoundingClientRect(); pointer.x = (event.clientX - rect.left) / rect.width; pointer.y = 1 - (event.clientY - rect.top) / rect.height; if (!brushPlaced) { brush.x = pointer.x; brush.y = pointer.y; brushPlaced = true; } } function onPointerMove(event: PointerEvent) { if (!event.isPrimary) return; touched = true; place(event); } // A new touch starts a new stroke instead of a line from the last spot function onPointerDown(event: PointerEvent) { if (!event.isPrimary) return; touched = true; brushPlaced = false; place(event); } function onPointerLeave() { brushPlaced = false; } function onContextLost(event: Event) { event.preventDefault(); cancelAnimationFrame(frame); if (alive) setFailedSrc(src); } const resizeObserver = new ResizeObserver(resize); // Nothing to draw while the box is off screen const visibility = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; }); function start() { if (!alive) return; trailProgram = createProgram(trailShader); photoProgram = createProgram(photoShader); buffer = context.createBuffer(); context.bindBuffer(context.ARRAY_BUFFER, buffer); context.bufferData(context.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), context.STATIC_DRAW); context.enableVertexAttribArray(0); context.vertexAttribPointer(0, 2, context.FLOAT, false, 0, 0); context.pixelStorei(context.UNPACK_FLIP_Y_WEBGL, true); photoTexture = createTexture(image.width, image.height, image); resize(); resizeObserver.observe(box!); visibility.observe(box!); box!.addEventListener("pointermove", onPointerMove); box!.addEventListener("pointerdown", onPointerDown); box!.addEventListener("pointerleave", onPointerLeave); canvas.addEventListener("webglcontextlost", onContextLost); if (window.matchMedia("(hover: none)").matches) hintStart = performance.now() + 1200; lastTime = performance.now(); frame = requestAnimationFrame(render); setReady(true); } image .decode() .then(start) .catch(() => alive && setFailedSrc(src)); return () => { alive = false; cancelAnimationFrame(frame); resizeObserver.disconnect(); visibility.disconnect(); box.removeEventListener("pointermove", onPointerMove); box.removeEventListener("pointerdown", onPointerDown); box.removeEventListener("pointerleave", onPointerLeave); canvas.removeEventListener("webglcontextlost", onContextLost); image.src = ""; deleteTrails(); if (photoTexture) context.deleteTexture(photoTexture); if (trailProgram) context.deleteProgram(trailProgram); if (photoProgram) context.deleteProgram(photoProgram); if (buffer) context.deleteBuffer(buffer); // Hand the context back now: browsers only allow a few at a time context.getExtension("WEBGL_lose_context")?.loseContext(); canvas.remove(); setReady(false); }; }, [src, reducedMotion, failed]); // Reduced motion, no WebGL or an image that won't load: the photo in full colour, still const still = reducedMotion || failed; return (

{still ? ( {alt}

) : (

)} {/* Pointer events from here bubble up to the box, so the brush keeps painting under the text */} {children ?

{children}

: null}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/dimaac/colour-trail/colour-trail.tsx","content":"$4f","type":"registry:component","target":"components/dimaac/colour-trail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]