Award Site Teardowns
中文

Nocturnal Dream

Nocturnal Dream turns a lucid dream into a zoom that never stops. As visitors scroll, the camera pulls back from a crow by a lake into a church, slips through a keyhole onto a street, rises over a city and keeps shrinking into the planet, an atom and a cell. Once visitors scroll past the cell, the camera flies out of the crow's eye and back to the lake, so the dream has no end. Everything along the way is a black line drawing on cream paper, and every stage carries one line of big type stuck on like a sticker, speaking to the dreamer.

The Ukrainian UI/UX designer Liubomyr Ulytskyi made the site, and it won FWA of the Day.

On a cream-coloured lake a black crow stands in the reeds, with a water tower and a row of hills behind it. The black-boxed title DO YOU REMEMBER YOUR LAST DREAM? is stuck in the middle, F TO OPEN STORAGE sits at the top left and GET IN TOUCH at the top right
On a cream-coloured lake a black crow stands in the reeds, with a water tower and a row of hills behind it. The black-boxed title DO YOU REMEMBER YOUR LAST DREAM? is stuck in the middle, F TO OPEN STORAGE sits at the top left and GET IN TOUCH at the top right

01Concept

Nocturnal Dream sells nothing, and it is a personal experiment. The page title asks visitors whether they remember their last dream. The site's description tells them to wake up because they are dreaming, and calls it an interactive lucid dream in which they should scroll deeper and look closer. GET IN TOUCH at the top right leads to the designer's own LinkedIn page.

Visitors have to wait a little before they get in, and the loading screen is a black field with one line of big type in the middle, LET ME SHOW WHAT A REAL LUCID DREAMING LOOKS LIKE. A small line below it asks them to close their eyes slowly, because the dream is still loading and they should not wake up yet. Only when loading is done do two buttons appear underneath, SOUND ON and SOUND OFF. When the visitor picks one, holes tear open in the black loading screen like paper and reveal the lake beneath. A black crow stands in the reeds by the water, with a water tower and a row of low hills in the distance. The first title is stuck in the middle of the picture, DO YOU REMEMBER YOUR LAST DREAM?.

The dream has 12 stages, and as long as the visitor keeps scrolling the camera keeps moving forward while one scene opens into the next. The whole lake picture turns out to sit inside a crystal ball in a church, and the camera pulls out of the ball, travels past rows of pews and slips into the keyhole of a door. It comes out on a street lined with houses and bare trees, where a few newspapers reading THE DAILY DREAM drift through the air. The camera then leaps up over a city that grows smaller and smaller until it becomes the Earth, and after the Earth comes an atom and after the atom a cell. Each stage has its own title, as if a voice in the dream were talking to the visitor, for example THEY KNOW WE'RE AWARE OF THEM. BE QUIET. WE'RE GETTING OUT, or the last stage's EVERYTHING IS WRITTEN. EVERYTHING BLEEDS TOGETHER.

A line drawing of a cell fills the picture, with the nucleus in the middle surrounded by rings of black spots and winding outlines, and the title EVERYTHING IS WRITTEN. EVERYTHING BLEEDS TOGETHER. stuck along the bottom
A line drawing of a cell fills the picture, with the nucleus in the middle surrounded by rings of black spots and winding outlines, and the title EVERYTHING IS WRITTEN. EVERYTHING BLEEDS TOGETHER. stuck along the bottom

A treasure hunt is also hidden in the dream, and the storage that opens with the F key lists its three goals. The first goal is to find a hidden module by moving the cursor over objects, the second is to get through the lucid dream by scrolling, and the third is to collect all six modules. The six modules hide in six things along the way, the crow by the lake, the crystal ball, the iron chandelier and the door in the church, the old sedan on the street and the Earth in orbit. The cursor leaves a trail of black ink across the picture, and only under that ink do small tags pinned beside the objects show, reading PRESS AND HOLD TO DISCOVER. When a visitor holds a tag for about a second, MODULE HAS BEEN FOUND pops up at the top left and the module goes into the storage.

Every module a visitor finds gets its own page in the storage. Each one has a card, a slowly turning wireframe model and a rarity of one to three stars. Next to them is a short text in the voice of a writer lost inside their own story, and the crow's text calls it THE ONLY WITNESS THAT NEVER BLINKED. Once all six are found, the whole picture swaps black and white and coloured confetti fills the screen.

In the dark storage, only the first of six cards on the left is lit up in cream with the outline of a crow. In the middle is a wireframe crow woven from fine lines, one star is lit next to the title THE CROW, and FOUND IN LAKE sits below
In the dark storage, only the first of six cards on the left is lit up in cream with the outline of a crow. In the middle is a wireframe crow woven from fine lines, one star is lit next to the title THE CROW, and FOUND IN LAKE sits below

