ScrollySuiteV2 Matched Demo
Canonical Atelier Demo

ScrollySuiteV2 Matched Demo

The same narrative remapped into current ScrollyBuilder Page Builder blocks and Studio Object families.

Lauren B. JenksGenerated through current builder export pathsScrollyBuilder + StoryBeats
Abstract path connecting cards, models, and charts.
Audience experience specification: the previous ScrollySuite demo.

What this demo is preserving

The original page works as a library tour. It starts with explanatory cards, then moves through anchored image/text treatments, model engines, and reveal engines. This rebuild keeps the same pacing logic: each section introduces one visual grammar, then advances through a short sequence of interpretive cards.

Split section introducing image anchored narrative logic.
Image Engine

A visual can anchor the argument.

The old demo uses image-forward treatments to show how a reader can hold one scene while the explanatory text moves. In the current builder this maps to Split, Overlay, Swap, and Sticky Steps.

Abstract image showing one anchored scene with multiple explanatory paths.
Matched to the previous image-and-text pacing.
Swap

The image changes as the explanation changes.

This keeps the prior demo logic: a stable scrolly layout, with visual state changes tied to explanatory cards.

Swap sequence matching the prior demo treatment.
Swap overview: the image changes as each story step becomes active.
Before state abstract visual.
Before: one visible state.
Before

Start with the visible scene.

The audience begins with a simple visual state.

After

Then reveal the changed state.

The same object carries new meaning after the reveal.

Meaning

Name the contrast.

Swap is useful when the story depends on comparison rather than accumulation.

Sticky steps module preserving the previous scrolly pacing.
Sticky steps overview: one image remains visible while the text cards explain it in sequence.
Abstract annotated visual for sticky steps.
One image stays fixed while interpretive cards move.
Frame

Keep the object still.

The audience can inspect the same visual while each card changes the question.

Detail

Point to one feature.

A step isolates a single interpretive move.

Pattern

Turn detail into structure.

The last step names what the viewer now understands.

Nested circles model.
Influence moves across nested layers.IndividualInterpersonalInstitutionalCommunityPolicy

Individual

Start with the person closest to the choice.

Interpersonal

Then show how relationships shape that choice.

Institutions

Structures make some choices easier than others.

Policy

The outer layer changes what is possible at scale.

Pyramid model with layered conditions.
Some conditions build on others.Physiological needsSafety and securityLove and belongingSelf-esteemSelf-Actualization

Start at the base.

The lower layer supports what comes above it.

Move upward.

Each step depends on what has already been established.

Show the whole structure.

The audience sees hierarchy, not just sequence.

Two by two framework for climate choices.
Climate ChangeIndividualCostsIndividual costs: inconvenience, expense, uncertainty.Individual benefits: resilience, savings, agency.Community costs: coordination, investment, tradeoffs.Community benefits: cleaner air, shared safety, collective capacity.

Start with individual costs.

The first quadrant names the friction.

Then name individual benefits.

The second quadrant creates contrast.

Add community costs.

Collective action has real coordination burdens.

End with collective benefits.

The full matrix shows why the frame matters.

Bar chart reveal engine.
Warmest YearsReveal the years, then highlight the pattern.0255075100Average 89201620202021202220232024YearRelative warmthDemo data for treatment verification.

Start with the frame.

A chart first gives the reader a scale.

Reveal the years.

The data becomes a visible comparison.

Highlight the warmest year.

The point is not one bar; it is the recent cluster.

Name the pattern.

Recent years dominate the top of the distribution.

Bell curve reveal engine.
Small Shifts MatterA bell curve shows how tails change.LowerAverageHigherIllustrative distribution.

Start with the distribution.

The baseline makes variation visible.

Then shift the mean.

A small average shift changes the tails.

The meaning is scale.

Population scale turns small shifts into large consequences.

Line chart reveal engine.
Possible FuturesTwo paths create a space for agency.020395978High pathwayLower pathwayYearOutcomeDemo pathway values.

First, reveal one possible future.

The first line gives the audience a trajectory.

Then reveal another future.

The second line turns forecast into choice.

Rename the gap.

The space between paths is collective capacity.

Loop reveal engine.
A loop can trap possibility.Feedback loops turn sequence into system behavior.Collective powerCyclereducesweakensunderminesfeeds backInstabilityInstabilityReducedcapacityReduced capacityLess workingtogetherLess working togetherLess supportLess support

Loop

Start with a loop.

The point is circular causality.

Loop

Instability reduces capacity.

One condition changes what people can do next.

Loop

Reduced capacity weakens coordination.

The next condition feeds the loop.

Loop

But loops can reverse.

Intervention can make a different cycle easier.

Pie chart reveal engine.
Shared ResponsibilityThe whole becomes meaningful when the slices are grouped.TotalLegendTransportation (29)Electricity (25)Industry (23)Buildings (13)Other (10)Illustrative sector shares.

Start with the whole.

A pie first says this is one shared total.

Reveal the sectors.

The whole becomes a distribution.

Highlight the largest sector.

The biggest slice gets attention first.

Group the biggest slices.

The top three carry most of the story.

Timeline reveal engine showing climate knowledge accumulation.
Climate Knowledge TimelineSequence becomes structure.1856Foote1859Tyndall1896Arrhenius1938Callendar1958Keeling Curve1988IPCC1992UNFCCC2015ParisNowActionPrototype timeline: verify dates/details before publication.

Start with time.

A timeline gives the reader sequence. Reveal adds interpretation.

Reveal the full timeline.

The point is the long accumulation of climate knowledge.

Cluster the early science.

Foote, Tyndall, and Arrhenius belong to experiments and theory.

Then measurement changes the story.

The Keeling Curve made atmospheric CO2 visible as a rising record.

Science enters institutions.

The timeline shifts into assessment, negotiation, and international agreements.

Name the pattern.

Evidence has been accumulating for generations.

End of demo

Use this file as a showcase, accessibility check page, and regression reference for the canonical builder paths. The scroll experience preserves the old demo sequence; the exact visual drawing language is interpreted through current supported modules.