Warp Lens Slider

Warp Lens Slider

Goal

Build a full-screen WebGL image slider: a Three.js canvas fills the viewport and shows one cinematic photograph at a time, with a big centered uppercase title and a small description block layered on top in HTML. Clicking anywhere advances to the next slide with the signature effect — a circular "lens bubble" expands from the exact center of the screen, revealing the incoming photo inside it while the bubble's rim warps the new image with a magnifying-glass distortion (a custom fragment shader). While the bubble grows, GSAP slides the title characters and description lines up out of their masks and staggers the next slide's text back in. Slides loop forever in one direction.

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) with the SplitText plugin, plus three (npm) for the WebGL layer:

import * as THREE from "three";
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";

Call gsap.registerPlugin(SplitText) and gsap.config({ nullTargetWarn: false }) (content nodes are removed mid-timeline, so null targets must not warn). You may keep the slide data and the GLSL shader strings in separate local modules (e.g. slides.js, shaders.js) or inline in script.js.

Layout / HTML

<div class="slider">
  <canvas></canvas>

  <div class="slider-content">
    <div class="slide-title">
      <h1>Quiet Green</h1>
    </div>
    <div class="slide-description">
      <p>A cinematic study of solitude, nature, and a gaze that remembers something forgotten.</p>
      <div class="slide-info">
        <p>Type. Editorial</p>
        <p>Field. Fine Art</p>
        <p>Date. 2025</p>
      </div>
    </div>
  </div>
</div>
<script type="module" src="./script.js"></script>

Only the first slide lives in the static HTML. Subsequent .slider-content blocks are built in JS from a data array and swapped in during transitions.

Slide data (4 slides)

const slides = [
  { title: "Quiet Green",   description: "A cinematic study of solitude, nature, and a gaze that remembers something forgotten.",          type: "Editorial",    field: "Fine Art",     date: "2025", image: "./img-1.jpg" },
  { title: "Crimson Reign", description: "Ornate textures and ceremonial gold unravel across a sea of red—silent power in stillness.",     type: "Editorial",    field: "Conceptual",   date: "2022", image: "./img-2.jpg" },
  { title: "Gilded Brow",   description: "A baroque close-up capturing the tactile intimacy of skin, shadow, and the glitter of ritual.",  type: "Detail Study", field: "Experimental", date: "2024", image: "./img-3.jpg" },
  { title: "Golden Flight", description: "A blur of motion in sun-soaked gold—freedom becomes visible only in the act of leaving.",        type: "Motion Still", field: "Cinematic",    date: "2023", image: "./img-4.jpg" },
];

The dynamically-built content uses the exact same markup as the static block, with the info lines templated as Type. ${type}, Field. ${field}, Date. ${date}.

Styling

Font: Inter from Google Fonts (variable weights). Global reset * { margin:0; padding:0; box-sizing:border-box; }, body { font-family: "Inter"; }.

• h1: text-transform: uppercase; font-size: 7vw; font-weight: 700; line-height: 1;
• p: font-size: 0.95rem;
• .slider: position: relative; width: 100vw; height: 100svh; color: #fff; overflow: hidden;
• canvas: display: block; width: 100%; height: 100%;
• .slider-content: position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; z-index: 2; (sits above the canvas; text is white over the photo)
• .slide-title: position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;
• .slide-description: position: absolute; top: 60%; left: 60%; transform: translate(-50%, -50%); width: 25%; display: flex; flex-direction: column; gap: 2rem; (offset right of center, below the title)
• .slide-info p: text-transform: uppercase;

Text-mask plumbing (essential for the reveal effect):

• .slide-title h1: display: flex; justify-content: center; gap: 0.2em; (the gap renders the space between words)
• .slide-title h1 .word: display: flex;
• .slide-title h1 .char: display: block;
• .char, .line: overflow: hidden; — these are the clipping masks
• .char span, .line span: display: inline-block; will-change: transform; position: relative; — these are what GSAP moves

