Fractal Glass Parallax Effect
What it does
Full-viewport Three.js hero where a custom fragment shader refracts a full-bleed portrait through vertical fractal-glass ribbons (mod-based stripe displacement averaged over 11 samples, smoothstep-faded at the edges), slicing the figure into overlapping shards. Moving the mouse feeds a lerped uMouse uniform that drives a horizontal parallax amplified inside the distorted stripes.
How it's built
| Category | 3d-webgl |
|---|---|
| Tech | three |
| Complexity | section |
| Performance cost | heavy |
| Mobile-safe | yes |
How it works
The hero looks like a portrait photographed through a sheet of fluted glass: the image is sliced into tall vertical ribbons, each one showing a slightly shifted piece of the picture, so a face repeats down the frame and a shoulder line breaks into overlapping shards. Move the mouse and the ribbons slide over each other with a slow, floating parallax. The photograph is drawn onto a single plane in Three.js that fills the viewport, and all of the effect lives in one custom fragment shader.
What the shader does
The shader never blurs, tints or warps the image in the usual sense. It only decides, for every pixel, where in the photograph to sample from. Across the width of the screen it builds a repeating ramp, one per ribbon, and pushes each pixel's sample point sideways by the value of that ramp. Inside a ribbon the offset grows from one edge to the other, then snaps back at the seam, which is what produces the hard vertical breaks of reeded glass. Averaging a few neighbouring samples of that ramp softens the seams just enough to read as glass rather than as a glitch. Near the left and right edges of the screen the effect fades out, so the frame ends on the true image instead of on a half-cut ribbon.
The parallax is layered on top. A smoothed pointer position is passed into the shader every frame, and the horizontal shift it causes is multiplied by how much each pixel was already displaced. That is the detail that makes the ribbons look like separate panes: the stripes that are bent the most also slide the most, so the field moves unevenly, strongest along the seams.
Where it gets hard
The difficulty is not the code but the picture. Because the shader only moves sample points sideways by a small fraction of the frame, a soft gradient produces almost nothing: every ribbon lands on nearly the same colour and the result is a flat wall with faint banding. The effect needs contrast, a subject with hard edges separated from its background in both hue and brightness. Portraits work best, because a sliced face is instantly recognisable. The subject also has to be centred, since narrow screens crop the photograph to its middle, and on phones the ribbons are made fewer and stronger so they are not reduced to a fine texture.
Performance and mobile
It is a single full-screen quad with one texture and a short loop in the shader, so the per-frame cost is a fixed amount of work per pixel. The pixel ratio is capped so high-density screens do not quadruple that work. The motion is pointer-driven: on touch devices the refraction is still there, centred and still, without the parallax. Until the photograph decodes the plane is empty, so a poster image behind it is worth adding when you ship it.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Fractal Glass Parallax Hero — build prompt
## Goal
Build a full-viewport hero for a fictional design studio called **"Glassform"**. A single editorial portrait fills the screen, but it is not shown directly: it is rendered on a WebGL plane and refracted through a custom fragment shader that bends the image into dozens of vertical **fractal-glass ribbons** (like looking through fluted / reeded glass). Moving the mouse feeds a smoothed pointer position into the shader that produces a subtle **horizontal parallax**, amplified inside the distorted stripes so the ribbons appear to slide over each other. The star effect is the shader itself, driven by a lerped mouse uniform on a `requestAnimationFrame` loop.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`three`** (npm) only — there is **no GSAP and no scroll library** in this component. All motion comes from the Three.js render loop + a GLSL fragment shader. Assume a fresh Vite project; `three` is installed via npm and imported as `import * as THREE from "three"`.
Split the code into three files:
- `index.html`
- `styles.css`
- `script.js` — the Three.js app (`<script type="module" src="./script.js">`)
- Put the GLSL strings in a small `shaders.js` module that exports `vertexShader` and `fragmentShader`, imported by `script.js`. (Inlining them in `script.js` is also fine.)
## Layout / HTML
```
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.