HTML과 CSS 애니메이션으로 12초 분량의 SaaS 제품 소개 모션 영상 웹페이지를 생성합니다.
Build a 12-second motion design product film in 16:9 (1920x1080, 30 fps) for my software product ${name}, which ${what_it_does_in_one_sentence}.
Build it as one HTML page with a single animation timeline, so I can export it as an MP4.
Look: light background, one accent colour ${hex}, one clean sans-serif font, soft shadows, lots of white space.
Scene 1 (0 to 2.4 s): the headline "${headline}" builds word by word. Each word rises 18 px with a soft overshoot. Only the key word is in the accent colour.
Scene 2 (2.4 to 6 s): a small product card appears. Data rows from different tools slide in one after another.
Scene 3 (6 to 9.5 s): the rows merge into one clean table. One number counts up to ${result}.
Scene 4 (9.5 to 12 s): end card with logo, name and the line "${call_to_action}".
Rules: the camera never stands still and moves on one continuous path. One object carries the story from the first second to the end card. Every movement is eased, nothing moves linearly.내 소프트웨어 제품 [제품명]([제품의 한 줄 기능 설명])을 위한 16:9 비율(1920x1080, 30fps)의 12초 모션 디자인 제품 영상을 제작해 줘. MP4로 내보낼 수 있도록 단일 애니메이션 타임라인을 가진 하나의 HTML 페이지로 만들어 줘. 디자인 스타일: 밝은 배경, 하나의 포인트 컬러 [색상 헥스코드], 깔끔한 샌세리프 폰트, 부드러운 그림자, 충분한 여백. 장면 1 (0~2.4초): 헤드라인 "[헤드라인 문구]"가 단어별로 등장함. 각 단어는 18px 상승하며 부드러운 오버슈트 효과 적용. 핵심 단어만 포인트 컬러로 표시. 장면 2 (2.4~6초): 작은 제품 카드가 나타남. 서로 다른 툴의 데이터 행이 하나씩 슬라이드하며 들어옴. 장면 3 (6~9.5초): 데이터 행들이 하나의 깔끔한 테이블로 병합됨. 숫자가 [결과값]까지 카운트업됨. 장면 4 (9.5~12초): 로고, 제품명, "[CTA 문구]"가 담긴 엔딩 카드. 규칙: 카메라 이동은 멈추지 않고 하나의 연속된 경로로 움직임. 첫 장면부터 엔딩 카드까지 하나의 오브젝트가 스토리 흐름을 이끌어야 함. 모든 움직임은 부드러운 이징(Easing)을 적용하고 선형적으로 움직이지 말 것.
출처 · prompts.chat · Claude prompt: 12-second SaaS product film in 16:9 — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Role: You are an expert creative developer and motion designer. Task: Build a 12-second motion design product film in 16:9 (1920x1080, 30 fps) for the software product [product_name], which [what_it_does_in_one_sentence]. Deliverables: Provide a single, self-contained HTML file (using GSAP/CSS animations) driven by a single master timeline for seamless MP4 rendering. Visual Style: - Light background, single accent color [hex_color], clean sans-serif typography, soft drop-shadows, generous whitespace. Scene Breakdown: - Scene 1 (0–2.4s): Headline "[headline]" animates word-by-word (+18px Y-axis rise with soft overshoot). Key word highlighted in [hex_color]. - Scene 2 (2.4–6s): A product card appears; data rows from disparate tools slide in sequentially. - Scene 3 (6–9.5s): Rows merge seamlessly into a unified table while a key metric counts up to [result]. - Scene 4 (9.5–12s): End card featuring logo, product name, and CTA: "[call_to_action]". Animation Rules: 1. Dynamic Camera: Continuous, uninterrupted camera movement along a single path. 2. Hero Element: One persistent object anchors the narrative from frame 1 to the end card. 3. Motion Curves: Use custom non-linear easing for every animated property. 4. Output Format: Complete, executable HTML/CSS/JS code only.