Silverroot Plant Protein

The brief

A protein brand that feels like a game trailer

The plant-protein shelf is crowded and looks the same: green leaves, white tubs, "clean" in a light sans-serif. The athletes it wants to reach scroll right past it.

We wrote ourselves a brief as if a client had sent it: a vegan protein for people who train hard, that has to feel as strong as whey without borrowing its gym clichés. One page, one product, one action: order a jar.

Silverroot is a concept. The brand, the athletes, the reviews and the stockists are invented, and the site says so: in the footer, in the FAQ ("Is Silverroot a real product? No.") and in a noindex tag that keeps it out of search results.

The idea

Built by plants

Plant protein has an image problem: people picture something soft. So the brand's symbol is the strongest plant-eater we could think of, the silverback gorilla. It lives on leaves, stems and fruit, and it is one of the strongest animals alive.

The name follows from it: silver for the silverback, root for the plants. The tagline says both at once: Rooted in power.

Our gorilla isn't fur. It's a faceted silver figure with glowing green seams, like veins of chlorophyll running through stone. That one image carries the whole site: the logo, the label, the story in the middle of the page and the roar at the end.

Design choices

One green, almost black

The page is near-black so the green can glow. #00FF66 is used like light, not paint: on the gorilla's seams, the energy lines, the protein numbers and the order button, and almost nowhere else. On #090A0F it has a contrast of 14.6:1, so it works for small text as well as for glow.

Key interactions

A product page you play

1 A jar you turn with your scroll

The page opens on the jar in 3D, floating between "ROOTED IN" and "POWER" in a slow storm of protein dust: 2,600 particles, softly out of focus. Scrolling turns the jar. First to the lid, where a card explains the twist-lock seal; then to the opening, where the numbers appear (25 g protein, 5 g BCAAs, 130 calories, 0 g added sugar); and finally to the label, with the pea, rice and pumpkin blend. At the top view the dust spirals around the lid.

The label has a soft satin coat, and the jar is lit like a product shot: a key light, a green rim and a faint green fill from below.

Imagery

One look, generated and then edited

The gorilla, the athlete and the ingredient photos are AI-generated from one brief: faceted silver, green light, a near-black studio. Generated clips rarely loop or land on the right beat, so each one was cut, slowed, reversed or patched by hand until it did.

AI garbles lettering, so the product was never generated. The jar is a real 3D model wearing a label we designed, and the three flavor jars and the hero's fallback still are rendered from that same model, so every jar on the page matches.

Speed and old devices

The jar in 6 seconds, not 21

A 3D hero only impresses if it shows up. We measured the first published version on a simulated phone on slow 4G and on a laptop with a real graphics card. On the phone, the jar took 21 seconds to appear, mostly because of the 3D model files.

• A poster first. A 29 KB still of the jar appears almost at once, about 1.7 s on the slow phone, and the live 3D jar fades in over it when it's ready. The same still is the fallback on devices that can't show 3D, and a script remakes it whenever the model or the lighting changes.
• A lighter model, same look. Four files with 1.6 MB of PNG textures became one 447 KB file, plus a 287 KB version for phones. Screenshots before and after are identical. One compression option made the jar invisible on older graphics chips, so we chose a safer one.
• Load what's needed, when it's needed. The model starts downloading while the page loads, the 3D code arrives after the page is up, and videos and images further down load only as you scroll near them.

Under the hood

How it's built

• Stack: Astro 7 (static), Tailwind CSS 4, GSAP for the scroll timelines, three.js for the jar. Hosted on Cloudflare Pages.
• A template, not a one-off: Silverroot runs on our product-page template. The whole site, colours, sections and their order, copy and 3D settings, is one config file; a new brand is a new file.
• The jar: one glTF model with Meshopt-compressed geometry and WebP textures, a phone version with a smaller lid texture, and lighting, label finish and particles all set from the config.
• The scroll story: 88 WebP frames (1920 px, 1280 px on phones) drawn on a canvas and driven by a GSAP ScrollTrigger, with the titles, phrases and the shattered-glass overlay timed to frame numbers.
• Flavor jars from the 3D model: the three labels are generated from one design file, and the jars are rendered from the same model in a headless browser.
• Scripts for the next change: npm run poster remakes the hero still, npm run model packs a new model.
• Releases: each version is tagged and published by pushing to its own branch; Cloudflare builds and deploys it.
• Visibly a concept: noindex, a concept notice in the footer and the FAQ, and invented stockists with 555 phone numbers.

Outcome

A protein brand you remember

Silverroot shows what a single product page can do when the product is the hero and the brand has a story: a jar you turn with your scroll, a gorilla that roars when you reach him, and numbers that appear where they matter. It also shows the part nobody sees: a 3D hero that appears in seconds on a slow phone and still works on an iPad from 2014.