CynRov

MOTION GRAPHICS PRODUCER CYNTHIA ROVIRA

SpaceX Onsite Presentation · August 12th, 2026.

Cynthia Rovira

Art Director & Motion Producer

8+ years designing visual systems, 3D motion, and product launches for global tech & hardware brands.

Selected Work & Collaborations:

Roland Corporation, Renpho, Galaxias 3D Study, Jem Revival.

Obsessed with 3D procedural workflows, visual storytelling, and space exploration

Deliverables

Animated Infographic

Ship Catch · Starship Flight 5

Animated Infographic

Ship Catch · Starship Flight 5 — Updated

Flight Narrative & Context

Primary Reference & Research: Analyzed official webcast footage of Starship Flight 5 to accurately map timing, staging mechanics, and vessel orientation.
Historic Milestone Anchor: Modeled after Starship Flight 5 (Oct 13, 2024)—the historic first successful booster catch by Mechazilla.
Format & Web Performance: Lottie (.json) chosen for native web compatibility, zero GPU overhead, and ultra-lightweight vector delivery (<150KB).
Two-Part Narrative: Bridges current flight achievements (booster catch) with the broader multiplanetary mission profile (Ship splashdown).

Flight Narrative & Context

Primary Reference & Research: Analyzed official webcast footage of Starship Flight 5 to accurately map timing, staging mechanics, and vessel orientation.
Historic Milestone Anchor: Modeled after Starship Flight 5 (Oct 13, 2024)—the historic first successful booster catch by Mechazilla.
Format & Web Performance: Lottie (.json) chosen for native web compatibility, zero GPU overhead, and ultra-lightweight vector delivery (<150KB).
Two-Part Narrative: Bridges current flight achievements (booster catch) with the broader multiplanetary mission profile (Ship splashdown).

Design & Pipeline Decisions

SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.
Contextual UI Placement: Re-anchored callout text from the top-left corner closer to the vehicles to tighten spatial reading and maintain immediate visual focus during fast maneuvers.
Technical Accuracy: Fully represents both landing architectures—Booster tower catch at Starbase alongside the Ship reentry and Indian Ocean splashdown.
Visual Inspiration: Minimalist schematic UI inspired by the Dragon Spacewalk educational infographic style.
Custom Web Integration & Technical Problem-Solving: Bypassed native Framer component rendering glitches with complex vector Trim Paths by implementing a custom code Embed. Connected directly to the CDN .json payload to maintain 100% path fidelity and precise code-level playback control (disabling autoplay for presentation flexibility).

Design & Pipeline Decisions

SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.
Contextual UI Placement: Re-anchored callout text from the top-left corner closer to the vehicles to tighten spatial reading and maintain immediate visual focus during fast maneuvers.
Technical Accuracy: Fully represents both landing architectures—Booster tower catch at Starbase alongside the Ship reentry and Indian Ocean splashdown.
Visual Inspiration: Minimalist schematic UI inspired by the Dragon Spacewalk educational infographic style.
Custom Web Integration & Technical Problem-Solving: Bypassed native Framer component rendering glitches with complex vector Trim Paths by implementing a custom code Embed. Connected directly to the CDN .json payload to maintain 100% path fidelity and precise code-level playback control (disabling autoplay for presentation flexibility).

Animated Infographic

Ship Catch — Interactive 3D · Starship Flight 5

Flight Narrative & Context

Primary Reference & Research: Analyzed official webcast footage of Starship Flight 5 to accurately map timing, staging mechanics, and vessel orientation.
Historic Milestone Anchor: Modeled after Starship Flight 5 (Oct 13, 2024) — the historic first successful booster catch by Mechazilla.
Format & Interactivity: Built as a real-time 3D scene (GLB + Three.js) instead of a pre-rendered animation, so viewers control pacing directly through scroll rather than watching a fixed timeline.
Full-Sequence Narrative: Extends past the booster catch to cover the complete mission arc — launch, ascent, stage separation, booster flip, Mechazilla catch, ship apogee, re-entry, and splashdown recovery in the Indian Ocean.

