The Tuscan Journey Begins

Pasticcino is a round, puffy Weekend Max Mara bag, and its World Tour series goes to a different place for fabrics and fittings at each stop. The fashion outlet The Impression reports that this is the fifth stop, themed on Italy and called Italian Roots, made for the bag's tenth anniversary and launched in May 2026. The fabrics come from the Florentine silk foundation Fondazione Arte della Seta Lisio (founded in 1906), and the marble beads on the clasp come from the stone atelier Budri (founded in 1961). The site lines these two up with a leather workshop in the Tuscan town of San Miniato as the three stops of the trip. MONOGRID's approach is to have the visitor stand in for the craftspeople at each stop, so the bag itself only appears whole at the last one.

When the site opens, the visitor is sitting in a painted train compartment. An olive-green ticket fills the middle of the screen with THE TUSCAN JOURNEY BEGINS, and a smaller line underneath reads Explore every chapter and receive a special gift, which promises a gift for finishing every chapter. When the visitor clicks Start now below the ticket, the window blind rolls up and Tuscan hills stream past outside. At the same time four lines appear one by one and tell the visitor that the journey has three stops. This intro lasts a little over ten seconds and can be skipped, and after it the site opens a sign-up form headed BECOME A WEEKENDER! that asks for a name and email address for the gift. The first time it appears, a small SKIP line at the bottom lets the visitor pass it.

Chapter one, The Archive of Textiles, is about where the fabrics come from. After the visitor clicks EXPLORE on the chapter title page, the camera moves up to a wooden rack hung with velvet, and the visitor steps through six pieces with left and right arrows. Each piece has a label card with its name and the source of its pattern, such as Gothic stained-glass windows or the gold coins of a Florentine money-changers' guild. The corner of a sheet of paper always pokes out from the left wall. When the visitor clicks the plus sign on it, a full page of text slides out and tells how the Weekend Max Mara team searched the foundation's archive for patterns, with a few old photographs that can be clicked to swap. Chapter two has the same kind of page about Budri's stone, so visitors who want to read more have a place to do it, and those who do not are never blocked by a long text on the main path.

The three chapters ask for more effort each time, and each one brings the visitor closer to the finished bag. Chapter one only asks the visitor to look and click through, and the button for the next chapter appears after the first fabric. Chapter two, The Marble Quarry, has a single action. A badge reading HOLD DOWN TO CARVE appears in the middle of the screen, and while the visitor holds it down, a square block of marble slowly turns round under the chisel. It takes a full three seconds of holding to finish, and then the title the boules appears.

Chapter three, Crafting in San Miniato, sets out three different actions as three steps: cutting out the paper pattern with scissors, gluing the metal clasp frame on with a glue pen, and fitting the bead to the clasp. After these three steps a complete Pasticcino bag appears in the middle of the frame with the title the Pasticcino Bag. This moment is the high point of the journey, because the fabric and the bead from the first two chapters are the two materials on this bag.

The end of the journey takes the visitor back to the train. After the visitor clicks Unlock the gift, the view outside changes from hills to the old town of Florence, and three sentences invite the visitor to explore the collection and come to Florence. Then the sign-up form appears again, and this time it has no skip button. After the form is submitted, the visitor reaches a gift page named Buchette, where the site shows the season's six bags one by one in the same way as the chapters, each linked to its product page on the Weekend Max Mara site. So the promise on the opening ticket carries the visitor through all three chapters and ends at the sign-up and the shop.

The route can only be taken from the start. The site gives every chapter its own address, but when a visitor opens a chapter's address directly without finishing the earlier chapters, the site sends them back to the opening, and reloading the page also starts again. The menu at the top right draws the three chapters as three stacked signboards, and a chapter the visitor has not reached yet carries a paper tag reading locked chapter.

The visual rule of the site is that everything on screen should look like a painted or printed object. The scenes are oil paintings with heavy brushstrokes, and every frame has a ragged torn edge around it, like a painting whose border has been ripped. The interface is made of objects too. The ticket has a perforated stub, the label cards look like museum labels, the pages have a white margin and a thin frame, and the menu, sound and subtitle buttons are oval pieces of wood. As a result the site rarely shows a clean-edged icon. Even a button like Start now is an uneven scrap of paper, and the brand mark is just a white line drawing of the bag at the top left.

