인스타 릴스의 정체는 "스크롤하면 영상이 흐르는" 스크롤-스크럽 랜딩.

무료 AI 영상 툴(Kling, Hailuo, Pika, Luma, Higgsfield 등 가입 시 무료 크레딧 주는 곳)에 프롬프트만 넣으면 끝. 무음 8초면 충분해요. 아래 프롬프트가 의도대로 "원두→그라인드→드립→크레마잔"을 뽑아줬어요.

prompt:
"Cinematic macro on pure black: dark roasted beans tumble & pour,
 grind into powder, espresso drips into a glass with golden crema,
 wisps of steam rising, warm rim light, slow premium motion."

영상을 직접 스크럽하면 호스팅에서 깨져요(아래 05 참고). 그래서 이미지로 쪼갬.

ffmpeg -i hero.mp4 -vf "fps=12,scale=1280:-1" -q:v 6 frames/f_%03d.jpg
# 8s × 12fps ≈ 96장, 장당 ~25KB

GSAP ScrollTrigger + Lenis. 스크롤 진행도로 해당 프레임을 canvas에 그림. 프레임은 전부 preload.

const N=96, frames=[], ctx=canvas.getContext('2d');
for(let i=1;i<=N;i++){ const im=new Image();
  im.src=`frames/f_${String(i).padStart(3,'0')}.jpg`; frames.push(im); }
ScrollTrigger.create({ trigger:'.hero', scrub:true, start:'top top', end:'bottom bottom',
  onUpdate:s => draw(frames[Math.round(s.progress*(N-1))]) });

처음엔 <video>를 스크롤로 seek했는데, Cloudflare Pages가 mp4를 HTTP Range 없이 줘서 브라우저가 seek를 못 함 → 스크럽 작동 안 함. 해결: 영상 대신 프레임 이미지 + canvas(애플 제품페이지 방식, Range 의존 0).

정적 자산만 올리면 끝. 서버 불필요.

mkdir dist && cp index.html dist/ && cp -r frames dist/
npx wrangler pages deploy dist --project-name smart-coffee