Responsive (@media (max-width: 1000px)): .slide-title { top: 50%; }; .slide-description { width: 75%; text-align: center; top: unset; bottom: 5%; left: 50%; transform: translate(-50%, -50%); }.

GSAP effect (be exhaustive)

Text splitting

Two different mechanisms:

• Title (h1) — manual character split (not SplitText): split textContent on spaces; for each word create <div class="word">, and inside it one <div class="char"><span>X</span></div> per character. Between words append an extra .word containing <div class="char"><span> </span></div> (a literal space span). Guard: if the element already contains .char nodes, skip (never double-split).
• Description paragraphs — GSAP SplitText: new SplitText(p, { type: "lines", linesClass: "line" }), then replace each .line's innerHTML with <span>${line.textContent}</span> so every line has an inner span to animate inside the overflow:hidden line mask.

A processTextElements(container) helper applies the char split to .slide-title h1 and the line split to every .slide-description p (both paragraphs: the description and each .slide-info p — select all p inside .slide-description).

Intro animation (on load)

After splitting the initial content:

• gsap.fromTo(charSpans, { y: "100%" }, { y: "0%", duration: 0.8, stagger: 0.025, ease: "power2.out" })
• gsap.fromTo(lineSpans, { y: "100%" }, { y: "0%", duration: 0.8, stagger: 0.025, ease: "power2.out", delay: 0.2 })

Three.js setup

• THREE.Scene() + THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1).
• THREE.WebGLRenderer({ canvas, antialias: true }), renderer.setSize(window.innerWidth, window.innerHeight).
• One full-screen quad: new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMaterial).
• THREE.ShaderMaterial with uniforms:
• uTexture1: null (outgoing image), uTexture2: null (incoming image)
• uProgress: 0.0 (the transition driver, 0→1)
• uResolution: new THREE.Vector2(window.innerWidth, window.innerHeight)
• uTexture1Size / uTexture2Size: new THREE.Vector2(1, 1) (natural pixel sizes, needed for cover-fit)
• Load all 4 slide images sequentially with THREE.TextureLoader (await each). For each texture set minFilter = magFilter = THREE.LinearFilter and stash new THREE.Vector2(image.width, image.height) (e.g. in texture.userData.size). After loading, assign texture 0 → uTexture1, texture 1 → uTexture2, plus their sizes.
• Plain requestAnimationFrame loop calling renderer.render(scene, camera) every frame.

Fragment shader (the warp — reproduce this math exactly)

Vertex shader is a pass-through that forwards uv as vUv. The fragment shader composites the two textures with an expanding lens bubble:

// cover-fit UV (like CSS object-fit: cover), per texture:
vec2 getCoverUV(vec2 uv, vec2 textureSize) {
  vec2 s = uResolution / textureSize;
  float scale = max(s.x, s.y);
  vec2 scaledSize = textureSize * scale;
  vec2 offset = (uResolution - scaledSize) * 0.5;
  return (uv * uResolution - offset) / scaledSize;
}

// radial push, with the vertical component doubled:
vec2 getDistortedUv(vec2 uv, vec2 direction, float factor) {
  vec2 scaledDirection = direction;
  scaledDirection.y *= 2.0;
  return uv - scaledDirection * factor;
}

struct LensDistortion { vec2 distortedUV; float inside; };

LensDistortion getLensDistortion(vec2 p, vec2 uv, vec2 sphereCenter,
                                 float sphereRadius, float focusFactor) {
  vec2 distortionDirection = normalize(p - sphereCenter);
  float focusRadius = sphereRadius * focusFactor;          // inner "clear" zone
  float focusStrength = sphereRadius / 3000.0;             // warp amplitude grows with the bubble
  float focusSdf = length(sphereCenter - p) - focusRadius;
  float sphereSdf = length(sphereCenter - p) - sphereRadius;
  float inside = smoothstep(0.0, 1.0, -sphereSdf / (sphereRadius * 0.001)); // ~binary inside-bubble mask, hairline AA edge

  float magnifierFactor = focusSdf / (sphereRadius - focusRadius); // 0 at focus ring -> 1 at rim
  float mFactor = clamp(magnifierFactor * inside, 0.0, 1.0);
  mFactor = pow(mFactor, 5.0);                             // warp concentrated at the rim

  float distortionFactor = mFactor * focusStrength;
  vec2 distortedUV = getDistortedUv(uv, distortionDirection, distortionFactor);
  return LensDistortion(distortedUV, inside);
}