Flight Narrative & Context

Primary Reference & Research: Analyzed official webcast footage of Starship Flight 5 to accurately map timing, staging mechanics, and vessel orientation.
Historic Milestone Anchor: Modeled after Starship Flight 5 (Oct 13, 2024) — the historic first successful booster catch by Mechazilla.
Format & Interactivity: Built as a real-time 3D scene (GLB + Three.js) instead of a pre-rendered animation, so viewers control pacing directly through scroll rather than watching a fixed timeline.
Full-Sequence Narrative: Extends past the booster catch to cover the complete mission arc — launch, ascent, stage separation, booster flip, Mechazilla catch, ship apogee, re-entry, and splashdown recovery in the Indian Ocean.

Design & Pipeline Decisions

Custom GLTF Pipeline: Modeled and animated in Blender, exported as a self-contained .glb with the camera, animation clip, and materials all embedded — no external dependencies at runtime.
Blueprint Aesthetic via Shader, Not Overlay: Achieved the black-fill/white-outline look with an inverted-hull technique (Solidify + rim material) baked into the geometry itself, so it renders correctly in any standard glTF viewer — not a Blender-only visual trick.
Scroll-as-Timeline: Wrote a custom Three.js viewer that maps scroll position to animation time directly, with deliberate holds at each narrative beat so key moments (separation, catch, splashdown) get room to breathe instead of flying past.
Idle Camera Parallax: When the viewer isn't scrolling, subtle mouse-driven parallax is layered on top of the animated camera — cleanly separated from the base animation so the two never fight each other.
Custom Web Integration & Technical Problem-Solving: Bypassed Framer's native embed limitations for real-time WebGL by hosting the viewer independently (Vercel) and connecting it via a direct Embed, preserving full frame-rate control and camera fidelity that a pre-baked video or Lottie export can't match.
SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.

Design & Pipeline Decisions

Custom GLTF Pipeline: Modeled and animated in Blender, exported as a self-contained .glb with the camera, animation clip, and materials all embedded — no external dependencies at runtime.
Blueprint Aesthetic via Shader, Not Overlay: Achieved the black-fill/white-outline look with an inverted-hull technique (Solidify + rim material) baked into the geometry itself, so it renders correctly in any standard glTF viewer — not a Blender-only visual trick.
Scroll-as-Timeline: Wrote a custom Three.js viewer that maps scroll position to animation time directly, with deliberate holds at each narrative beat so key moments (separation, catch, splashdown) get room to breathe instead of flying past.
Idle Camera Parallax: When the viewer isn't scrolling, subtle mouse-driven parallax is layered on top of the animated camera — cleanly separated from the base animation so the two never fight each other.
Custom Web Integration & Technical Problem-Solving: Bypassed Framer's native embed limitations for real-time WebGL by hosting the viewer independently (Vercel) and connecting it via a direct Embed, preserving full frame-rate control and camera fidelity that a pre-baked video or Lottie export can't match.
SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.

Orbital Mechanics Animation

How orbits work · What is SSO and why it matters.

Orbital Mechanics Animation

How orbits work · What is SSO and why it matters. Updated

Flight Narrative & Context

