Chapter 01
The brief
For our English class, we had to invent a brand and present it in English. We chose sneakers, because a shoe is something everyone wears and everyone has an opinion about. The rule we set ourselves: every visible word on the site is in English, and every part of the brand is our own design.
The result is LAYR, a fictional sneaker brand, with one product (LAYR 01), four versions of it, and a website that works like a real brand site.
Chapter 02
The idea
Most sneakers look their best on day one. After that, every scratch counts as damage. Cliffs work the other way around: the older they are, the more of their story you can see. So we asked one question: what if a sneaker aged like a cliff, instead of dying like a product?
Our answer is a midsole made of five stacked layers of rubber, each 4 mm thick, each a different colour. When you walk, the top layer wears away and the next colour appears: around 100 km, 300 km, 600 km and 1000 km. Your stride draws a pattern only your pair will have.
Chapter 03
The brand
LAYR is pronounced like the word layer. The symbol is a cut through the sole: five bars of slightly different widths, offset like rock strata. In the logotype, the A has no crossbar. A thin floating stratum takes its place.
The look is calm and graphic: warm paper, ink-black type in Archivo at its heaviest weight, Inter for reading, IBM Plex Mono for labels, rounded tiles and one colour per element. Everything is gathered in the brand book.
Chapter 04
The collection
One silhouette, four elements. Each pair keeps the same shape and the same five-layer sole, but gets details only its element could have.
| Element | Upper | Signature details |
|---|---|---|
| Earth | Bone nubuck, tonal ripstop | Topographic emboss, Perforated toe, Clay strata, Ember pull tab |
| Water | Slate suede, water-repellent ripstop | Ripple emboss, Clear heel unit, Wet-grip outsole, Seafoam pull tab |
| Fire | Charcoal suede, ash ripstop | Lava-crack panel, Ember stitching, Smoked heel clip, Burning strata |
| Air | Cloud knit, mist suede | Gradient knit, Streamline emboss, Frosted heel clip, Sky pull tab |
Chapter 05
Making the images
We wrote a design brief for each pair and turned it into images with AI tools (Higgsfield, using the GPT Image and Kling models). To keep one silhouette across four pairs, every element was generated from the Earth pair as a reference image. We say it openly because honesty is one of our values.
- 01BriefA design brief per element: materials, details, strata colours.
- 02Side shotGPT Image 2.5 renders the pair, with the Earth pair as a reference to keep one silhouette.
- 03TurntableKling 3.0 animates a full turn. Same first and last frame, so the loop closes perfectly.
- 04Framesffmpeg cuts the clip into 72 WebP frames, one every 5 degrees.
- 05ViewerA canvas draws the frame that matches your drag, with inertia.
The trick for the 360 view: we asked the video model to start and end on the exact same image. The shoe has to complete a full turn to get back to it, so the clip loops without a jump. Then a small script cuts it into frames: node scripts/spin.ts water spin-water.mp4.
Chapter 06
Building the site
The site is built with Next.js and Tailwind CSS. Scrolling is smoothed with Lenis and animated with GSAP. Three pieces are written from scratch:
- The 360 viewer: 72 frames, preloaded, drawn on a canvas. Drag speed turns into inertia, and the angle is kept when you switch elements.
- The wear simulator: a WebGL shader draws the outsole. Wear depth is distance times a foot pressure map, plus noise, so the heel and the ball of the foot change colour first.
- The element effects: one drawing language (thin ink lines) with four behaviours. Contour lines for Earth, ripples for Water, embers for Fire, streamlines for Air. They all follow your cursor.
Fonts and images are stored inside the project, so the site works without an internet connection. There is also one more layer hidden somewhere on this site.
Chapter 07
Team and credits
Adam
Brand & story
Yani
Product design
Clément
Website & 360