프런트엔드 & UI
Cinematic Scroll Storytelling
스크롤이 이끄는 랜딩 페이지를 위한 Lenis와 GSAP ScrollTrigger 레시피.
무엇인가
Lenis와 GSAP ScrollTrigger로 만든 실동 코드. 프리로더, 마스크된 스플릿 텍스트 등장, 섹션 등장, 스크럽으로 고정된 장면, 스티키 카드 스택, 패럴랙스까지 담았습니다.
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
디자인에 왜 중요한가
- 모션 토큰이 지속 시간, 시차, 오프셋, 블러를 고정해 등장 연출이 일관되게 유지됩니다.
- 모든 효과에 레이아웃과 대비를 그대로 지키는 reduced-motion 분기가 있습니다.
- 빌드 순서가 정적 페이지를 먼저, 그다음 모션을 얹어, 뒤엉킨 스크롤 장면을 피합니다.
다루는 내용
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
설치 방법
Cinematic Scroll Storytelling
-
저장소를 클론하세요.
git clone https://github.com/MengTo/Skills -
Codex에 스킬 파일 경로를 지정하세요.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
gsap과 lenis를 설치한 뒤 Lenis를 GSAP 티커에 연결하세요.
-
등장, 스택, 패럴랙스를 위한 데이터 속성으로 섹션에 표시하세요.
-
스크럽으로 고정된 장면을 마지막에 추가한 뒤 QA 체크리스트를 돌리세요.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
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 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.