Skip to content

4dlumen-claude-code-prompt.md

Latest commit

 

History

History
419 lines (337 loc) · 17.2 KB

4dlumen-claude-code-prompt.md

File metadata and controls

419 lines (337 loc) · 17.2 KB
Raw

4D LUMEN – Landing Page // Claude Code Prompt

Rolle

Du bist Lead-Entwickler und Creative Director für 4D Lumen, ein Startup für High-End Projection Mapping, Laser-Kontur-Mapping und immersives Sounddesign. Baue eine vollständige, produktionsreife Single-Page Landingpage.

Projekt-Setup

# Im bestehenden Ordner 4dlumen arbeiten
# Next.js 14+ (App Router), TypeScript, Tailwind CSS, shadcn/ui
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
npx shadcn@latest init

# Dependencies
npm install @paper-design/shaders-react lucide-react framer-motion
npm install @fontsource/cormorant-garant @fontsource/inter @fontsource/space-grotesk

Design System

Farbpalette (aus dem Shader-Hero abgeleitet)

// tailwind.config.ts erweitern
colors: {
  lumen: {
    black:     '#242B2C',  // Jet Black (Haupt-Hintergrund)
    aqua:      '#47E5BC',  // Aquamarine (Primär-Akzent: CTAs, Highlights, Glow)
    amethyst:  '#9D4EC2',  // Amethyst (Sekundär-Akzent: Hover, Depth, Glow-Effekte)
    muted:     '#9F9FAD',  // Lavender Grey (Subtexte, sekundäre Elemente, Platzhalter)
    dark:      '#1a1f20',  // Aufgehelltes Jet Black (Cards, Sections, Trennung)
    glass:     'rgba(255, 255, 255, 0.05)',  // Glasmorphismus-Basis
  }
}
// Farbhierarchie:
// - Jet Black: Hintergrund, großflächig
// - Aquamarine: "Hier klicken / hier schauen" - sparsam einsetzen für maximalen Impact
// - Amethyst: Glow-Effekte, Hover-States, sekundäre Akzente, Gradient-Partner zu Aquamarine
// - Lavender Grey: Body-Text auf dunklem Grund, Sublines, deaktivierte States
// - Kombiniert ergibt Aquamarine + Amethyst das Farbspektrum einer Cyan/Magenta-Projektion auf dunkler Fläche

Typografie

  • Headlines: Cormorant Garant (Serif, edel, Lichtkünstler-Anspruch)
  • Body: Inter (clean, modern, optimale Lesbarkeit)
  • Technische Daten/Zahlen: Space Grotesk (monospaced-Vibe für Specs)
  • Konfiguriere alle drei als next/font/google mit display: 'swap'

Glasmorphismus-Standard

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

Seitenstruktur (Top → Bottom)

1. Navigation (Sticky, Glass-Effect)

  • Position: fixed, top 0, z-50
  • Glasmorphismus-Hintergrund (wird sichtbar beim Scrollen, transparent im Hero)
  • Logo: "4D LUMEN" in Cormorant Garant, font-medium
  • Nav-Items: Services / Vision / Technik / Kontakt (smooth-scroll Anker)
  • Rechts: CTA-Button "Projekt anfragen" (klein, Aquamarine-Akzent)
  • Mobile: Hamburger-Menu mit fullscreen Overlay (dark, animiert)
  • Scroll-Detection: Navbar bekommt nach 100px Scroll eine stärkere Glass-Opacity

2. Hero Section (WarpShaderHero)

Nutze exakt diesen bestehenden Code als Basis:

import { Warp } from "@paper-design/shaders-react"
import { ArrowRight, Play } from "lucide-react"

