hanjo@winter: ~/projects/kokoro-drive
$ cd ~/projects/kokoro-drive ← alle Projekte
CREATIVE DIRECTION · FRONTEND · AI-ASSISTED ART

KOKORO-DRIVE

Digital Hearts, Electronic Souls — ein KI-gestütztes Musiklabel und interaktives Web-Erlebnis.

Live ansehen
Rolle
Creative Direction
Leistungen
Frontend · AI Art & Story
Typ
Eigenes Konzept
Status
● Live-Experience
$ cat overview.md
Überblick

Digital Hearts, Electronic Souls — ein KI-gestütztes Musiklabel und interaktives Web-Erlebnis. Wenn maschinelle Logik auf menschliche Emotionen trifft.

Wie baut man ein komplettes, audiovisuelles Musiklabel aus dem Nichts auf? KOKORO-DRIVE ist ein experimentelles Showcase-Projekt, das an der Schnittstelle von Creative Direction, Frontend-Entwicklung und generativer Künstlicher Intelligenz operiert.

$ cat die-vision.md
Die Vision: ein digitales Herz, das den Takt angibt

Die Grundidee für KOKORO-DRIVE (jp. 心 – Kokoro = Herz) war ein faszinierendes Gedankenexperiment: Können synthetische Klänge und Algorithmen echte, greifbare Gefühle transportieren? Um diese Frage zu erforschen, erschuf ich Mochi Machine — einen virtuellen, anthropomorphen Artist, dessen leuchtendes Herz als visuelles Interface für seinen musikalischen Output dient.

Das Projekt umfasst zwei vollständige Konzeptalben, die einen klaren „Character Arc" durchlaufen:

  • Phase 1 – „Digital Doki": ein klinisch-helles, treibendes J-Core-Album im Y2K-Stil. Hier entdeckt die Maschine ihre ersten, naiven Emotionen.
  • Phase 2 – „Digital Rebirth": ein düsteres, melancholisches Acid-Funk-Album. Das Farbschema wechselt zu Midnight-Blue und Acid-Green (der „Ghost in the Groove"-Ära). Es geht um verlorene Daten, digitale Einsamkeit und den Versuch, das System neu zu starten.
$ cat die-kulturelle-dna.md
Die kulturelle DNA: warum J-Core und Japanisch?

Die Entscheidung für japanische Ästhetik, J-Core-Musik und mehrsprachige Lyrics (Japanisch, Romaji, Englisch) war kein Zufall, sondern eine bewusste Design-Entscheidung, um die Story der Mochi Machine glaubhaft zu stützen:

  • Sprache als Code: Der ständige Wechsel zwischen Japanisch und Englisch wirkt wie eine eigene Programmiersprache. Zudem transportieren japanische Begriffe eine starke Dualität — „Saisei" bedeutet sowohl „Wiedergabe" (technisch) als auch „Wiedergeburt" (organisch).
  • Die Heimat der virtuellen Idols: Japanische Popkultur hat die Idee der „Seele in der Maschine" (von VTubern bis zu Anime wie Ghost in the Shell) perfektioniert — der natürliche kulturelle Raum für ein fühlendes Gadget.
  • Der Sound der Prozessoren: Harte Kicks, extrem schnelle BPM und 303-Acid-Synthesizer repräsentieren den „Herzschlag" der Hardware. Das übersteuerte Tempo des ersten Albums steht für den Overload neuer Emotionen, der verlangsamte Acid-Funk des zweiten für die Melancholie eines isolierten Systems.
$ cat art-direction.md
Art Direction & pragmatischer KI-Einsatz

In meinem Arbeitsprozess betrachte ich KI nicht als Magie, sondern als extrem schnelles Werkzeug für die Asset-Kreation. Die kreative Regie — Story (Lore), Prompt-Engineering, emotionale Tonalität und die tiefgründigen Texte — lag vollständig in meiner Hand.

Generative Modelle wie Suno AI (Audio-Rendering) und Gemini AI (visuelle Konzeption) dienten als Ausführungsorgane meiner Vorgaben. Das Ergebnis ist keine ziellose KI-Spielerei, sondern ein fokussiertes Storytelling-Erlebnis.

$ cat frontend.md
Frontend: ein interaktives Web-Erlebnis

Um das Projekt angemessen zu präsentieren, entwickelte ich eine responsive Landingpage (HTML5, CSS3, Bootstrap 5, Vanilla JavaScript), die den visuellen Bruch der beiden Alben im Design aufgreift.

  • Dynamisches Lyrics-Parsing: Ein interaktives Modal-System lädt per Fetch-Request lokale Markdown-Dateien. Ein eigens geschriebenes Regex-Script splittet den Text on-the-fly anhand der Markdown-Header und rendert ihn in vier synchronisierte Tabs (Japanisch, Romaji, Deutsch, Englisch).
  • Custom Audio-Engine: Ein nahtlos integrierter, asynchroner JavaScript-Player, fixiert am unteren Bildschirmrand. Er erlaubt unterbrechungsfreies Durchstöbern und steuert automatisch den Übergang (Auto-Play) zwischen den Tracks beider Alben.
$ ls ./stack
Eingesetzt
Creative DirectionHTML/CSSJavaScriptAI ImageAI TextStorytelling
$ ./preview --screenshots
Einblicke
$ cat outcome.md
Ergebnis

KOKORO-DRIVE ist mehr als eine Website — es ist ein immersives Multimedia-Produkt. Es beweist, wie schnell und präzise aus einer abstrakten Idee ein greifbares Brand-Universum entsteht, wenn man strategisches Design, sauberes Code-Handwerk und den zielgerichteten Einsatz moderner KI-Tools kombiniert.

Nächstes Projekt

WorldOrbit

▸ connection ready — awaiting input

Ähnliches Projekt im Kopf?

post@hanjowinter.de
Standort: Köln / Bonn · Remote & vor Ort  |  Antwort meist < 24h