`, and inside it one `
X
` per character. Between words append an extra `.word` containing `
` (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 `
${line.textContent}` 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:
```glsl
// 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()`):
- `.to(currentChar spans, { y: "-100%", duration: 0.6, stagger: 0.025, ease: "power2.inOut" })` — title exits upward through its masks.
- `.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`.
- `.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 `span`s to `y: "100%"`. Then, after a `setTimeout(…, 100)` (lets the DOM settle so SplitText measures real line breaks):
- run `processTextElements(newContent)` (char + line splitting),
- `gsap.set` the fresh `.char span` and `.line span` collections to `y: "100%"`, `gsap.set(newContent, { opacity: 1 })`,
- play the entrance timeline with `onComplete: () => { isTransitioning = false; currentSlideIndex = nextIndex; }`:
- `.to(newChars, { y: "0%", duration: 0.5, stagger: 0.025, ease: "power2.inOut" })`
- `.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.