Case study
Project Mars Scroll-driven mission timeline
DayNight Studio built Project Mars to push our own scroll-scrubbed canvas work: a public demo of cinematic motion for prospects who ask "can you do Apple-style scroll?"
View live demo
daynight.co.uk
Studio concept showcase · Not a client build
(01)The problem, in their words
Prospects ask for scroll-driven product stories but portfolios only show static screenshots. We needed a live demo that proves we can ship frame-by-frame scroll animation, not just talk about it.
Internal studio brief, 2026
(02)What DayNight Studio built
- Interactive scroll timeline: spacecraft departure, deep-space cruise, atmospheric entry and touchdown, frames tied to scroll position.
- Canvas-based rendering with performance tuning for desktop and reduced-motion fallback.
- Cinematic UI typography and staging around the animation sequence.
- Hosted as a public concept demo at /space-showcase/.
(03)Stack & delivery
Timeline: 2 weeks. Single studio team: design, engineering and AI integration in one engagement.
Canvas animation
Scroll-scrub engine
Custom CSS
Vanilla JS
Static hosting
(04)What changed
2 wks
Internal concept to public demo
Scroll
Full mission timeline scrubbed frame-by-frame against scroll
Demo
Used in sales conversations for motion-heavy brand and product launches
(05)In their words
“Project Mars exists so we do not have to explain scroll animation in a deck. Open the demo, scroll once, and the capability is obvious.”