Communitygithub.com

PHL-Mechanics/cinematic-web

Next.js + Tailwind + GSAP + ScrollTrigger + Lenis로 영화 같은 스크롤 기반 웹 인터페이스를 구축합니다. '의도적인 움직임'(느리고 부드러우며 영화 같은 느낌)을 일반적인 전환 대신 제공합니다.

cinematic-web란 무엇인가요?

이 스킬은 영화적 경험을 선사하는 웹사이트 제작을 위한 완벽한 가이드입니다. 스크롤이 카메라가 되고 각 요소가 시간과 무게, 우아함을 가지고 등장하는 사이트를 만듭니다. 기본 스택은 Next.js + Tailwind + GSAP + ScrollTrigger + Lenis이지만, 핵심 '움직임 시스템'은 순수 HTML/CSS, WordPress/Divi, LearnWorlds 등으로 이식 가능합니다. 스킬의 핵심 철학은 '속도가 아닌 의도적인 느림'이며, Lenis(부드러운 스크롤), GSAP(요소 애니메이션), ScrollTrigger(스크롤 기반 동기화)의 역할을 명확히 분리하고 gsap.ticker를 통해 하나의 시간 루프로 통합하는 '황금률'을 강조합니다. 또한 모든 지속 시간(e.g., 0.6s, 0.9s, 1.2s, 1.8s)과 가속도(power3.out 등)를 motion.ts라는 중앙 토큰 파일로 관리하여 일관성 있는 '시네마틱 사인'을 유지하고, 5단계 워크플로우(프로젝트 바이블 → 시네마틱 히어로 → 카메라 스크롤 → 모바일 대응 → 예술적 다듬기)를 따라 단계별로 완성도를 높입니다. Claude Code, Cursor, Codex 등의 AI 에이전트가 이 스킬을 사용하여 사용자에게 영화 같은 웹사이트 제작을 요청받았을 때, 즉시 올바른 아키텍처와 코딩 표준을 적용할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/PHL-Mechanics/skills-da-casa/tree/HEAD/skills/cinematic-web
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Cinematic Web — 의도적인 움직임

영화적 웹 경험 구축을 위한 스킬: 사이트가 마치 영화처럼 느껴지며, 스크롤은 카메라가 되고 각 요소는 시간과 무게, 우아함을 가지고 등장합니다. 기본 스택은 Next.js + Tailwind + GSAP + ScrollTrigger + Lenis이지만, 핵심(움직임 시스템)은 순수 HTML/CSS, WordPress/Divi 및 LearnWorlds로 이식 가능합니다.

중심 철학: 영화적 웹사이트는 빠르지 않습니다 — 의도적으로 느립니다. 서두름은 우아함의 적입니다. 코드 한 줄보다 움직임이 먼저 결정되며, 코드는 단지 따를 뿐입니다.

절대 변하지 않는 황금률

세 라이브러리, 세 가지 책임. 이를 혼동하는 것이 모바일에서 떨림과 버그의 가장 큰 원인입니다.

라이브러리유일한 책임절대 하지 않는 일
Lenis부드러운 스크롤 (관성, 스크롤의 '무게')요소를 애니메이션하지 않음
GSAP요소의 움직임 (위치, 투명도, 크기)페이지 스크롤을 제어하지 않음
ScrollTrigger오케스트레이션 — 각 애니메이션이 스크롤에서 언제/어떻게 발동할지자체 스크롤 루프를 실행하지 않음

그리고 아마추어와 프로를 가르는 결정적 차이: Lenis와 ScrollTrigger는 동일한 시간 루프(gsap.ticker)를 공유해야 합니다. 별도의 RAF(requestAnimationFrame)에서 실행되면 scrub이 떨립니다(jitter). 정식 통합은 assets/lib/lenis-provider.tsx에 있습니다 — 항상 이 패턴을 사용하고, 두 개의 requestAnimationFrame을 따로 사용하지 마십시오.

// 통합의 핵심 (자세한 내용은 references/01-setup.md 참조):
lenis.on('scroll', ScrollTrigger.update);          // Lenis가 스크롤할 때마다 ScrollTrigger에 알림
gsap.ticker.add((time) => lenis.raf(time * 1000)); // GSAP이 Lenis의 RAF를 구동 (단일 시간 소스)
gsap.ticker.lagSmoothing(0);

움직임 시스템 (즉흥이 아닌 토큰)

'예술적 다듬기'는 마지막에 눈으로 검토하지 않습니다. 처음부터 assets/lib/motion.ts에 중앙화된 토큰으로 강제됩니다. 모든 애니메이션이 여기서 가져오므로, 다듬기가 결정론적으로 이루어집니다.

표준 지속 시간 (초):

토큰값용도
fast0.6절대 최소값. 영화적 요소는 0.6초 미만이면 안 됩니다.
base0.9텍스트 및 이미지의 기본 reveal
slow1.2히어로, 섹션 진입, 숨 고르는 순간
epic1.8앵커 전환, '카메라 순간'

표준 가속도 (움직임의 '서명'):

토큰값느낌
outpower3.out기본값. 우아하게 감속하는 결정적인 진입
inOutpower3.inOut갔다가 돌아오는 움직임 (pin, 카메라)
expoexpo.out극적인 reveal, 속도의 높은 대비
softpower2.out미묘한 미세 상호작용

다듬기 규칙 (5단계): 0.6초 미만의 모든 전환은 연장됩니다. power 또는 expo가 아닌 ease(예: linear, back, bounce, elastic)는 모두 교체됩니다. 이는 영화적 차분함을 깨뜨리기 때문입니다. 순차적 요소 간 stagger: 0.15–0.2초.

워크플로우 — 5단계

