A fern gully painted in 1857: tree ferns under tall eucalypts, a dirt track and two lyrebirds.

Inkblot

A scroll effect, studied and rebuilt by D-LAB

Based on the opening of ironhill.au

Painting: Eugene von Guérard, Ferntree Gully in the Dandenong Ranges, 1857

Scroll down, or

I liked how the Ironhill site opens. So I worked out how it’s done, and built my own.

Ironhill’s site opens on a forest that melts away as you scroll. It won Site of the Day on Awwwards in January 2026.

I slowed theirs right down and looked at every piece. Then I made this one, with a different picture and my own code. The forest at the top of this page is mine.

Your device is set to cut down on movement, so the forest stays still here. The slider further down still works.

This browser can’t run the effect, so the forest stays still here.

Made by: D-LAB, Sydney
What it is: My own study. No client.
Studied: The opening of ironhill.au
Year: 2026

The bottom of the painting, printed as dark as the forest at the top of this page. Under the glass it’s as it was before I darkened it. There are two lyrebirds. One stands on the track with his tail up. The other is harder to find.

First I slowed theirs down

I opened ironhill.au and stopped it at fourteen points on the way down, from the whole forest to the last scrap of it. It’s much easier to see what’s going on when nothing is moving.

Then I looked at every picture their page loads. There are fewer than you’d think.

Last, I worked out how fast each piece moves as you scroll, and checked that against my fourteen stills.

What their opening is made of

One big painting of a forest, with mist painted along the bottom
Four branches, cut out and placed in front
One small puff of cloud, used a hundred times
One cloudy pattern that decides where the holes open

The pictures are mine, drawn by this page: the 1857 painting, my ferns, my puff, my pattern. Theirs look different, but they are the same four parts.

Mine, stopped the same way and printed like a contact sheet. I can’t show their stills here, so these are fourteen frames of my own opening, drawn by the page as you scrolled down to them. Frame 1 is the whole forest. Frame 14 is the last scrap.

This browser can’t run the live picture.

Raise the line Fold it Show the pattern Tilt it

It’s one picture with holes that grow

Imagine a line rising up the screen as you scroll. Anything below the line disappears, and the page shows through.

If the line were straight, it would look like a blind going up. So it’s made wobbly. A cloudy pattern pushes the line up in some places and holds it back in others. That’s where the blobs and the leftover scraps come from.

The pattern is folded down the middle, like paper folded over wet ink. That’s why the first hole is the same on both sides.

Tilt the picture and you can see what the pattern really is: a hillside. The paper is water rising up it. Low ground goes under first. Those are the holes. The tops of the hills stay dry a little longer. Those are the scraps left behind.

Try it. Drag the slider to raise the line. Untick the fold to see what it does. Tick the pattern to see the clouds that steer it. Tick Tilt it, then raise the line, and drag the hill to turn it.

Four things that make it look good

How fast each piece moves Times faster than the page. The page is 1.

Piece	Theirs	Mine
The holes opening	2.3	2.3
The fastest leaves in front	1.79	1.7
The slowest leaves in front	1.18	1.16
The painting	1.05	1.04

I worked theirs out from their site, then set mine close to them on purpose. Their holes came out between 2.1 and 2.5 depending on how I measured, so that bar shows the middle.

The fold. Because the pattern is folded, the first hole looks designed, like an inkblot. On Ironhill the branches in front are lopsided, so you never notice the fold.

The leaves stay whole. The ferns in front are separate pictures, and the holes never touch them. For a moment you get sharp leaves over bare paper. Then they slide off, because they move faster than the page.

Nothing moves at the same speed. The holes climb fastest. The leaves in front come next. The painting only just beats the page. Your eye reads that as depth, the way near things rush past a train window and far things crawl.

The words are already there. The big sentence under the forest is ordinary text, printed very faintly. You can’t see it through the dark painting. Each word darkens as the paper reaches it.

Speed is distance

Your eye reads speed as distance. Near things rush past, far things crawl. So I took my speeds at their word.

Each piece here hangs as far in front of the page as its speed says. The painting is only just in front, at 1.04. The nearest fern, at 1.7, is two fifths of the way to your eye.

Seen straight on, it’s the opening. Turn it, and it’s a stack of paper.

The holes are cut at one moment here. In the opening they grow as you scroll.

Turn it

What I did differently

I borrowed the idea and made everything else myself. None of Ironhill’s pictures or code are in this page.

Part	Theirs	Mine
The picture	A forest illustration, with mist painted along the bottom.	An oil painting from 1857 that anyone is free to use. I darkened it so the title is easy to read.
The leaves in front	Four painted branches.	Four ferns that the page draws for itself each time it loads.
The cloudy pattern	A picture of clouds, repeated and flipped.	Made fresh by the page, so I could change how big the holes are.
The first hole	Wherever the cloud picture puts it.	I tried ten patterns and kept the one that opens like a moth, right in the middle.
The leftover scraps	They look pale because they sit in the painted mist.	I fade them as they get left behind.
Watching it	You scroll.	You scroll, or press play and it runs at a steady pace.
Built with	three.js, GSAP and Nuxt.	Plain code that browsers already understand. No add-ons.

If your phone or computer is set to cut down on movement, this page shows the painting as a still and skips the effect. It also keeps an eye on how smoothly it’s running. If things start to lag, it draws a little less detail to keep up.