A very restrained set of colours holds this object world together. The ticket and the sign-up form use an olive green, #465016, the main interface colour. Most text is set in two near-white creams, #DFDDCB and #D9CDAD, and a deeper green, #23280B, sits under the text as a shadow. Each chapter also has a colour of its own, a bordeaux #764B41 for chapter one, a dark brown #594D40 for chapter two and a near-black green #2F2E25 for chapter three. These are used mainly in the two corners that the diagonal bands cut off on the chapter title pages. Every other colour comes from the paintings, so the interface colours stay at the edges and the painting is always the brightest and richest part of the screen.

There are only two type families. Chapter names, section headings and buttons use an extended bold sans serif (a typeface without small strokes at the ends of letters), Nimbus Sans Extended Bold, all in capitals with tight spacing. Body text, subtitles and label cards use regular-width Nimbus Sans in regular and bold. The onomatopoeia and the large title at the end of each chapter switch to the regular-width bold, all in lower case with even tighter spacing, so they read like handwritten exclamations against the capitals of the chapter names. Type sizes follow the height of the screen, with second-level headings at 5% of the screen height and body text at 2%, so however wide the window is, the headings, buttons and painting on each screen fit into one screen at the same proportions. Headings and body text both carry a hard-edged shadow with no blur, like a layer of ink printed slightly out of register, which sits comfortably next to the texture of the paintings.

The chapter title pages show this rule most clearly. All three chapter names are set in the extended bold over two to four lines. Each word is turned by a small angle of its own, from minus 6 to plus 4 degrees, so a chapter name looks like a few words cut out by hand and not glued down straight. A wide band crosses the top-left and bottom-right corners of the frame, printed with the chapter's pattern: fish scales taken from the fabrics for chapter one, pink and white diagonal stripes for chapter two and black and white blocks for chapter three. The bands turn the two corners bordeaux, dark brown or near-black green, and the joint brand mark sits in the top-left corner.

The interactive parts are painted props as well, and each has clear states. Wherever the visitor has to hold or drag something, the site places a dark brown badge with a scalloped edge, with HOLD DOWN TO CARVE or DRAG HERE written along arcs above and below a small icon. The scissors and bead that the visitor drags in chapter three are pictures of the same scissors and bead in the painting, and when the visitor picks them up, the cursor changes to a grabbing hand. A small cream card stays at the bottom right and shows the narration line by line as subtitles, with an oval piece of wood below it holding subtitle, pause and replay buttons.

On phones most of these rules stay, but the composition turns vertical. The opening ticket stands upright, Start now drops to the bottom of the screen and the line asking the visitor to turn on sound moves to the top. The paintings are cropped to a vertical strip around their centre, titles break over more lines, and the chapter two badge sits in the lower half of the screen within reach of a thumb. The sign-up form goes from two columns to one, and the visitor has to swipe down to reach the consent options.

The opening moves imitate paper dropping and tearing. On the loading screen the word loading, drawn in 3D, is revealed from left to right while two bands of coloured squares slide in from either side. When loading is done, the whole loading screen is pulled upwards in about 0.6 seconds, slow, then fast, then slow. The ticket then drops in from the top of the screen, tilted 6 degrees and slightly smaller at first, and lands straight after 0.85 seconds. The button below it cannot be clicked until it has landed. When the cursor rests on Start now, the stub lifts about 9 degrees along the perforation, as if someone were about to tear it off. When the visitor clicks, the ticket first sinks slightly down and to the left, then falls off the screen at a slant, faster and faster, over 0.65 seconds. The sheet of paper behind it follows just after, and nothing in the whole sequence fades out.

Inside the chapters the visitor does not scroll to move on. Every click, hold or drag plays a short stretch of picture. When the picture is still, it is an oil painting, and as the visitor moves the cursor the painting shifts slightly, with the farther parts moving more, so a flat painting seems to gain depth. The canvas texture on top of the picture jumps to a new position about twice a second and the torn edges change shape once or twice a second, so even a still picture keeps trembling slightly, like stop-motion animation. When the visitor turns on the reduce motion setting in their system, the animations of the ticket, the titles and the buttons stop or jump straight to their end, but the painting's shift with the cursor and the trembling texture carry on as before.

The transitions between chapters and the title pages each have their own rhythm. When one chapter gives way to the next, the new picture pushes in behind a curved front and fills the screen in about a second, starting slowly, moving fast through the middle and settling slowly at the end, while the curve flattens as it goes. When a title page appears, the two diagonal bands slide in from outside the frame over one second, fast at first and then slowing, and the pattern on each band travels along it at the same time. Four seconds after the visitor arrives on a title page, each word of the chapter name starts to drift and turn slowly on its own, and each word's hard shadow follows half a second behind the word, so the shadow seems to chase the letters.

