OPUS 5.5가 모션 디자인에 필요한 모든 것입니다

이 출시 영상은 비용 $0으로 제작되었으며 전적으로 코드로만 만들어졌습니다.

X의 다른 사람들은 똑같은 소리를 합니다... 그리고는 웹사이트나 MCP로 안내합니다.

이것은 완전히 무료이며 외부 도구를 전혀 사용하지 않습니다. 프롬프트를 가져와 Claude에서 시도해 보세요 ↓

<inputs> 무엇을 요청할까요?: 워드마크를 위한 한 단어 브랜드 이름 (동사가 가장 좋습니다), 고화질 사진 9~12장, 드롭과 조용한 브레이크다운이 있는 약 120 BPM의 로열티 프리 트랙 (Mixkit, 상업적 사용 무료), 그리고 움직이는 식물 그림자가 있는 평범한 벽의 무료 스톡 클립 (Pexels). </inputs> <direction> 하나의 연속적인 테이크로만 이루어진 Apple-keynote 스타일의 출시 영화, 2D 전용. 각 장면은 이전 장면에서 성장합니다: 페이드(fades), 블러(blurs) 또는 커트(cuts) 없음. 객체들이 변형됩니다. 텍스트는 마스크 라인에서 떠오르고, 아이콘들은 제로에서 튀어 오르며, 바가 화면을 가로지르고, 페이지가 앞으로 밀려나고, 검은색 모양이 프레임을 채운 후 다음 장면으로 수축합니다. 따뜻한 미색 캔버스, 검은색 UI, 사진 위에 iOS 26 리퀴드 글래스를 사용하세요. 워드마크는 Archivo (wdth 125, weight 800)를, UI는 Geist를 사용하세요. 커서가 실제 클릭, 드래그 및 길게 누르기로 모든 변화를 유발합니다. 카메라 화면-스튜디오 스타일로 확대하여 각 순간이 정사각형을 채우고, 커서도 함께 스케일링하세요.

금지 사항: 크로스페이드(crossfades), 블러 인(blur-ins), 밝기 '현상', 3D 플립(flips), 입자(particles), 글로우(glows), 1초 이상 지속되는 모든 것, 템플릿처럼 느껴지는 모든 것.

120 BPM, 54 비트, 모든 비트에 무언가가 일어납니다.
Open: 워드마크가 아코디언처럼 자체 기간으로 압축됩니다. 점은 검은 알약 모양으로 확장되고 그 안에 레이블이 떠오릅니다. Click: 여섯 개의 아이리스 블레이드가 레이블 위로 닫혔다가 사진 위로 스냅되어 열립니다. 원은 사각형으로 변하고 수축합니다. 그리드가 종이 지도처럼(중앙, 플러스, 모서리) 펼쳐지며 재배열되어 벤토 형태로 바뀌고, 클릭하면 한 타일로 확대되며 드롭 지점에 정확히 착륙합니다.
Glass: 글래스 워드가 문자별로 나타났다가 물방울로 녹아내려 유리 툴바가 됩니다. 조정 아이콘이 이를 슬라이더로 바꿉니다. 드래그를 하면 사진 조명이 낮에서 골든 아워(정렬된 두 장의 사진)로 바뀌고, 고정된 노브는 유리 렌즈가 됩니다. 이는 유리 구체로 떠오르고, 다음 사진은 그 안에서 원형으로 열리며, 이 구체는 유리 시계 숫자와 날짜, 그리고 유리 음악 플레이어로 늘어나는 홈 바가 있는 잠금 화면으로 커집니다.
Stage: 잠금 화면이 뒤로 당겨져 베젤이 화면 가장자리에서 자라나면서 휴대폰을 드러냅니다. 다이나믹 아일랜드는 액체처럼 늘어나서 핀치 오프되고, 날아가서 블라인드처럼 말려 올라가는 Mac 창으로 확장됩니다. 배경화면을 길게 누르고 Safari 탭 위로 드래그합니다. 페이지가 밀고 들어오고; 이미지를 놓으면 랜딩 페이지의 히어로 섹션이 됩니다. Scroll: 히어로는 제품 카드 위의 액자 인쇄물로 변하며, 매트와 몰딩이 사진 가장자리에서 자라납니다. 프레임 색상(칠해지면서)과 크기를 선택하면 내비게이션 버튼이 아래로 날아 내려가 '프린트 주문'이 됩니다.
Order: 하나의 검은 모양이 계속해서 변합니다: 주문됨 ✓ → 인쇄 중 % → 배송 중 (경로 위의 밴) → 배송 완료 ✓.
Wall: 배송 완료된 원이 확장되어 검은색으로 프레임을 채우고, 한 비트 동안 유지되다가 실제 벽에 걸린 액자 인쇄물 속으로 수축합니다. 같은 아이리스가 인쇄물 위로 열렸다가 다시 닫힙니다. 프레임이 화면을 가득 채우고, 알약 모양 → 점 모양으로 수축하며, 돌아오는 비트에 맞춰 글자들이 다시 튀어나옵니다. 마지막 프레임 = 첫 번째 프레임.