void main() {
  vec2 center = vec2(0.5, 0.5);
  vec2 p = vUv * uResolution;                  // pixel space
  vec2 uv1 = getCoverUV(vUv, uTexture1Size);
  vec2 uv2 = getCoverUV(vUv, uTexture2Size);

  float maxRadius = length(uResolution) * 1.5; // bubble fully covers the screen at progress 1
  float bubbleRadius = uProgress * maxRadius;
  vec2 sphereCenter = center * uResolution;    // dead center of the viewport
  float focusFactor = 0.25;

  float dist = length(sphereCenter - p);
  float mask = step(bubbleRadius, dist);       // 1 outside the bubble, 0 inside

  vec4 currentImg = texture2D(uTexture1, uv1);
  LensDistortion distortion = getLensDistortion(p, uv2, sphereCenter, bubbleRadius, focusFactor);
  vec4 newImg = texture2D(uTexture2, distortion.distortedUV);

  float finalMask = max(mask, 1.0 - distortion.inside);
  gl_FragColor = mix(newImg, currentImg, finalMask); // inside bubble: warped new image; outside: current image
}

Reading of the effect: at uProgress = 0 the bubble has zero radius so only the current image shows. As uProgress rises, a hard-edged circle grows from the center; inside it you see the incoming image, sampled through a radial magnifier whose strength peaks at the circle's rim (pow(…, 5.0)) and whose vertical displacement is 2× the horizontal — the new photo looks smeared/stretched at the bubble edge and clean near the center. At uProgress = 1 the radius (1.5 × diagonal) exceeds the screen, the warp has relaxed, and the new image fully covers the frame.

Click transition

State: currentSlideIndex = 0, isTransitioning = false. On click anywhere on .slider:

1. If isTransitioning, ignore. Set isTransitioning = true; nextIndex = (currentSlideIndex + 1) % slides.length.
2. Point the uniforms: uTexture1 = texture of the current slide, uTexture2 = texture of the next slide (plus both u…Size uniforms).
3. Shader tween (runs in parallel with the text): gsap.fromTo(shaderMaterial.uniforms.uProgress, { value: 0 }, { value: 1, duration: 2.5, ease: "power2.inOut", onComplete }). In onComplete: reset uProgress.value = 0 and set uTexture1 (and uTexture1Size) to the next slide's texture, so the resting frame shows the new image with the bubble collapsed.
4. Text-out / text-in timeline (gsap.timeline()):
5. .to(currentChar spans, { y: "-100%", duration: 0.6, stagger: 0.025, ease: "power2.inOut" }) — title exits upward through its masks.
6. .to(currentLine spans, { y: "-100%", duration: 0.6, stagger: 0.025, ease: "power2.inOut" }, 0.1) — description lines follow, starting at absolute position 0.1.
7. .call(fn, null, 0.5) — at the 0.5 s mark: kill this timeline, remove() the old .slider-content, build the next slide's content node (created with inline opacity: 0), append it to .slider, and gsap.set all its spans to y: "100%". Then, after a setTimeout(…, 100) (lets the DOM settle so SplitText measures real line breaks):
8. run processTextElements(newContent) (char + line splitting),
9. gsap.set the fresh .char span and .line span collections to y: "100%", gsap.set(newContent, { opacity: 1 }),
10. play the entrance timeline with onComplete: () => { isTransitioning = false; currentSlideIndex = nextIndex; }:
11. .to(newChars, { y: "0%", duration: 0.5, stagger: 0.025, ease: "power2.inOut" })
12. .to(newLines, { y: "0%", duration: 0.5, stagger: 0.1, ease: "power2.inOut" }, 0.3)