순서대로 실행하세요. 각 단계에는 바로 복사해서 쓸 수 있는 완전한 레시피가 담긴 참조 파일이 있습니다. 해당 단계의 코드를 생성하기 전에 참조 파일을 먼저 읽으십시오.

1단계 — 프로젝트 바이블 (AI가 추측하게 두지 마십시오)

컴포넌트를 만들기 전에 규칙을 정립하세요. assets/CLAUDE.md 템플릿을 사용하여 프로젝트 루트에 CLAUDE.md를 생성/업데이트하고, references/01-setup.md 에 따라 스택을 설정하십시오.

  • 설치: gsap @gsap/react lenis (+ 새 프로젝트인 경우 Next/Tailwind).
  • CLAUDE.md에 황금률과 움직임 시스템을 고정.
  • assets/lib/lenis-provider.tsx와 assets/lib/motion.ts를 프로젝트로 복사.
  • 아직 컴포넌트를 생성하지 마십시오. 먼저 기반을 다지십시오.

2단계 — 시네마틱 히어로

첫인상이 분위기를 결정합니다: 첫 상호작용 전에도 긴장감과 유려함이 느껴져야 합니다. 완전한 레시피는 references/02-hero.md 에 있습니다.

  • 전체 화면, 배경의 반복 비디오 (이미지 폴백 및 오버레이 포함).
  • 텍스트가 부드러운 reveal(mask + y/opacity, slow + expo.out)로 순차적으로(stagger) 나타납니다.
  • 사용자가 스크롤을 시작하면 사라지는 스크롤 표시기.

3단계 — '카메라 시선'을 가진 스크롤

마법이 일어나는 곳: 스크롤이 카메라 움직임으로 변합니다. 레시피(pin, 시퀀스, parallax, scrub)는 references/03-scroll-camera.md 에 있습니다.

  • ScrollTrigger를 통한 핀 스크롤 섹션.
  • 요소가 순차적으로(stagger 0.15–0.2초) power3.out으로 진입.
  • 제어된 스크롤(scrub), 느슨한 애니메이션이 아님 — 시간이 사용자의 손가락을 따릅니다.

4단계 — 모바일 혼란 길들이기

복잡한 애니메이션은 우연이 아니라 설계상 모바일에서 깨집니다. 전략은 references/04-mobile-a11y.md 에 있습니다.

  • gsap.matchMedia() 로 데스크탑≠모바일 분리 — 코드 전체에 if 문을 흩뜨리지 마십시오.
  • prefers-reduced-motion 존중 (접근성 + 멀미 방지 + 법적 위험).
  • 성능: transform/opacity만 애니메이션, 터치에서 무거운 pin 피하기, Lenis↔ScrollTrigger 충돌 확인.
  • 모바일을 수정할 때 데스크탑의 미학을 변경하지 마십시오.

5단계 — 예술적 다듬기

'애니메이션'과 '시네마틱'을 구분하는 최종 광택 작업. 체크리스트는 references/05-refinamento.md 에 있습니다.

  • 0.6초 미만의 모든 전환 → 연장.
  • power/expo 범위를 벗어난 모든 ease → 교체.
  • 일관성 확인: 모든 것이 motion.ts에서 가져오는가? 시간이 함께 숨 쉬는가?

품질 체크리스트 (전달 전 실행)

  • Lenis와 ScrollTrigger가 gsap.ticker를 공유함 (이중 RAF 없음).
  • React 애니메이션이 useGSAP (@gsap/react에서)와 scope를 사용 → 자동 정리, 라우트 간 누수 없음.
  • GSAP을 사용하는 컴포넌트는 "use client"이며 플러그인을 등록함 (gsap.registerPlugin(ScrollTrigger, useGSAP)).
  • 모든 타이밍/ease가 motion.ts에서 가져옴 — 코드 곳곳에 매직 넘버가 흩어져 있지 않음.
  • gsap.matchMedia()가 데스크탑과 모바일을 모두 커버하며, prefers-reduced-motion이 움직임을 비활성화/단축함.
  • 오직 transform과 opacity만 애니메이션 됨 (width, top, margin 애니메이션 금지 → 리플로우 방지).
  • 페이지 높이를 변경하는 글꼴/이미지 로드 후 ScrollTrigger.refresh() 호출.
  • 0.6초 미만의 값 없음; linear/back/bounce/elastic 없음.

이식성 (Next 외부)

움직임 시스템과 황금률은 모든 환경에서 유효합니다. 순수 HTML/CSS, WordPress/Divi 또는 LearnWorlds의 경우: CDN을 통해 GSAP + ScrollTrigger + Lenis를 사용하고, 동일한 duration/ease 토큰을 유지하며, 플랫폼에 스타일이 새지 않도록 클래스/선택자에 접두사를 붙이십시오. 구체적인 노트는 references/01-setup.md 끝부분에 있습니다.

스킬 파일 맵

  • assets/CLAUDE.md — 프로젝트 바이블 템플릿 (루트에 복사하여 조정).
  • assets/lib/lenis-provider.tsx — 정식 Lenis↔GSAP 통합을 포함한 React/Next 프로바이더.
  • assets/lib/motion.ts — 움직임 토큰 (지속 시간, 가속도, reveal 헬퍼).
  • references/01-setup.md — 스택, 설치, 통합, SSR/Next, 이식성.
  • references/02-hero.md — 완전한 시네마틱 히어로 레시피.
  • references/03-scroll-camera.md — pin, stagger, parallax, scrub, 수평 스크롤.
  • references/04-mobile-a11y.md — matchMedia, reduced-motion, 성능, 모바일 디버그.
  • references/05-refinamento.md — 상세 움직임 시스템 및 광택 체크리스트.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community