Start with the problem.
Set the audience’s point of view before moving into detail.
See spatial storytelling in action.
Use the controls or arrow keys to focus each scene. The strongest layouts create meaningful movement between ideas rather than motion for its own sake.
Reveal the pattern.
Use a change of direction to mark a meaningful shift.
Zoom into the answer.
Scale communicates importance when it is used deliberately.
Connect everything.
Finish by showing how the journey fits together.
Layout patterns
Six structures that work well.
Linear journey
Move in one clear direction. Best for timelines, processes, and step-by-step tutorials.
Zoom hierarchy
Start with the big picture, zoom into details, then return to the overview for synthesis.
Branching map
Place one central idea in the middle and explore connected themes in different directions.
Orbit structure
Rotate around a shared subject to compare perspectives, teams, features, or scenarios.
Depth reveal
Use the z-axis sparingly to reveal layers of a system, argument, or visual composition.
Final overview
End with a scaled-out step that visually connects every scene in the presentation.
Design rule
Motion should carry meaning.
Use movement to signal a change in topic, importance, time, scale, or relationship. When the movement has no narrative purpose, a simple transition is usually stronger.
<!-- Establish context -->
<section class="step" data-x="0" data-y="0">
Problem
</section>
<!-- Move right: progression -->
<section class="step" data-x="1300" data-y="0">
Insight
</section>
<!-- Move down: new chapter -->
<section class="step" data-x="1300" data-y="1000">
Solution
</section>
<!-- Zoom out: synthesis -->
<section class="step" data-x="650" data-y="500" data-scale="4">
Overview
</section>