# Slit-Scan Stretch > A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle. three.js and one shader; GSAP core runs the media branching, the load sweep and the release. Canonical: https://gsapvault.com/effects/slit-scan-stretch Live demo: https://gsapvault.com/demos/slit-scan-stretch/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | webgl-shader, chromatic-aberration, pointer-tracking, velocity-reactive, touch-drag | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 28 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview A full-bleed photograph rendered like the finish-line cameras of the 1970s, which never took a picture at all: they read one thin slit, over and over, and let the film travel past it. Here the slit follows the pointer, and every column of the picture is captured at a different moment. The further a column sits from the slit, the older the pointer position it was sampled at, so a sweep across the frame drags the photograph out behind you into long horizontal streaks that follow the path of your hand, up and down as well as across. Red, green and blue are read at slightly different delays, so the streaks are fringed with a fine spectrum rather than a flat smear. The side the pointer is heading toward gets a short bow wave, the side it has left gets the long trail, and reversing direction rolls one into the other. Let go and nothing snaps. The delays collapse on an eased curve, the streaks pull back into the slit, and the clean photograph returns. On touch a finger drags the slit, and between touches it sways on its own so a phone never shows a dead picture. Without JavaScript, without WebGL or under reduced motion the photograph is simply shown. ## Features - Time-delayed column sampling from a history buffer: each column of the frame reads the photograph displaced by where the pointer was N frames ago, with the delay growing outward from the slit - Held columns, not folds: where the drag would fold the picture back on itself the slit's own column is frozen instead, which is what makes a real slit-scan streak rather than a rubbery warp - Follows the path: the history carries the vertical position as well, so the trail bends with the stroke as well as stretching along it - A bow wave ahead, a long trail behind: the delay weighting follows the direction of travel and rolls over smoothly when you reverse - Chromatic separation as a secondary channel: red, green and blue each read at their own delay, so the fringe grows with the stretch and vanishes with it - An eased release: the delay envelope collapses on a GSAP ease and the streaks retract toward the slit instead of snapping to the clean frame - A load sweep: the slit crosses the photograph once on load so it arrives already smeared, then settles; any input takes over from wherever it has got to - Touch drags the slit and a gentle autonomous sway keeps a phone alive between touches; arrow keys sweep it from the keyboard - Frame-rate independent, renders only while on screen and only while something is moving, and disposes every texture, the renderer and its WebGL context on teardown ## Use Cases - Photography and architecture portfolios where one image carries the page - Editorial and magazine covers that want a single, memorable hover - Film, music and event landing pages with a retro photo-finish or darkroom feel - Case-study openers that turn a hero photograph into the first interaction - Award-entry pages that want a mechanism nobody has seen on a photo before ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works The photograph is one full-bleed plane under an orthographic camera, drawn by a fragment shader. The shader knows nothing about the pointer. Each frame the script keeps the slit position (the pointer, smoothed on a time-based exponential ease) and a ring of its recent positions at a fixed 60Hz step, three seconds of path. From that ring it builds a one-dimensional warp table with one texel per column, per colour channel: for every column it works out a delay from the column's distance to the slit, looks up where the pointer was that long ago, and displaces the column by how far the pointer has travelled since. The table is then made monotonic, working outward from the slit: no column may advance slower than a small floor. Where the raw drag would fold the picture back, the slit's own column is held instead, and a short blur rounds the join. That is the streak. The shader reads the table (float texels, read nearest and blended by hand), samples the photograph once per colour channel, folds any coordinate that lands beyond the picture back into it, adds film grain that shows only where columns are held, and draws a one-pixel slit that inverts what lies beneath it. The ring advances only while the slit is travelling and freezes when it stops. A GSAP-driven envelope from 1 to 0 scales every delay, so on release the same frozen path is read at shorter and shorter delays: each streak slides toward the slit and the picture clears from the outside in. GSAP owns that envelope, the load sweep, the media branching and the teardown; the render loop owns the pointer, the ring, the table and every uniform. ## Documentation How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ The inline script is not optional. The photograph in the `
` is the fallback for no JavaScript, no WebGL and reduced motion, and without this it paints for the half second it takes three.js to arrive, then gets swapped for the canvas. The probe runs before first paint, stamps `html.gl` when a canvas is coming, and the stylesheet hides the figure under that class. No JavaScript, no class, the photograph shows; the effect removes the class again if it cannot build a renderer after all. **2. Add the markup anywhere in your ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ The script reads the `` inside the figure, drops a canvas in front of it, and hides the figure once the canvas is actually there. The photograph is used as the texture directly: there is no second request. **Why the import map rather than a plain `