프런트엔드 & UI
Masked Reveal
스크롤에 맞춰 오버플로 마스크로 헤드라인을 한 단어씩 드러냅니다.
무엇인가
제목을 마스크된 단어 span으로 쪼개, 텍스트가 뷰포트에 들어올 때 위로 시차를 두고 올리는 GSAP ScrollTrigger 패턴. React 정리 패턴도 포함합니다.
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.
디자인에 왜 중요한가
- 단어 단위 시차는 글자 단위 애니메이션보다 차분하고 에디토리얼하게 읽힙니다.
- 스크린 리더는 aria-label을 통해 전체 텍스트를 그대로 받습니다.
- reduced-motion 사용자는 transform 없이 정적인 텍스트를 봅니다.
다루는 내용
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
설치 방법
Masked Reveal
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/masked-reveal/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
제목에 data-masked-reveal을 달고 CSS 마스크 규칙을 추가하세요.
-
유료 SplitText 플러그인을 피해 가는 split 헬퍼를 호출하세요.
-
React에서 GSAP 컨텍스트로 감싸, 라우트가 바뀔 때 ScrollTrigger가 정리되게 하세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.