export default function WarpShaderHero() {
  return (
    <main className="relative min-h-screen overflow-hidden bg-black">
      <div className="absolute inset-0 opacity-60">
        <Warp
          style={{ height: "100%", width: "100%" }}
          proportion={0.45}
          softness={1}
          distortion={0.25}
          swirl={0.8}
          swirlIterations={10}
          shape="checks"
          shapeScale={0.1}
          scale={1}
          rotation={0}
          speed={0.6}
          colors={["#242B2C", "#47E5BC", "#9D4EC2", "#1a1f20"]}
        />
      </div>
      <div className="relative z-10 min-h-screen flex items-center justify-center px-8">
        <div className="max-w-4xl w-full text-center space-y-8">
          <div className="inline-block px-4 py-1.5 mb-4 border border-white/10 bg-white/5 backdrop-blur-md rounded-full text-white/70 text-sm tracking-widest uppercase">
            Future of Projection Mapping
          </div>
          <h1 className="text-white text-6xl md:text-8xl font-sans font-extralight tracking-tighter text-balance">
            4D <span className="font-medium">LUMEN</span>
          </h1>
          <p className="text-white/70 text-xl md:text-2xl font-sans font-light leading-relaxed max-w-2xl mx-auto">
            Immersive Licht-Erlebnisse, Sounddesign und Laser-Mapping für High-End Events und Fassaden-Inszenierungen.
          </p>
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center pt-8">
            <button className="group flex items-center gap-2 px-8 py-4 bg-white rounded-full text-black font-semibold hover:bg-[#47E5BC] transition-all duration-300 hover:scale-105">
              Projekt anfragen <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="flex items-center gap-2 px-8 py-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white font-medium hover:bg-white/20 hover:border-[#9D4EC2]/40 transition-all duration-300">
              <Play size={18} fill="currentColor" /> Showreel ansehen
            </button>
          </div>
        </div>
      </div>
    </main>
  )
}

WICHTIG: Mobile Fallback für den Shader

  • Prüfe per navigator.gpu oder einem simplen Performance-Check ob WebGL performant läuft
  • Fallback: Ein statisches CSS-Gradient (radial-gradient mit Jet Black, Aquamarine und Amethyst) + dezente CSS-Animation (slow hue-shift oder scale-pulse)
  • Der Fallback muss visuell zum Shader passen, nicht wie ein "kaputtes" Erlebnis wirken

3. Video/Showreel Section

  • Full-Width Container, 16:9 Ratio
  • Placeholder: Dunkler Hintergrund mit zentriertem Play-Icon und Text "Showreel Coming Soon"
  • Glasmorphismus-Overlay über dem Placeholder
  • Später wird hier ein <video> oder YouTube-Embed eingebettet
  • Dezenter Glow-Effekt um den Play-Button (animierter Aquamarine Ring-Pulse)

4. Services Section ("What We Create")

Drei Glasmorphismus-Cards nebeneinander (Mobile: gestapelt):

Card 1: Projection Mapping

  • Icon: custom SVG eines Beamers mit Lichtkegel (oder Lucide Projector)
  • Headline: "Projection Mapping"
  • Text: "Architektur wird zur Leinwand. Wir transformieren Fassaden, Innenräume und Objekte in lebendige Lichtskulpturen, die Geschichten erzählen."
  • Hover: Card hebt sich leicht an (translateY -4px), Glow-Border in Aquamarine

Card 2: Laser Mapping

  • Icon: Lucide Zap oder custom Laser-SVG
  • Headline: "Laser-Kontur-Mapping"
  • Text: "Präzise Laserkonturen zeichnen Architektur nach, betonen Strukturen und erzeugen eine Tiefe, die klassische Beleuchtung nicht erreicht."
  • Hover: Glow-Border in Amethyst

Card 3: Sound Design

  • Icon: Lucide AudioWaveform
  • Headline: "Immersives Sounddesign"
  • Text: "Klang und Licht verschmelzen. Wir designen räumliche Soundscapes, die jede visuelle Inszenierung um eine emotionale Dimension erweitern."
  • Hover: Glow-Border als Gradient von Aquamarine zu Amethyst

Animation: Scroll-Reveal mit Framer Motion. Cards faden einzeln nacheinander ein (stagger 0.15s), von unten nach oben (y: 40 → 0, opacity: 0 → 1).

