위치 기반 제품이나 서비스의 핵심 기능을 따뜻한 지도 애니메이션 형태의 11초 영상으로 제작할 때.
Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my product ${name}, which ${what_it_does}.
Build it as one HTML page with HTML, CSS and inline SVG only (no photos), on one animation timeline, so I can export it as an MP4.
Look: a warm map seen from above. Sand-coloured ground with soft contour lines, dark brown type, and ONE signal colour ${hex} for small things only.
Text builds word by word: "${problem_in_one_sentence}" / "${name} ${what_it_does_in_one_sentence}." / "${claim}."
Scene 1: low, angled view of the map while the problem appears.
Scene 2: the camera rises to a top view in the same place. Areas light up one after another.
Scene 3: one camera move to a second place. A dark panel shows the result: ${result}.
Scene 4: one area turns into the logo. Name and claim appear.
Rules: only one camera travel in the whole film. Words grow up from their baseline. Nothing moves linearly.16:9 비율(1920x1080, 30 fps)의 11초짜리 모션 디자인 제품 필름을 내 제품 ${name}(기능: ${what_it_does})을 위해 제작하세요.
MP4로 내보낼 수 있도록 단일 애니메이션 타임라인 기반의 HTML, CSS 및 인라인 SVG만 사용(사진 제외)하여 하나의 HTML 페이지로 작성하세요.
외관: 위에서 내려다본 따뜻한 지도 느낌. 부드러운 등고선이 있는 모래색 바탕, 짙은 갈색 텍스트, 그리고 작은 요소에만 사용할 단 하나의 포인트 컬러 ${hex}.
텍스트는 단어별로 나타남: "${problem_in_one_sentence}" / "${name} ${what_it_does_in_one_sentence}." / "${claim}."
장면 1: 문제가 나타나는 동안 지도를 낮은 각도에서 바라보는 뷰.
장면 2: 카메라가 같은 위치에서 수직 톱뷰로 상승. 영역들이 하나씩 밝아짐.
장면 3: 카메라가 두 번째 위치로 이동. 어두운 패널에 결과가 표시됨: ${result}.
장면 4: 한 영역이 로고로 변함. 제품명과 슬로건이 나타남.
규칙: 전체 필름에서 카메라 이동은 단 한 번만 허용. 단어는 기준선에서 위로 자라나듯 등장. 선형적으로 움직이는 것은 없음.출처 · prompts.chat · Claude prompt: 11-second product film in a warm map style (16:9) — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
따뜻한 모래색 지형과 등고선을 배경으로 TPI 로지스의 실시간 물류 경로 최적화 과정을 11초 타임라인의 감각적인 모션 디자인으로 구현했습니다. 카메라는 3D 조망에서 탑뷰로 전환된 뒤 단 한 번의 부드러운 위치 이동을 거쳐 결과를 보여주며, 각 문장은 베이스라인에서 솟아오르는 기하학적 텍스트 애니메이션으로 완성됩니다.
Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my product TPI 로지스, which 전국 물류 거점의 실시간 이동 경로를 최적화합니다. Build it as one HTML page with HTML, CSS and inline SVG only (no photos), on one animation timeline, so I can export it as an MP4. Look: a warm map seen from above. Sand-coloured ground with soft contour lines, dark brown type, and ONE signal colour #FF4500 for small things only. Text builds word by word: "복잡한 물류 경로로 매일 시간이 낭비됩니다" / "TPI 로지스 전국 거점 경로를 실시간으로 최적화합니다." / "전국 거점 실시간 연동 및 자동 경로 최적화 완료." / "스마트 물류의 새로운 기준." Scene 1: low, angled view of the map while the problem appears. Scene 2: the camera rises to a top view in the same place. Areas light up one after another. Scene 3: one camera move to a second place. A dark panel shows the result: 전국 거점 실시간 연동 및 자동 경로 최적화 완료. Scene 4: one area turns into the logo. Name and claim appear. Rules: only one camera travel in the whole film. Words grow up from their baseline. Nothing moves linearly.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my product TPI 로지스, which 전국 물류 거점의 실시간 이동 경로를 최적화합니다. Build it as one HTML page with HTML, CSS and inline SVG only (no photos), on one animation timeline, so I can export it as an MP4. Look: a warm map seen from above. Sand-coloured ground with soft contour lines, dark brown type, and ONE signal colour #FF4500 for small things only. Text builds word by word: "복잡한 물류 경로로 매일 시간이 낭비됩니다" / "TPI 로지스 전국 거점 경로를 실시간으로 최적화합니다." / "전국 거점 실시간 연동 및 자동 경로 최적화 완료." / "스마트 물류의 새로운 기준." Scene 1: low, angled view of the map while the problem appears. Scene 2: the camera rises to a top view in the same place. Areas light up one after another. Scene 3: one camera move to a second place. A dark panel shows the result: 전국 거점 실시간 연동 및 자동 경로 최적화 완료. Scene 4: one area turns into the logo. Name and claim appear. Rules: only one camera travel in the whole film. Words grow up from their baseline. Nothing moves linearly.
따뜻한 모래색 지형과 등고선을 배경으로 TPI 로지스의 실시간 물류 경로 최적화 과정을 11초 타임라인의 감각적인 모션 디자인으로 구현했습니다. 카메라는 3D 조망에서 탑뷰로 전환된 뒤 단 한 번의 부드러운 위치 이동을 거쳐 결과를 보여주며, 각 문장은 베이스라인에서 솟아오르는 기하학적 텍스트 애니메이션으로 완성됩니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Act as an expert motion designer and frontend developer. Build a complete, single-file HTML/CSS/inline SVG 11-second motion product film in 16:9 (1920x1080 at 30 fps) for [PRODUCT_NAME], which [PRODUCT_FUNCTION]. Output valid, runnable HTML code without photos or external JavaScript libraries. Visual Style: - Map Aesthetics: Warm sand-colored ground with soft SVG contour lines and dark brown typography. - Accent: Use [ACCENT_HEX_COLOR] strictly for small highlight elements. Timeline & Scene Sequence (11 Seconds Total): - Scene 1 (0–3s): Low, angled map perspective. Text "[PROBLEM_STATEMENT]" reveals word-by-word from the baseline. - Scene 2 (3–6s): Camera smoothly rises to a top view in place. Map areas illuminate sequentially using the accent color. - Scene 3 (6–9s): Execute the single continuous camera move across the map to a second region. A dark overlay panel presents "[KEY_RESULT]". - Scene 4 (9–11s): A map region morphs into the logo. "[PRODUCT_NAME]" and "[BRAND_CLAIM]" lock into view. Technical Rules: - Strictly one camera travel across the full animation timeline. - Text elements must grow/translate upward from their baseline. - All transforms must use non-linear easing curves (cubic-bezier); strictly no linear motion.