Net choreography: the old text is fully gone by ~0.5 s, the new text lands by ~1.4 s, while the lens bubble keeps expanding until 2.5 s — the text swap happens inside the slow warp, which is what makes it feel cinematic.

Resize

On window resize: renderer.setSize(innerWidth, innerHeight) and update uResolution — the cover-fit UVs adapt automatically.

Assets / images

4 full-bleed photographic slide textures (one per slide), loaded as WebGL textures and cover-fitted by the shader, so any reasonably large landscape image works (~16:9 or bigger; 1920 px+ wide recommended). They should read as one cohesive dark, cinematic, fine-art editorial series so the white text stays legible:

1. *Quiet Green* — moody chiaroscuro portrait wrapped in dark green foliage on a near-black background.
2. *Crimson Reign* — opulent figure in red-and-gold brocade on a matching crimson textured set with scattered gold.
3. *Gilded Brow* — extreme warm-lit baroque close-up of skin and lashes beneath a glittering gold headpiece.
4. *Golden Flight* — motion-blurred figure in a pale dress running through sunlit golden grass.

Behavior notes

• Click only — no scroll hijacking, no keyboard, no autoplay. Every click advances one slide, always forward, looping 0→1→2→3→0….
• isTransitioning locks input for the full text choreography (released when the entrance timeline completes); clicks during a transition are ignored.
• Textures are all loaded up-front (sequential awaits) before the render loop starts; the first painted frame is slide 1.
• The .char/.line masks plus inner spans are the entire reveal mechanism — without overflow: hidden on the wrappers the y-percent slides won't clip.
• gsap.config({ nullTargetWarn: false }) is required because the outgoing content node is removed while its timeline is still referenced.
• Below 1000 px the description recenters at the bottom; the WebGL effect itself is resolution-independent. Heavy on GPU — desktop-first. No reduced-motion handling in the original.

Images

This component ships with 4 reference assets, served publicly. Use them as-is to reproduce the demo faithfully, then swap in your own — the layout expects the same aspect ratios.

https://motionprompts.dev/c/warp-slider-next/img-1.jpg
https://motionprompts.dev/c/warp-slider-next/img-2.jpg
https://motionprompts.dev/c/warp-slider-next/img-3.jpg
https://motionprompts.dev/c/warp-slider-next/img-4.jpg

They are hotlinkable for prototyping. For anything you ship, replace them: they are licensed for demonstration of this component, not for redistribution.

Using this outside its demo page

This component is written as a complete page — that is how the demo is meant to look. If you are dropping it into an existing project, or combining it with other components, these are the things it declares at document level and that you need to move or reconcile first.

• Palette on :root — --ink, --ink-soft, --ink-faint, --scrim. These names are not namespaced and they collide: --ink is defined by 164 of the 219 components in this catalogue, --paper by 94, --muted by 80, each with different values — and they will also collide with whatever your own project defines. Move them onto the component's wrapper (.my-section { --ink: … }) or rename them with a prefix.
• **Rules on *, body** — the demo owns the whole document, so these set the page background, typography and resets. Dropped into an existing project they restyle the entire page, not just this section. Re-target them at the component's wrapper before using it.

Adapting this to React

Everything above describes one initSlider() closure, kicked off once at the bottom of the file, that owns five pieces of state as plain let bindings — currentSlideIndex, isTransitioning, slideTextures, shaderMaterial, renderer — reaches into the page with document.querySelector, wires one click listener on .slider and one resize listener on window, and never expects to run twice or undo any of it. React withdraws that guarantee. Under React 19 with StrictMode, every effect mounts, unmounts, and mounts again before anything reaches the screen, and the DOM committed by render is not rebuilt between the fake unmount and the real remount — only the effect body runs again. Call initSlider() from a bare useEffect and the second pass builds a second WebGLRenderer bound to the same <canvas>, starts a second self-scheduling render loop racing the first to draw into it, attaches a second click listener to .slider so one tap fires two handleSlideChange() calls — two lens-bubble tweens driving the same shaderMaterial.uniforms.uProgress, two text-out timelines animating the same .char span/.line span nodes — and re-runs the sequential four-texture load a second time. None of this reproduces in a production build; it only shows up on the StrictMode double-invoke or on an ordinary navigate-away-and-back, because nothing here is ever torn down.

