Goodtaste®
Case (N0.0002-26)
Locatelli/Studio — The Brand. In Motion.Open the site ↗
Estúdio brasileiro de brand motion(2025 — 2026)Site · identity in motion · front-end

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.

Client
Locatelli/Studio
Discipline
Brand motion studio
Year
2025 — 2026
Scope
Art direction · Interaction · Front‑end
(N0.0001) The brief

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.

Page load — the tagline arrives before the interface(N0.0002-26)
(N0.0002) The signature

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.

The live site: the reel window sitting over the wordmark
Live — the reel crossing the mark(01)
Cursor showreel — the reel is the pointer(N0.0001-26)
(N0.0003) The economy

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.

0px
of scroll in the entire home
0px
the reel that replaces your cursor
0
vector paths in the wordmark
0
states carried by one element
The case gallery rising past the wordmark
Gallery — the mark stops above the strip(01)
The horizontal case strip mid-drag
Strip — the fourth case is always half-seen(02)
(N0.0004) The player

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.

Fullscreen player(N0.0004-26)
Case strip in motion(N0.0003-26)
(N0.0005) The work inside the work

Four brands,four tempos.

Brick Ship Capital — Type as camera
Brick Ship Capital(N0.0016-24)
Brick Ship Capital — Investor product
Brick Ship Capital(N0.0016-24)
Rocket — Dither as signature
Rocket(N0.0006-25)
Rocket — Não limita-nos
Rocket(N0.0006-25)
Oliviare — Eyewear, in colour
Oliviare(N0.0001-24)
Shalco.Ind — Steel, made kinetic
Shalco.Ind(N0.0008-24)
Shalco.Ind — Applied system
Shalco.Ind(N0.0008-24)
(N0.0006) Mobile

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.

Home and case on 390px(N0.0005-26)
Player controls within one thumb(N0.0006-26)
(N0.0007) Craft notes

Three thingsthat cost us something.

(01)

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.

(02)

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.

(03)

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.

Ground
#220301
Raised
#321310
Panel
#3E140E
Flame
#FF4813
Bone
#FFF5EB
Ash
#A08A84
The contact drawer over the wordmark
Contact — the drawer that never leaves the screen(N0.0007-26)

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