클로드 Opus 5.5로 외부 도구 없이 코드로 애플 스타일 모션 그래픽 영상을 제작하는 프롬프트

2026년 10월 4일, X의 테스타로사(@rossaxbt)가 외부 유료 도구나 모델 컨텍스트 프로토콜(MCP) 없이 오직 Claude Opus 5.5와 순수 웹 표준 코드(HTML, CSS, SVG, JavaScript)만으로 애플 키노트 스타일의 고품질 2D 런치 영상을 제작할 수 있는 프롬프트와 렌더링 파이프라인을 공개했습니다.

이미지 출처: @rossaxbt on X

기존 소셜 미디어에서 유행하는 AI 영상 제작법은 대부분 외부 생성 웹사이트 구독이나 복잡한 MCP 서버 설치를 요구하는 경우가 많았습니다. 반면 이번에 공개된 기법은 비용 0달러로, 브라우저가 해석할 수 있는 결정론적(deterministic) 단일 HTML 파일을 생성하고 Playwright와 FFmpeg로 프레임 단위 렌더링을 수행하는 완결형 엔지니어링 접근법을 취합니다.

120 BPM 비트 동기화와 원테이크 2D 연출 규칙

이 프롬프트의 핵심 연출 철학은 컷 편집(Cut)이나 페이드(Fade) 없이 모든 장면이 이전 장면의 오브젝트 변형을 통해 이어지는 '단일 연속 원테이크(One continuous take)' 방식입니다.

• 필수 입력 자산:
  • 워드마크용 한 단어 브랜드명 (동사 형태 권장)
  • 9~12장의 고해상도 제품/콘셉트 사진
  • 120 BPM 내외의 상업적 무료 음원 (드롭과 정적 브레이크다운 구간 포함, Mixkit 권장)
  • 식물 그림자가 움직이는 단색 벽면 무료 스톡 영상 (Pexels 권장)
• 비주얼 연출 가이드:
  • 따뜻한 미색(Off-white) 캔버스, 블랙 UI, 사진 위에 얹히는 iOS 26 리퀴드 글래스(Liquid Glass) 효과
  • 워드마크 전용 Archivo 폰트(wdth 125, weight 800), UI 전용 Geist 폰트 지정
  • 가상 마우스 커서의 실제 클릭, 드래그, 롱프레스에 의해 화면의 모든 전환이 트리거됨
  • 정사각 화면을 채우도록 스크린 스튜디오(Screen-studio) 스타일로 카메라를 줌하며 커서도 함께 스케일링
• 엄격한 금지 요소:
  • 크로스페이드(Crossfade), 블러 인(Blur-in), 밝기 디벨로핑, 3D 플립, 파티클, 글로우(Glow), 1초 이상의 정지 화면, 템플릿 느낌이 나는 모든 효과 배제
• 54비트 타임라인 구조 (120 BPM 기준):
  • 오프닝(Open): 워드마크가 아코디언처럼 자체 마침표 속으로 압축되고, 점이 블랙 알약(Pill) 형태로 팽창하며 내부 라벨 상승. 클릭과 함께 6엽 조리개(Iris)가 닫힌 뒤 사진 위로 스냅 오픈. 원이 사각형으로 변환 축소되고 종이 지도처럼 그리드 전개 후 벤토(Bento) 레이아웃으로 재배열. 클릭으로 타일 하나를 줌인하며 비트 드롭(Drop)에 정확히 착지.
  • 글래스(Glass): 글래스 타이포가 한 글자씩 나타난 후 물방울로 녹아내려 툴바로 연장. 조절 아이콘이 슬라이더로 변하고, 드래그 시 사진 조명이 주간에서 골든 아워로 전환(동일 구도 2장 활용). 조절 놉이 렌즈로 바뀌어 구체로 상승하고 다음 사진이 원형으로 열리며 시계·날짜·홈 바가 포함된 잠금 화면으로 확장된 뒤 음악 플레이어로 변형.
  • 스테이지(Stage): 잠금 화면이 뒤로 물러서며 폰 베젤이 모서리에서 형성. 다이내믹 아일랜드가 액체처럼 늘어나 분리되어 날아가 롤스크린처럼 말려 올라가는 Mac 윈도우로 확장. 배경화면을 길게 눌러 사파리 탭으로 드래그하면 페이지가 밀려 들어오며 랜딩 페이지 히어로 이미지로 안착. 스크롤 시 히어로 이미지가 제품 카드의 액자형 프린트로 변하고 프레임 색상과 크기 선택 후 주문 버튼 활성화.
  • 주문(Order): 단일 블랙 셰이프가 실시간 상태 변환 (주문 완료 ✓ → 인쇄 중 % → 배송 출발 이동 밴 → 배송 완료 ✓).
  • 벽면 루프(Wall): 배송 완료 원이 전체 화면을 블랙으로 채운 뒤 1비트 정지, 실제 벽면 스톡 영상 속 걸려 있는 액자 프레임으로 축소. 동일한 6엽 조리개가 프레임을 열고 닫은 뒤, 프레임이 화면을 채웠다가 알약 → 점으로 축소되고 첫 글자들이 튀어나오며 처음 화면으로 완벽한 무한 루프 형성 (마지막 프레임 = 첫 프레임).

