Frontend & UI
Cinematic Scroll Storytelling
Scroll-getriebene Narration: Lenis, ScrollTrigger, Sticky-Stapel.
Worum es geht
Ein Skill für Scroll-Choreografie: Lenis Smooth Scrolling, GSAP ScrollTrigger, gestaffelte Reveals, Sticky-Card-Stapel, Parallax und scroll-gesteuerte Übergänge.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
Warum das fürs Design zählt
- Scroll-Choreografie ist der größte Unterschied zwischen einer Agenten-Seite und einer Studio-Seite.
- Liefert benannte Motion-Tokens statt willkürlicher Animationswerte.
- Definiert eine Seitenanatomie, damit die Sections in bewusster Reihenfolge auftreten.
Was es abdeckt
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
So installierst du es
Cinematic Scroll Storytelling
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Klone das Repo und verweise Codex auf diese Skill-Datei.
-
Beschreibe die Geschichte, die die Seite beim Scrollen erzählen soll.
-
Stimme die Motion-Tokens ab, aber behalte Stapel und Anatomie des Skills bei.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.