IronHill Scroll Animation
What it does
Scroll-scrubbed WebGL dissolve over a tall 175svh hero: a Three.js fullscreen quad with an fbm-noise shader sweeps a solid near-black fill up over the hero image with an organic ragged edge, its uProgress driven by Lenis scroll position. As scrolling continues, GSAP SplitText splits the hero paragraph into words and a ScrollTrigger fades them in one by one over the freshly revealed background.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis, three |
| GSAP plugins | ScrollTrigger, SplitText |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
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.
# Second Skin — Scroll-Scrubbed WebGL Dissolve Hero
## Goal
Build a very tall hero (`175svh`) where scrolling makes a solid near-black fill **sweep upward over a full-bleed portrait**, dissolving the image away behind an **organic, ragged, fbm-noise edge**. The fill is a Three.js fullscreen quad running a custom GLSL shader whose `uProgress` uniform is driven by Lenis scroll position — so it is fully scroll-scrubbed, not time-based. Once the fill has covered the lower part of the hero, a long paragraph sitting over it **fades in one word at a time**, each word's opacity tied directly to a ScrollTrigger's progress. Below, a dark closing section. The star effect is the noisy WebGL dissolve reveal.
## Tech
Vanilla HTML/CSS/JS with ES module imports, in a fresh Vite project. Install and import from npm:
- **`three`** — WebGL scene/renderer/shader material.
- **`gsap`** (3.x) plus the plugins **`ScrollTrigger`** and **`SplitText`**.
- **`lenis`** — smooth scroll; it also owns the scroll value that drives the shader.
```js
import { vertexShader, fragmentShader } from "./shaders.js";
import * as THREE from "three";
import gsap from "gsap";
…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.