Cera Divina — Kerzen-Shop im Geist der Renaissance

(Auf einen Blick)

Leistungen

• Konzept, Art Direction & Umsetzung
• Logo & Corporate Identity
• Scroll-Choreografie mit GSAP ScrollTrigger
• Bild-Morph zur Produktseite (View Transitions)
• Kollektion, Produktseiten & Warenkorb
• Bild- und Videowelt KI-generiert, Figuren freigestellt
• Schriften lokal, Reduced-Motion-Fallback

Online-Shop für extravagante Duft- und Stabkerzen: Gemälde, die beim Scrollen lebendig werden, Figuren, die ins Bild schweben, und Kapitel so groß wie Altarbilder.

Cera Divina gießt Kerzen, die man nicht anzündet, um zu sehen, sondern um gesehen zu werden: eine Monumentalkerze mit Medici-Wappen, eine Muschel aus Wachs, ein David-Kopf in Marmoroptik, kannelierte Säulen als Stabkerzen. Eine solche Marke lebt von ihrem Charakter, nicht von Datenblättern. Unser Ansatz war deshalb eine extravagante Website, die den Renaissance-Charakter der Marke interaktiv erlebbar macht: Wer scrollt, bewegt sich durch Gemälde, die auf ihn reagieren. Die Seite ist öffentlich unter cera-divina.com erreichbar.

Cera Divina ist ein Showcase-Projekt aus unserer Schmiede: Marke, Kerzen und Preise haben wir für diese Seite entwickelt, Warenkorb und Kasse verkaufen nichts. Die Technik dahinter ist echt und läuft so live.

(01)

Ein Fresko zum Einstieg

Die Startseite öffnet auf einer toskanischen Abendlandschaft, in der Hunderte Kerzen brennen. Ein einziger Scroll-Impuls, und zwei Figuren schweben von links und rechts heran, die Hände ausgestreckt wie in der Erschaffung Adams. Zwischen ihren Fingern steigt die Colonna auf, ein Putto bringt eine weitere Kerze, Blütenblätter treiben durchs Bild. Erst dann erscheinen Headline, Preis und Warenkorb-Knopf. Das Produkt wird nicht präsentiert, es wird enthüllt.

Die Figuren sind einzeln freigestellt und liegen als eigene Ebenen über dem Hintergrundvideo. Deshalb lassen sie sich unabhängig bewegen, auf dem Smartphone anders platzieren und bei reduzierter Bewegung einfach ruhig stehen lassen.

(02)

Jede Kerze ein Kapitel

Die Seite ist gegliedert wie ein Bildband, in zehn Kapiteln mit römischen Ziffern. Fünf davon gehören je einer Kerze: Ein Gemälde öffnet sich als Hintergrundvideo, der Name baut sich Buchstabe für Buchstabe in einem Titel auf, der die ganze Breite füllt, darunter steht die Duftnote in Schreibschrift. Erst beim Weiterscrollen folgen Beschreibung, Maße, Brenndauer und Preis neben einem Bogenbild der Kerze.

Jedes Kapitel hat eine eigene Akzentfarbe und eine eigene Szene: die Muschel zwischen Feigen und Lilien, die Chiaroscuro-Kerze im Halbdunkel eines Porträts, der Marmorkopf in einer Bildhauerwerkstatt. Am Rand läuft ein Inhaltsverzeichnis mit, das jederzeit zeigt, in welchem Kapitel man gerade ist.

(03)

Die Kollektion als Galerie

Die Kollektion steht auf Papier statt auf Weiß, die Kerzen in Bögen wie in Nischen einer Kirche. Ein Filter trennt Duftkerzen und Stabkerzen, beim Hovern gleitet der Knopf zum Warenkorb nach oben. Die Stabkerzen bekommen eine eigene Galerie, die sich unter einem Nachthimmel aus Lapislazuli seitlich bewegt.

(04)

Vom Bild in den Warenkorb

Ein Klick auf das Bogenbild einer Kerze lässt genau dieses Bild in die Produktseite übergehen, an seine neue Position und in seine neue Größe. Das läuft über die native View-Transitions-API des Browsers, ohne Single-Page-App dahinter: Jede Produktseite bleibt eine eigene, schnell ladende Seite.

Dort wählt man die Ausführung, etwa Carrara in Weiß oder in Nero Marquina, und legt die Kerze in den Warenkorb. Ein Seitenpanel zeigt den Inhalt, der Warenkorb bleibt beim Seitenwechsel erhalten. Die Wege sind dieselben wie in jedem guten Shop, nur die Inszenierung ist eine andere.

(05)

Handwerk, das man sieht

Das Atelier öffnet sich wie ein Fenster in eine Florentiner Werkstatt, in der Kerzen gezogen werden. Im Manifest leuchten die Wörter beim Lesen nacheinander auf. Am Ende stehen „Il Rituale“, vier Schritte vom ersten Brand bis zur Pflege der Skulptur, und ein Footer mit dem Schriftzug über die volle Breite.

(06)

Logo und Schrift

Das Bildzeichen ist ein Lichtkreis, den Flamme und Kerze als eine Achse durchbrechen, angelehnt an El Lissitzkys Keil. Wortmarke und Zeichen sind reine Vektorpfade aus einer einzigen Quelle und übernehmen die Textfarbe, sodass dasselbe Logo auf Pergament und auf Schwarz funktioniert. Typografisch arbeitet die Seite mit Inter Tight für die großen Titel, Instrument Serif für Text und Pinyon Script für die Duftnoten. Alle Schriften und Bibliotheken liegen auf dem eigenen Server.

(07)

Stückliste

Die Zahlen stammen aus der Live-Seite und lassen sich dort nachzählen.

(08)

Was das für dein Projekt heißt

Nicht jeder Shop braucht schwebende Figuren. Aber jede Marke mit Charakter verliert, wenn ihr Shop aussieht wie jeder andere. Bei Produkten, die über Geschichte, Herkunft oder Stil verkauft werden, ist die Inszenierung Teil des Produkts. Wir setzen sie gezielt ein und halten dabei die Wege kurz: Kollektion, Produktseite und Warenkorb funktionieren so, wie Kunden es erwarten.

Wenn deine Marke mehr Charakter hat als dein Shop, sprich mit uns über deinen Online-Shop oder deine Website.