Santioni Spirits

Santioni Spirits is a brand that is just starting out, and its first range is the Notturno Collection, Italian for nocturne, three cream-flavoured mixed drinks. The footer reads Select Houses Forthcoming, which means the first places to sell it have not been announced. The site therefore has no way to buy anything, and its job is to make people who have never heard of the brand remember it. On the FWA the team calls it the brand's introduction to the world, told as an immersive journey inspired by comic books. The journey is long, about 35 screens in all, and the picture keeps travelling down as long as the visitor keeps scrolling.

Visitors first have to answer one question, ARE YOU OF LEGAL AGE?, which asks whether they are old enough to drink. Choosing YES lets them in, while choosing NO leaves only ACCESS DENIED and one line of text on the screen, with no way back other than reloading the page. Past the gate, the story opens on a white wasteland where a saint in a brown cloak walks barefoot with his head bowed, while small panels beside him show his face under the hood and his clenched hand. He then sees a great stone in the distance with a round, red-glowing opening at its base. He walks up to it, reaches out, holds his breath and steps through, and wakes in a hall full of red columns with three bottles standing on a table at the far end.

The story has four places where visitors take part with their own hands, and at each one the cursor turns into a round white label that says what to do. The first comes before the opening and reads HOLD & MOVE, and when visitors hold the mouse button and move, the saint's hand follows the cursor towards the red door. The second is the choice of drink and reads CHOOSE FLAVOR, with a blue Orange Chocolate & Cream, a green Mint Chocolate & Cream and a yellow Marshmallow Coffee & Cream. The third reads HOLD & POUR and appears on the screen where a shaker pours into a glass, and the fourth reads HOLD and appears on the screen where the saint rises into a column of light. None of the four blocks the way, and a visitor who does nothing and keeps scrolling still reaches the end of the story. Only a visitor who actually picks a bottle, though, sees their own colour in what follows.

That one choice decides how the second half looks. If the visitor picks yellow, the shaker and the glass hold a yellow drink, the saint's robe turns from brown to yellow after he drinks, and the caption says the light swirls with MARSHMALLOW, COFFEE and CREAM. If they pick green, the same sentence switches to mint and chocolate. If they pick nothing, the site gives them the blue bottle, Orange Chocolate & Cream.

Once the story ends, the page turns from comic back to brand. The columns and roof of the red hall crack and drift away to reveal a deep red sky, and a huge line appears, INDULGE NOW ATONE LATER. After it, a white card floats in the air with three short lines beginning CHILL, SHAKE and POUR, about chilling, shaking and pouring the drink. Below the card is a carousel of the three flavours, and visitors drag left or right to change bottles. The carousel opens on the bottle the visitor picked in the story, so a visitor who chose yellow starts at MARSHMALLOW COFFEE & CREAM.

The whole story is drawn as a black and white comic, and colour arrives one hue at a time. The first few screens are almost only white paper and black ink, with nothing else but the earthy brown of the saint's cloak. At the great stone a dark red round opening appears, the hall beyond it is bright red, and most of the second half is bright red with black shadows. The blue, green and yellow of the three flavours only appear on the table at the end of the hall. Once the visitor chooses, only the chosen colour stays in the picture, so it stands out sharply against all the red and black.

Comic book craft runs through the layout of every screen, from the panels to the caption boxes and the shadows. The main picture sits inside a hand-drawn black frame that leans slightly, as if ruled in a hurry, and smaller panels are laid over it to give a close-up of a face, a hand or an eye. The narration sits in white caption boxes with black borders tucked into a corner of the panel. Shadows are solid black, and the step from dark to light is made of rows of fine parallel lines. The folds of cloth, the ground and the walls all share this engraved texture, as if every line had been laid down with a pen.

Two typefaces give the site two voices, a vintage one for the brand and a comic book one for the story. Headlines use Charles Rosie, a slender decorative display face. In the opening title THE NOTTURNO EXPERIENCE, the first O of NOTTURNO is drawn as two interlocking rings, and the last E of EXPERIENCE becomes a small italic swash letter. INDULGE NOW ATONE LATER and the names of the three flavours use the same face, which reads like an old poster. The narration and the cursor labels use a rounded sans serif, PP Nikkei Maru, small and all in capitals, the way comic caption boxes usually look. The email address and credits in the footer switch to a very thin sans serif and take up only a small corner.

There are very few interface parts, and each one belongs to the story. A white switch with a black border stays fixed at the top right, with EXPERIENCE on the left and COLLECTION on the right. Clicking EXPERIENCE goes back to the start of the story, and COLLECTION jumps straight to the product carousel. The brand's saint emblem and the handwritten Santioni Spirits sit at the top left, and a sound switch sits at the bottom right. Beyond these there are no menus or buttons, and every place where visitors need to act is explained by the round white label on the cursor.