*(1) The entry point* — The script checks document.readyState before deciding whether to wait for DOMContentLoaded. That guard exists to survive being parsed after the event has already fired in a plain document; useEffect already runs post-commit, so the guard and the listener are both dead weight. Drop the if/else at the bottom of the file and the initSlider wrapper name with it — put its body directly inside a useEffect with an empty dependency array.

*(2) Element lookups* — sliderElement comes from document.querySelector(".slider") and canvasElement from sliderElement.querySelector("canvas"); give the component a root ref on the element rendering .slider and resolve both from it. Most of the other lookups in this file are already scoped correctly and need no change — processTextElements, createCharacterElements and createLineElements all take a container argument and query within it, never the document. The one that does need scoping is buried inside animateSlideTransition: document.querySelector(".slider-content"), re-run fresh on every click because the node it targets is destroyed and rebuilt each transition. Route that one through the root ref too (rootRef.current.querySelector(".slider-content")) — during the StrictMode remount two .slider-content nodes can exist for an instant, and an unscoped lookup can grab the one already mid-teardown.

*(3) Cleanup* — gsap.registerPlugin(SplitText) and gsap.config({ nullTargetWarn: false }) both belong at module scope, exactly where they already sit, not inside the effect. Four other things need real attention.

Text splitting here uses two mechanisms, and only one of them is StrictMode-safe by accident. createCharacterElements already guards against re-splitting — it returns early once the title contains .char nodes — so when the double-invoke runs setupInitialSlide() twice against the same live <h1> (the DOM is not rebuilt between the two passes), the second call is a no-op and the title survives untouched. createLineElements has no equivalent guard: it calls new SplitText(p, { type: "lines", … }) unconditionally every time it's invoked. Run setupInitialSlide() twice against the same static .slide-description p elements and the second SplitText call re-splits markup its own first pass already rewrote into .line divs and inner spans — the description nests one level deeper and the intro tween ends up targeting the wrong nodes. Give createLineElements the same reentrancy guard createCharacterElements already has (skip if the paragraph already contains a .line child) before wrapping any of this in a gsap.context, since the split has to be idempotent independent of how many times React decides to invoke the effect body. Every transition also calls processTextElements, but always against the freshly built .slider-content that createSlideElement returns, which was never split before — that path doesn't need the guard. It has a different risk: if the cancellation flag below is missing, a stray setTimeout firing after unmount can call processTextElements on a newContent node that was built but never attached, splitting text nobody will see and leaving an orphaned SplitText instance behind.

handleSlideChange is not part of the synchronous setup — it only runs later, from the click listener — so its timeline and its uProgress tween are created outside a gsap.context's own synchronous pass and won't be auto-tracked. Register it through the context's self, and call it later through the returned ctx:

const ctx = gsap.context((self) => {
  setupInitialSlide();
  self.add("handleSlideChange", handleSlideChange);
}, rootRef);

const onClick = () => ctx.handleSlideChange();
sliderEl.addEventListener("click", onClick);

return () => {
  sliderEl.removeEventListener("click", onClick);
  ctx.revert();
};

