Wie finde ich meinen Lieblingsduft?
Das ist ein echtes Problem, das man am Parfumregal hat: Man kennt zwei, drei Düfte, die man liebt, und möchte mehr davon finden. Nur gibt es keinen guten Weg zum Vergleich. Ein Duft wird beschrieben wie ein Rezept: Kopfnote Bergamotte, Herznote Jasmin, Basis Sandelholz. Eine Textliste, die nichts sagt, solange man nicht ohnehin schon weiß, wie die Teile zusammenklingen. Der Duftkreis sortiert Parfums in abstrakte Familien (Chypre, Fougère), die nur Kenner einordnen können. Und die naheliegende Lösung, ein Radar- oder Balkendiagramm, wäre lesbar, aber tot: ein Parfum ist Luft und Bewegung, und ein flaches Liniendiagramm sagt nichts darüber, wie es sich anfühlt.
Ein Tool, das Parfums wie die eigenen Lieblinge findet, braucht vor allem anderen eines: ein Duftbild, das auf einen Blick lesbar ist und das man fühlt, nicht entschlüsselt. Kein lesbares Bild, kein Vergleich. Also habe ich die ganze Idee auf dieses eine Fundament heruntergebrochen und zuerst gebaut: ein Bild, das atmet, näher an einer Duftwolke als an einem Diagramm. Dieses Projekt ist dieses Fundament; das Discovery-Tool, für das es gedacht ist, kommt am Ende.
Die Daten: ein Agent, der Duftprofile sammelt
Bevor irgendetwas gezeichnet werden konnte, brauchte ich saubere Daten, für viele Parfums. Also habe ich einen Agenten gebaut, der öffentliche Datenbanken und die Herstellerseiten durchsucht, die Noten herauszieht, sie auf meine acht Familien normalisiert und 349 Profile in eine Datenbank schreibt. Die Regeln und das Zielschema habe ich gesetzt; die Fleißarbeit hat der Agent erledigt.
Zwei Schichten: ehrliche Daten unten, Stoff darüber
Statt der abstrakten Duftkreis-Familien arbeite ich mit acht, die man tatsächlich riechen kann: Blüten, Früchte, Gewürze, Holz, Wasser/Luft, Kräuter, Grün, Zitrus.
Darauf liegt eine Zwei-Schichten-Logik. Schicht eins sind acht Achsen, die vom Zentrum nach außen laufen, jede so lang wie der Wert ihrer Familie. Das ist die ehrliche Datenebene: jeder Wert bleibt exakt ablesbar. Schicht zwei legt sich darüber: Bezier-Bänder zwischen benachbarten Familien, eingefärbt nach Familie, die langsam atmen und driften. Die Trennung hat einen einzigen Grund: das Bild soll sich wie ein Duft anfühlen und gleichzeitig den Daten treu bleiben, ohne dass eines das andere überschreibt. Die Animation ist kein Dekor: ein Duft ist Bewegung, also muss sich das Bild bewegen, sonst lügt es über das, was es ist. Der Zufall sitzt dabei allein in den Bezier-Handles: er verändert die Form der Bänder, nie die Werte.
Wie acht Werte zu einem Bild werden
Nehmen wir CK One, den Duft im Header. Zitrus führt, Grün sitzt knapp dahinter, ein weiches florales Herz darunter: der weiteste Ausgriff landet also in der Zitrus-Grün-Ecke, und die Bänder fächern sich weit, aber leicht auf. Nichts Warmes oder Schweres zieht dagegen; das Bild liest sich frisch, offen, fast schwerelos.
Chanel N°5 führt dieselben Regeln zum gegenteiligen Ergebnis. Blüten überragen alles, darunter nur noch Holz, das Bild zieht stark in eine Richtung: gesättigt, konzentriert, dicht. Kein Fächer, kein Zitrus-Grün-Auftrieb. Die beiden nebeneinandergestellt, und man sieht den Unterschied: konzentriert und schwer gegen leicht und aufgefächert. Bevor man ein Wort gelesen hat.
Wie ich es gebaut habe: ca. 30 Konzepte, KI als Umsetzungsschicht
Bis hierhin waren rund dreißig visuelle Konzepte nötig (Seidenbänder, Stoffsimulationen, Rauchringe, Drahtbündel, Polygon- und Ring-Layouts), bevor die Synthese aus Achsen und Bezier-Schichten hielt. Die Materialmetaphern sahen schön aus, trugen aber zu wenig Daten; die strengen Layouts trugen die Daten, standen aber zu starr.
Claude war hier ausführende und beratende Schicht, kein Generator: ich sage, was ich will, das System schlägt Implementierungen vor, ich entscheide, was bleibt. Der Gaußsche Weichzeichner ist eingebaut und wieder rausgeflogen (zu schwer auf dem M1); Slider sind aufgetaucht und verschwunden; etwa fünfmal hieß die Entscheidung „vorher war besser".
Eine Entscheidung gab das Recht vor. Ein erkennbares Flacon-Foto würde auf dünnes Eis führen, weil die Form vieler Parfumflakons geschützt ist. Deshalb sitzt hinter jedem Duft dasselbe generische Flakon-Foto.
Probiere selbst, wie ein Parfum aussieht
Ein lauffähiger Prototyp, online unter der Subdomain. Man wählt einen Duft und bekommt sein Bild. Jede Schicht atmet auf einem eigenen Zeitversatz, dadurch lebt das Bild, ohne zu flackern. Beim Wechsel zwischen zwei Düften läuft eine Sweep-In-Transition: das alte Bild zieht sich zusammen, das neue baut sich auf.
Was fehlt, was ich anders machen würde
Der größte nächste Schritt ist die Bildsprache selbst: die Bänder weiter in Richtung Tinte, Rauch und Flamme treiben, lebendiger, näher an dem, was sie beschreiben, ohne die Werte darunter zu verlieren. Danach die kleinen Dinge: manche Nähte laufen noch durch ein mattes Grau, weil im RGB-Raum interpoliert wird; HSL oder OkLab würden das glätten, aber nur die gelbe Naht hat mich genug gestört, um sie zu markieren. Noch offen: ein Hover mit Ghost-Polygonen zum Vergleich zweier Düfte in einem Diagramm, ein Vergleichsraster für mehrere Parfums und eine Tone.js-Sonifikation, bei der jede Familie ein Ton wird. Genug für die nächste Regenwoche.
Wofür es gebaut ist, und warum ich es noch nicht baue
Das ist das Tool, für das das Bild das Fundament war. Das Interface-Konzept gibt es seit einer Weile: Man startet mit einem Duft, den man kennt, und er legt sich in die Mitte des Rings. Die acht Familien stehen drumherum, und in den Ring treten die Parfums, die nah dran liegen, jedes dorthin gezogen, wo seine Noten am stärksten sind.
Von da an stimmt man den Duft mit der Hand ab: an jeder Familie hängen einzelne Inhaltsstoffe (Rose, Apfel, Grapefruit), die man über Plus und Minus dazunimmt oder wegnimmt, und das Feld der nahen Parfums ordnet sich neu, berechnet über eine Cosinus-Distanz auf den acht Familienwerten. Rechts filtert man nach Intensität, nach Anlass (Casual bis Abend), nach Duftvariante und danach, ob eine Note in Kopf, Herz oder Basis sitzt. Was gefällt, wandert in eine Merkliste. Das macht aus der Suche ein Ausprobieren mit sofortiger Rückmeldung im Bild.
Diesen Teil gehe ich bewusst noch nicht an. Der rechtliche Boden für ein öffentliches Tool, das Marken nach Ähnlichkeit rankt, ist dünn, und das Konzept zeigt noch echte Flacons, die zuerst durch das generische Foto ersetzt werden müssten. Ohne ein lesbares Duftbild steht der Mixer ohnehin auf nichts; also zuerst das Bild, der Rest wartet, bis das Fundament steht.
Häufige Fragen
Wie lange hat das Projekt gedauert?
Die Visualisierung ist über mehrere Arbeitssessions entstanden, mit rund dreißig durchgespielten Konzepten, bis das finale Achsen-plus-Bezier-System stand. Die Recherche zur Darstellung von Düften und zur Flacon-Rechtslage lief vorab.
Welche Tools wurden eingesetzt?
HTML, JavaScript und Canvas für die Visualisierung, Claude als ausführende und beratende Schicht in der Umsetzung, rsync für das Deployment auf eine Cyon-Subdomain. Die Notenpyramiden stecken im Prototyp als vorbereitete Daten, es hängt keine Live-API dran.
Woher kommen die Duftdaten?
Aus einer eigenen Datenbank, die ein Agent füllt: er durchsucht öffentlich frei verfügbare Datenbanken und Herstellerseiten nach Parfumprofilen und normalisiert die Noten auf meine acht Familien. Jede Note trägt eine Intensität, daraus berechnet sich das Bild.
Warum kein echtes Foto der Parfumflasche?
Weil die Form vieler Flakons rechtlich geschützt ist. Eine generische Apotheker-Silhouette für alle Düfte ist rechtlich sauber und hält die Bildsprache einheitlich.
Ist das ein fertiges Produkt?
Nein, ein Prototyp. Die Visualisierung läuft live, der ursprünglich geplante Teil zum Finden ähnlicher Düfte ist bewusst zurückgestellt.