수학적 함수와 웹 표준 기반의 9가지 빌드 아키텍처

Claude Opus 5.5가 출력하는 HTML 코드는 외부 라이브러리나 런타임 상태에 의존하지 않고 오직 수학적 함수로 시간 축을 계산합니다.

1. 단일 HTML 파일 (1440×1440 정사각 해상도):
   • 프레임 간 상태나 CSS 전환(transition), 자바스크립트 타이머를 일절 사용하지 않고, 비동기 seek(t) 함수 내부에서 시간 $t$를 기반으로 모든 인라인 스타일을 순수 계산.
2. 폐쇄형 스프링 반응 (Closed-form step responses):
   • 스프링 물리 계산 시 여러 목표값이 존재할 경우 변화마다 독립 스프링을 누적하여 시간이 순수 함수로 유지되도록 설계.
3. SVG 디스플레이스먼트 맵 기반 리퀴드 글래스 (Liquid Glass):
   • 각 유리 요소가 후면 씬의 복제본(Clone)을 직접 유지.
   • SVG feImage 디스플레이스먼트 맵(둥근 사각형 거리장)을 약간씩 다른 스케일의 세 가지 feDisplacementMap 필터에 통과시켜 색수차 림 라이트(Rim Light) 생성. 글래스 문자는 글리프당 캔버스 거리장을 계산해 맵과 마스크를 동적 합성.
4. 구(Goo) 액체 결합 효과:
   • 블러(Blur)와 알파 임계값(Alpha Threshold)을 적용한 뒤 원본 소스를 상단에 컴포지팅하여 유리 내부의 선명도 유지.
5. 6엽 조리개(Iris) 메커니즘:
   • 육각형 개구부 주위에 6개의 블레이드를 배치하고, 각 블레이드는 두 개의 정점과 모서리 연장선, 짧은 호(Short arc)를 수학적으로 계산해 개폐.
6. 워드마크 가변 축 압축 (Wordmark Squeeze):
   • 모든 글자를 동일한 비율로 마침표 방향으로 이동시키면서 가변 폰트 폭 축(wdth 축 축소 및 스케일 조정)을 조정해 글자 간 접촉면 유지.
7. 올인트라(All-Intra) 비디오 인코딩:
   • 배경 벽면 영상은 ffmpeg -g 1 옵션으로 모든 프레임을 키프레임(All-Intra)으로 변환 후 Blob URL로 로드하여 seeked 이벤트 대기 후 캔버스에 렌더링.
8. 사운드 피크 정밀 동기화:
   • Mixkit 다운로드 효과음(SFX)을 합성 없이 파형 피크에 맞춰 정확히 배치. 줌인은 드롭에, 벽면 영상은 브레이크다운에, 워드마크 복귀는 비트에 일치시키고 오디오를 -14 LUFS로 노멀라이즈(loudnorm).
9. Playwright 프레임 추출 및 FFmpeg 모션 블러 합성:
   • Playwright 헤드리스 브라우저로 프레임당 4개의 서브프레임을 캡처한 뒤, ffmpeg tmix 필터로 서브프레임을 블렌딩하여 60fps 부드러운 모션 블러 구현. 비트당 1프레임 무결성 검사 및 인접 프레임 대비 차이값이 3배 이상 튀는 팝(Pop) 현상 감지.

브라우저 렌더링 함정과 프로덕션 주의사항

크롬(Chromium) 브라우저 엔진에서 모션 그래픽을 코드로 컴파일할 때 맞닥뜨리는 실무 버그 해결책도 프롬프트에 포함되어 있습니다.

• Chromium displacement map 버그: 크로미움 계열 브라우저에서 backdrop-filter: url()이 디스플레이스먼트 맵을 왜곡되게 읽는 버그가 있으므로, 배경 필터 대신 씬 자체를 복제(Clone)하여 필터를 적용해야 합니다.
• 플러드(Flood) 전환 마진: 화면을 단색으로 채우는 전환은 모서리 바깥까지 캔버스를 확장하고 최소 0.3초에 걸쳐 실행되어야 단일 프레임에서 화면 절반이 튀는 팝 현상을 방지할 수 있습니다.
• CSS visibility 상속 규칙: 부모 요소가 숨겨져 있어도 자식 요소에 visibility: visible이 명시되면 화면에 의도치 않게 노출되므로 반드시 visibility: inherit을 사용합니다.
• 모핑 셰이프 내부 텍스트 교체: 형태가 바뀌는 도형 내부에서 텍스트가 바뀔 때는 전용 마스크(Mask)를 독립적으로 씌워야 합니다.
• Python 로컬 서버의 범위 요청(Range-seek) 미지원: python -m http.server는 비디오 Range 요청을 정상 처리하지 못하므로, 로컬 비디오는 인라인 Blob URL 형태로 메모리에 로드해 탐색해야 합니다.

