KI:DS CREATE
HITS

Der erste KI-Song unserer Community

🎵 🤖 🚀 🎒

Worum geht's?

🎓

Schule der Zukunft

Teile deine Gedanken und Wünsche für die Schule der Zukunft

🎵

Dein eigener KI-Song

Die KI erstellt aus deinen Ideen einen einzigartigen Song

👥

Community-Hit

Alle Antworten fließen in den großen Community-Song ein

🎤

Noel Dederichs

Markenbotschafter

🎵 Musiker & Creator 📱 YouTube & TikTok

"Gemeinsam mit euch möchte ich den coolsten KI-Song ever erstellen!"

🎁

Gewinnspiel!

Hauptgewinn:
Meet & Greet mit Noel!
+ Chance im Musikvideo dabei zu sein

So funktioniert's

1

🎒 Rucksack-Roboter Video ansehen

2

🎵 Musikstil auswählen

3

🚀 Flug zum Campus erleben

4

🏙️ Räume erkunden & Fragen beantworten

5

🤖 KI-Song erstellen lassen

🛡️ Sicherheitshinweis

  • 🚫 Keine echten Namen eingeben!
  • ✓ Spitzname ist okay
  • ✓ E-Mail muss echt sein (für Gewinnspiel)

Bereit für deinen KI-Song?

Gib deine Daten ein!

Für Gewinnspiel & Song-Zustellung

Design Styleguide

Schriften, Farben und visuelle Richtlinien für die KI-Song Experience

🔤 Typografie

Inter
Primäre Schrift
Google Fonts
Sans-serif
KI:DS CREATE HITS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
Aa
Light 300
Aa
Regular 400
Aa
Medium 500
Aa
Semibold 600
Aa
Bold 700
Aa
Black 900

Verwendung

  • Landing Page - alle Texte
  • Formulare und Eingabefelder
  • Body Text und Beschreibungen
  • Buttons und Call-to-Actions
  • Navigation und UI-Elemente
Orbitron
Holographic UI Schrift
Google Fonts
Display / Futuristic
MUSIKSTIL
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
Aa
Regular 400
Aa
Medium 500
Aa
Semibold 600
Aa
Bold 700
Aa
Black 900

Verwendung

  • Holodeck-Screens - alle Headlines
  • Campus & Raum-Titel
  • Futuristische UI-Elemente
  • Song-Ergebnis Tablet
  • Buttons im Holographic Style

🎨 Farbpalette

Coocazoo Brand (Teal)

Aa
Teal 50
#f0fdfa
Hintergrund Landing Page, helle Flächen
Aa
Teal 100
#ccfbf1
Badges, Highlights, sekundäre Hintergründe
Aa
Teal 500
#14b8a6
Primäre Akzentfarbe, Buttons, Links
Aa
Teal 600
#0d9488
Hover-States, aktive Elemente
Aa
Teal 700
#0f766e
Headlines, wichtige Texte, Logo

Holographic UI

Aa
Cyan (Primary)
#00D9FF
Holodeck-Rahmen, Buttons, Glow-Effekte, Text
Aa
Neon Green
#00FF88
Akzente, Success-States, Gradient-Endpunkt
Aa
Neon Pink
#FF00FF
Zukunfts-Raum, Sci-Fi Akzente
Aa
Dark Background
rgba(0, 21, 37, 0.95)
Holodeck-Hintergrund, dunkle UI-Flächen

Raum-Themenfarben

Aa
Orange (Freunde)
#ff8800
Freunde-Raum: warme, freundliche Atmosphäre
Aa
Gold (Gewinnspiel)
#FFD700
Gewinnspiel-Bereich, Preis-Highlights

🌈 Gradienten