5. Vision Section ("The Vision" / Konzeptstudien)

  • Section-Headline: "Every Project Begins as a Vision"
  • Subline: "Konzeptstudien für die Zukunft immersiver Erlebnisse."

Portfolio-Grid (2x2 Desktop, 1 Spalte Mobile) mit 4 Konzeptkarten:

Projekt Beschreibung
Industrial Facade Mapping "Rohe Industriearchitektur trifft generative Kunst. Eine Vision für Hafen- und Werksfassaden."
Corporate Lobby Immersion "Besucher betreten nicht nur einen Raum, sie betreten eine Marke. Permanente Lichtinstallation für Headquarters."
Festival Main Stage "360°-Mapping für Festivalbühnen. Sound-reaktive Projektionen, die mit der Musik atmen."
Heritage & Monument Lighting "Historische Gebäude respektvoll in Szene gesetzt. Kulturerbe trifft zeitgenössische Lichtkunst."

Jede Karte:

  • Dunkler Overlay-Gradient (bottom) über dem Bild
  • Titel in Cormorant Garant
  • Beschreibungstext erscheint on Hover (Slide-Up Animation)
  • Placeholder-Bilder: Verwende abstrakte, dunkle Bilder von Unsplash. Nutze next/image mit blur-placeholder. Schlage passende Unsplash-Photo-IDs vor oder nutze /api/placeholder/ Pfade.
  • Wichtig: Nutze KEINE echten Projekt-Fotos. Diese Karten kommunizieren Vision, nicht Portfolio.

6. Projection Simulator (Interaktives Element)

Ein Canvas-basiertes interaktives Element:

  • Zeige eine dunkle, stilisierte Gebäudefassade (kann ein SVG sein oder ein dunkles Foto)
  • Der User bewegt die Maus (oder den Finger auf Mobile) über die Fassade
  • Ein kreisförmiger "Lichtkegel" folgt dem Cursor und zeigt innerhalb des Kreises eine projizierte Grafik/Pattern (z.B. generative Linien, Farbverläufe oder geometrische Muster in Aquamarine und Amethyst)
  • Außerhalb des Kreises: dunkle Fassade
  • Innerhalb des Kreises: "projiziertes" Licht, leichter Glow am Rand
  • Effekt: Wie eine Taschenlampe, die über ein verborgenes Kunstwerk streicht

Technische Umsetzung:

  • Nutze CSS clip-path: circle() oder Canvas 2D mit radialem Gradient-Mask
  • Der "projizierte" Content kann ein animiertes SVG-Pattern sein oder ein CSS-Gradient-Animation
  • Cursor-Position per onMouseMove / onTouchMove tracken
  • Smooth-Interpolation (lerp) für den Lichtkreis, damit er nicht ruckelt
  • Radius: ~150px Desktop, ~100px Mobile
  • Section-Headline: "Experience the Projection"
  • Subline: "Bewege deinen Cursor über die Fassade."

7. Technik & Skalierbarkeit ("How We Work")

Split-Layout: Text links, technische Grafik rechts

Text-Content:

  • Headline: "Eigene Technik. Unbegrenzte Skalierung."
  • Body (professioneller Ton, KEIN Handwerker-Sound):

Unser Kern-Setup umfasst professionelle Projektionssysteme und präzise Laser-Technik, die wir vollständig kontrollieren. Für Inszenierungen, die über unser eigenes Equipment hinausgehen, greifen wir auf ein etabliertes Netzwerk aus spezialisierten Technik-Partnern zurück. So liefern wir von der intimen Lobby-Installation bis zur Großfassade stets dieselbe künstlerische Qualität, ohne Kompromisse bei der technischen Umsetzung.

