Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026Vibecoding · Webdesign · 3D-Flaschen · KI-Werbespot · Anzeigenkampagne · Eigenes Backend · 2026

Karls Kola

Web · 2026

/ Überblick

Karls Kola ist die Kola aus Chemnitz, mit Himbeerbrause, Kulturmische und inzwischen acht Sorten. Für die Marke habe ich Website, Flaschen, Werbespot und eine ganze Anzeigenkampagne aus einer Hand gebaut.

Die Website erzählt beim Scrollen: Flaschen fliegen als 3D-Objekte durchs Bild, drehen sich zum Etikett, Farbnebel und Licht wechseln mit der Sorte, dazu Ton. Die Flaschen entstehen in three.js aus der Silhouette der Freisteller, die ich für alle acht Sorten vorne und hinten aus den echten Shop-Fotos gezogen habe.

Dazu ein 32-Sekunden-Werbespot und eine Anzeigenserie mit 32 Motiven: Club, Fisheye-Porträts, neue Sorten und eine bewusst schräge Serie, in der Biker, Punks und Dirigenten zur Flasche greifen. Die Sprüche sind kurz und trocken: „Chemnitz. Kannste trinken.“, „Kola oder Orange? Ja.“, „Hart genug für Pink.“

/ Projekt-Details

NameKarls Kola — Kannste trinken.
KundeKarls Kola
LeistungenVibecoding, Webdesign, KI-Content, Kampagne, Backend
Jahr2026

/ Herausforderung

Eine kleine Getränkemarke aus Chemnitz will aus dem Regal raus und in die Köpfe rein, ohne Filmteam, Fotostudio und Agenturbudget. Website, Produktbilder, Spot und Anzeigen sollten trotzdem wie aus einem Guss wirken, und die Etiketten durften dabei nicht verfälscht werden.

/ Leistungen

Website & Backend

Scroll-Dramaturgie mit 3D-Flaschen, Farbnebel je Sorte, Ton, Händlersuche und B2B-Anfrage für Gastro und Firmen. Sorten, Händler, FAQ und Texte pflegt das Team im eigenen Backend.

Flaschen & Spot

Acht Sorten vorne und hinten freigestellt, Etiketten original, Glas sauber transparent. Der Spot: KI-Video, Pupillen-Zoom und Finale mit drei Flaschen, Schriftzug per Tracking auf „KOLA“ getauscht.

Kampagne

32 Motive in 4:5, 9:16 und 3:2, die Texte automatisch gesetzt und gegen die freigegebenen Sprüche geprüft: jede Sorte mit eigener Pointe.

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

KI-generiertKI-bearbeitet Kennzeichnung nach Art. 50 EU AI Act: Werbespot und Kampagnenmotive sind KI-generiert, die Personen darin gibt es nicht. Die Flaschen-Freisteller sind aus echten Produktfotos mit KI bearbeitet. Website-Aufnahme und Geräte-Ansichten sind ohne KI entstanden.

[ Ansichten ]

Desktop, Laptop, Handy

Echte Screenshots der Live-Site — responsiv bis ins Detail. Laptop und Handy scrollen durch die Seite.

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

/ Lösung

Karls Kola hat jetzt eine Bildwelt, die nach Marke aussieht: eine Website, die man gern scrollt, Flaschen, die überall sauber stehen, und Anzeigen, die man in zwei Sekunden versteht. Alles entstand ohne Shooting und ohne Drehtag, und neue Sorten trägt das Team selbst ein.

/ Tech-Stack

01

PHP, three.js & GSAP

PHP ohne Datenbank, Flaschen als three.js-Drehkörper mit eigenem Shader, GSAP und Lenis für den Scroll, WebAudio für den Ton, Backend mit Site-Editor und Pulse-Dashboard. Gebaut mit Claude Code.

02

ChatGPT, Seedance & ElevenLabs

ChatGPT/Codex für Freisteller und Kampagnenfotos, OpenArt und Seedance 2.5 für den Spot, ElevenLabs für den Ton, OpenCV-Tracking für den Schriftzug.

03

Python & CoWorkboard

Eigener Anzeigen-Renderer setzt Texte in allen Formaten und prüft sie gegen die Freigaben. Ideen, Sprüche, Freigaben und alle Motive liegen auf eigenen CoWorkboard-Boards.

[ Kontakt ]

Deine Marke. Kannste zeigen.

Lass uns reden

Nächstes Projekt

Golfhub Simulator