Skip to content
Experience Design / Scroll Storytelling

An immersive website experience where scrolling controls time across a cinematic flight through the SYDA world, with frame-perfect holds for strategy, automation, design and software.

Year

2026

Status

Live

Creative DevelopmentVideo ScrubbingScroll StorytellingReactExperience Design
SYDA / SCROLL WORLD

Scroll controls time

Scroll engine adapted from scroll-world · MIT

Challenge

Most agency websites merely describe digital capability. This reference needed the website itself to demonstrate how storytelling, art direction, interaction design, performance and engineering can come together as one distinctive experience.

Solution

SYDA Scroll World combines a ten-second camera flight with a React-based scroll-scrub engine. Scroll progress moves the film frame by frame in either direction. At four curated points, an exact frame extracted from the video takes over: the background remains visibly crisp while the relevant message zooms into the space. The film then resumes from the identical frame without a visible jump. The architecture adapts the robust principles of the MIT-licensed scroll-world repository and adds reduced motion, responsive crops and crawlable content.

Impact

  • An interactive brand reference instead of a static portfolio screenshot
  • A seamless sequence of video scrubbing, exact hold frames and text zooms
  • A responsive, accessible and SEO-ready scroll experience
Workflow

From film to controllable brand world.

The experience combines a cinematic camera flight, frame-perfect handoffs and a performant scroll timeline for desktop and mobile.

  1. 01

    Film timeline

    The camera flight is divided into four narrative chapters without physically splitting the video into separate clips.

  2. 02

    Frame handoffs

    Every hold uses the exact extracted final video frame, allowing film and crisp still to switch without a visible jump.

  3. 03

    Scroll engine

    A normalised timeline maps scroll progress to video time, hold phases, chapter state and direct navigation.

  4. 04

    Text choreography

    While the background remains perfectly still and sharp, each message zooms into the space and clears before the flight continues.

  5. 05

    Responsive choreography

    Mobile layouts use a longer scroll run, crop-safe focal points and copy designed for smaller viewports.

  6. 06

    Accessibility & SEO

    Reduced motion, semantic content, keyboard navigation and crawlable copy keep the experience useful beyond animation.

Planning something similar?

Discuss your project