AI 제품의 핵심 기능을 11초 분량의 고급스러운 모션 그래픽 영상 코드로 빠르게 구현하고 싶을 때 유용합니다.
Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my AI tool ${name}, which ${what_it_does}.
Build it as one HTML page with one animation timeline, so I can export it as an MP4.
Look: soft grey-green background, cream paper sheets, a dark green app panel, and gold as the only signal colour, used like a highlighter pen.
Text builds word by word: "${problem}" / "${name} [does step 1], [step 2], and [step 3]." / "${claim}."
Scene 1: a stack of paper sheets with the problem line on top.
Scene 2: one line on a sheet gets marked in gold and lifts off as a strip.
Scene 3: one camera move to the app panel. The strip lands there as a card.
Scene 4: the card opens and shows the better version: ${result}.
Scene 5: a gold marker stroke draws the logo. Name and claim appear.
Rules: one object carries the story from start to end. Only one camera travel. Every move is eased.나의 AI 툴인 ${name}(${what_it_does} 기능 수행)을 위한 16:9(1920x1080, 30 fps) 비율의 11초 모션 디자인 제품 영상을 제작해 줘.
MP4로 내보낼 수 있도록 단일 애니메이션 타임라인이 포함된 하나의 HTML 페이지로 만들어 줘.
비주얼 룩: 부드러운 회녹색 배경, 크림색 종이, 다크 그린 앱 패널, 그리고 형광펜처럼 사용되는 유일한 시그널 컬러인 골드.
텍스트는 단어별로 생성됨: "${problem}" / "${name}은 [1단계], [2단계], [3단계]를 수행합니다." / "${claim}."
장면 1: 상단에 문제 문구가 적힌 종이 더미.
장면 2: 종이 위의 한 줄이 골드색으로 칠해지고 띠 형태로 떼어짐.
장면 3: 앱 패널로 카메라가 한 번 이동. 띠가 카드로 거기에 안착함.
장면 4: 카드가 열리며 개선된 버전인 ${result}를 보여줌.
장면 5: 골드 마커 스트로크가 로고를 그림. 이름과 클레임 문구가 나타남.
규칙: 하나의 오브젝트가 처음부터 끝까지 이야기를 이끌어갈 것. 카메라 이동은 단 한 번만 수행할 것. 모든 움직임에는 이징(eased) 효과를 적용할 것.출처 · prompts.chat · Claude prompt: 11-second premium product film for an AI tool (16:9) — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
부드러운 세이지 그린 배경과 크림색 종이, 딥 그린 앱 패널 및 골드 형광펜 포인트를 활용하여 11초간 유기적으로 연결되는 고품질 모션 디자이너 필름을 구현했습니다. 하나의 핵심 요소가 종이 위 문장에서 앱 카드로 변형되며 카메라 이동과 함께 어우러지고, 브랜드 로고 스트로크 연출로 완성됩니다.
Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my AI tool TPI 문서AI, which 복잡한 비즈니스 문서의 핵심 항목을 자동으로 추출하고 정리하며 요약합니다. Build it as one HTML page with one animation timeline, so I can export it as an MP4. Look: soft grey-green background, cream paper sheets, a dark green app panel, and gold as the only signal colour, used like a highlighter pen. Text builds word by word: "수백 장의 계약서를 일일이 검토하느라 시간을 허비하고 계신가요?" / "TPI 문서AI는 핵심 조항을 자동으로 탐색하고, 위험 요소를 즉시 분류하며, 한 눈에 들어오는 요약 리포트를 생성합니다." / "TPI 문서AI로 업무 지옥에서 벗어나세요." Scene 1: a stack of paper sheets with the problem line on top. Scene 2: one line on a sheet gets marked in gold and lifts off as a strip. Scene 3: one camera move to the app panel. The strip lands there as a card. Scene 4: the card opens and shows the better version: 1초 만에 완료된 완벽한 분석 결과서. Scene 5: a gold marker stroke draws the logo. Name and claim appear. Rules: one object carries the story from start to end. Only one camera travel. Every move is eased.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my AI tool TPI 문서AI, which 복잡한 비즈니스 문서의 핵심 항목을 자동으로 추출하고 정리하며 요약합니다. Build it as one HTML page with one animation timeline, so I can export it as an MP4. Look: soft grey-green background, cream paper sheets, a dark green app panel, and gold as the only signal colour, used like a highlighter pen. Text builds word by word: "수백 장의 계약서를 일일이 검토하느라 시간을 허비하고 계신가요?" / "TPI 문서AI는 핵심 조항을 자동으로 탐색하고, 위험 요소를 즉시 분류하며, 한 눈에 들어오는 요약 리포트를 생성합니다." / "TPI 문서AI로 업무 지옥에서 벗어나세요." Scene 1: a stack of paper sheets with the problem line on top. Scene 2: one line on a sheet gets marked in gold and lifts off as a strip. Scene 3: one camera move to the app panel. The strip lands there as a card. Scene 4: the card opens and shows the better version: 1초 만에 완료된 완벽한 분석 결과서. Scene 5: a gold marker stroke draws the logo. Name and claim appear. Rules: one object carries the story from start to end. Only one camera travel. Every move is eased.
부드러운 세이지 그린 배경과 크림색 종이, 딥 그린 앱 패널 및 골드 형광펜 포인트를 활용하여 11초간 유기적으로 연결되는 고품질 모션 디자이너 필름을 구현했습니다. 하나의 핵심 요소가 종이 위 문장에서 앱 카드로 변형되며 카메라 이동과 함께 어우러지고, 브랜드 로고 스트로크 연출로 완성됩니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Role: Act as an expert motion designer and front-end developer. Task: Build a single, fully functional, self-contained HTML page featuring a seamless 11-second motion design animation timeline (16:9 ratio, 1920x1080, 30 fps) for the AI tool [Product Name], which [Core Function]. The HTML must be ready for browser playback and direct MP4 export. Visual Palette: - Background: Soft grey-green - UI Elements: Cream paper sheets & dark green app panel - Signal Color: Gold (used exclusively as a highlighter pen color) Scene Timeline (Total 11 Seconds): - Scene 1 (0–2s): Stack of paper sheets appears. Text animates word-by-word: "[Problem Statement]". - Scene 2 (2–4s): A gold highlighter stroke marks a key line, which lifts off as a paper strip. - Scene 3 (4–6s): Single camera pan moves to the dark green app panel. The strip lands and turns into a card while showing: "[Product Name] [Step 1], [Step 2], and [Step 3]." - Scene 4 (6–9s): The card opens to reveal the final outcome: "[Improved Result]". - Scene 5 (9–11s): A gold marker stroke draws the logo outline. "[Product Name]" and "[Value Claim]" appear. Constraints: 1. One object must continuously carry the visual story from start to end. 2. Limit to exactly one camera movement with smooth easing on all animations. 3. Output complete code in a single HTML file (HTML, CSS, and GSAP/JS included).