Frontend & UI
Masked Reveal
Enthüllt Headlines Wort für Wort durch eine Overflow-Maske beim Scrollen.
Worum es geht
Ein GSAP-ScrollTrigger-Pattern, das eine Überschrift in maskierte Wort-Spans zerlegt und sie gestaffelt nach oben führt, sobald der Text in den Viewport kommt. Enthält ein React-Cleanup-Pattern.
Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
Warum das fürs Design zählt
- Die Staffelung auf Wortebene wirkt ruhiger und editorialer als eine Animation auf Buchstabenebene.
- Screenreader bekommen weiterhin den vollen Text über ein aria-label.
- Reduced-Motion-Nutzer sehen statischen Text ohne angewandtes transform.
Was es abdeckt
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
So installierst du es
Masked Reveal
-
Klone das Repo.
git clone https://github.com/MengTo/Skills -
Verweise Codex auf die Skill-Datei.
agent-skills/web-design/masked-reveal/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Markiere eine Überschrift mit data-masked-reveal und ergänze die CSS-mask-Regeln.
-
Ruf den Split-Helper auf, der das kostenpflichtige SplitText-Plugin umgeht.
-
Wickle es in React in einen GSAP-Context, damit ScrollTrigger beim Routenwechsel aufräumt.
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.