The small crow at the bottom right is another way out of the dream. Its corner is made to look like the ammo corner of a game, with a progress bar showing the chapter number and a spinning record that serves as the sound switch. When visitors hold the small crow for a second, they shoot the crow, the picture burns through and the site jumps to its 404 page. The 404 page is titled THIS PAGE WAS ONLY A DREAM, and a deck of cards with an eye and a crow on their backs lies spread on a table. Visitors can click to draw a card, press S to shuffle or press H to go back into the dream. The page does not mention the N key either, and one press turns the lake into its night version, with black sky and water and a white crow.

On a dark table a deck of cards with an eye and a crow on their backs is fanned out, the title THIS PAGE WAS ONLY A DREAM is stuck above it, and the prompts CLICK PICK A CARD and S SHUFFLE sit below
On a dark table a deck of cards with an eye and a crow on their backs is fanned out, the title THIS PAGE WAS ONLY A DREAM is stuck above it, and the prompts CLICK PICK A CARD and S SHUFFLE sit below

02Design

The site's pictures use only two things, paper and ink. The ground is a slightly yellow cream like old newsprint, covered in fine black grain, and every scene is drawn in thin black lines with only a light grey wash on the side facing away from the light. The brick walls, bookshelves and pews of the church, the houses on the street and the towers of the city are all outlines built up one line at a time, with little solid black anywhere. Solid black is kept for a few things, and the crow by the lake is a pure black silhouette, which is why it is easy to spot among all the thin lines.

The titles are the strongest element of the layout, and each line looks like a sticker that has been pressed on. Each line of words sits in its own black strip, set in an extremely narrow black capital face, PP Formula Condensed Black, with the letters in cream. The strips overlap in a staggered stack, strips of translucent yellow masking tape run across them, and some corners curl up to show the white backing underneath. The title moves to a new position at every stage, sometimes in the middle, sometimes at the lower left and sometimes pressed against the bottom of the picture. A few of these titles were never proofread, since DID THEY MADE YOU FORGET IT AGAIN? has the wrong grammar, LOOK FIMILIAR DOESN'T IT? misspells familiar, and another stage's LUCID DEAMING is missing an R.

Inside the church a glass crystal ball stands on a carved base in front of an arched doorway and two bookshelves. A graffiti inverted pentagram with a goat's head is painted on the wall at the top right, HELLO and WAKE UP stickers sit on a box at the left, and the title DID THEY MADE YOU FORGET IT AGAIN? is stuck at the lower left
Inside the church a glass crystal ball stands on a carved base in front of an arched doorway and two bookshelves. A graffiti inverted pentagram with a goat's head is painted on the wall at the top right, HELLO and WAKE UP stickers sit on a box at the left, and the title DID THEY MADE YOU FORGET IT AGAIN? is stuck at the lower left

The scenes are full of this kind of street clutter. In the church, a box carries a HELLO my name is name tag, a round WAKE UP sticker and a barcode label, and the wall has a spray-painted inverted pentagram with a goat's head. The newspapers on the street read THE DAILY DREAM and YOU ARE DREAMING, and even the water tower has lettering on it. These stickers, graffiti and newspapers mix the dream with a real street, and the sticker-like titles belong to the same family.

The interface text speaks in another voice, a very small monospaced face, PP Supply Mono, all in capitals and set in small black boxes. Each box starts with a letter drawn as a keycap, as in F TO OPEN STORAGE, G GET IN TOUCH and H BACK TO THE DREAM on the 404 page. The keycaps tell visitors that these can all be pressed on the keyboard. The storage is dark throughout, with its grid, stars, coordinates and texts all set in the same monospaced face, like the inventory screen of a game console.

03Motion

The scroll position drives the whole dream, and wherever the scroll stops the camera stops too. When visitors scroll back, the camera moves backwards as well, so they can pause at any stage or scroll back and forth to search for things. Most transitions between stages are the camera carrying on forward, which is how it passes through the keyhole and the city.

Each stage's title is only stuck on when the visitor scrolls to it. The black strips appear on the picture with their corners curled up and the tape pressed across the words. At the moment of entry, the black loading screen also tears apart into pieces like paper. This sticking and tearing matches the way the whole site looks like a scrapbook.

Most of the interaction runs through the cursor, and black ink spreads wherever it passes. The ink has fine grain at its edges and fades slowly after a second or two, and a small tag reading SCROLL TO WAKE UP follows the cursor all the time. The tags hidden beside objects only show under the ink and vanish as the ink fades, so visitors have to rub back and forth over an object to find one.

Shooting the crow is the most violent motion on the site, and it burns right through the page. When visitors hold the small crow at the bottom right, a ring beside it fills bit by bit, and when it is full the crow in the picture disappears. The picture then burns open from the middle in holes edged with a glowing yellow rim of fire, and once the burning is over the 404 page shows through the ashes. The deck of cards on the 404 page first splits into a few piles, gets shuffled once and then fans out.

