MoleculeJourney

Hintergrund-Effekte

Scroll-Reise durch ein komplexes 3D-Molekül (Three.js): Die Kamera fliegt beim Scrollen weich von Atom zu Atom, das aktive Atom glüht und pulsiert, dazu blendet die zugehörige Inhalts-Karte mit Glas-Optik ein. Prozedural generiert und deterministisch.

Live Demo

3D-Szene wird geladen...

Scrollen — die Kamera fliegt von Atom zu Atom

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`sections`	`MoleculeSection[]`	Ja	—	Stationen {title, text, label?, color?} — eine pro Haupt-Atom (3–8)
`sectionHeight`	`number`	Nein	`420`	Scrollhöhe pro Station in Pixeln
`stickyHeight`	`string`	Nein	`'100vh'`	Höhe des sichtbaren Bereichs (z.B. '100vh')
`background`	`string`	Nein	`'#060913'`	Hintergrundfarbe
`bondColor`	`string`	Nein	`'#94a3b8'`	Farbe der Bindungen
`decorColor`	`string`	Nein	`'#475569'`	Farbe der Deko-Atome
`accentColor`	`string`	Nein	`'#2dd4bf'`	Akzentfarbe (Fortschritt)
`liquid`	`boolean`	Nein	`true`	Flüssigkeits-/Linsen-Effekt: brechender Tropfen (IOR 1.33), Bläschen, Trübung, Vignette
`liquidTint`	`string`	Nein	`'#7dd3fc'`	Färbung der Flüssigkeit
`moleculeTint`	`string`	Nein	—	Monochromer Hochglanz-Look statt CPK-Farben (Stockfoto-Stil)
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<MoleculeJourney
  sections={[
    { label: '01 — DESIGN', title: 'Webdesign', text: 'Jede Website ein Unikat.', color: '#2dd4bf' },
    { label: '02 — TECHNIK', title: 'Hosting', text: 'Ladezeiten unter einer Sekunde.', color: '#818cf8' },
    { label: '03 — RECHT', title: 'DSGVO', text: 'Rechtssicher ohne Abmahnrisiko.', color: '#fbbf24' },
  ]}
/>