@design-ai/cli 4.55.0

package/knowledge/video/marketing-video.md

@@ -0,0 +1,258 @@
+<!-- hand-written -->
+---
+title: Marketing video (landing-page hero, brand films, product demos)
+applies_to: [video, marketing, landing, brand]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Marketing video
+
+Video on marketing surfaces does one of three things:
+
+1. **Stop the scroll** (hero loop, autoplay).
+2. **Tell the story** (brand film, founder video, customer testimonial).
+3. **Show the product** (demo, walkthrough, feature highlight).
+
+Each has different rules.
+
+Read [`video-fundamentals.md`](video-fundamentals.md) first.
+
+## Three categories
+
+### 1. Hero loop (above-the-fold)
+
+Short autoplay loop on landing page hero. The video IS the visual — no separate hero image needed.
+
+| Spec | Target |
+| --- | --- |
+| Duration | 5-15 seconds, seamless loop |
+| Resolution | 1080p (often 720p delivered) |
+| Aspect | 16:9 desktop / 4:5 or 9:16 mobile |
+| File size | < 5MB |
+| Audio | None (autoplay = muted) |
+| Captions | None (no audio) |
+| Reduced motion | Show static poster |
+
+Use for:
+- Product with motion (Linear's keyboard demo, Cron's calendar).
+- Atmospheric brand setting (lifestyle imagery).
+- Process / "money flowing" shot (Toss-style).
+
+Don't use for:
+- Static products (form builder, CMS).
+- Mobile-primary audiences in low-bandwidth regions.
+
+### 2. Brand film / story video (1-3 minutes)
+
+A longer, narrative video. Click-to-play (not autoplay). Lives on a section of the landing page or "About" page.
+
+| Spec | Target |
+| --- | --- |
+| Duration | 60-180 seconds |
+| Resolution | 1080p / 4K |
+| Aspect | 16:9 |
+| Audio | Yes; mixed properly (-14 LUFS) |
+| Captions | Mandatory |
+| Music | Brand-aligned; licensed |
+| Voiceover | Often founder / customer |
+
+Structure:
+```
+0:00-0:05  Hook (visual or question)
+0:05-0:30  Problem (what users face today)
+0:30-1:00  Solution (your product, in real use)
+1:00-2:00  Story (founder, customer, vision)
+2:00-2:30  Proof (numbers, logos, testimonials)
+2:30-3:00  CTA (try it, watch demo, contact)
+```
+
+For most B2B SaaS: a 90-second brand film outperforms a 3-minute one. Short attention span; respect it.
+
+### 3. Product demo / walkthrough (30-90 seconds)
+
+Shows the product working. Often screen-captured + voiceover.
+
+| Spec | Target |
+| --- | --- |
+| Duration | 30-90 seconds (longer for complex products) |
+| Resolution | 1080p (60fps for smooth UI) |
+| Audio | Voiceover + ambient music low |
+| Captions | Mandatory |
+| Pace | Brisk; cut every 3-5 seconds |
+| Cursor | Highlighted (custom cursor or zoom on click) |
+
+Structure:
+```
+0:00-0:05  What problem this solves
+0:05-0:15  Step 1 (open product, basic action)
+0:15-0:35  Step 2-3 (core feature)
+0:35-0:50  Result / outcome
+0:50-1:00  CTA (try free, sign up)
+```
+
+Pace matters. Slow demos feel unproductive. Cut aggressively; dwell only on results.
+
+## Production budget tiers
+
+### Tier 1: DIY (budget < 500,000 KRW)
+
+- Phone or webcam shoot.
+- Software like Capcut, DaVinci Resolve free, Final Cut.
+- Royalty-free music (Epidemic Sound, Artlist, Musicbed).
+- Auto-caption + manual review.
+
+Realistic output: 30-60 second product demo, decent for landing pages.
+
+### Tier 2: Indie production (5-20M KRW)
+
+- Hired videographer + editor (1-2 people, 1-3 days).
+- Better cameras (Sony A7, Canon R-series).
+- Licensed music.
+- Color grading.
+- Captions + light motion graphics.
+
+Realistic output: brand film 60-120s + 2-3 product demos.
+
+### Tier 3: Production company (20-100M+ KRW)
+
+- Full crew (director, DP, sound, makeup, gaffer).
+- Professional cameras (Arri, RED).
+- Talent / actors.
+- Studio + locations.
+- Music composition.
+- Full post (color, sound mix, motion graphics).
+
+Realistic output: brand film with cinematic quality, multi-spot ad campaign.
+
+## Korean marketing video conventions
+
+Korean B2C / fintech video trends:
+
+- **Toss-style**: clean product shots + Korean voiceover (gentle female voice common), warm color grade, slow pan / push, minimal cuts.
+- **Kakao-style**: mascot integration, playful, brighter colors, faster cuts.
+- **Coupang-style**: rapid product cuts, emphasis on speed (rocket motion), urgency.
+- **Naver-style**: dense info, multiple use cases shown, often a product walkthrough.
+
+Korean B2B video:
+- More formal voiceover (해요체 or 합쇼체).
+- Often subtitled (자막) for in-meeting playback.
+- Numbers / testimonials prominent (사용 기업 N개 등).
+
+For Korean market:
+- **Voiceover language**: Korean primary; English subtitles for international.
+- **Music**: Korean-pop / instrumental Korean / royalty-free; avoid Western pop with copyright issues.
+- **Pacing**: slightly faster cuts than Western (Korean video tradition).
+- **Captions**: Korean 자막 always (even if voice is Korean) — common for accessibility + sound-off.
+
+## Hero loop production tips
+
+```
+0:00 — start state (calm)
+0:05 — peak action (the "wow" beat)
+0:10 — settle back to start state (loops cleanly)
+```
+
+Match exit frame to entry frame for invisible loop.
+
+### Filming for hero loops
+
+- **Steady framing** — handheld looks amateur on autoplay.
+- **Subtle motion** > dramatic — viewers see this many times.
+- **No talking heads** — no audio means no lip-sync needed.
+- **Brand color anchored** — if brand is teal, dominant frame color is teal.
+- **No visible text in video** — overlay text in HTML / CSS instead (responsive, localized).
+
+### Vertical version
+
+For mobile landing page: shoot 9:16 OR shoot 4K 16:9 and crop to 9:16.
+
+If cropping: plan composition with 9:16 safe zone marked at shoot. Subject must work in vertical crop.
+
+## Video on landing pages — placement
+
+| Section | Video type |
+| --- | --- |
+| **Hero** | 5-15s autoplay loop OR 60-90s click-to-play brand film with thumbnail |
+| **How it works** | 30-60s product demo |
+| **Customer stories** | 60-120s testimonial video |
+| **Features** | Per-feature 15-30s demo loops |
+| **CTA / closing** | Optional brand film replay |
+
+Don't put video in every section — fatigue.
+
+## Video accessibility
+
+- **Captions**: required for any video with speech / dialogue.
+- **Transcripts**: post the full transcript on the page (or behind a "Show transcript" toggle).
+- **Audio descriptions**: required for videos where critical info is visual-only (e.g., "the cursor moves to the gear icon" — sighted viewers see this; screen readers don't).
+- **Pause control**: for autoplay loops, provide a way to pause (button or click-to-pause).
+- **Don't auto-play with sound**: browsers block; users hate.
+- **Reduced motion**: hide autoplay loops; show static poster instead.
+
+## Performance budget
+
+| Metric | Target |
+| --- | --- |
+| Hero loop (above-fold) | < 3MB; < 1.5s LCP impact |
+| Click-to-play brand film | Lazy-load; only fetched when clicked |
+| Product demo | Lazy-load below the fold |
+| All videos combined per page | < 10MB total |
+
+For LCP-critical hero: provide poster image as primary `<img>` and load video asynchronously after first paint.
+
+## File delivery for marketing video
+
+Provide multiple formats:
+
+```html
+<video autoplay muted loop playsinline poster="hero.jpg">
+  <source src="hero.webm" type="video/webm" />
+  <source src="hero-h265.mp4" type='video/mp4; codecs="hev1.1.6.L93.B0"' />
+  <source src="hero-h264.mp4" type="video/mp4" />
+</video>
+```
+
+Browser picks the first one it supports. WebM (AV1 / VP9) → H.265 → H.264.
+
+For product demos with audio: include caption track:
+
+```html
+<video controls poster="demo.jpg">
+  <source src="demo.mp4" type="video/mp4" />
+  <track kind="captions" src="demo-ko.vtt" srclang="ko" label="한국어" default />
+  <track kind="captions" src="demo-en.vtt" srclang="en" label="English" />
+</video>
+```
+
+## Common marketing video mistakes
+
+- **Too long**. Cut 30%, then cut 30% more.
+- **Audio is afterthought**. Bad audio = abandon at 5 seconds.
+- **Cinematic shots of irrelevant things**. The product matters; sunset b-roll doesn't.
+- **No captions**. 80% watch muted.
+- **Wrong aspect for platform**. Vertical for TikTok / Reels; landscape for YouTube.
+- **Auto-play with sound**. Browsers block; if it played, users hate.
+- **Slow product demos**. Show the result; cut the typing.
+- **Talking head only**. Visual variety required (b-roll, screen, product).
+
+## Don't
+
+- Don't make a 4-minute brand film. Cut to 90 seconds.
+- Don't shoot 4K hero loops if the delivery is 720p. Wasted time + storage.
+- Don't skip color grading. Raw footage looks amateur.
+- Don't use unlicensed music. Copyright strikes are real.
+- Don't auto-play with sound on. Hostile to users.
+- Don't forget mobile. Most marketing video is consumed on phones.
+- Don't ship without captions.
+- Don't put text inside the video frame — overlay in HTML for responsive / localizable.
+
+## Cross-reference
+
+- [`knowledge/video/video-fundamentals.md`](video-fundamentals.md) — codecs, resolution, captions
+- [`knowledge/video/social-and-short-form.md`](social-and-short-form.md) — TikTok / Reels / Shorts
+- [`knowledge/video/in-product-video.md`](in-product-video.md) — onboarding / help
+- [`knowledge/video/korean-video-conventions.md`](korean-video-conventions.md) — KR-specific
+- [`knowledge/patterns/landing-hero-design.md`](../patterns/landing-hero-design.md) — hero strategy
+- [`knowledge/motion/marketing-motion.md`](../motion/marketing-motion.md) — motion vs video

package/knowledge/video/social-and-short-form.md

@@ -0,0 +1,257 @@
+<!-- hand-written -->
+---
+title: Social and short-form video (TikTok, Reels, Shorts, vertical)
+applies_to: [video, social, short-form, tiktok, reels, shorts]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Social and short-form video
+
+Short-form vertical video has its own rules. The 30-90 second YouTube product demo doesn't translate to a 15-second TikTok. Different aspect, different pacing, different audience expectation.
+
+Read [`video-fundamentals.md`](video-fundamentals.md) first.
+
+## Platforms
+
+| Platform | Aspect | Length | Audience |
+| --- | --- | --- | --- |
+| **TikTok** | 9:16 (1080×1920) | 15s, 60s, 3min, 10min | Gen Z + Millennial; KR usage growing |
+| **Instagram Reels** | 9:16 | 15s, 30s, 60s, 90s | Millennial + Gen Z |
+| **Instagram Stories** | 9:16 | 15s per clip; 24h ephemeral | Existing followers |
+| **YouTube Shorts** | 9:16 | up to 60s | All ages; Korean default for video |
+| **YouTube** (long-form) | 16:9 | unlimited | Default everywhere |
+| **NaverTV / Kakao TV** | 16:9 | varies | KR primary |
+| **LinkedIn video** | 16:9 or 1:1 | up to 10min | Professional |
+| **Twitter / X video** | 16:9 or 1:1 | 2:20 max | Public-square content |
+
+For Korean B2C marketing in 2024+: Instagram Reels + YouTube Shorts dominate; TikTok growing; LinkedIn for B2B.
+
+## The vertical video reality
+
+> **9:16 isn't 16:9 cropped to 9:16.**
+> It's a different format with different rules.
+
+| Difference | 16:9 (landscape) | 9:16 (vertical) |
+| --- | --- | --- |
+| Subject | Often centered or rule-of-thirds | Larger; closer to camera |
+| Background | Wide; lots of context | Narrow; minimal |
+| Text overlay | Optional, top or bottom | Often, mid-frame |
+| Captions | Bottom 10% | Mid-frame, away from edges |
+| Pacing | Steady; longer takes | Faster cuts; first 1s critical |
+| Sound | Often expected on | Often muted; captions critical |
+
+## Hook in 1 second
+
+For social video, the first second decides everything. The user is scrolling. Stop them, or they're gone.
+
+| Type | Opening 1s |
+| --- | --- |
+| Question hook | "How do you save 4 hours a week?" |
+| Bold claim | "I cut my expenses in half." |
+| Surprising visual | Action shot; counterintuitive scene |
+| Pattern interrupt | Loud sound, sudden cut |
+| Direct address | "Stop scrolling. Watch this." |
+
+Don't use:
+- Slow burn intros (90s YouTube intro = scroll past in 1s).
+- Logo first (anti-hook).
+- "Hi guys" greeting.
+- Subtitle title cards.
+
+## Korean short-form conventions
+
+- **자막 dominant** — Korean short-form almost always has subtitles burned in (sound off → sound on) with playful styling.
+- **Brand color text + white outline** — common subtitle style for visibility.
+- **Vertical first** — Korean creators design vertical, then crop landscape if needed.
+- **Music**: K-pop instrumentals + trending TikTok / Reels sounds; copyright considerations.
+- **Pace**: faster than Western (Korean attention to dense info).
+- **Mascot integration** for B2C: Kakao Friends, brand characters appear.
+
+For Korean short-form B2C:
+- 첫 1초 hook + 자막
+- Music or sound effect
+- 브랜드 노출 (logo / product) within first 5 seconds
+- CTA in last 2-3 seconds (link in bio / 채널 / 사이트 URL)
+
+## Composition for vertical
+
+### Safe areas
+
+```
+┌─────────────────────────────┐
+│   ───── Top UI (10%) ─────  │   ← username, follow button overlay
+│                             │
+│                             │
+│                             │
+│                             │
+│        SAFE AREA            │   ← put main content here (60% of height)
+│                             │
+│                             │
+│                             │
+│                             │
+│   ──── Bottom UI (15%) ───  │   ← like/comment/share buttons + caption
+│                             │
+└─────────────────────────────┘
+```
+
+Top 10% and bottom 15% are platform UI. Don't put critical content there.
+
+For text overlay: position **between 25-65% of height** for visibility above bottom UI without competing with top UI.
+
+### Subject framing
+
+Vertical video subjects fill more of the frame:
+- **Single person**: chest-up to head-and-shoulders.
+- **Product**: closer than landscape would be.
+- **Action**: subject's path of motion fits within narrow frame.
+
+Don't shoot a wide group shot in vertical — bodies get cut off awkwardly.
+
+## Pacing
+
+| Length | Approximate cut count |
+| --- | --- |
+| 15s | 5-8 cuts |
+| 30s | 8-15 cuts |
+| 60s | 15-30 cuts |
+
+Short-form expects pace. Long takes (5+ seconds) feel slow.
+
+Exceptions:
+- ASMR / cooking / craft videos: longer takes are the point.
+- Storytelling videos: medium-paced.
+- Product demos: brisk; show the result fast.
+
+## Subtitle styling for short-form
+
+Burn-in subtitles (open captions) for short-form because:
+- 80%+ watch muted.
+- Algorithm boosts videos with text on screen.
+- Accessibility.
+
+Common styles:
+
+| Style | Look |
+| --- | --- |
+| **TikTok native** | White text, black drop shadow, 1-2 lines |
+| **Highlight word** | One word highlighted in brand color per phrase |
+| **Karaoke-style** | Word-by-word reveal |
+| **Captioned with emoji** | Text + emoji for emphasis |
+| **Minimalist** | Small white text, bottom |
+
+For brand-aligned: pick ONE style and stick with it across videos.
+
+### Korean subtitle styling
+
+- Pretendard / NanumSquare / SB 어그로체 commonly used (bold, condensed).
+- Yellow / brand-color highlight on key words.
+- White text + thick black outline (visibility on any background).
+- Smaller than English subtitle (Hangul reads bigger at same size).
+
+## Music and sound
+
+### Music sources
+
+- **Platform-native trending sounds**: TikTok / Reels surface trending audio. Using them boosts algorithm reach.
+- **Royalty-free libraries**: Epidemic Sound, Artlist, Musicbed.
+- **Custom composition**: for brand-defining campaigns.
+
+### Korean music
+- **Korean production music**: Audionetwork KR, Pond5 KR.
+- **Avoid K-pop**: copyright strikes; commercial use rights are expensive and sometimes unavailable.
+- **Brand jingle**: short 2-3s sting at brand logo reveal.
+
+### Voice
+- **Korean voiceover**: for KR primary.
+- **AI voice (clone or generic)**: increasingly common for short-form; pre-generated with services like ElevenLabs (Korean voice support exists).
+- **Subtitles always** even with voiceover — sound-off viewing.
+
+## Frequency / consistency
+
+Short-form is volume-driven. Posting weekly < daily for algorithm reach.
+
+For brand presence:
+- 3-7 short-form videos per week is typical for active brands.
+- Repurpose across platforms (Reels → Shorts → TikTok).
+- Don't crop randomly — re-edit per platform if budget allows.
+
+## Production budget tiers
+
+### Tier 1: Phone shoot (DIY)
+
+- Phone with stabilizer / tripod.
+- Capcut / InShot / Canva for editing.
+- Auto-captions + manual review.
+- Royalty-free music or platform-native sounds.
+
+Cost per video: < 100,000 KRW (mostly time).
+
+### Tier 2: Influencer / creator
+
+- Hire a content creator who specializes in short-form.
+- They handle shoot + edit + posting.
+
+Cost per video: 500,000 - 5,000,000 KRW depending on creator size.
+
+### Tier 3: Agency
+
+- Full short-form video agency.
+- Strategy + production + posting + analytics.
+
+Cost: 5,000,000 - 50,000,000+ KRW per month for ongoing campaigns.
+
+## Repurposing long-form to short-form
+
+If you have long-form video (60-min webinar, 5-min product demo), extract short-form clips:
+
+1. **Find moments** — quotable lines, surprising moments, big reveals.
+2. **Crop to 9:16** — re-frame manually; subject often needs to be re-positioned.
+3. **Add subtitles** — burn in.
+4. **Add hook** — first 1 second is critical; usually need a new opening.
+5. **Trim to 15-60s**.
+6. **Brand the end** — logo + CTA in last 2-3 seconds.
+
+Tools that help: **Opus Clip, Vizard, CapCut Auto-clip** — AI-driven re-cutting.
+
+## Analytics that matter
+
+For short-form:
+- **View-through rate** (% who watched to end).
+- **Average watch time**.
+- **Engagement rate** (likes + comments + shares / views).
+- **Algorithm reach** (impressions / followers).
+- **CTR to bio link / website**.
+
+Don't obsess over total views. View-through rate is the leading indicator of whether the content works.
+
+## Common short-form mistakes
+
+- **Slow first second** — algorithm penalty.
+- **Landscape video posted vertically** (with black bars) — looks lazy.
+- **Watermark from another platform** (TikTok logo on Reels) — Reels deprioritizes.
+- **No subtitles** — 80% miss the message.
+- **Logo first** — kills hook.
+- **Long intro** — anti-hook.
+- **Recycling without re-editing** — captions / aspect / pacing wrong for new platform.
+- **Talking-head only** — visual variety needed.
+
+## Don't
+
+- Don't post landscape video vertically with bars. Crop or reframe.
+- Don't skip the hook. First second is everything.
+- Don't post without captions.
+- Don't reuse a TikTok download (with watermark) on Reels — algorithm penalizes.
+- Don't ignore platform-native sounds — using trending audio gives algorithm boost.
+- Don't post once and call it done. Volume + consistency drive reach.
+- Don't put critical content in top 10% or bottom 15% — covered by platform UI.
+- Don't use copyrighted music for commercial brand — strikes.
+
+## Cross-reference
+
+- [`knowledge/video/video-fundamentals.md`](video-fundamentals.md) — encoding, resolution
+- [`knowledge/video/marketing-video.md`](marketing-video.md) — long-form marketing
+- [`knowledge/video/in-product-video.md`](in-product-video.md) — in-app video
+- [`knowledge/video/korean-video-conventions.md`](korean-video-conventions.md) — KR-specific
+- [`knowledge/i18n/korean-app-store-visual.md`](../i18n/korean-app-store-visual.md) — Korean visual conventions