First-Principles Physics: Educational narrative built from first principles with zero assumed knowledge – showing how space inertia operates in the absence of friction.
Five-Scene Structure: A progressive breakdown moving from orbital mechanics (what is an orbit \ orbit types \ latency \ SSO mechanism \ SSO impact).
Strategic Context: Explaining why SpaceX chose LEO deliberately, contrasting high-latency GEO (~600 ms) and MEO (~100 ms) against LEO (~20 ms) for high-speed broadband.
Orbital Mechanics & SSO: Illustrating gravity as a centripetal force that bends the path rather than speed, and explaining Sun-Synchronous Orbits through equatorial bulge torque (1 day precession matching Earth's solar orbit).

Flight Narrative & Context

First-Principles Physics: Educational narrative built from first principles with zero assumed knowledge – showing how space inertia operates in the absence of friction.
Five-Scene Structure: A progressive breakdown moving from orbital mechanics (what is an orbit \ orbit types \ latency \ SSO mechanism \ SSO impact).
Strategic Context: Explaining why SpaceX chose LEO deliberately, contrasting high-latency GEO (~600 ms) and MEO (~100 ms) against LEO (~20 ms) for high-speed broadband.
Orbital Mechanics & SSO: Illustrating gravity as a centripetal force that bends the path rather than speed, and explaining Sun-Synchronous Orbits through equatorial bulge torque (1 day precession matching Earth's solar orbit).

Design & Pipeline Decisions

Gravity & Orbital Framing: Reframed conceptual visuals from "perpetual fall" to precise orbital mechanics ("circles the planet").
Geospatial Pipeline: Integration of a QGIS data processing workflow to structure and extract satellite layers for the Las Vegas urban growth comparison (2016 vs. 2025, scaling from 1,200 km to $1,400 km.
Art Direction & Accessibility: Balancing technical precision (equatorial torque, satellite altitudes) with a universally readable, high-impact visual narrative suited for large-scale environmental and urban monitoring.

Design & Pipeline Decisions

Gravity & Orbital Framing: Reframed conceptual visuals from "perpetual fall" to precise orbital mechanics ("circles the planet").
Geospatial Pipeline: Integration of a QGIS data processing workflow to structure and extract satellite layers for the Las Vegas urban growth comparison (2016 vs. 2025, scaling from 1,200 km to $1,400 km.
Art Direction & Accessibility: Balancing technical precision (equatorial torque, satellite altitudes) with a universally readable, high-impact visual narrative suited for large-scale environmental and urban monitoring.

Data Visualization

106 satellites · Orbital altitude, latency & bandwidth over time.

Data Visualization

106 satellites · Orbital altitude, latency & bandwidth over time. Updated.

Flight Narrative & Context

Multi-Variable Scatter Plot: Chosen to visualize three critical metrics simultaneously – altitude, latency, and bandwidth.
Chronological Progression: A dynamic year counter animates data points over time, making satellite evolution and deployment age a core part of the narrative.
Natural Clustering: Data points are organized to let LEO, MEO, and GEO orbit types emerge naturally through clear spatial distribution.

Flight Narrative & Context

Multi-Variable Scatter Plot: Chosen to visualize three critical metrics simultaneously – altitude, latency, and bandwidth.
Chronological Progression: A dynamic year counter animates data points over time, making satellite evolution and deployment age a core part of the narrative.
Natural Clustering: Data points are organized to let LEO, MEO, and GEO orbit types emerge naturally through clear spatial distribution.

Design & Pipeline Decisions

Expression-Driven Data Pipeline: Built and animated directly inside After Effects using custom expressions to parse and drive data points dynamically based on real-world metrics.
Logarithmic Y-Axis (Altitude): Implemented to clearly separate the massive altitude gaps between LEO, MEO, and GEO constellations.
X-Axis Correlation (Latency): Directly maps signal delay to reveal the physical correlation between orbital height and response time.
Dynamic Sizing (Bandwidth): Dot size scales proportionally to capacity, visually mapping technology improvements over time.
Strict Brand Palette: Executed entirely within SpaceX’s monochromatic guidelines (white and grey tones) to maintain clean technical authority.

Design & Pipeline Decisions

Expression-Driven Data Pipeline: Built and animated directly inside After Effects using custom expressions to parse and drive data points dynamically based on real-world metrics.
Logarithmic Y-Axis (Altitude): Implemented to clearly separate the massive altitude gaps between LEO, MEO, and GEO constellations.
X-Axis Correlation (Latency): Directly maps signal delay to reveal the physical correlation between orbital height and response time.
Dynamic Sizing (Bandwidth): Dot size scales proportionally to capacity, visually mapping technology improvements over time.
Strict Brand Palette: Executed entirely within SpaceX’s monochromatic guidelines (white and grey tones) to maintain clean technical authority.

Deliverables

Animated Infographic

Animated Infographic

Ship Catch · Starship Flight 5

Ship Catch · Starship Flight 5

Animated Infographic

Animated Infographic

Ship Catch · Starship Flight 5 — Updated

Ship Catch · Starship Flight 5 — Updated

Flight Narrative & Context

Primary Reference & Research: Analyzed official webcast footage of Starship Flight 5 to accurately map timing, staging mechanics, and vessel orientation.

Historic Milestone Anchor: Modeled after Starship Flight 5 (Oct 13, 2024)—the historic first successful booster catch by Mechazilla.

Format & Web Performance: Lottie (.json) chosen for native web compatibility, zero GPU overhead, and ultra-lightweight vector delivery (<150KB).

Two-Part Narrative: Bridges current flight achievements (booster catch) with the broader multiplanetary mission profile (Ship splashdown).

Flight Narrative & Context

Primary Reference & Research: Analyzed official webcast footage of Starship Flight 5 to accurately map timing, staging mechanics, and vessel orientation.

Historic Milestone Anchor: Modeled after Starship Flight 5 (Oct 13, 2024)—the historic first successful booster catch by Mechazilla.

Format & Web Performance: Lottie (.json) chosen for native web compatibility, zero GPU overhead, and ultra-lightweight vector delivery (<150KB).

Two-Part Narrative: Bridges current flight achievements (booster catch) with the broader multiplanetary mission profile (Ship splashdown).

Design & Pipeline Decisions

SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.

Contextual UI Placement: Re-anchored callout text from the top-left corner closer to the vehicles to tighten spatial reading and maintain immediate visual focus during fast maneuvers.

Technical Accuracy: Fully represents both landing architectures—Booster tower catch at Starbase alongside the Ship reentry and Indian Ocean splashdown.

Design & Pipeline Decisions

SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.

Contextual UI Placement: Re-anchored callout text from the top-left corner closer to the vehicles to tighten spatial reading and maintain immediate visual focus during fast maneuvers.

Technical Accuracy: Fully represents both landing architectures—Booster tower catch at Starbase alongside the Ship reentry and Indian Ocean splashdown.

Animated Infographic

Animated Infographic

Ship Catch — Interactive 3D · Starship Flight 5

Ship Catch — Interactive 3D · Starship Flight 5

Flight Narrative & Context

Flight Narrative & Context

Design & Pipeline Decisions

Custom GLTF Pipeline: Modeled and animated in Blender, exported as a self-contained .glb with the camera, animation clip, and materials all embedded — no external dependencies at runtime.

Blueprint Aesthetic via Shader, Not Overlay: Achieved the black-fill/white-outline look with an inverted-hull technique (Solidify + rim material) baked into the geometry itself, so it renders correctly in any standard glTF viewer — not a Blender-only visual trick.

Scroll-as-Timeline: Wrote a custom Three.js viewer that maps scroll position to animation time directly, with deliberate holds at each narrative beat so key moments (separation, catch, splashdown) get room to breathe instead of flying past.

Idle Camera Parallax: When the viewer isn't scrolling, subtle mouse-driven parallax is layered on top of the animated camera — cleanly separated from the base animation so the two never fight each other.

SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.

Design & Pipeline Decisions

Custom GLTF Pipeline: Modeled and animated in Blender, exported as a self-contained .glb with the camera, animation clip, and materials all embedded — no external dependencies at runtime.

Blueprint Aesthetic via Shader, Not Overlay: Achieved the black-fill/white-outline look with an inverted-hull technique (Solidify + rim material) baked into the geometry itself, so it renders correctly in any standard glTF viewer — not a Blender-only visual trick.

Scroll-as-Timeline: Wrote a custom Three.js viewer that maps scroll position to animation time directly, with deliberate holds at each narrative beat so key moments (separation, catch, splashdown) get room to breathe instead of flying past.

Idle Camera Parallax: When the viewer isn't scrolling, subtle mouse-driven parallax is layered on top of the animated camera — cleanly separated from the base animation so the two never fight each other.

SpaceX Brand System: Strictly aligned with official SpaceX visual guidelines—utilizing D-DIN typography, stark monochrome UI, and line-art blueprint aesthetics.

Orbital Mechanics Animation

Orbital Mechanics Animation

How orbits work · What is SSO and why it matters.

How orbits work · What is SSO and why it matters.

Orbital Mechanics Animation

Orbital Mechanics Animation

How orbits work · What is SSO and why it matters. Updated

How orbits work · What is SSO and why it matters. Updated

Flight Narrative & Context

First-Principles Physics: Educational narrative built from first principles with zero assumed knowledge – showing how space inertia operates in the absence of friction.

Five-Scene Structure: A progressive breakdown moving from orbital mechanics (what is an orbit \ orbit types \ latency \ SSO mechanism \ SSO impact).

Strategic Context: Explaining why SpaceX chose LEO deliberately, contrasting high-latency GEO (~600 ms) and MEO (~100 ms) against LEO (~20 ms) for high-speed broadband.

Orbital Mechanics & SSO: Illustrating gravity as a centripetal force that bends the path rather than speed, and explaining Sun-Synchronous Orbits through equatorial bulge torque (1 day precession matching Earth's solar orbit).

Flight Narrative & Context

First-Principles Physics: Educational narrative built from first principles with zero assumed knowledge – showing how space inertia operates in the absence of friction.

Five-Scene Structure: A progressive breakdown moving from orbital mechanics (what is an orbit \ orbit types \ latency \ SSO mechanism \ SSO impact).

Strategic Context: Explaining why SpaceX chose LEO deliberately, contrasting high-latency GEO (~600 ms) and MEO (~100 ms) against LEO (~20 ms) for high-speed broadband.

Orbital Mechanics & SSO: Illustrating gravity as a centripetal force that bends the path rather than speed, and explaining Sun-Synchronous Orbits through equatorial bulge torque (1 day precession matching Earth's solar orbit).

Design & Pipeline Decisions

Gravity & Orbital Framing: Reframed conceptual visuals from "perpetual fall" to precise orbital mechanics ("circles the planet").

Geospatial Pipeline: Integration of a QGIS data processing workflow to structure and extract satellite layers for the Las Vegas urban growth comparison (2016 vs. 2025, scaling from 1,200 km to $1,400 km.

Art Direction & Accessibility: Balancing technical precision (equatorial torque, satellite altitudes) with a universally readable, high-impact visual narrative suited for large-scale environmental and urban monitoring.

Design & Pipeline Decisions

Gravity & Orbital Framing: Reframed conceptual visuals from "perpetual fall" to precise orbital mechanics ("circles the planet").

Geospatial Pipeline: Integration of a QGIS data processing workflow to structure and extract satellite layers for the Las Vegas urban growth comparison (2016 vs. 2025, scaling from 1,200 km to $1,400 km.

Art Direction & Accessibility: Balancing technical precision (equatorial torque, satellite altitudes) with a universally readable, high-impact visual narrative suited for large-scale environmental and urban monitoring.

Data Visualization

Data Visualization

106 satellites · Orbital altitude, latency & bandwidth over time.

106 satellites · Orbital altitude, latency & bandwidth over time.

Data Visualization

Data Visualization

106 satellites · Orbital altitude, latency & bandwidth over time. Updated.

106 satellites · Orbital altitude, latency & bandwidth over time. Updated.

Flight Narrative & Context

Custom GLTF Pipeline: Modeled and animated in Blender, exported as a self-contained `.glb` with the camera, animation clip, and materials all embedded — no external dependencies at runtime.

Custom GLTF Pipeline: Modeled and animated in Blender, exported as a self-contained `.glb` with the camera, animation clip, and materials all embedded — no external dependencies at runtime.