Primary Button
Cyan → Green
linear-gradient(135deg, #00D9FF, #00FF88)
Landing Page
Sky → White → Teal
linear-gradient(180deg, #e0f2fe, #ffffff, #f0fdfa)
Teal Gradient
Teal 700 → Teal 500
linear-gradient(135deg, #0f766e, #14b8a6)
Sci-Fi Gradient
Pink → Cyan
linear-gradient(135deg, #FF00FF, #00D9FF)
Freunde Gradient
Orange → Green
linear-gradient(135deg, #ff8800, #00FF88)
Gewinnspiel
Amber Light
linear-gradient(135deg, #fef3c7, #fde68a)

✨ Glow-Effekte

Cyan Glow
box-shadow: 0 0 30px rgba(0, 217, 255, 0.6)
Holodeck-Rahmen, aktive Buttons
Green Glow
box-shadow: 0 0 30px rgba(0, 255, 136, 0.6)
Success-States, Completed-Marker
Pink Glow
box-shadow: 0 0 30px rgba(255, 0, 255, 0.6)
Zukunfts-Raum Akzente

User Journey

Die Geschichte der KI-Song Experience - Schritt für Schritt

1
📱
KI:DS CREATE
HITS
🎵 🤖 🚀
Landing Page

User gibt Namen & E-Mail ein und startet die Experience

2
🎒
🤖
▶️ VIDEO
Rucksack-Roboter

Einführungsvideo erklärt die Mission

3
🎵
Pop
Hip-Hop
Rock
Electronic
Musikstil-Holodeck

User wählt bevorzugten Musikstil

4
🚀
✈️
Flug zum Campus

Cinematisches Video zum Campus

5
🏙️
🏫
Schule
🏪
Freunde
🔬
Zukunft
🌍
Community
🎵
Studio
Campus Übersicht

User navigiert durch 5 interaktive Räume

6
🏫
Slider + Keywords
Schule der Zukunft

Technologie, Freiheit, Natur, Teamwork

7
🏪
Was bedeutet Freundschaft...
Freunde & Zusammenhalt

Freitext + Keyword-Auswahl

8
🔬
✨
Deine Vision
Zukunfts-Labor

Visionen für die Zukunft teilen

9
🌍
KI Roboter Tech
VR Natur
Community Plaza

Word Cloud der Community-Wünsche

10
🎵
😊 ⚡ 😌
Mood + Titel
Music Studio

Stimmung wählen, Song-Titel eingeben

11
🤖
⚙️
KI generiert...

Song wird in ~30 Sekunden erstellt

12
🏆
🎉
SONG FERTIG!
▶️
Holograph Tablet

Song abspielen, per E-Mail erhalten, Gewinnspiel-Teilnahme!

Zeitlicher Ablauf

Landing
Video
Musik
Flug
Räume erkunden
KI
Ergebnis
0 Min Gesamt: 3-5 Minuten 5 Min
🎒

RUCKSACK-ROBOTER

Der Coocazoo Rucksack erwacht zum Leben und erklärt die KI-Song Mission!

game_intro.mp4 • ~30 Sekunden

🎵 MUSIKSTIL

Wähle deinen Style

🚀

FLUG ZUM CAMPUS

Cinematic Flug über die futuristische Landschaft zum Coocazoo Campus

video.mp4 • ~10 Sekunden

🏙️ CAMPUS ÜBERSICHT

Klicke auf ein Gebäude um es zu erkunden

⬜
🏫 Schule ▶️
⬜
🏪 Freunde
🚀 Start ✓
🔬 Zukunft
🌍 Community
🎵 Studio
🏆 Ziel

3 / 7 abgeschlossen

🏫 SCHULE DER ZUKUNFT

🤖 Technologie
Klassisch High-Tech
🦋 Freiheit
Vorgegeben Frei
🌿 Natur
Drinnen Draußen
🤝 Teamwork
Alleine Team

🏷️ Keywords - Wähle 3

3 / 3 ausgewählt

🏪 FREUNDE

Beschreibe deine Freunde

87 / 500

🏷️ Keywords - Wähle 3

3 / 3 ausgewählt

🔬 ZUKUNFT

Deine Vision für die Zukunft

156 / 500

🎉

SONG FERTIG!

🎵 Zukunfts-Vibes
────────────────
▶️
00:18 / 00:30

📧 Per E-Mail versendet!

🎁 Gewinnspiel-Teilnahme aktiv

📍 Klicke irgendwo um einen Kommentar zu hinterlassen

💬 Neuer Kommentar

📍 Screen: Landing Page • Position: 50%, 50%

💬 Alle Kommentare

💬

Noch keine Kommentare