ARForge Labs · Component demo

A demo that narrates itself as you scroll

Keep scrolling. Each chapter swaps the screen, shifts the accent colour, and advances the progress line in step with the words. The screen stays put while the story moves past it.

Chapter 1 of 4
  1. 01Step 01

    Capture the idea

    Turn scattered thoughts into a clear starting point.

  2. 02Step 02

    Shape the plan

    Give every task a place, an owner, and a next step.

  3. 03Step 03

    Keep work moving

    See progress and spot what needs your attention.

  4. 04Step 04

    Share the outcome

    Bring the team together around what comes next.

Secondary test zone

Two more copies of the component. The first proves each instance tracks its own scroll independently. The second sits in a 520 px container to show it switches to the stacked card layout on its own width, not the window width. Device side, frame, transition, fonts and chapter list are edited in the component’s property panel.

Chapter 1 of 4
  1. 01Step 01

    Capture the idea

    Turn scattered thoughts into a clear starting point.

  2. 02Step 02

    Shape the plan

    Give every task a place, an owner, and a next step.

  3. 03Step 03

    Keep work moving

    See progress and spot what needs your attention.

  4. 04Step 04

    Share the outcome

    Bring the team together around what comes next.

Chapter 1 of 4
  1. 01Step 01

    Capture the idea

    Turn scattered thoughts into a clear starting point.

  2. 02Step 02

    Shape the plan

    Give every task a place, an owner, and a next step.

  3. 03Step 03

    Keep work moving

    See progress and spot what needs your attention.

  4. 04Step 04

    Share the outcome

    Bring the team together around what comes next.

That’s the whole loop

Scroll back up — the screen, accent, and progress line rewind exactly the same way. Nothing plays in a queue.

Create a free website with Framer, the website builder loved by startups, designers and agencies.