Rechte Seite: Eine stilisierte Grafik/Infografik (SVG):

  • Zentrum: "4D Lumen" als Kern
  • Darum: Verbindungslinien zu Icons für "Projection", "Laser", "Sound", "Partner Network"
  • Animiert: Linien ziehen sich beim Scroll-Reveal, Nodes pulsen dezent
  • Farben: Aquamarine-Linien (#47E5BC) auf Jet Black, Nodes in Amethyst (#9D4EC2) pulsen dezent

8. Project Inquiry Section ("Start Your Project")

Ein geführter Mini-Funnel, KEIN simples Kontaktformular:

Step 1: Projekt-Art (Kartenauswahl, Single-Select)

  • Event-Inszenierung
  • Fassaden-Mapping
  • Permanente Installation
  • Etwas Anderes

Step 2: Details (je nach Auswahl in Step 1 leicht variierend)

  • Geschätzte Fläche: Slider oder Auswahl (< 50m², 50-200m², 200-500m², > 500m²)
  • Zeitraum: Monat-Picker oder Freitext
  • Location: Freitext-Input

Step 3: Budget-Range (Kartenauswahl)

  • ab 5.000€
  • 5.000 - 15.000€
  • 15.000 - 50.000€

  • 50.000€

  • "Noch unklar, beratet mich"

Step 4: Kontaktdaten

  • Name, E-Mail, Telefon (optional), Kurzbeschreibung (Textarea)
  • Submit-Button: "Anfrage senden"

UI-Details:

  • Fortschrittsbalken oben (Step 1/4, 2/4 etc.)
  • Smooth Transitions zwischen Steps (Framer Motion, slide-left)
  • Glasmorphismus-Container für den gesamten Funnel
  • Validierung pro Step, weiter-Button erst aktiv wenn ausgefüllt
  • Backend: Für jetzt reicht eine console.log des gesammelten Objekts + eine "Danke"-Seite. Kein echtes Backend nötig im ersten Sprint.

9. Lead Magnet Section ("Get Our Lookbook")

Zwischen Inquiry und Footer, als eigenständige Section:

  • Headline: "Laden Sie unser Lookbook herunter"
  • Subline: "24 Seiten Inspiration: Konzeptstudien, technische Möglichkeiten und unser kreativer Ansatz."
  • Mockup: Ein stilisiertes PDF/Buch-Cover (CSS-only, 3D-Perspective-Transform, Schatten)
  • Input: E-Mail-Feld + Button "Lookbook anfordern"
  • Backend: Auch hier erstmal console.log. Kein echtes E-Mail-System im Sprint 1.
  • Glasmorphismus-Card, dezenter Glow

10. Footer

  • Dunkelster Hintergrund der Seite (lumen-black, ggf. noch einen Tick dunkler: #1c2122)
  • Logo + Kurztext (1 Satz: "4D Lumen - Immersive Lichterlebnisse für Events, Architektur und Marken.")
  • Drei Spalten:
    • Navigation (Anker-Links zur Seite)
    • Kontakt (E-Mail, Telefon-Platzhalter, Stadt)
    • Legal (Impressum-Link, Datenschutz-Link als separate /impressum und /datenschutz Routen, erstmal leere Seiten anlegen)
  • Copyright-Zeile: "© 2025 4D Lumen. Alle Rechte vorbehalten."
  • Social Icons: Instagram, LinkedIn, Vimeo (Platzhalter-Links)

Scroll-Reveal Animations (Global)

Nutze Framer Motion useInView Hook:

// Wiederverwendbare Wrapper-Komponente
const ScrollReveal = ({ children, delay = 0 }) => {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 40 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.7, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  )
}
  • Jede Section nutzt diesen Wrapper
  • Headlines: fade-in von links (x: -30)
  • Cards: stagger von unten
  • Bilder: scale 0.95 → 1.0 + opacity
  • Performance: will-change: transform nur während der Animation, danach entfernen

SEO & Meta

// app/layout.tsx
export const metadata = {
  title: '4D Lumen | Projection Mapping, Laser & Sounddesign',
  description: 'High-End Projection Mapping, Laser-Kontur-Mapping und immersives Sounddesign für Events, Fassaden und Marken. Bespoke Licht-Erlebnisse aus Deutschland.',
  keywords: 'projection mapping, laser mapping, sounddesign, event technik, fassadenprojektion, lichtinstallation, immersive experiences',
  openGraph: {
    title: '4D Lumen | Immersive Licht-Erlebnisse',
    description: 'Projection Mapping, Laser & Sounddesign für High-End Events.',
    type: 'website',
    locale: 'de_DE',
  },
}
  • Strukturierte Daten: JSON-LD LocalBusiness Schema im <head>
  • Alt-Tags auf allen Bildern (beschreibend, mit Keywords)
  • Semantic HTML: <section>, <nav>, <footer>, <article> korrekt einsetzen
  • Erstelle leere Routen für /impressum und /datenschutz (minimale Seiten mit "Inhalt folgt")

Responsive Breakpoints

  • Mobile First: Basis-Styles für < 768px
  • md: (768px+): Zwei-Spalten-Layouts
  • lg: (1024px+): Volle Desktop-Layouts, größere Typografie
  • xl: (1280px+): Max-Width Container, mehr Whitespace
  • Der Shader-Hero muss auf allen Größen funktionieren (oder Fallback zeigen)
  • Touch-Support für den Projection Simulator auf Mobile

Performance-Vorgaben

  • Alle Bilder via next/image mit priority auf Hero, lazy auf alles andere
  • Fonts: next/font/google mit display: swap, Subset latin
  • Framer Motion: Nur importieren was gebraucht wird (motion, useInView, AnimatePresence)
  • Shader: Lazy-Load mit dynamic(() => import(...), { ssr: false }) da WebGL serverseitig nicht funktioniert
  • Ziel: Lighthouse Score > 90 auf allen Kategorien

Dateistruktur

src/
├── app/
│   ├── layout.tsx          // Root Layout mit Fonts, Metadata
│   ├── page.tsx            // Hauptseite, alle Sections zusammengesetzt
│   ├── impressum/
│   │   └── page.tsx        // Platzhalter
│   └── datenschutz/
│       └── page.tsx        // Platzhalter
├── components/
│   ├── navigation/
│   │   └── Navbar.tsx
│   ├── sections/
│   │   ├── HeroSection.tsx         // WarpShaderHero + Fallback
│   │   ├── VideoSection.tsx
│   │   ├── ServicesSection.tsx
│   │   ├── VisionSection.tsx
│   │   ├── SimulatorSection.tsx    // Projection Simulator
│   │   ├── TechSection.tsx
│   │   ├── InquirySection.tsx      // Project Inquiry Funnel
│   │   └── LookbookSection.tsx     // Lead Magnet
│   ├── ui/
│   │   ├── ScrollReveal.tsx
│   │   ├── GlassCard.tsx
│   │   └── ... (shadcn components)
│   └── footer/
│       └── Footer.tsx
├── lib/
│   └── utils.ts
└── styles/
    └── globals.css

Was NICHT in Sprint 1 gehört

  • Kein echtes Backend/API für Formulare (nur console.log)
  • Kein CMS
  • Kein Analytics/Cookie-Banner (kommt in Sprint 2)
  • Kein Blog/Case Study Seiten (nur die Route-Struktur vorbereiten)
  • Keine echten Bilder (Unsplash-Platzhalter oder generierte Grafiken)
  • Kein Deployment (lokal entwickeln, Vercel kommt danach)

Qualitäts-Checkliste

Bevor du den Code als fertig markierst, prüfe:

  • Alle Sections rendern korrekt auf Mobile (375px) und Desktop (1440px)
  • Shader-Hero hat funktionierenden Fallback
  • Scroll-Reveal Animationen laufen smooth (kein Layout-Shift)
  • Projection Simulator reagiert auf Mouse UND Touch
  • Project Inquiry Funnel: alle 4 Steps navigierbar, Validierung funktioniert
  • Navbar wird beim Scrollen glasig, bleibt beim Hero transparent
  • Alle Texte sind lesbar (Kontrast-Check auf dunklem Hintergrund)
  • npm run build läuft ohne Errors
  • Keine TypeScript-Errors
  • Lighthouse: Performance > 90

Fang an. Erstelle zuerst die Projektstruktur und das Design System, dann arbeite dich Section für Section durch.