Scrolling is mostly smooth, and two continuous scrolls both averaged 58 to 59 frames per second. The drops cluster in the church, which falls to about 50 frames per second at its slowest, and the site then lowers the rendering resolution a little and raises it again once the frame rate recovers. The street, the city and the cell after the church all hold 60 frames per second. With the system setting for reduced motion turned on, nothing on the site changes, and the torn loading screen, the ink and the burn-through transition all happen as before.

04Engineering

Nocturnal Dream uses no ready-made website framework, since the author wrote the code piece by piece, and the picture is handled by the WebGPU version of three.js and rendered live on the computer's graphics card. The buttons, tags and storage are ordinary web elements laid over the canvas, while the titles, stickers and tape are all drawn inside the canvas. Sound effects such as the clicks and the crow's caw are not recordings but are synthesised live by the browser, so they add nothing to the download.

Opening the dream for the first time downloads about 5 MB, more than four fifths of it 3D models at about 4.1 MB. The three largest files are the models of a table, the crow and an old sedan, at about 1.4 MB, 1.2 MB and 0.8 MB. The site's own code is only about 0.66 MB. Only when the visitor chooses SOUND ON does the site start streaming the background music, about 4.6 MB, and choosing SOUND OFF means it is never downloaded.

The loading screen shows up almost at once, with first contentful paint at only about 0.08 seconds, far below Google's suggested 1.8 seconds, and what it paints is the counter at the bottom of the loading screen starting from 0. The real wait comes after, because the site quietly runs through all 12 stages behind the loading screen so that the graphics card has every stage's programs ready, which keeps scrolling from stalling later. This warm-up holds the page for a long time. Across three visits the sound buttons appeared within a dozen or so seconds twice, but once only after more than a minute, and that time the visitor could do nothing but watch the loading screen. Nothing on the screen jumps during loading, and layout shift is 0.

Keyboard-only visitors cannot get into the dream and stop at the lake at most. When they press Tab, focus only lands on SOUND ON, SOUND OFF and GET IN TOUCH. The focus ring on the loading screen is dark and almost invisible against the black. Pressing Enter on SOUND ON does get them in, but after that the arrow keys, the space bar and Page Down cannot move the dream, and Tab keeps landing on the two sound buttons that have already disappeared. The F key opens the storage and the arrow keys page through it, but finding modules needs the cursor to paint ink, which the keyboard cannot do.

A screen reader can read almost none of the titles, the lines spoken by the voice in the dream. All 12 titles are drawn on the canvas, and the web text holds only the interface buttons, the tags beside objects and the texts in the storage. The home page also declares its language as Ukrainian although all the visible text is English, so a screen reader may read that English with Ukrainian pronunciation rules.

The page still has a few keys that the author left in for their own use. When a visitor presses P, the site re-renders the current picture as a 3840 × 1890 image and downloads it straight to the visitor's computer, while a line in Ukrainian pops up on screen, Завантажено, which means downloaded. When a visitor types the word WINNER, the site skips the whole treasure hunt and plays the ending for finding all six modules at once. None of these keys is explained on the page, so visitors are most likely to hit them by accident.

05Scores and Team

Award Source Date Score
FWA of the Day The FWA 2026-10-07 84 POINTS

Nocturnal Dream won FWA of the Day with 84 points. The FWA files it under three categories, experimental, fun and playable, and various and other. The site does belong in all three, since no brand or client name appears anywhere on it and it has nothing to sell, and all visitors can do is scroll through the dream and search it. The team's description on the FWA is addressed to the visitor. Roughly, it says that you think you are conscious but are only reacting to noise, and that an IT written in capitals is here to pull you out of the trance and show you reality. That text speaks in the same voice as the titles on the site that talk to the dreamer.

Credit Who they are Track record
Liubomyr Ulytskyi A UI/UX designer in Ukraine whose FWA introduction describes a client-oriented designer focused on solving client problems with interfaces that look good and work well FWA 4

The track record is cumulative as of the time of writing. Liubomyr Ulytskyi is the only person credited for the site, and the site itself names no one else. Liubomyr Ulytskyi has already won FWA of the Day four times in 2026, in April, July, September and now October, so one of their pieces has won roughly every two or three months.

06Archive

Award date
2026-10-07
Awards
The FWA FOTD 2026-10-07
Site
https://www.nocturnaldream.com/
Credits
Liubomyr Ulytskyi
Design
cinematic
Build
scroll
The FWA
84 POINTS, DAYS 6. https://thefwa.com/cases/nocturnal-dream
Stack
three.js r169 (WebGPU), native ES modules, Web Audio
Total assets
About 5 MB on a first visit, including about 4.1 MB of 3D models, plus about 4.6 MB of music streamed once sound is on
Speed
FCP 76–84 ms (the loading screen counter), sound buttons usually after a dozen or so seconds and once after more than a minute, CLS 0. Continuous scroll 58–59 fps