
Case (N0.0002-26)Locatelli/Studio — The Brand. In Motion.Open the site ↗
Locatelli/Studio — case study by Goodtaste®
A motion studio that hides its reel behind a play button has already lost the argument. So we took the reel out of the page and put it in the visitor's hand: the pointer is the showreel.
Every studio site openswith a pause.
A poster, a play triangle, a decision the visitor has to make before a single frame has moved. For a studio whose entire product is movement, that pause is the worst possible first impression.
Locatelli asked for a portfolio. We proposed the opposite of one. A single screen where nothing waits to be clicked: the work plays from the first pixel, and the visitor never asks to see the reel — they are already holding it.
There is no cursor.There is a windowthat follows your hand.
A 352-pixel frame carries the studio's 2025 reel and travels with the pointer. It crosses the wordmark, lands on a case, becomes a play button when it needs to be one, and steps out of the way at the form. One element, five states — the navigation is a cursor with an opinion.
Move your pointer over the top of this page and the same object answers. The case does not describe the interaction; it runs it.

One screen.Two hundred pixels of road.
The whole home fits in 1 200 pixels of document, 200 of them scrollable. Everything else is state, not distance: the wordmark shrinks, the gallery rises past it and stops, the case strip turns sideways under the drag. Scroll stopped being a road and became a dial.


A case doesn't open.It grows.
The card is the origin of the transition, not a link to somewhere else: it expands into the viewport, the controls settle over the film, and the chrome dims to the footage. Esc closes it, focus returns to the card, and nothing about where you were is lost.
Four brands,four tempos.







What the pointer earns,the thumb earns too.
The reel-cursor has no hand to follow on a phone, so it becomes an inline loop under the mark. The horizontal strip becomes a snap carousel, and the player keeps every control inside the reach of one thumb. Mobile was drawn at the same time as desktop, not after.
Three thingsthat cost us something.
position: fixed inside a pinned section is not fixed
ScrollTrigger pins by applying a transform, and any transformed ancestor turns a fixed child into an absolute one. The wordmark would have drifted away with the scroll — so the studio's name lives outside the pinned section and is driven by a published custom property instead. Layout decision and design decision were the same decision here.
yPercent measures the element, not the screen
Every offset that needed to be read in viewports was written as a function — y: () => -innerHeight * f — with invalidateOnRefresh on. Written as a constant it survives the first load and breaks on the first resize, which is exactly the bug nobody catches on their own machine.
The wordmark is a drawing, not a typeface
The two cut Łs are brand, not a ligature anyone can type. So the mark ships as 17 inline paths and animates path by path. Inline, never <use href> — an external reference lands in shadow DOM and no animation engine can reach a single glyph through it.
#220301
#321310
#3E140E
#FF4813
#FFF5EB
#A08A84

The brand.In motion.
Open locatelli-studio.webflow.io- Design & build
- Goodtaste®
- Typeface
- Funnel Display
- Motion
- GSAP · ScrollTrigger · Lenis
- Submission
- Awwwards — Site of the Day