The fabrics in chapter one change one step at a time. When the visitor clicks the right arrow, the camera moves along the rack to the next fabric in about a second and a half at an even speed. When the visitor clicks the left arrow, the site plays the same stretch backwards, and the two directions come with the sound of cloth rolling up and rolling down. The sheet on the left normally shows only a corner, tilted 4 degrees. When pulled out it slides to the middle of the frame in one second, tilted 2 degrees and shrunk to 85%, and as the visitor scrolls inside it, it slowly straightens and grows to full size. The old photographs in it are stacked, and when the visitor clicks them, two photographs first fan apart, then swap places and settle back.

The carving in chapter two is the most direct action on the site, because the picture follows the visitor's hand completely. While the visitor holds the badge down, the picture moves forward frame by frame: the camera closes in on the square stone, the chisel comes down, chips fly and the stone gradually turns round. A carving sound plays at the same time and a progress bar appears under the stone, and after three full seconds the bead is finished. If the visitor lets go halfway, the picture runs back at the same speed, the stone turns square again and a failure sound plays, so the visitor soon understands that this is something to see through to the end. Once the bead is carved, each letter of the title the boules jumps up and drops back in turn, like a wave passing from left to right.

Chapter three gives dragging three different feels. In the first step the visitor drags the scissors onto the badge in the middle of the paper pattern and lets go. The scissors shrink away, the picture plays the stretch where the pattern is cut out, and three slanted zac words pop up on screen to imitate the sound of the scissors. If the visitor lets go before reaching the badge, the scissors spring back to where they started as if on a rubber band. The onomatopoeia in this chapter all pop in with a slight bounce, one after another, each about 0.2 seconds after the last.

The last two steps use two other feels. The second step is a dashed line that curves along the edge of the clasp frame. When the visitor drags the small handle on it all the way along, the metal frame clamps onto the mouth of the bag and two clack words pop up. If the visitor lets go halfway, the handle slides back to the start within half a second. In the third step the visitor drags the bead onto the clasp, the words gently and in place appear, and only then does the complete bag appear. On phones all these actions are done with a finger, and holding and dragging follow the same rules as on desktop.

Sound follows these actions. Each chapter has its own background music at a low volume, every action has its own sound effect, and chapters one and two also have narration in English or Italian, with subtitles on by default. Sound is on by default once the visitor clicks Start now. The note-shaped wooden button at the bottom left turns it off, and the site remembers the choice.

While the visitor holds to carve, every frame of the picture has to show a new video frame, and during a chapter transition the pictures of two chapters are blended in the same frame. In both cases the picture still holds 60 frames per second. It also runs at 60 frames per second when still and while the cursor moves.

Every scene on this site is just a flat picture, and there is not a single 3D model. MONOGRID uses three.js's WebGPU renderer to lay one full-screen quad over the screen, and each chapter only swaps the material on that quad, with three.js falling back to WebGL 2 automatically in browsers without WebGPU. When a scene is still, the material reads two 1920-pixel-square KTX2 compressed textures, one with the painting itself and one with a depth map (dark near, light far). The shader offsets the coordinates at which it samples the painting by the brightness of the depth map multiplied by the cursor position, so the farther parts move further and the picture gains parallax. The offset strength differs by chapter, from just 0.004 in the train compartment to the largest, 0.025, in the textile room. The depth maps show clean outlines of the platform and the rack, which suggests that the scenes were built in 3D software, rendered out with depth and then painted over, so the site itself only runs two images per scene.

As soon as something moves, the picture switches to video. Each chapter has an MP4 at 15 frames per second in which every frame is a keyframe, and the site downloads it whole as a Blob into a one-pixel video element hidden in a corner of the page. Apart from the intro on the train, the site never lets these videos play on their own. When the picture needs to move, GSAP tweens a time value from the current frame to the target frame, and every update sets the video's currentTime to the nearest frame. As soon as requestVideoFrameCallback receives that frame, it is wrapped in a VideoFrame and handed to a three.js VideoFrameTexture, and the material cross-fades from the still painting to that frame in 0.04 seconds. Because every frame is a keyframe, jumping to any frame needs no decoding from an earlier keyframe, so the arrows in chapter one can play a stretch backwards and the picture in chapter two can run back frame by frame when the visitor lets go. The consequence is large files, and the chapter one video alone is 9.7 MB.

Each chapter's video is cut into segments by frame number, so every kind of visitor input only chooses which frames to play. The opening segment plays once after the visitor clicks EXPLORE, and in chapters one and three each further segment matches one action by the visitor. Chapter two converts the hold progress straight into a frame number, with the progress rising by a third per second while the visitor holds and falling by a third per second after they let go. The chapter one video actually ends with one more short segment, but six fabrics only need five steps, so that segment is never played.