Scrolling drives the whole story, and the picture moves like a camera travelling down one long vertical path. When the visitor stops the wheel, the picture keeps gliding a little further. On every frame the site only closes a small part of the remaining distance, so when visitors let go of the wheel the picture does not stop dead but settles slowly.

The people and objects in the picture keep moving even while the visitor is still, and they move in steps. The saint's cloak sways in the wind in small jerks, and the engraved lines on his clothes jump about eight times a second instead of flowing smoothly, like lines that have been redrawn on every drawing of a hand-made animation. The saint, the bottles and the columns are in fact 3D models. For every pixel the site first works out how much light falls there, then cuts the shading into three steps of solid black, the object's own colour and pure white, and lays a line texture over the borders between them. The edges of the shadows therefore become rows of engraved lines, and in bright areas the lines break up into dots. The position of the line texture and the sway in the wind both jump on a fixed beat, which is why the 3D models look like comic drawings.

Each of the four hands-on moments answers in its own way. At HOLD & MOVE, the saint's hand follows the cursor across the red door, red marks bloom like paint wherever it touches, and red appears at the same moment in the small panel at the lower left. When the visitor lets go, the hand pulls back and the red slowly darkens into rings of ripples. On the screen marked HOLD, the saint spins upwards in a white column of light with petals in the chosen colour drifting around him.

The narration is the most careful piece of motion on the site, because the voice and the text are matched word by word. The story has 16 captions, and each one comes with a spoken English reading. When the visitor stops scrolling, the voice starts reading the caption and its words turn red one after another as they are spoken, then all return to black at the end. The site waits until the visitor has stopped before it starts reading, and while the visitor keeps scrolling the narrator stays silent.

Scrolling stays smooth, and two continuous scrolls from start to finish both held 60 frames per second with no section that dropped frames. With the system setting for reduced motion turned on, nothing on the site changes, and the jumping lines, the gliding scroll and every interactive animation play exactly as before.

Active Theory built the site on its own web 3D engine, and the whole story is drawn on one full-screen WebGL canvas without a general-purpose 3D library such as three.js. The saint, his arm, the bottles and the columns are all 3D models. The story's caption boxes and the cursor labels are drawn on the same canvas too, and only the navigation at the top, part of the product text and the footer are ordinary web text.

Opening Santioni Spirits downloads about 12 MB straight away, more than half of it sound at about 6.7 MB. The five largest files are all long background drones that add up to about 4.3 MB, and the rest is interaction sounds and a piece of jazz. The 3D models come to about 1.7 MB, images to about 2.2 MB and scripts to about 0.6 MB. Once the visitor answers YES, the site downloads 18 spoken readings, about 2 MB more, for about 14 MB in the whole visit. Nothing else is downloaded on the way through the story, so scrolling never pauses to wait for a file.

The loading screen appears early, with first contentful paint between 0.44 and 0.66 seconds, under Google's suggested 1.8 seconds, and what it paints is the saint emblem and a progress line. The age question appears at about the fifth second. The page freezes several times while loading, the longest freeze over one second, but at that point visitors only see the loading animation and do not notice. Measuring tools report a layout shift as high as 1.04, far above the suggested limit of 0.1, but what moves is an invisible layer of web text underneath the canvas, and nothing jumps on the visitor's screen.

Keyboard-only visitors and screen reader users each run into one serious problem. The YES and NO of the age question are drawn on the canvas, so the Tab key never lands on them, and a visitor using only the keyboard cannot get in from the very first screen. Once inside, keyboard control is handled well, and the arrow keys, the space bar and Page Down all move the story along. On the screen reader side, the story's 16 captions exist only on the canvas and none of them is in the web text, so a screen reader cannot read the story. Visitors who can hear still have the narration, while those who cannot are left with the pictures alone. The page declares English as its language, and the navigation, part of the product text and the footer are ordinary text that a screen reader can read.

Of the four scores the Awwwards jury gave Santioni Spirits, it did best on Creativity at 8.5 and worst on Usability at 7.54. The high creativity score matches a drinks brand turning its website into a comic in which visitors choose the flavour. The low usability score matches the site's approach just as well, since visitors have to pass an age question and then scroll down a 35-screen path to the very end before they see the product. A separate panel of developer judges gave 7.66, highest for animations at 9.4 and lowest for accessibility at only 6.6. The low accessibility score lines up with the problems described above, the keyboard that cannot get in and the screen reader that cannot read the story. The FWA first gave it FWA of the Day on 18 August, then named it FWA of the Month for August.

Both track records are cumulative as of the time of writing. Both companies are FWA Hall of Fame members, and each has won around a hundred and fifty FWA awards. The award pages do not say how the work was split between them. Going by their specialities, the pictures and interaction most likely come from Active Theory, and the layer of drones, sound effects and 16 spoken readings from Plan8.