Claude Opus 5.5 모션 디자인 프롬프트 전문

아래는 Claude Opus 5.5에 그대로 입력하여 인터랙티브 런치 필름 코드를 생성할 수 있는 원문 프롬프트 전체입니다.

OPUS 5.5 IS ALL YOU NEED FOR MOTION DESIGN

this launch video cost $0 and was made entirely with code

everyone else on X says the same shit, then sends you to a website or an MCP

this is completely free and uses 0 external tools
take the prompt and try it in your Claude ↓

<inputs>
Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free track around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels).
</inputs>

<direction>
An Apple-keynote-style launch film, 2D only, in one continuous take. Each scene grows out of the last: no fades, blurs or cuts. Objects transform instead. Text rises from a mask line, icons spring up from zero, bars draw across the screen, pages push forward, and a black shape fills the frame before shrinking into the next scene. Use a warm off-white canvas, black UI and iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for the UI. A cursor triggers every change with actual clicks, drags and long-presses. Zoom the camera screen-studio style so each moment fills the square, and scale the cursor with it.
Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that feels like a template.
</direction>

<structure>
120 BPM, 54 beats, with something happening on every beat.
Open: the wordmark compresses into its own period like an accordion. The dot expands into a black pill, and a label rises inside it. Click: six iris blades close over the label, then snap open onto a photo. The circle turns into a square and shrinks. A grid unfolds behind it like a paper map (center, plus, corners), rearranges into a bento, and a click zooms into one tile, landing right on the drop.
Glass: a glass word appears letter by letter, then melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging changes the photo lighting from day to golden hour (two aligned shots), while the held knob becomes a glass lens. It rises into a glass orb, the next photo opens inside it as a circle, and the orb grows into a lock screen with glass clock digits, a date and a home bar that stretches into a glass music player.
Stage: the lock screen pulls back to reveal a phone, with the bezel growing from the screen edge. The Dynamic Island stretches like liquid, pinches off, flies across and expands into a Mac window that rolls up like a blind. Long-press the wallpaper and drag it onto a Safari tab. The page pushes in; when you drop the image, it becomes the hero of a landing page. Scroll: the hero transforms into a framed print on a product card, with the mat and molding growing from the photo's edge. Choose a frame color (it paints across) and a size, then the nav button flies down and becomes "Order print".
Order: one black shape keeps changing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓.
Wall: the delivered circle expands until black fills the frame, holds for one beat, then shrinks into the framed print hanging in the real wall footage. The same iris opens onto the print and closes again. The frame fills the screen, contracts into the pill → the dot → the letters spring back out on the returning beat. Last frame = first frame.
</structure>

<build>
1. One HTML file, square 1440x1440. Compute every style from time inside an async seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form step responses for springs. When a value has multiple targets, add one spring per change so it remains a pure function of time.
3. Liquid glass: each glass element keeps its own clone of the scene behind it. Filter that clone with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, then add a rim light. For glass letters, use a canvas distance field per glyph to create the map, mask and highlights.
4. Goo: apply blur and an alpha threshold, then composite the source on top so the glass stays sharp inside.
5. Iris: place 6 blades around a hexagonal aperture. Each blade uses its two vertices, both edge extensions and the SHORT arc between them.
6. Wordmark squeeze: move every letter toward the dot by the same factor and adjust its drawn width to match (narrow the wdth axis, scale the rest), keeping the letters in contact.
7. Footage: re-encode it all-intra (ffmpeg -g 1), load it as a blob URL and await "seeked" before drawing each frame.
8. Sound: use a downloaded SFX for every event (Mixkit), never synthesized, and position each by its measured peak. Start the song on a downbeat: land the zoom on the drop, place the wall in the breakdown and bring back the wordmark with the beat. Loudnorm to -14 LUFS.
9. Render with Playwright: blend 4 subframes per frame using ffmpeg tmix at 60fps. Check one frame per beat, then look for single-frame pops (frame-difference spikes 3x higher than their neighbours).
</build>

<gotchas>
backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood needs to extend beyond the corners and take about 0.3s; otherwise, half the screen changes in a single frame. A child set to visibility: visible can show through a hidden parent, so use inherit. Text swapping inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL.
</gotchas>

<start>
Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before writing the full film.
</start>

원문 출처

• @rossaxbt on X (2026-10-04)