Files
claude-skills-reference/engineering/demo-video/references/scene-design-system.md
Reza Rezvani 5710a7b763 chore: post-merge sync — plugins, audits, docs, cross-platform indexes
New skills integrated:
- engineering/behuman, code-tour, demo-video, data-quality-auditor

Plugins & marketplace:
- Add plugin.json for code-tour, demo-video, data-quality-auditor
- Add all 3 to marketplace.json (31 total plugins)
- Update marketplace counts to 248 skills, 332 tools, 460 refs

Skill fixes:
- Move data-quality-auditor from data-analysis/ to engineering/
- Fix cross-refs: code-tour, demo-video, data-quality-auditor
- Add evals.json for code-tour (5 scenarios) and demo-video (4 scenarios)
- demo-video: add output artifacts, prereqs check, references extraction
- code-tour: add default persona, parallel discovery, trivial repo guidance
- Fix Python 3.9 compat (from __future__ import annotations)

product-analytics audit fixes:
- Expand SKILL.md from 82 to 147 lines (anti-patterns, cross-refs, examples)
- Add --format json to all metrics_calculator.py subcommands
- Add error handling (FileNotFoundError, KeyError)

Docs & indexes:
- Update CLAUDE.md, README.md, docs/index.md, docs/getting-started.md counts
- Sync Codex (192 skills) and Gemini (280 items) indexes
- Regenerate MkDocs pages (279 pages, 311 HTML)
- Add 3 new nav entries to mkdocs.yml
- Update mkdocs.yml site_description

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 02:05:19 +02:00

1.6 KiB

Scene Design System

Reference material for demo video scene design — colors, typography, animation timing, voice options, and pacing.

Color Language

Color Meaning Use for
#c5d5ff Trust Titles, logo
#7c6af5 Premium Subtitles, badges
#4ade80 Success "After" states
#f28b82 Problem "Before" states
#fbbf24 Energy Callouts
#0d0e12 Background Always dark mode

Animation Timing

Element entrance:     0.5-0.8s  (cubic-bezier(0.16, 1, 0.3, 1))
Between elements:     0.2-0.4s  gap
Scene transition:     0.3-0.5s  crossfade
Hold after last anim: 1.0-2.0s

Typography

Title:     48-72px, weight 800
Subtitle:  24-32px, weight 400, muted
Bullets:   18-22px, weight 600, pill background
Font:      Inter (Google Fonts)

HTML Scene Layout (1920x1080)

<body>
  <h1 class="title">...</h1>      <!-- Top 15% -->
  <div class="hero">...</div>     <!-- Middle 65% -->
  <div class="footer">...</div>   <!-- Bottom 20% -->
</body>

Background: dark with subtle purple-blue glow gradients. Screenshots: always border-radius: 12px with box-shadow. Easing: always cubic-bezier(0.16, 1, 0.3, 1) — never ease or linear.

Voice Options (edge-tts)

Voice Best for
andrew Product demos, launches
jenny Tutorials, onboarding
davis Enterprise, security
emma Consumer products

Pacing Guide

Duration Max words Fill
3-4s 8-12 ~70%
5-6s 15-22 ~75%
7-8s 22-30 ~80%