NOTHIN’, how it’s made: the word that inflates under the ink

NOTHIN’ is a creative studio in Paris founded by Sara Guedj: brands, editorial, art direction and artificial intelligence for fashion, luxury and tech. The site has development by Thomas Carré, design by Pierre Patrault and visuals by Guillaume Perrette. The tone is deadpan and ironic: «Not a style, a perspective», because «Nothin’ is Everythin’».

It is a white gallery alternating with a black void. Colour comes only from the images, which are glossy, absurd objects: inflatables, crumpled foil, sweets, a bubble-wrap heart, a pink balloon dog. The text is set in PP Neue Montreal, the labels in IBM Plex Mono, and almost every movement uses the same curve, power4.inOut: it starts slowly, runs and brakes slowly.

Underneath there is Webflow, which holds the list of works, plus a single JavaScript file written separately and served by Netlify: 752 KB, 207 compressed. Inside are GSAP 3.13 with ScrollTrigger, SplitText and Flip, Lenis for smooth scrolling, Taxi.js for the page transitions and Three.js, used only for the fluid on the first screen. The animations hook onto attributes written in the Webflow editor, such as line, letter or parallax. And there is a workshop detail: adding ?dev to the address makes the published page load its code from the developer’s own computer instead of the real file. Here we take it apart in three moments, with a demo rebuilt from scratch for each: words, colours and code are our own. From the site we took the idea and the timing.

Ink that reveals

The first screen is the NOTHIN’ wordmark, black and flat on a white background, as wide as the screen. On the first mouse movement the paper tears like ink, and underneath is the same word made of silver balloons. After about four seconds the paper closes by itself. Everyone who lands on the site draws on the logo without knowing it.

The ink is a real fluid, computed with the stable fluids method: velocity on a grid of 256 cells, colour on 512, twenty pressure steps every frame. The pointer pushes the velocity and pours colour; the velocity loses 3.8% per frame, the colour 1.2%. The sharp edge comes from a very narrow threshold on the colour multiplied by 3.9: no shading, only paper or ink. On the site there is a 20 MB video of the inflated word underneath; in our demo there is no video and no Three.js either. The shader draws the silver word: the same word, blurred, becomes a height map, the slopes give the direction of every point, and every point reflects a horizon, light sky above and dark ground below, as metal does. When nobody touches it, an invisible brush draws a slow figure of eight.

The accordion wordmark

As you scroll, the monogram N’ appears in the header. On hover the gap between the N and the apostrophe widens and the monogram becomes NOTHIN’: the apostrophe slides to the right, and the five middle letters rise from below the line in a different order every time. On leaving they drop in random order and the gap closes.

On the site the wordmark is an SVG: the width of its viewBox animates from 338 to 1398 in 0.7 seconds; each letter sits in its own clip and rises in 0.6 seconds, sixty milliseconds after the previous one, starting at 0.35 seconds. Interruptions are handled by a small six-state machine. We rebuilt it in HTML: a container whose width goes from zero to the sum of the letters, with the full stop following by itself. Instead of the state machine, every gesture stops the running sequence and builds a new one from where things are. Our studio is called Quasi, and it does not exist.

The crumbling manifesto

Further down the screen stops on a scene inside a lift, with scattered blocks of text: «we are nothin’» three times and a line of random signs. Scroll fast and the text boils, its letters swapping with wrong signs. Keep scrolling and every letter falls on its own like a strand of tinsel, while in the middle a sentence writes itself.

The boiling depends on speed, not position: the scroll velocity becomes a number between 0 and 0.45 that dies down by itself, and every eight frames a window of 22 letters runs along the blocks swapping signs with a probability that falls towards its tail. The fall, instead, is tied to position: each letter drops 40–160 pixels, turns ±20 degrees and fades, at a moment all its own. The sentence in the middle follows the same timeline, with its last four letters still jumbled. In our demo each letter keeps its width, so the line does not dance while letters change.

The other details

The loading screen is a slot machine: the N and the apostrophe rise, the gap between them opens into a slot where glossy objects alternate faster and faster and then slower again, while a counter goes down from 100 to 000. Then the black rolls up like a blind, and the giant letters of the wordmark surface in random order. The showreel, as you scroll, steps aside into a box at the bottom right. The WORKS label comes apart and its letters cross the page shrinking to a dot, with Flip. The manifesto film pulls back until it is a screen hanging in a museum hall, with a blurred copy of the same video behind it as a glow. And some objects run away from the pointer and spring back into place with an elastic bounce.

Where it stumbles

On the first visit the loading screen lasts about twelve seconds, and meanwhile you cannot scroll, not even on a phone: in our tests a swipe at five seconds did not move the page by a single pixel.

The home starts four videos by itself, about 82 MB, and every image is forced to load straight away. The fluid runs on every frame while you are at the top of the page, even when nobody touches it, on a canvas three screens tall, and on phones it never stops.

Reduced motion is not considered at all: every animation stays, the looping videos have no way to be stopped and the slot machine reaches about ten swaps per second. The home has no h1 title, the menu opens only on hover and cannot be reached from the keyboard, and there are seven empty links. On computers the base font size is 1% of the window width: at 1024 pixels the labels drop below 8 pixels.

What we take away

A wordmark can be a toy: the simplest gesture, moving the mouse, becomes a game with the logo, and nobody forgets it. And text can respond to how you scroll, not just to where you are. The best ideas, though, sit behind twelve seconds of waiting and 82 MB: the same magic, lighter, would reach many more people.