Inkblot
I took apart one of the best scroll openings of 2026, worked out exactly how it works, and rebuilt it from scratch over a painting from 1857. Then I made the page explain itself, one piece at a time.
A forest that melts into paper
Ironhill's website opens on a painted forest. As you scroll, holes open in it and spread until only the page underneath is left. It was made by Uncommon, and it won Site of the Day on Awwwards in January 2026.
Openings like that are why people remember a website. I wanted to know exactly how it works, and whether I could build one as good with nothing but what browsers already understand. No client, no brief. Just the question.
Inkblot is the answer: my own version of the effect, over a different picture, on a page that explains it in plain words to anyone who keeps scrolling.
First I slowed theirs down
I stopped their opening 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 went through every picture their opening uses. There are fewer than you'd think. 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. And one cloudy pattern that decides where the holes open.
Last, I worked out how fast each piece moves as you scroll, and checked that against the fourteen stills.
| 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 |
Their holes came out between 2.1 and 2.5 depending on how I measured, so that bar shows the middle. I set mine close to theirs on purpose.
One picture with holes that grow
A blind going up
A line rises up the screen faster than you scroll. Everything below the line disappears and the page shows through. On its own, that looks like a blind going up.
A cloudy pattern bends it
The pattern pushes the line up in some places and holds it back in others. That is where the blobs come from, and the scraps that get left behind.
Paper pressed over wet ink
The pattern is folded down the middle. So the first hole opens the same on both sides and looks designed, like an inkblot. On Ironhill the branches in front are lopsided, so you never notice the fold.
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 trees rush past a train window and far hills crawl.
Same idea. Everything else is mine
I borrowed the idea and nothing else. None of Ironhill's pictures or code are in the page.
A gully from 1857
Eugene von Guérard's Ferntree Gully in the Dandenong Ranges, which anyone is free to use. The page darkens it so the title reads. It also has two lyrebirds in it, one on the track and one easy to miss on the bank above the log. They became part of the story.
Drawn, not pictured
The four ferns in front aren't images. The page draws them each time it loads, from a few rules about how tree fern fronds grow. They are seeded, so they come out the same every time.
Ten tries at the first hole
The cloudy pattern is made fresh by the page, so I could set how big the holes are. I tried ten patches of it and kept the one that opens like a moth, right in the middle. Scraps left behind fade as the paper passes them.
Plain code, no add-ons
Theirs runs on three.js, GSAP and Nuxt. Mine is two small scripts using plain WebGL and canvas. It watches its own frame rate and draws a little less detail if a device starts to struggle. A play button runs the opening at a steady pace for anyone who would rather watch than scroll.
A page that explains itself
A case study usually sits beside the work. Here the work does the explaining. Every picture below is drawn live by the study itself, from the same code as the opening.
Dug in, not stuck on
The title is cut into the painting, down to the paper underneath. The edge nearest the light throws a shadow into each letter, and the light follows your pointer. When the holes reach the title, it melts away with the painting.
The page ends the same way. D-LAB is dug into a ground the colour of the gully's darkest leaves, with a soft tree fern standing in the margin and young ferns hanging off the letters. Trunk, fiddleheads and all, they are drawn by the page, like the ferns in the opening.
The hard parts
Fine in Chrome, blurry in Safari
Bundling the scripts as a module broke the opening in Safari only. Safari ran the code before the page's styles had applied, so the canvas measured itself at 300 by 150 and drew the forest blurred and in the wrong place.
Chrome never showed it, which is why the first round of tests missed it. Plain scripts at the end of the page fixed it, and every check since runs in Safari's engine as well as Chrome's.
The V-cut looked raised
Late in the build I recut the letters as a V, with a ridge down each stroke, the way a signwriter routes timber. It read as a raised shape sitting on top of the painting.
The eye assumes light comes from above. A hole only reads as a hole when the shadow falls inside its top and left edges, and the far wall catches the light. So I went back to a dug-out hole, lit that way.
The carving froze the page
Finding the walls of every letter is real arithmetic: the distance from each pixel to the nearest edge. At desktop size it froze the page for up to a second on my test machine.
It now runs in a background worker built from the page's own functions, so the page never waits for it. A browser that can't start a worker runs the same function itself.
Small edges that give it away
The footer's ferns lean with your pointer, which showed the edge of the layer they're drawn on. On wide screens, fronds on the B could be sliced off by the top of the footer.
Small things. They are exactly what makes something look stuck on, so the layer now runs past every edge and the fronds size themselves to the room they have.
The story without the motion
If your phone or computer is set to reduce motion, the page shows the painting as a still, with the title still cut into it, and says why. The slider, the glass and the stack still work, because you drive them yourself. A browser that can't run WebGL gets the still painting too, and the page tells you so in plain words.
ironhill.au was made by Uncommon, with Julien Renau, Oliver Muñoz, Diana Marcela Mejia Correa and Richie Meldrum. The idea is theirs.
Eugene von Guérard, Ferntree Gully in the Dandenong Ranges, 1857. Oil on canvas, 92 × 138 cm. National Gallery of Australia, gift of Dr Joseph Brown AO OBE 1975.
Keniye Platform, Atlas — Cinematic Scroll Experience, VEIL — Luxury Streetwear Platform, MERIDIAN — Hypercar Configurator, Active Horizens — NDIS Provider Platform. More case studies from D-LAB.
An opening people remember
The first few seconds decide whether anyone keeps scrolling. If you want an opening built for your site, with a story behind it, tell me what you're working on.