Video & Motion Graphics Prompts¶
Comprehensive prompt templates for video content, animations, and motion design with parameterized design system integration
Created: February 2026 Tool: Nano Banana Pro / Motion Tools Related: Framework Overview | Content Library
Design System Configuration¶
# VIDEO & MOTION DESIGN SYSTEM CONFIGURATION
# Inherits from: ./readme.md (Parameterized Design System Architecture)
# All tokens resolve based on active_variant selection
video_motion_config:
schema_version: "2.0"
parent_config: "./readme.md"
# Inherit active configuration from parent
inherit:
- active_configuration.variant
- active_configuration.grid_system
- active_configuration.frame_style
- active_configuration.dark_mode
- active_configuration.accessibility_level
- active_configuration.animation_reduced
# Video-specific defaults
defaults:
frame_rate: 30
audio_sample_rate: 48000
color_depth: 10
hdr_enabled: false
Variant Motion Specifications¶
Each design system variant has specific motion, animation, and color grading specifications for video content.
Motion Tokens by Variant¶
motion_tokens_by_variant:
trusted_advisor:
# Professional stability - measured, confident motion
motion_personality: "measured_professional"
timing:
duration_quick: "300ms"
duration_standard: "500ms"
duration_emphasis: "800ms"
duration_transition: "600ms"
duration_reveal: "1000ms"
easing:
primary: "cubic-bezier(0.4, 0, 0.2, 1)" # ease-in-out smooth
entrance: "cubic-bezier(0, 0, 0.2, 1)" # ease-out soft
exit: "cubic-bezier(0.4, 0, 1, 1)" # ease-in subtle
emphasis: "cubic-bezier(0.25, 0.1, 0.25, 1)" # smooth professional
animation_style:
- "Subtle fade transitions"
- "Measured reveal animations"
- "Confident, unhurried motion"
- "Minimal bounce or overshoot"
- "Smooth parallax depth"
tempo: "allegretto" # Moderate, confident pace
modern_partner:
# Collaborative warmth - flowing, organic motion
motion_personality: "flowing_organic"
timing:
duration_quick: "250ms"
duration_standard: "450ms"
duration_emphasis: "700ms"
duration_transition: "550ms"
duration_reveal: "900ms"
easing:
primary: "cubic-bezier(0.34, 1.56, 0.64, 1)" # gentle overshoot
entrance: "cubic-bezier(0.22, 1, 0.36, 1)" # smooth elastic
exit: "cubic-bezier(0.4, 0, 0.2, 1)" # natural ease
emphasis: "cubic-bezier(0.68, -0.2, 0.32, 1.2)" # organic bounce
animation_style:
- "Flowing curve-based motion paths"
- "Gentle breathing/pulse animations"
- "Organic easing with soft overshoot"
- "Welcoming, approachable reveals"
- "Fluid morphing transitions"
tempo: "andante" # Flowing, welcoming pace
bold_challenger:
# Confident disruption - sharp, decisive motion
motion_personality: "sharp_decisive"
timing:
duration_quick: "150ms"
duration_standard: "300ms"
duration_emphasis: "450ms"
duration_transition: "350ms"
duration_reveal: "600ms"
easing:
primary: "cubic-bezier(0.4, 0, 0, 1)" # sharp snap
entrance: "cubic-bezier(0.7, 0, 0.84, 0)" # fast attack
exit: "cubic-bezier(0.16, 1, 0.3, 1)" # quick cut
emphasis: "cubic-bezier(0.87, 0, 0.13, 1)" # dramatic snap
animation_style:
- "Sharp, decisive cuts"
- "Quick snap-to animations"
- "Bold color block transitions"
- "Confident linear motion"
- "Impactful reveals with weight"
tempo: "allegro" # Fast, decisive pace
cyber_shield:
# Security operations - tactical, alert motion
motion_personality: "tactical_vigilant"
timing:
duration_quick: "100ms"
duration_standard: "250ms"
duration_emphasis: "400ms"
duration_transition: "300ms"
duration_reveal: "500ms"
duration_scan: "1500ms"
duration_pulse: "2000ms"
easing:
primary: "cubic-bezier(0.25, 0, 0.5, 1)" # tactical precision
entrance: "cubic-bezier(0, 0, 0.2, 1)" # alert snap-in
exit: "cubic-bezier(0.4, 0, 1, 1)" # quick dismiss
emphasis: "linear" # mechanical precision
scan: "linear" # scanning motion
animation_style:
- "Scan line animations (horizontal sweeps)"
- "Data stream/matrix effects"
- "Tactical grid reveals"
- "Alert pulse animations"
- "Threat indicator flickers"
- "Terminal-style text typing"
- "Radar sweep motions"
tempo: "presto" # Urgent, vigilant pace
special_effects:
scan_lines: true
glitch_transitions: "subtle"
glow_pulse: "threat_indicator"
data_streams: true
sentinel_guard:
# AI-powered defense - intelligent, flowing motion
motion_personality: "intelligent_flowing"
timing:
duration_quick: "200ms"
duration_standard: "400ms"
duration_emphasis: "600ms"
duration_transition: "500ms"
duration_reveal: "800ms"
duration_ai_process: "1200ms"
easing:
primary: "cubic-bezier(0.4, 0, 0.2, 1)" # smooth intelligence
entrance: "cubic-bezier(0.34, 1.3, 0.64, 1)" # AI emergence
exit: "cubic-bezier(0.4, 0, 0.6, 1)" # graceful fade
emphasis: "cubic-bezier(0.25, 0.8, 0.25, 1)" # predictive flow
neural: "cubic-bezier(0.45, 0.05, 0.55, 0.95)" # neural network
animation_style:
- "Neural network flow visualizations"
- "Gradient border animations"
- "Predictive motion paths"
- "Smooth AI processing indicators"
- "Organic data flow visualizations"
- "Pulsing glow progressions"
tempo: "moderato" # Intelligent, purposeful pace
special_effects:
neural_paths: true
gradient_animations: true
particle_systems: "flowing"
clean_developer:
# Developer clarity - precise, functional motion
motion_personality: "precise_functional"
timing:
duration_quick: "150ms"
duration_standard: "200ms"
duration_emphasis: "300ms"
duration_transition: "250ms"
duration_reveal: "400ms"
duration_code_type: "50ms" # per character
easing:
primary: "cubic-bezier(0.2, 0, 0, 1)" # clean snap
entrance: "cubic-bezier(0, 0, 0.2, 1)" # quick fade-in
exit: "cubic-bezier(0.4, 0, 1, 1)" # quick fade-out
emphasis: "cubic-bezier(0.4, 0, 0.2, 1)" # functional
code: "steps(1, end)" # instant code updates
animation_style:
- "Clean, minimal transitions"
- "Precise position animations"
- "Code syntax highlighting reveals"
- "Terminal/IDE-style typing"
- "Cursor blink animations"
- "Tab/accordion reveals"
tempo: "andante_moderato" # Clear, purposeful pace
special_effects:
code_highlighting: true
cursor_animations: true
syntax_coloring: true
creative_clay:
# Distinctive creativity - playful, bold motion
motion_personality: "playful_bold"
timing:
duration_quick: "200ms"
duration_standard: "400ms"
duration_emphasis: "600ms"
duration_transition: "500ms"
duration_reveal: "700ms"
duration_float: "3000ms"
easing:
primary: "cubic-bezier(0.34, 1.56, 0.64, 1)" # playful bounce
entrance: "cubic-bezier(0.68, -0.55, 0.265, 1.55)" # spring in
exit: "cubic-bezier(0.55, -0.05, 0.68, 0.53)" # spring out
emphasis: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" # elastic
float: "cubic-bezier(0.37, 0, 0.63, 1)" # gentle float
animation_style:
- "Bouncy, spring-based motion"
- "Blob morphing animations"
- "Floating 3D element reveals"
- "Oversized typography animations"
- "Color gradient sweeps"
- "Section alternation wipes"
tempo: "vivace" # Lively, energetic pace
special_effects:
blob_morphing: true
floating_elements: true
gradient_sweeps: true
parallax_depth: "dramatic"
blueprint_technical:
# Technical documentation - instructional, annotated motion
motion_personality: "instructional_precise"
timing:
duration_quick: "200ms"
duration_standard: "400ms"
duration_emphasis: "600ms"
duration_transition: "350ms"
duration_reveal: "500ms"
duration_annotation: "800ms"
duration_callout: "600ms"
duration_zoom: "700ms"
easing:
primary: "cubic-bezier(0.4, 0, 0.2, 1)" # smooth precision
entrance: "cubic-bezier(0, 0, 0.2, 1)" # clear entrance
exit: "cubic-bezier(0.4, 0, 1, 1)" # clean exit
emphasis: "cubic-bezier(0.25, 0.1, 0.25, 1)" # instructional
pointer: "cubic-bezier(0.34, 1.2, 0.64, 1)" # attention guide
animation_style:
- "Technical drawing line animations"
- "Annotation pointer reveals"
- "Step-by-step progression"
- "Callout bubble appearances"
- "Zoom and pan for detail focus"
- "Grid overlay reveals"
- "Measurement line animations"
- "Component highlight pulses"
tempo: "adagio" # Slow, educational pace
special_effects:
line_drawing: true
annotation_pointers: true
zoom_controls: true
grid_overlays: true
measurement_lines: true
component_isolation: true
Color Grading by Variant¶
color_grading_by_variant:
trusted_advisor:
lut_profile: "professional_blue"
color_temperature: "neutral_cool" # 5800K
saturation: 0.85 # Slightly desaturated for professionalism
contrast: 1.05 # Subtle contrast lift
highlights:
tint: "#f8fafc" # cool_white
recovery: 0.9
shadows:
tint: "#0f172a" # sbk_navy subtle
lift: 0.05
midtones:
tint: "#2563eb" # sbk_blue
balance: 0
grade_style: "Corporate premium"
mood_keywords: ["trustworthy", "established", "sophisticated"]
modern_partner:
lut_profile: "warm_organic"
color_temperature: "warm" # 6200K
saturation: 0.95 # Natural saturation
contrast: 1.0 # Natural contrast
highlights:
tint: "#faf5f0" # warm_cream
recovery: 0.85
shadows:
tint: "#0d9488" # teal_600
lift: 0.08
midtones:
tint: "#14b8a6" # teal_500
balance: 0.05
grade_style: "Welcoming natural"
mood_keywords: ["approachable", "collaborative", "human"]
bold_challenger:
lut_profile: "high_contrast_dramatic"
color_temperature: "neutral" # 5600K
saturation: 1.1 # Punchy saturation
contrast: 1.25 # High contrast
highlights:
tint: "#ffffff"
recovery: 0.95
shadows:
tint: "#0f172a" # slate_900
crush: 0.1
midtones:
tint: "#ea580c" # orange_600 accent
balance: 0
grade_style: "Dramatic impact"
mood_keywords: ["bold", "disruptive", "memorable"]
cyber_shield:
lut_profile: "dark_threat_red"
color_temperature: "cool" # 5200K
saturation: 0.9
contrast: 1.3 # High contrast for dark mode
highlights:
tint: "#dc2626" # threat red
recovery: 0.7
shadows:
tint: "#0a0a0b" # deep black
crush: 0.15
midtones:
tint: "#7f1d1d" # threat_dark
balance: -0.1
grade_style: "Security operations dark"
mood_keywords: ["vigilant", "threat-aware", "tactical"]
special_processing:
- "Red accent isolation"
- "Scan line overlay (2% opacity)"
- "Subtle vignette"
- "Glow on key elements"
sentinel_guard:
lut_profile: "dark_purple_gradient"
color_temperature: "cool" # 5400K
saturation: 1.0
contrast: 1.15
highlights:
tint: "#a855f7" # purple_500
recovery: 0.75
shadows:
tint: "#0a0a0b" # deep black
crush: 0.1
midtones:
tint: "#7c3aed" # violet_600
balance: 0.05
grade_style: "AI-powered futuristic"
mood_keywords: ["intelligent", "advanced", "protective"]
special_processing:
- "Purple/violet gradient overlays"
- "Neural network glow effects"
- "Soft bloom on highlights"
clean_developer:
lut_profile: "clean_minimal"
color_temperature: "daylight" # 5500K
saturation: 0.9 # Clean, slightly desaturated
contrast: 1.1
highlights:
tint: "#ffffff"
recovery: 0.95
shadows:
tint: "#4f46e5" # indigo_600
lift: 0.03
midtones:
tint: "#f8fafc" # neutral
balance: 0
grade_style: "Clean documentation"
mood_keywords: ["precise", "clear", "developer-friendly"]
special_processing:
- "High clarity/sharpness"
- "Minimal grain"
- "Code syntax color preservation"
creative_clay:
lut_profile: "warm_creative"
color_temperature: "warm" # 6000K
saturation: 1.15 # Rich, punchy
contrast: 1.2
highlights:
tint: "#f8fafc"
recovery: 0.85
shadows:
tint: "#0f172a" # charcoal
crush: 0.05
midtones:
tint: "#f97316" # orange_500
balance: 0.08
grade_style: "Bold creative"
mood_keywords: ["distinctive", "memorable", "energetic"]
special_processing:
- "Gradient color washes"
- "Subtle film grain (1.5%)"
- "Warm highlight bloom"
blueprint_technical:
lut_profile: "technical_neutral"
color_temperature: "daylight" # 5500K
saturation: 0.85 # Slightly desaturated for clarity
contrast: 1.05
highlights:
tint: "#f8fafc"
recovery: 0.9
shadows:
tint: "#334155" # slate_700
lift: 0.05
midtones:
tint: "#2563eb" # sbk_blue for accents
balance: 0
grade_style: "Technical documentation"
mood_keywords: ["educational", "clear", "instructional"]
special_processing:
- "High clarity for text readability"
- "Edge enhancement for diagrams"
- "Consistent exposure across clips"
Lower Thirds, Titles & Transitions by Variant¶
lower_thirds_by_variant:
trusted_advisor:
style: "professional_bar"
background:
color: "{{sbk_blue}}" # #2563eb
opacity: 0.95
blur: "none"
text:
primary_color: "#ffffff"
secondary_color: "rgba(255,255,255,0.8)"
font: "{{font_primary}}"
name_weight: "{{weight_semibold}}"
title_weight: "{{weight_regular}}"
accent:
style: "left_bar"
color: "{{sbk_sky}}" # #0ea5e9
width: "4px"
animation:
entrance: "slide_right"
exit: "fade_out"
duration: "500ms"
dimensions:
height: "80px"
max_width: "400px"
margin_bottom: "48px"
modern_partner:
style: "floating_card"
background:
color: "#ffffff"
opacity: 0.95
blur: "8px"
radius: "{{radius_xl}}"
text:
primary_color: "{{slate_900}}"
secondary_color: "{{teal_600}}"
font: "{{font_primary}}"
name_weight: "{{weight_semibold}}"
title_weight: "{{weight_regular}}"
accent:
style: "gradient_border"
from: "{{teal_500}}"
to: "{{cyan_500}}"
width: "2px"
animation:
entrance: "float_up"
exit: "float_down"
duration: "450ms"
dimensions:
height: "auto"
padding: "16px 24px"
margin_bottom: "40px"
bold_challenger:
style: "sharp_block"
background:
color: "{{slate_900}}"
opacity: 1.0
blur: "none"
text:
primary_color: "#ffffff"
secondary_color: "{{orange_500}}"
font: "{{font_display}}"
name_weight: "{{weight_bold}}"
title_weight: "{{weight_medium}}"
accent:
style: "top_line"
color: "{{orange_600}}"
height: "3px"
animation:
entrance: "snap_in"
exit: "snap_out"
duration: "300ms"
dimensions:
height: "72px"
max_width: "450px"
margin_bottom: "40px"
cyber_shield:
style: "tactical_hud"
background:
color: "rgba(10, 10, 11, 0.9)"
opacity: 0.9
blur: "4px"
border: "1px solid {{red_600}}"
text:
primary_color: "#fafafa"
secondary_color: "{{red_500}}"
font: "{{font_mono}}"
name_weight: "{{weight_semibold}}"
title_weight: "{{weight_regular}}"
accent:
style: "corner_brackets"
color: "{{red_600}}"
glow: "0 0 8px rgba(220, 38, 38, 0.5)"
animation:
entrance: "glitch_in"
exit: "scan_out"
duration: "250ms"
special:
scan_line: true
flicker: "subtle"
dimensions:
height: "64px"
max_width: "380px"
margin_bottom: "36px"
sentinel_guard:
style: "glowing_card"
background:
color: "rgba(17, 17, 19, 0.9)"
opacity: 0.9
blur: "12px"
radius: "{{radius_lg}}"
text:
primary_color: "#fafafa"
secondary_color: "{{purple_400}}"
font: "{{font_primary}}"
name_weight: "{{weight_semibold}}"
title_weight: "{{weight_regular}}"
accent:
style: "gradient_glow"
from: "{{purple_600}}"
to: "{{violet_600}}"
glow_radius: "16px"
glow_opacity: 0.4
animation:
entrance: "emerge_glow"
exit: "fade_glow"
duration: "400ms"
dimensions:
height: "auto"
padding: "14px 22px"
margin_bottom: "44px"
clean_developer:
style: "minimal_clean"
background:
color: "#ffffff"
opacity: 0.98
blur: "none"
radius: "{{radius_lg}}"
shadow: "{{shadow_sm}}"
text:
primary_color: "{{slate_900}}"
secondary_color: "{{indigo_600}}"
font: "{{font_primary}}"
name_weight: "{{weight_semibold}}"
title_weight: "{{weight_regular}}"
accent:
style: "left_indicator"
color: "{{indigo_600}}"
width: "3px"
animation:
entrance: "fade_slide"
exit: "fade_out"
duration: "200ms"
dimensions:
height: "auto"
padding: "12px 20px"
margin_bottom: "32px"
creative_clay:
style: "bold_floating"
background:
color: "{{slate_900}}"
opacity: 0.95
blur: "none"
radius: "{{radius_2xl}}"
text:
primary_color: "#ffffff"
secondary_color: "{{orange_500}}"
font: "{{font_display}}"
name_weight: "{{weight_bold}}"
title_weight: "{{weight_medium}}"
accent:
style: "blob_background"
colors: ["{{orange_500}}", "{{amber_500}}"]
blur: "40px"
opacity: 0.2
animation:
entrance: "spring_up"
exit: "spring_down"
duration: "400ms"
dimensions:
height: "auto"
padding: "16px 28px"
margin_bottom: "48px"
blueprint_technical:
style: "annotation_label"
background:
color: "#ffffff"
opacity: 0.95
blur: "none"
radius: "{{radius_md}}"
border: "1px solid {{slate_300}}"
text:
primary_color: "{{slate_900}}"
secondary_color: "{{slate_600}}"
font: "{{font_primary}}"
name_weight: "{{weight_semibold}}"
title_weight: "{{weight_regular}}"
accent:
style: "pointer_line"
color: "{{sbk_blue}}"
line_style: "dashed"
animation:
entrance: "draw_in"
exit: "fade_out"
duration: "600ms"
special:
pointer_arrow: true
step_number: true
dimensions:
height: "auto"
padding: "10px 16px"
margin_bottom: "24px"
Title Treatments by Variant¶
title_treatments_by_variant:
trusted_advisor:
main_title:
font: "{{font_primary}}"
weight: "{{weight_semibold}}"
size: "text_5xl"
color: "{{slate_900}}"
tracking: "{{tracking_tight}}"
subtitle:
font: "{{font_primary}}"
weight: "{{weight_regular}}"
size: "text_xl"
color: "{{slate_600}}"
animation: "fade_reveal"
background: "subtle_gradient"
modern_partner:
main_title:
font: "{{font_display}}"
weight: "{{weight_semibold}}"
size: "text_5xl"
color: "{{teal_600}}"
tracking: "{{tracking_tight}}"
subtitle:
font: "{{font_primary}}"
weight: "{{weight_regular}}"
size: "text_xl"
color: "{{slate_600}}"
animation: "organic_reveal"
background: "warm_gradient"
bold_challenger:
main_title:
font: "{{font_display}}"
weight: "{{weight_bold}}"
size: "text_6xl"
color: "{{slate_900}}"
tracking: "{{tracking_tighter}}"
subtitle:
font: "{{font_primary}}"
weight: "{{weight_medium}}"
size: "text_xl"
color: "{{orange_600}}"
animation: "snap_reveal"
background: "color_block"
cyber_shield:
main_title:
font: "{{font_display}}"
weight: "{{weight_bold}}"
size: "text_5xl"
color: "#fafafa"
tracking: "{{tracking_tight}}"
glow: "0 0 20px rgba(220, 38, 38, 0.4)"
subtitle:
font: "{{font_mono}}"
weight: "{{weight_regular}}"
size: "text_lg"
color: "{{red_500}}"
animation: "glitch_reveal"
background: "dark_grid"
sentinel_guard:
main_title:
font: "{{font_display}}"
weight: "{{weight_semibold}}"
size: "text_5xl"
color: "#fafafa"
tracking: "{{tracking_normal}}"
gradient: "linear-gradient(135deg, {{purple_400}}, {{violet_400}})"
subtitle:
font: "{{font_primary}}"
weight: "{{weight_regular}}"
size: "text_xl"
color: "{{purple_300}}"
animation: "neural_reveal"
background: "dark_gradient"
clean_developer:
main_title:
font: "{{font_primary}}"
weight: "{{weight_semibold}}"
size: "text_5xl"
color: "{{slate_900}}"
tracking: "{{tracking_tight}}"
subtitle:
font: "{{font_mono}}"
weight: "{{weight_regular}}"
size: "text_lg"
color: "{{indigo_600}}"
animation: "clean_fade"
background: "minimal_white"
creative_clay:
main_title:
font: "{{font_display}}"
weight: "{{weight_bold}}"
size: "text_7xl"
color: "{{slate_900}}"
tracking: "{{tracking_tighter}}"
gradient_text: true
subtitle:
font: "{{font_primary}}"
weight: "{{weight_medium}}"
size: "text_xl"
color: "{{orange_600}}"
animation: "spring_reveal"
background: "blob_gradient"
blueprint_technical:
main_title:
font: "{{font_primary}}"
weight: "{{weight_semibold}}"
size: "text_4xl"
color: "{{slate_900}}"
tracking: "{{tracking_tight}}"
subtitle:
font: "{{font_primary}}"
weight: "{{weight_regular}}"
size: "text_lg"
color: "{{slate_600}}"
chapter_number:
font: "{{font_mono}}"
weight: "{{weight_bold}}"
size: "text_sm"
color: "{{sbk_blue}}"
animation: "draw_reveal"
background: "grid_technical"
Transitions by Variant¶
transitions_by_variant:
trusted_advisor:
primary: "cross_dissolve"
secondary: "push_soft"
emphasis: "fade_through_white"
duration: "600ms"
easing: "ease_smooth"
modern_partner:
primary: "morph_blend"
secondary: "organic_wipe"
emphasis: "flow_through"
duration: "550ms"
easing: "ease_out"
bold_challenger:
primary: "hard_cut"
secondary: "block_wipe"
emphasis: "color_flash"
duration: "300ms"
easing: "ease_in_out"
cyber_shield:
primary: "glitch_cut"
secondary: "scan_wipe"
emphasis: "data_stream"
duration: "250ms"
easing: "linear"
special: "red_flash_frame"
sentinel_guard:
primary: "neural_dissolve"
secondary: "gradient_wipe"
emphasis: "glow_transition"
duration: "500ms"
easing: "ease_smooth"
clean_developer:
primary: "fade"
secondary: "slide"
emphasis: "fade_white"
duration: "200ms"
easing: "ease_out"
creative_clay:
primary: "morph_blob"
secondary: "spring_wipe"
emphasis: "gradient_sweep"
duration: "500ms"
easing: "ease_bounce"
blueprint_technical:
primary: "cross_dissolve"
secondary: "reveal_draw"
emphasis: "zoom_to_detail"
duration: "350ms"
easing: "ease_in_out"
special: "annotation_hold"
Specialized Video Types¶
Blueprint Technical (Technical Explainer Videos)¶
blueprint_technical_video:
purpose: "Technical explainer videos with annotation overlays"
structure:
intro_sequence:
duration: "5-8 seconds"
elements:
- "Topic title with chapter number"
- "Technical grid background reveal"
- "Subject preview with annotation markers"
explanation_segments:
duration: "30-90 seconds each"
elements:
- "Component isolation (dim surrounding)"
- "Zoom to detail with smooth ease"
- "Annotation pointer animations"
- "Step numbering overlays"
- "Measurement/specification callouts"
summary_sequence:
duration: "10-15 seconds"
elements:
- "Quick recap of key points"
- "All annotations visible"
- "CTA for next steps"
overlay_system:
annotation_pointers:
style: "line_with_dot"
line_color: "{{sbk_blue}}"
dot_color: "{{sbk_sky}}"
line_style: "dashed"
animation: "draw_from_dot"
duration: "800ms"
callout_boxes:
background: "rgba(255, 255, 255, 0.95)"
border: "1px solid {{slate_300}}"
radius: "{{radius_md}}"
shadow: "{{shadow_sm}}"
arrow: true
step_indicators:
shape: "circle"
size: "32px"
background: "{{sbk_blue}}"
text_color: "#ffffff"
font: "{{font_primary}}"
weight: "{{weight_semibold}}"
measurement_lines:
color: "{{slate_400}}"
style: "dashed"
end_caps: "arrow"
value_background: "#ffffff"
value_color: "{{slate_700}}"
highlight_regions:
border: "2px solid {{sbk_blue}}"
background: "rgba(37, 99, 235, 0.1)"
animation: "pulse_subtle"
zoom_controls:
zoom_levels: [1.0, 1.5, 2.0, 3.0]
transition_duration: "700ms"
easing: "ease_in_out"
vignette_on_zoom: true
annotation_scale: "fixed" # Annotations don't scale with zoom
prompt_template: |
[STYLE: BLUEPRINT TECHNICAL]
Color palette: Clean whites with SBK blue (#2563eb) annotation accents.
Light mode: Professional documentation aesthetic.
Mood: Educational, instructional, clear, precise.
[MOTION STYLE]
Pacing: Slow, educational tempo (adagio).
Transitions: Cross-dissolves with zoom reveals.
Annotations: Draw-in animations with pointer lines.
[OVERLAY REQUIREMENTS]
Include: Annotation pointers, step numbers, callout boxes.
Grid: Subtle technical grid in background.
Typography: Clear hierarchy, readable at all sizes.
[SPECIFICATIONS]
Resolution: 1920x1080 or 4K.
Frame rate: 30fps for smooth zooms.
Audio: Clear voice-over, subtle ambient music.
Cyber Shield (Security/Threat Visualization Videos)¶
cyber_shield_video:
purpose: "Security and threat visualization videos"
structure:
threat_intro:
duration: "3-5 seconds"
elements:
- "Alert indicator flash"
- "Threat level display"
- "Grid/radar activation"
threat_analysis:
duration: "30-120 seconds"
elements:
- "Attack vector visualization"
- "Data stream animations"
- "Timeline progression"
- "Impact assessment metrics"
defense_response:
duration: "20-60 seconds"
elements:
- "Protection activation"
- "Threat mitigation visualization"
- "Status change indicators"
resolution:
duration: "5-10 seconds"
elements:
- "Threat neutralized confirmation"
- "Security posture summary"
- "CTA for protection"
visual_effects:
scan_lines:
opacity: 0.02
direction: "horizontal"
speed: "1.5s per sweep"
color: "rgba(220, 38, 38, 0.1)"
data_streams:
particle_count: 100
direction: "flowing"
color: "{{red_500}}"
glow: true
speed: "variable"
grid_overlay:
style: "cyber_grid"
line_color: "rgba(220, 38, 38, 0.15)"
node_glow: "on_data"
animation: "pulse_on_threat"
threat_indicators:
shape: "diamond"
color: "{{red_600}}"
pulse: true
glow_radius: "12px"
glitch_effects:
frequency: "on_transition"
intensity: "subtle"
color_shift: "red_green"
duration: "100-200ms"
typography_overlays:
threat_level:
font: "{{font_mono}}"
size: "text_4xl"
color: "{{red_500}}"
animation: "count_up"
status_indicators:
font: "{{font_mono}}"
size: "text_sm"
color: "{{dark_text_secondary}}"
format: "UPPERCASE"
data_readouts:
font: "{{font_mono}}"
size: "text_xs"
color: "{{red_400}}"
animation: "type_stream"
prompt_template: |
[STYLE: CYBER SHIELD]
Color palette: Deep black (#0a0a0b) with threat red (#dc2626) accents.
Dark mode: Always. Security operations center aesthetic.
Mood: Vigilant, tactical, threat-aware, mission-critical.
[MOTION STYLE]
Pacing: Fast, urgent tempo (presto).
Transitions: Glitch cuts, scan wipes.
Animations: Data streams, radar sweeps, threat pulses.
[VISUAL EFFECTS]
Scan lines: Subtle horizontal sweeps (2% opacity).
Glow: Red accent glows on threat indicators.
Grid: Technical cyber grid with corner brackets.
Data: Flowing particle streams, matrix effects.
[SPECIFICATIONS]
Resolution: 1920x1080 or 4K.
Frame rate: 30fps minimum.
Color depth: 10-bit for smooth gradients.
Audio: Tension-building ambient, alert sounds.
[AVOID]
Light backgrounds. Soft aesthetics.
Cartoonish or comic-style effects.
Generic stock footage feel.
Overly bright or harsh neon.
Video & Motion Philosophy¶
SBK video/motion content must: - Command attention in first 3 seconds - Maintain professionalism throughout - Support the message not distract from it - Feel contemporary without being trendy - Scale efficiently across platforms - Align with active variant design system
Video Content Types¶
Explainer Videos¶
[SBK BRAND DNA]
Professional technology consulting. Clear, authoritative, accessible.
[ASSET: VIDEO - EXPLAINER]
Educational video explaining concepts or services.
[SPECIFICATIONS]
Duration: 60-180 seconds optimal.
Resolution: 1920x1080 minimum, 4K preferred.
Frame rate: 24-30fps.
Audio: Professional voice-over, subtle music.
[STRUCTURE]
Hook (0-10s): Problem or intriguing question.
Problem (10-30s): Pain point detailed.
Solution (30-90s): How we address it.
Proof (90-120s): Results, testimonials.
CTA (120-150s): Clear next step.
End card (150-180s): Logo, contact.
[STYLE]
Clean motion graphics.
Branded color palette.
Professional icons and illustrations.
Smooth transitions.
Subtle sound design.
[VOICE-OVER]
Tone: Confident, warm, professional.
Pace: Measured, not rushed.
Emphasis: Key phrases highlighted visually.
[AVOID]
Cheap stock footage.
Overly complex animations.
Rushed pacing.
Jarring transitions.
Testimonial Videos¶
[ASSET: VIDEO - TESTIMONIAL]
Client success story video.
[SPECIFICATIONS]
Duration: 60-120 seconds.
Resolution: 1920x1080 minimum.
Interview style or narrative.
[STRUCTURE]
Intro (0-10s): Client intro, problem setup.
Challenge (10-30s): What they faced.
Solution (30-60s): Working with SBK.
Results (60-90s): Specific outcomes.
Recommendation (90-120s): Endorsement.
[PRODUCTION]
Quality lighting (three-point).
Clean audio (lavalier or boom).
B-roll of client environment.
Graphics for key statistics.
Lower thirds for identification.
[B-ROLL SUGGESTIONS]
- Client office/workplace
- Team collaboration
- Technology in use
- Relevant industry context
[AVOID]
Script-reading feel.
Poor audio quality.
Distracting backgrounds.
Missing context.
Social Video Clips¶
[ASSET: VIDEO - SOCIAL CLIP]
Short-form social media video.
[SPECIFICATIONS]
Duration: 15-60 seconds.
Aspect ratios:
- 1:1 (square) for LinkedIn/Instagram feed
- 9:16 (vertical) for Stories/Reels/TikTok
- 16:9 (horizontal) for YouTube/Twitter
Resolution: 1080p minimum.
[TYPES]
Tip of the day: Quick insight, 15-30s.
Quote graphic: Animated quote, 10-15s.
Stat highlight: Animated statistic, 15-20s.
Teaser: Longer content preview, 30-60s.
Behind-the-scenes: Authentic moment, 15-60s.
[OPTIMIZATION]
Silent-friendly: Captions always.
Hook: First 3 seconds critical.
Loop consideration: Seamless endings.
Thumbnail: First frame compelling.
[AVOID]
Slow intros.
Missing captions.
Landscape-only thinking.
Webinar/Event Videos¶
[ASSET: VIDEO - WEBINAR]
Webinar recording and promotional video.
[SPECIFICATIONS]
Duration: 30-60 minutes (recording).
Promo clip: 30-90 seconds.
Resolution: 1920x1080.
[PRODUCTION ELEMENTS]
Intro sequence: 5-10 seconds branded.
Lower thirds: Speaker identification.
Slide integration: Smooth transitions.
Outro: CTA + next event promo.
[POST-PRODUCTION]
Cut dead air.
Add chapter markers.
Create highlight clips.
Optimize for on-demand.
[PROMO CLIP]
Key insight moments.
Speaker highlights.
Value proposition clear.
Registration/viewing CTA.
Motion Graphics Elements¶
Logo Animation¶
[ASSET: MOTION - LOGO]
Animated logo for video intros/outros.
[SPECIFICATIONS]
Duration: 2-5 seconds.
Export: MP4 + transparent MOV.
Resolution: 1920x1080 + 4K.
[VARIANTS]
Full: Complete logo animation.
Short: Quick 2-second version.
Stinger: 1-second quick hit.
Loop: Continuous subtle motion.
[ANIMATION STYLE]
Elegant, not flashy.
Smooth easing.
Elements reveal progressively.
Sound design: Subtle, professional.
[AVOID]
Overly complex animations.
Loud audio stings.
Generic templates.
Kinetic Typography¶
[ASSET: MOTION - TYPOGRAPHY]
Animated text for emphasis.
[SPECIFICATIONS]
Duration: Varies by content.
Style: Match brand typography.
[TYPES]
Quote animation: Key phrase reveal.
Statistic reveal: Number + context.
List animation: Points appearing.
Title sequence: Video title treatment.
[ANIMATION PRINCIPLES]
Hierarchy: Important words emphasized.
Timing: Match audio if voice-over.
Motion: Purposeful, not random.
Easing: Smooth, professional curves.
[AVOID]
Too many different motions.
Fighting with voice-over.
Unreadable speed.
Lower Thirds¶
[ASSET: MOTION - LOWER THIRD]
Speaker/subject identification.
[SPECIFICATIONS]
Safe margin: 10% from bottom.
Duration: 4-6 seconds.
Animation: Smooth in/out.
[ANATOMY]
Primary: Name.
Secondary: Title/Company.
Accent: Brand element.
Background: Subtle, legible.
[VARIANTS]
Standard: Name + title.
Extended: Name + title + details.
Minimal: Name only.
Social: With handle/contact.
[STYLING]
Background: Semi-transparent or solid brand.
Typography: Inter family.
Animation: Slide or fade, consistent.
Transition Library¶
[ASSET: MOTION - TRANSITIONS]
Scene transition animations.
[TYPES]
Fade: Simple dissolve between scenes.
Wipe: Directional reveal.
Push: Scene pushes previous.
Zoom: Camera movement effect.
Brand: Branded element sweep.
[SPECIFICATIONS]
Duration: 0.5-1.5 seconds.
Consistent: Same throughout video.
Purposeful: Match content change.
[AVOID]
Star wipes and cheesy effects.
Inconsistent transitions.
Overuse of complex transitions.
Data Animation¶
[ASSET: MOTION - DATA]
Animated charts and statistics.
[SPECIFICATIONS]
Duration: 3-8 seconds per data point.
Progressive reveal: Build-up effect.
[TYPES]
Counter: Numbers counting up.
Bar reveal: Bars growing.
Line draw: Line being drawn.
Pie reveal: Segments appearing.
Gauge fill: Progress filling.
[PRINCIPLES]
Reveal data progressively.
Pause on key numbers.
Highlight important values.
Maintain readability.
[TIMING]
Fast enough to maintain interest.
Slow enough to comprehend.
Key numbers held longer.
Video Templates¶
Intro Sequence¶
[ASSET: VIDEO - INTRO]
Standard video opening sequence.
[DURATION]
5-10 seconds.
[ELEMENTS]
Logo animation.
Topic/title treatment.
Subtle music swell.
Transition to content.
[VARIANTS]
Webinar intro.
Case study intro.
Series intro.
Quick tip intro.
Outro Sequence¶
[ASSET: VIDEO - OUTRO]
Standard video closing sequence.
[DURATION]
10-15 seconds.
[ELEMENTS]
Thank you/summary.
CTA: What to do next.
Logo animation.
Contact/social info.
Subscribe/follow prompt.
[VARIANTS]
Standard: Logo + CTA.
Extended: Multiple CTAs.
Series: Next video teaser.
Webinar: Q&A transition.
End Cards¶
[ASSET: VIDEO - END CARD]
YouTube end screen or equivalent.
[SPECIFICATIONS]
Duration: 15-20 seconds.
YouTube: Safe zones for elements.
[LAYOUT]
Video suggestions: Clickable areas.
Subscribe button: Placement.
Logo/branding: Prominent.
CTA: Clear action.
[AVOID]
Cluttered design.
Important info in overlap zones.
Missing CTAs.
Platform Optimization¶
YouTube¶
youtube_specs:
resolution: "1920x1080 minimum, 4K preferred"
frame_rate: "24-60fps"
format: "MP4 H.264"
audio: "AAC, 48kHz, stereo"
thumbnails:
size: "1280x720"
format: "JPG, PNG"
max_size: "2MB"
chapters:
timestamps: "Include in description"
visual_markers: "Consistent chapter breaks"
cards_end_screens:
end_screen_zone: "Last 20 seconds"
card_placement: "After key moments"
LinkedIn¶
linkedin_specs:
video_length: "30 seconds - 5 minutes (optimal: 60-90s)"
aspect_ratio: "1:1, 4:5, 16:9"
max_file_size: "5GB"
captions: "Required (auto-play muted)"
native_video:
better_reach: true
upload_direct: true
Instagram/TikTok¶
vertical_specs:
aspect_ratio: "9:16"
resolution: "1080x1920"
duration:
reels: "15-90 seconds"
stories: "15 seconds per"
tiktok: "15-60 seconds optimal"
optimization:
hook: "First 1-3 seconds"
captions: "Built into video"
trending_audio: "Consider carefully"
Audio Guidelines¶
Voice-Over¶
voice_over:
tone: "Warm, professional, confident"
pace: "140-160 words per minute"
delivery: "Conversational, not announcer"
recording:
quality: "48kHz, 24-bit minimum"
environment: "Treated room, no reverb"
equipment: "Professional microphone"
processing:
noise_reduction: "Subtle"
compression: "Moderate"
eq: "Presence boost, low cut"
Music¶
music:
style: "Corporate ambient, not generic"
energy: "Match content energy"
licensing:
source: "Premium stock or original"
rights: "Commercial use cleared"
mixing:
bed_level: "-20 to -30dB under VO"
transitions: "Fade with video transitions"
endings: "Resolve naturally"
Sound Design¶
sound_design:
transitions: "Subtle whooshes, not cartoonish"
data_reveal: "Subtle tones or builds"
logo: "Branded audio signature"
style:
professional: true
subtle: true
branded: true
Accessibility¶
Captions¶
captions:
requirement: "All videos must have captions"
styling:
font: "Sans-serif, readable"
size: "Large enough for mobile"
contrast: "High contrast background"
accuracy:
review: "Human review required"
speakers: "Identify multiple speakers"
sounds: "[music], [applause], etc."
Audio Description¶
audio_description:
when: "Visual-only information"
style: "Integrated or separate track"
content: "Describe visual elements"
File Management¶
Naming Convention¶
sbk-video-{type}-{topic}-{variant}-{version}-{platform}.{ext}
Examples:
sbk-video-explainer-hipaa-compliance-trusted_advisor-v1-youtube.mp4
sbk-video-testimonial-acme-corp-modern_partner-v2-linkedin.mp4
sbk-video-social-tip-security-cyber_shield-v1-square.mp4
sbk-video-technical-api-overview-blueprint_technical-v1-youtube.mp4
Export Settings¶
export_settings:
web:
format: "MP4 H.264"
audio: "AAC 256kbps"
bitrate: "10-25 Mbps"
social:
format: "MP4 H.264"
audio: "AAC 192kbps"
max_size: "Platform specific"
archive:
format: "ProRes 422 or DNxHD"
audio: "PCM uncompressed"
resolution: "Native"
Quality Checklist¶
Before publishing any video:
- Audio levels balanced
- Captions accurate and timed
- Branding consistent with active variant
- Motion tokens match variant specification
- Color grading matches variant profile
- Lower thirds use correct variant style
- Transitions match variant specification
- No dead air or awkward pauses
- CTA clear and present
- Thumbnail compelling
- Exported for target platform
- Tested on multiple devices
- Accessibility requirements met
- File properly named with variant identifier
- Archived with source files
Last Updated: February 2026 Version: 2.0 (Parameterized Design System Integration)