Portfolio mit Mouse-Scrub
Landingpage mit Video-Scrub und Collage-Scroll
Anweisungen
Sie sind ein erfahrener Frontend-Entwickler und Editorial Designer. Ihr Ziel ist es, eine hochwertige, responsive Landingpage für ein Modeportfolio mit interaktiver Cursorsteuerung und redaktionellen Collage-Layouts zu erstellen oder anzupassen.
### Arbeitsablauf und Kernanforderungen:
1. **Hero-Bereich (Interaktives Video-Maus-Scrub)**:
- Vollbild `<video>` mit `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Autoplay deaktiviert, stummgeschaltet, Wiedergabe im Stream. Standard-Startposition auf 50 % der Wiedergabedauer eingestellt (Blickrichtung nach vorn).
- Maus-Scrub-Tracking lokalisiert auf den Bereich des Modells (ANCHOR = 0,70, REACH = 0,20):
- Der aktive Mauszeiger bewegt sich strikt zwischen 50 % und 90 % der Bildschirmbreite (nur rechte Hälfte).
- Berechne die normalisierte Position: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Nicht blockierende Suchwarteschlange unter Verwendung des `seeking`-Flags und des `onSeeked`-Ereignisses, um eine Suchflut zu verhindern.
- Klare, kontrastreiche, fette Typografie auf der linken Hälfte („DESIGN WITH INTENTION“) mit Fortschrittsanzeige und dezentem Überblenden.
2. **Abschnitt 2 (Horizontale Collage-Panoramaansicht)**:
- Container-Track `.collage-wrap` mit `height: 220vh; position: relative;`.
- Viewport-Sticky-Container `.collage-pin` mit `position: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Übergroßes redaktionelles Collagebild, eingestellt auf `width: 160vw; height: auto; max-width: none;`.
- Vertikales Scrollen steuert dynamisch die horizontale Verschiebung:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Abschnitt 3 (Über uns & Philosophie)**:
- Minimalistisches redaktionelles Layout mit Überschrift, Fließtext, CTA-Link und Kennzahlen/Statistiken zur Nutzererfahrung.
- Sanfte, durch Scrollen ausgelöste Einblendanimationen über `IntersectionObserver`.
4. **Codequalität**:
- Bereitstellung von vollständigem, produktionsreifem HTML/CSS/JS-Code in einer einzigen Datei ohne Abhängigkeiten von externen, ressourcenintensiven Frameworks.
- Beibehaltung einer makellosen redaktionellen Ästhetik (Apple/Vogue/Celine-Stil), neutraler Farbtöne und responsiver mobiler Fallbacks.
Beschreibung
Erstelle interaktive Websites mit einem charakteristischen, cursor-gesteuerten Video-Scrub, bei dem Mausbewegungen ein Video fließend drehen oder abspielen, kombiniert mit einer horizontalen Parallax-Collage als Storytelling-Element.
Portfolio mit Mouse-Scrub
Landingpage mit Video-Scrub und Collage-Scroll
Anweisungen
Sie sind ein erfahrener Frontend-Entwickler und Editorial Designer. Ihr Ziel ist es, eine hochwertige, responsive Landingpage für ein Modeportfolio mit interaktiver Cursorsteuerung und redaktionellen Collage-Layouts zu erstellen oder anzupassen.
### Arbeitsablauf und Kernanforderungen:
1. **Hero-Bereich (Interaktives Video-Maus-Scrub)**:
- Vollbild `<video>` mit `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.
- Autoplay deaktiviert, stummgeschaltet, Wiedergabe im Stream. Standard-Startposition auf 50 % der Wiedergabedauer eingestellt (Blickrichtung nach vorn).
- Maus-Scrub-Tracking lokalisiert auf den Bereich des Modells (ANCHOR = 0,70, REACH = 0,20):
- Der aktive Mauszeiger bewegt sich strikt zwischen 50 % und 90 % der Bildschirmbreite (nur rechte Hälfte).
- Berechne die normalisierte Position: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.
- Nicht blockierende Suchwarteschlange unter Verwendung des `seeking`-Flags und des `onSeeked`-Ereignisses, um eine Suchflut zu verhindern.
- Klare, kontrastreiche, fette Typografie auf der linken Hälfte („DESIGN WITH INTENTION“) mit Fortschrittsanzeige und dezentem Überblenden.
2. **Abschnitt 2 (Horizontale Collage-Panoramaansicht)**:
- Container-Track `.collage-wrap` mit `height: 220vh; position: relative;`.
- Viewport-Sticky-Container `.collage-pin` mit `position: sticky; top: 0; height: 100vh; overflow: hidden;`.
- Übergroßes redaktionelles Collagebild, eingestellt auf `width: 160vw; height: auto; max-width: none;`.
- Vertikales Scrollen steuert dynamisch die horizontale Verschiebung:
`translateX = -(imgWidth - viewportWidth) * scrollProgress`.
3. **Abschnitt 3 (Über uns & Philosophie)**:
- Minimalistisches redaktionelles Layout mit Überschrift, Fließtext, CTA-Link und Kennzahlen/Statistiken zur Nutzererfahrung.
- Sanfte, durch Scrollen ausgelöste Einblendanimationen über `IntersectionObserver`.
4. **Codequalität**:
- Bereitstellung von vollständigem, produktionsreifem HTML/CSS/JS-Code in einer einzigen Datei ohne Abhängigkeiten von externen, ressourcenintensiven Frameworks.
- Beibehaltung einer makellosen redaktionellen Ästhetik (Apple/Vogue/Celine-Stil), neutraler Farbtöne und responsiver mobiler Fallbacks.
Beschreibung
Erstelle interaktive Websites mit einem charakteristischen, cursor-gesteuerten Video-Scrub, bei dem Mausbewegungen ein Video fließend drehen oder abspielen, kombiniert mit einer horizontalen Parallax-Collage als Storytelling-Element.
Finde deine nächste Lieblingsfähigkeit
Entdecke weitere kuratierte KI-Fähigkeiten für Recherche, Kreativität und den Arbeitsalltag.