서로 다른 스크롤 섹션 다섯 개 만들기

Full Prompt

원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.

• 맥락을 가상의 서울 독립서점 소개 페이지로 정했습니다.
• 다섯 섹션의 스크롤 방식을 가로 타임라인, 고정 숫자, 시차 카드, 단어 강조, 마스크 확장으로 각각 지정했습니다.
• 섹션들이 컷 없이 앞 섹션 요소의 변형으로 이어지도록 콘셉트를 하나로 묶었습니다.
• 길이를 15초, 80 BPM으로 잡아 한 마디(3초)에 섹션 하나가 오도록 했습니다.
• 서체는 Pretendard, 색은 종이색·먹색·주황 세 가지로 제한하고 장식 효과를 금지했습니다.
• 실제 스크롤 대신 window.seek(t) 로 시간에 따라 스크롤 위치를 계산하게 했습니다.

15초짜리 스크롤 모션 영상을 만든다. 목표는 서로 완전히 다른 스크롤 섹션 다섯 개를, 한 페이지를 끝까지 내려가는 하나의 흐름으로 보여 주는 것이다.
콘셉트: 「한 페이지 안에 다섯 가지 스크롤」. 맥락은 가상의 서울 독립서점 소개 페이지로 정한다. 섹션마다 레이아웃과 스크롤 방식이 달라야 한다. 1 가로로 흐르는 책등 타임라인, 2 화면에 고정된 큰 숫자 카운트, 3 속도가 다른 세 겹의 시차 카드, 4 고정된 문장에서 단어가 차례로 진해지는 강조, 5 사각형이 커지며 화면을 채우는 마스크. 각 섹션은 앞 섹션의 요소 하나가 모양을 바꿔 이어진다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어. 색은 종이색, 먹색, 주황 세 가지와 흑백만 쓴다.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 80 BPM, 한 마디가 3초이므로 다섯 마디에 섹션 하나씩 배정하고 마디마다 기법 하나만 쓴다. 박마다 무엇인가 바뀐다. 첫 프레임과 마지막 프레임을 같게 해 반복해도 이어지게 한다.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로 계산한다. CSS 애니메이션과 타이머는 쓰지 않는다.
검토: 본 렌더 전에 0.5초 간격 스틸로 겹침, 빈 프레임, 박자 어긋남, 글자 가독성을 확인하고 고친다.
시작: 먼저 마디별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

Build 5 completely different scroll-based sections, decide the context & layout yourself.

출처Ercan @ercankeskinx (새 탭에서 열림)·Opus 5.5