Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026Vibecoding · Web design · 3D bottles · AI ad spot · Ad campaign · Custom backend · 2026

Karls Kola

Web · 2026

/ Overview

Karls Kola is the cola from Chemnitz, with raspberry soda, Kulturmische and now eight flavours. For the brand I built website, bottles, ad spot and an entire ad campaign from a single hand.

The website tells its story as you scroll: bottles fly through the frame as 3D objects, turn to their label, colour fog and light change with the flavour, with sound. The bottles are built in three.js from the silhouette of the cut-outs, which I pulled front and back for all eight flavours from the real shop photos.

Plus a 32-second ad spot and an ad series with 32 motifs: club, fisheye portraits, new flavours and a deliberately odd series in which bikers, punks and conductors reach for the bottle. The lines are short and dry: “Chemnitz. Kannste trinken.”, “Kola oder Orange? Ja.”, “Hart genug für Pink.”

/ Project details

NameKarls Kola — Kannste trinken.
ClientKarls Kola
ServicesVibecoding, web design, AI content, campaign, backend
Year2026

/ Challenge

A small drinks brand from Chemnitz wants out of the shelf and into people’s heads, without a film crew, photo studio or agency budget. Website, product images, spot and ads still had to feel like one piece, and the labels must not be altered along the way.

/ Services

Website & backend

Scroll storytelling with 3D bottles, colour fog per flavour, sound, store finder and B2B enquiry for gastronomy and companies. The team maintains flavours, stockists, FAQ and copy in its own backend.

Bottles & spot

Eight flavours cut out front and back, labels original, glass cleanly transparent. The spot: AI video, pupil zoom and a finale with three bottles, lettering swapped to “KOLA” by tracking.

Campaign

32 motifs in 4:5, 9:16 and 3:2, copy set automatically and checked against the approved lines: every flavour with its own punchline.

Karls Kola
AI-generatedAI-editedVorher und nachher: Shop-Foto und freigestellte FlascheAI-editedAnzeigenmotiv Club: Chemnitz. Kannste trinken.AI-generatedAnzeigenmotiv Club: Chemnitz. Kannste trinken.AI-generatedAnzeigenmotiv Club: Chemnitz. Kannste trinken.AI-generatedAnzeigenmotiv: Die guten Abende waren nie geplant.AI-generatedAnzeigenmotiv: Nur kurz raus. Plötzlich morgen.AI-generatedAnzeigenmotiv: Chemnitz. Kannste trinken.AI-generatedAnzeigenmotiv: Kola oder Orange? Ja.AI-generatedAnzeigenmotiv: Himbeere. Für große Kinder.AI-generatedAnzeigenmotiv: Hochkultur, aber mit Kohlensäure.AI-generatedAnzeigenmotiv: Kultur zum Austrinken.AI-generatedAnzeigenmotiv: Früher Taschengeld. Jetzt Feierabend.AI-generatedAnzeigenmotiv: Himbeere im Glas. Flausen im Kopf.AI-generatedAnzeigenmotiv: Ganz Kola. Ganz sie.AI-generatedAnzeigenmotiv: Schwarze Finger. Orange Pause.AI-generatedAnzeigenmotiv: Zitronen gab's genug. Jetzt Brause.AI-generatedAnzeigenmotiv: Starke Hände. Sanftes Wasser.AI-generatedAnzeigenmotiv: Perlen am Hals. Perlen im Glas.AI-generatedAnzeigenmotiv: Krawatte schief. Stimmung gerade.AI-generatedAnzeigenmotiv: Sie fängt an. Er hört auf.AI-generatedAnzeigenmotiv: Schwarz steht jedem Abend.AI-generatedAnzeigenmotiv: Gleicher Durst. Andere Playlist.AI-generatedAnzeigenmotiv: Pause ist auch Kultur.AI-generatedAnzeigenmotiv: Sie häkelt. Er sprüht.AI-generatedAnzeigenmotiv: Kutte, Kette, Himbeere.AI-generatedAnzeigenmotiv: Hart genug für Pink.AI-generatedAnzeigenmotiv: Passt zum Iro.AI-generatedAnzeigenmotiv: Hart genug für Pink.AI-generatedAnzeigenmotiv: Schwarz getragen. Pink getrunken.AI-generatedAnzeigenmotiv: Hart genug für Pink.AI-generated

AI-generatedAI-edited Labelled per Art. 50 EU AI Act: the ad spot and campaign motifs are AI-generated, the people in them do not exist. The bottle cut-outs are AI-edited from real product photos. The website recording and device views were made without AI.

[ Views ]

Desktop, laptop, phone

Real screenshots of the live site — responsive down to the detail. Laptop and phone scroll through the page.

Karls Kola — Desktop
Karls Kola — Laptop
Karls Kola — Handy

/ Solution

Karls Kola now has a visual world that looks like a brand: a website people enjoy scrolling, bottles that sit cleanly everywhere, and ads you get in two seconds. All of it without a photo shoot or film day, and the team adds new flavours itself.

/ Tech-Stack

01

PHP, three.js & GSAP

PHP without a database, bottles as three.js lathe bodies with a custom shader, GSAP and Lenis for the scroll, WebAudio for sound, backend with site editor and Pulse dashboard. Built with Claude Code.

02

ChatGPT, Seedance & ElevenLabs

ChatGPT/Codex for cut-outs and campaign photos, OpenArt and Seedance 2.5 for the spot, ElevenLabs for sound, OpenCV tracking for the lettering.

03

Python & CoWorkboard

A custom ad renderer sets copy in every format and checks it against the approvals. Ideas, lines, approvals and all motifs live on dedicated CoWorkboard boards.

[ Contact ]

Your brand. Show it.

Let’s talk

Next project

Golfhub Simulator