That covers the outer gsap.timeline() inside animateSlideTransition and the gsap.fromTo(shaderMaterial.uniforms.uProgress, …) tween in handleSlideChange, since both are created the instant ctx.handleSlideChange() runs. It does not cover the second timeline animateSlideTransition builds inside its own .call(fn, null, …) — that callback fires partway through the outer timeline's playback, well after the synchronous self.add window has closed, so the entrance timeline it constructs for the incoming slide is a fresh, untracked animation. The raw setTimeout nested one level deeper inside that same callback is further removed still. ctx.revert() correctly kills the outer timeline on unmount, but a transition that has already reached its .call() leaves the inner entrance timeline — and briefly the pending setTimeout — running against DOM nodes and a shaderMaterial the same cleanup may already be tearing down elsewhere. Keep an explicit cancelled flag the cleanup sets, check it at the top of the .call() callback and again inside the nested setTimeout before touching newContent or building the entrance timeline, and hold that entrance timeline in a variable the cleanup can also call .kill() on directly — a context's automatic tracking only reaches what a self.add-registered function creates in its own synchronous turn, not what that function schedules for later.

The render loop never keeps the id requestAnimationFrame returns — render() just calls requestAnimationFrame(render) and renders, discarding the id every time. Fix that as part of the port: store the latest id in a variable each time render reschedules itself, and call cancelAnimationFrame on that variable in the cleanup. Skip this and the StrictMode remount's first loop keeps calling renderer.render(scene, camera) forever, racing the second loop's renderer on the same canvas.

initializeRenderer is async and loads the four slide textures with a sequential for…of loop, awaiting one THREE.TextureLoader promise per slide before starting the next; only once all four resolve does it assign the first pair of uniforms and start the render loop. Do not make the effect callback itself async — call initializeRenderer() from inside a synchronous effect and let it run as a detached promise. Check the same cancelled flag on every iteration of that loop, not just once at the end: a StrictMode unmount partway through the four sequential loads must stop pushing into slideTextures, must not assign uTexture1/uTexture2, and must not call render() for the first time — each of those touches a renderer and a canvas the cleanup may already have disposed.

*(4) Rendering this in @react-three/fiber* — three 0.185, @react-three/fiber 9, drei 10.7, React 19.

<Canvas orthographic camera={{ left: -1, right: 1, top: 1, bottom: -1, near: 0, far: 1 }} gl={{ antialias: true }}> replaces the new THREE.Scene() / OrthographicCamera / WebGLRenderer block outright. The full-screen quad becomes a declarative <mesh><planeGeometry args={[2, 2]} /><shaderMaterial ref={materialRef} uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} /></mesh>, with uniforms built once via useMemo so the object identity — and therefore uniforms.uProgress — stays stable across renders; GSAP tweens that same object's value property exactly as the vanilla code does, it just reaches it through a ref instead of the module-level shaderMaterial variable.

The sequential for…of texture loop becomes useTexture(slides.map(s => s.image)) from drei: one call, Suspense holds the tree until all four have decoded, and the manual per-iteration cancelled check described above becomes unnecessary for the load itself — though the userData.size stash doesn't come for free from useTexture and still has to be computed per texture from texture.image.width/height once they resolve. There is no per-frame update here beyond the renderer.render call the vanilla loop already makes unconditionally every frame, so a default <Canvas> — not frameloop="demand" — is the right match: this shader is meant to redraw continuously regardless of whether a transition is in flight, since the tweened uniform is what's animating it.

Resize handling moves from the manual window resize listener to a small effect on useThree(({ size }) => size), writing the new width and height into uniforms.uResolution.value on change — <Canvas> already resizes the renderer and the drawing buffer for you, so only the uniform update survives the port.

A poster is mandatory: nothing paints until all four textures have decoded, and this shader draws nothing recognizable — not even a placeholder tint — before then. Render slide one's image as a plain <img> filling the same box the canvas occupies, and swap it out only once useTexture's Suspense boundary has actually resolved and a first frame has rendered, not the instant the component mounts.

Skip drei's Environment regardless of preset temptation: getLensDistortion and getCoverUV are hand-written GLSL sampling two raw textures directly, and the ShaderMaterial reads no scene lighting at all — there is nothing for an environment map to feed. If a later variant lights the plane, use explicit lights or a self-hosted HDRI, never a preset, which is fetched from a third-party CDN hard-coded into drei and leaves the scene unlit the moment that host is unreachable.