Multimedia
ScaffoldedMultimedia covers everything that moves or sounds. TpGroup brand video (hero reels, case studies, explainers, podcasts), in-product motion (UI transitions, microinteractions), and broadcast assets all share a single motion language sourced from the motion tokens.
What multimedia covers
| Asset type | Deliverables |
|---|---|
| Brand video | Hero reels, product explainers, case-study stories, internal culture films |
| Motion graphics | Lower-thirds, title cards, end bumpers, animated statistics, infographics |
| Podcast & audio | Show-open audio logo, jingle, podcast cover art templates, waveform visualiser |
| In-product motion | Skeleton loaders, page transitions, Lottie illustrations, micro-interactions |
| Broadcast / social | 16:9, 9:16 and 1:1 variants for LinkedIn, YouTube, Instagram, TV |
Motion principles
- Purposeful. Every motion tells a causal story — where did this come from, where is it going?
- Fast by default. UI uses 150–400ms; motion longer than 600ms is reserved for narrative moments.
- Respectful. prefers-reduced-motion is honoured across platforms; fallback to instant transitions.
- Consistent easing. Decelerate for enter, accelerate for exit, standard for in-place moves.
Video motion reference
| Concern | Rule |
|---|---|
| Frame rate | 30fps for product video; 60fps for keynote / LED walls; 24fps for cinematic brand films |
| Keyframe cadence | One keyframe per 10 frames at 24fps (≈ 416ms) — roughly matches motion.duration.slow (400ms). Adjust per fps: 8 frames at 30fps = 267ms ≈ motion.duration.base (250ms). |
| Token-driven timing | Keyframe durations drawn from motion.duration.* so in-product and broadcast stay in sync |
| Easing in AE / Premiere | Use the motion.easing.* Bezier curves via expression presets or keyframe assistants |
| Audio ducking | -18dB under voice; fade 250ms using motion.duration.base |
| Safe zones | Title-safe 80%; action-safe 90%; caption-safe extra 10% on 9:16 for system UI chrome |
Lower-third reference
Entry motion: 400ms (motion.duration.slow) with decelerate easing — slides in from the left on LTR, right on RTL. Exit: 250ms (motion.duration.base) with accelerate easing. Visual treatment uses the brand accent for the top rule, inverted surface for the bar, and neutral-100 type.
Deliverable matrix
| Channel / destination | Aspect | Target duration | Frame rate | Note |
|---|---|---|---|---|
| YouTube / product hero | 16:9 | 60–90s | 24 / 30 | Export H.264 master + HDR alt; subtitles required |
| LinkedIn / enterprise | 16:9 | 30–60s | 30 | Burned-in captions, strong opening 3 seconds |
| Conference / keynote | 16:9 | 120–180s | 60 | 1080p60 minimum; also export 4K for LED walls |
| Instagram / TikTok reel | 9:16 | 15–30s | 30 | Safe-zone for caption bars at top and bottom |
| Instagram feed / square | 1:1 | 15–60s | 30 | Muted-first: visual must read with audio off |
| In-product Lottie | 1:1 | 0.5–2s loop | 60 | Use motion.duration.base–slow; honour reduce-motion |
Tokens and tooling
Motion tokens (duration and easing) export as a Lottie-compatible JSON at tokens/build/motion/motion.json, consumed by After Effects presets, Premiere templates, and Reanimated on React Native. Brand-standard After Effects project templates and a Premiere starter are tracked as companion assets.