Half of the painted look is added in post-processing. Every frame takes two render passes, the first drawing the quad into a half-float texture and the second applying post-processing and writing to the screen. Post-processing first soft-light blends a layer of canvas brushstrokes, shaded from a bump texture and a normal texture under a fixed light direction, repeated 2.7 times vertically and proportionally more across the width, and shifted to a random position about twice a second. Then comes a painted border, with four torn-edge shapes packed into a 2×2 atlas and one swapped in about every second, while the border colour blends to each chapter's colour over 0.9 seconds. A comment the developers left beside the shader says that stepping time in fixed increments like this is meant to give a stop-motion feel. The pipeline also has chromatic aberration, bloom and film grain ready, but the live version has all three switched off.

Chapter transitions also happen in the shader, while everything else on the interface is handled by ordinary page elements. The site gives each chapter a route with Vue Router. When the route changes, the same quad's material reads the pictures of both chapters and pushes the new one in behind a parabola-shaped front. GSAP drives the curvature of the front and the progress of the push to their end together over one second on the same custom ease, so the curve flattens as it goes. The ticket, subtitle card, pages and onomatopoeia are ordinary page elements layered on top of the picture, with animation handled by GSAP, line-by-line text reveals by GSAP's SplitText and sound by Howler.js. When the visitor drags the scissors or the bead, the site only checks whether the finger or cursor is inside the badge's bounds at the moment of release, and the glue step uses getPointAtLength on an SVG path to move the handle along the dashed line.

Assets load in batches by chapter, and the next chapter's textures and video start downloading while the visitor is still in the current one. The opening only waits for the two train textures, the two canvas-brushstroke textures and the border atlas, and the loading screen stays up for at least two seconds. After that the site uses requestIdleCallback to prefetch the next chapter's textures and video in order while the browser is idle, so while the visitor is still looking at the ticket, the 9.7 MB chapter one video has already arrived. A single visit to the opening page on desktop downloads about 15.4 MB, 11.7 MB of it in two videos. The first paint arrives in about 0.6 to 0.7 seconds, the full painting appears after about three seconds, and nothing on the page jumps.

Phones get smaller videos and the same textures as desktop. Devices whose screen is at most 767 pixels wide, or at most 1024 pixels wide with a physical width of at most 1536 pixels, switch to the phone videos, as do devices on a slow connection (2G, 3G or under 1.5 Mbps). So the opening downloads only about 7.0 MB on a phone, and the chapter one video drops from 9.7 MB to 3.1 MB. When the visitor has turned on data saving on their device, the site does not prefetch at all. Every device gets the same set of KTX2 textures, which desktop graphics cards receive as BC7.

The piece is also meant to live inside the brand's own website. The page carries Max Mara's Tealium tag management (pointing at its qa test profile), Google's tag code and an iubenda consent banner. When the site is embedded in another page, it hands the visitor's scroll gestures to the outer page, which shows that it was built to be embedded in Max Mara's own pages.

Visitors who use only the keyboard cannot get past chapter two. The badge in chapter two cannot take focus, the carving has no skip button, and chapter three stays locked in the menu until the carving is done, so keyboard users are stuck at the quarry. In chapter three, keyboard focus can land on the badges for the scissors and the bead, and pressing Enter completes that step, but the glue slider cannot be operated from the keyboard and can only be bypassed with the skip button. The subtitle card is not marked as a region that screen readers announce, so visitors who cannot see the screen do not get the text of the narration.

The site first won FWA of the Day with 85 points, and FWA filed it under Fashion, Fun & Playable and Music & Sound, while the team's note on FWA says the journey turns users into digital artisans. Two months later it won Awwwards Site of the Day, where Creativity was the highest of the four categories at 7.71 and Usability the lowest at 7.06. The high Creativity score probably comes from the hands-on steps, and the low Usability score may have to do with the sign-up form placed before the content and chapter addresses that cannot be opened on their own. Awwwards' front-end developer jury gave a separate 6.67, short of the 7 needed for the Developer Award. Animations was the highest of its six categories at 7.80, which fits the videos that follow the visitor's hand. Markup was the lowest at 6.00.

The site is credited only at studio level, with no individual roles published. MONOGRID is a regular on both platforms, and the Tuscan crafts it tells this time are from the studio's own region. The site's privacy notice names Max Mara Fashion Group as the data controller, so this is client work, while the address submitted for the awards sits on MONOGRID's own domain. The records in the table are cumulative as of 24 October 2026.