3D / WebGL

Fractal Glass Parallax Effect

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Three.js
Trigger: pointer
Duration: 0.2–0.2s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 5/5
Pinned: no
Reduced motion: not handled
Libraries: three

rAF-lerped mouse (factor 0.035, no GSAP) drives a uMouse uniform; fragment shader mod-stripes the UV (35 stripes, 11-tap smoothing) and adds a horizontal-only parallax offset scaled by |mouse.x-0.5| and edge-faded

The build prompt

From motionprompts.dev

Vanguardia · motionprompts.dev25,366 chars

# Fractal Glass Parallax Hero — build prompt

## Goal
Build a full-viewport hero for a fictional design studio called **"Glassform"**. A single editorial portra…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Mobile game reward animation template

Mobile Game Reward Reveal Animation

1906 San Francisco Market Street in Blender

Glass and gold mosaic that comes alive

Fresh recipes, every week.