1. 하나의 HTML 파일로 제작하며, 크기는 정사각형 1440x1440으로 합니다. 모든 스타일은 비동기 함수 seek(t) 내부에서 시간(t)에 따라 계산되어야 하며, CSS 트랜지션, 타이머 또는 프레임 간 상태 전달을 사용하지 않아야 합니다.
2. 스프링에는 폐쇄형 형태의 단계 응답(closed-form step responses)을 사용합니다. 값이 여러 목표를 가질 경우, 변화마다 별도의 스프링을 추가하여 시간이 순수한 함수로 유지되도록 해야 합니다.
3. 액체 유리(Liquid glass): 각 유리 요소는 자신 뒤에 있는 장면의 클론을 유지합니다. 이 클론을 SVG feImage 변위 맵(rounded-rect 거리 필드)으로 필터링하며, 세 가지 다른 스케일에서 각각 feDisplacementMap을 사용하여 색상 경계(chromatic edges)를 만든 후, 가장자리에 빛(rim light)을 추가합니다. 유리 문자의 경우, 각 글리프당 캔버스 거리 필드를 사용하여 맵, 마스크 및 하이라이트를 만듭니다.
4. 점액질(Goo): 블러를 적용하고 알파 임계값(alpha threshold)을 설정한 다음, 소스를 그 위에 합성하여 유리가 내부에서도 선명하게 유지되도록 합니다.
5. 홍채(Iris): 육각형 개구부 주변에 6개의 날개(blades)를 배치합니다. 각 날개는 두 개의 꼭짓점, 두 개의 가장자리 확장선(edge extensions), 그리고 그 사이의 짧은 호(SHORT arc)를 사용합니다.
6. 워드마크 압축(Wordmark squeeze): 모든 문자를 동일한 비율로 점 쪽으로 이동시키고, 너비가 일치하도록 그리기 폭을 조정합니다 (너비 축을 좁히고 나머지는 스케일링하여), 글자들이 접촉 상태를 유지하도록 합니다.
7. 푸티지(Footage): 전체를 all-intra 방식으로 재인코딩하고(ffmpeg -g 1), 이를 블롭 URL로 로드한 다음, 각 프레임을 그리기 전에

<gotchas> backdrop-filter: url()은 Chromium에서 변위 맵(displacement maps)을 잘못 읽으므로, 대신 장면을 복제하세요. 홍수는 모서리 바깥까지 확장되어야 하며 약 0.3초가 걸려야 합니다. 그렇지 않으면 화면의 절반이 단일 프레임에 변경됩니다. visibility: visible로 설정된 자식 요소는 숨겨진 부모를 통해 보일 수 있으므로, inherit를 사용하세요. 변형되는 모양 내부에서 텍스트를 교체하려면 별도의 마스크가 필요합니다. python http.server는 비디오의 범위 탐색(range-seek)을 할 수 없으므로, blob URL을 사용하세요. </gotchas> <start> 입력값을 요청한 다음, 전체 필름을 작성하기 전에 비트 맵과 4개의 스틸컷(열림, 유리, 무대, 벽)을 보여주세요. </start>