Full Module Demo
A live catalog of the standalone ScrollySuite modules, grouped by engine. Each block is authorable through the visible Atelier ScrollyBuilder forms.
Narrative Engine
Text, media, and layout modules that establish pacing before richer interaction begins.
Centered
A centered text beat for slowing the reader down and focusing one core idea.
Good for chapter pausesthesis statementssection openings
Keyboard pass. Text remains readable without motion.Your title here
Centered narrative section with an optional label, a main title, and a supporting paragraph.
FullImage
A full-width image with caption for visual emphasis without scroll mechanics.
Good for large visual momentsplace-settingimage-led transitions
Full-width image module
The image alternative text should describe the meaningful content of the image.
Overlay
A sticky background image with several scrolling cards over one scene.
Good for chapter openingsplace-based storytellingmulti-beat metaphor
How can public health save the planet?
Climate change can cause anxiety.
This story is intended to show a path forward.
How can public health save the planet?
The answer is a way of working: centering justice and strengthening systems.
Communities can become healthier.
Climate adaptation can also create cleaner air, stronger relationships, and safer housing.
Parallax
A dramatic transition section with a moving-feeling background and centered text card.
Good for threshold momentsatmospherechapter breaks
Use parallax when the story needs a visual breath.
Motion-sensitive readers still receive the text.
Split
A two-column text/image layout for direct comparison or paired explanation.
Good for text plus imagequote plus contextside-by-side explanation
Your title here
One column carries the explanation while the other carries the image.
Video
A full-screen video hero section for atmospheric motion behind text.
Good for video hero momentsemotional openingsvisual atmosphere
Use videoHero when motion should create atmosphere.
If no video URL is provided, the module can use a still image as a faithful fallback.
Interactive Engine
Click and scroll modules that let readers choose, open, or pace a sequence.
Buttons
A button-based switcher for changing text without long scrolling.
Good for comparisonsbefore/afteralternate views
Use Buttons to let readers explore alternatives.
This pattern swaps text without leaving the page.
First perspective
This is the first authored state.
Second perspective
This is the second authored state.
Third perspective
This is the third authored state.
Expand
An expandable note for optional definitions, caveats, or technical details.
Good for read-more momentssource notesoptional depth
Open a short deeper explanation
This details block exposes optional explanation through a visible builder form.
Orient
Introduce the object.
Focus
Highlight the relevant part.
Takeaway
State what the audience should carry forward.
RabbitHole
A deeper side exploration without losing the main thread.
Good for side questsdeep contextsupplemental notes
A deeper exploration
Rabbit holes let readers wander without losing the main thread.
A deeper exploration
Use this for references or conceptual detours.
focus
focus
StickySteps
A sticky image with sequential text cards explaining one visual over time.
Good for explaining one imagewalking through a concept
This sticky steps module keeps one image visible.
The image stays put.
This is useful when one image needs several paragraphs of explanation.
The text moves beside it.
Each card explains a different part of the same visual.
This creates pacing.
The reader has time to sit with the visual.
Swap
A sticky visual sequence that changes meaning as the story unfolds.
Good for changing statesprocess sequences
Let the image change as the story unfolds.
Start with the first visual state.
The first card should match the starting image.
Change the image at the right moment.
The image stays anchored while the meaning changes.
End with the final card visible.
The last card creates a landing zone.
Model Engine
Canonical Studio Objects supply durable model data. ScrollyBuilder supplies placement, cards, highlights, and scroll pacing.
Circles
Nested layers authored as a CirclesObject, then highlighted card by card in ScrollyBuilder.
Good for systemsinfluence layersproximity
Circles
Influence moves across nested layers.
- Individual
- Interpersonal
- Institutional
- Community
- Policy
Influence moves across nested layers.
Start with the person closest to the choice.
individualThen widen to the relationships around that person.
interpersonalInstitutions set defaults, rules, and access.
institutionalCommunity norms and resources shape what people can sustain.
communityPolicy changes the outer conditions around everyone.
policyPyramid
Hierarchy levels authored as a PyramidObject, with the broadest layer on the bottom.
Good for levelsfoundationspriorities
Pyramid
Start with the widest foundation.
physiological-needsSafety builds on the basics beneath it.
safety-and-securityConnection sits above stability.
love-and-belongingEsteem narrows the pyramid further.
self-esteemThe top layer is the most specific.
self-actualization2x2
Quadrants, rows, columns, and diagonals authored as a TwoByTwoObject with placement-level highlight cards.
Good for tradeoffssegmentationstrategy
Climate Change
EffectChanging habits, paying more, giving up convenience, or feeling overwhelmed.
Coordination, investment, political conflict, planning, and infrastructure change.
Cleaner air, lower bills, healthier routines, and a stronger sense of agency.
Fewer heat deaths, cleaner air, stronger infrastructure, and more resilient neighborhoods.
First, introduce the axes and empty quadrants.
axesClimate action often feels most immediate where costs are personal and visible.
top_leftBenefits matter, but they can arrive gradually or indirectly.
bottom_leftShared effort requires coordination, funding, and governance.
top_rightThe largest benefits often appear as healthier places and safer systems.
bottom_rightCosts can be individual or collective.
row_topBenefits can also be individual or collective.
row_bottomPeople may weigh individual costs against individual benefits.
col_leftReveal Engine
Chart and comparison families reveal axes, marks, averages, tails, slices, and takeaways through authored treatment cards.
Bar
Axes, columns, average line, tallest bar, and lowest bar are authored as ChartObject treatment cards.
Good for rankingdifferencebaseline comparisons
A bar chart is useful when each year is its own observation. First, give the reader the axes.
axesEach bar is January maximum temperature for one year near Olympia.
barsA reference line turns bars into comparison.
averageThe highest bar is not the whole story, but it helps orient the eye.
tallestThe lowest bar anchors the other end of the range.
lowestThe chart stays fixed. The interpretation changes.
allBell
Distribution, shifted curve, changed mean, and tail highlights render from a Bell ChartObject.
Good for thresholdspopulation-level shifts
First show the standard distribution.
baselineThe baseline mean is 100.
baselineThe red curve is shifted left by 4 IQ points.
shiftedA small mean shift can add more people below the lower threshold.
left_tailThe same shift can leave fewer people above the upper threshold.
right_tailNear the center, the shift looks small. In the tails, it can matter.
allLine
A continuous line chart whose points and series highlights remain editable ChartObject data.
Good for change over timefuture pathwaystrajectory gaps
One planet. More than one future.
A line graph is useful for history, trajectory, and possible futures.
allThe historical line gives the reader a shared starting point.
2020One pathway continues upward.
2050Another pathway bends toward a lower trajectory.
2100The gap represents choices, action, and collective capacity.
allLoop
A feedback cycle authored as a LoopObject and advanced one step at a time.
Good for systemscyclesreinforcement
Loop
- 1Instability
- 2Reduced capacity
- 3Weaker coordination
- 4Reduced support
Instability reduces the capacity available to respond.
instabilityReduced capacity weakens coordination.
capacityWeaker coordination reduces support.
coordinationReduced support increases instability.
supportThe last step feeds back into the first.
allPie
Slices are authored as ChartObject data and highlighted segment by segment as cards enter.
Good for parts of a wholesector sharesgrouped slices
U.S. greenhouse gas emissions by sector
- Transportation29
- Electric Power24
- Industry23
- Commercial and Residential14
- Agriculture10
Pie charts are useful when the main question is how a total breaks into parts.
allThe whole circle is total U.S. greenhouse gas emissions.
allTransportation is the largest share in this dataset.
point-transportationTransportation, electric power, and industry make up most of the total.
point-transportation point-electric-power point-industrySmaller slices may point to different tools, actors, or policy levers.
point-commercial-and-residential point-agricultureShared responsibility is unevenly distributed.
allTimeline
A chronological sequence whose event data lives in a TimelineObject and whose scroll cards live on the placement.
Good for long historieserasdiscovery to action stories
Timeline
Climate science developed from early experiments and theory into measurement, governance, and present-day action.
- 1824Greenhouse effect described
Early experiments and theory begin to explain how the atmosphere traps heat.
- 1896CO2 warming calculated
Scientists begin estimating how carbon dioxide could warm the planet.
- 1958Direct measurement begins
Atmospheric carbon dioxide measurements create a visible record.
- 1988Public warning grows
Climate change becomes a public and political issue.
- 2015Paris Agreement
International governance turns climate science into shared commitments.
- TodayPresent-day action
The question becomes how quickly knowledge can become action.
A timeline turns dates into a visible sequence.
allThe story begins with scientific theory.
1824CO2 warming becomes something scientists can estimate.
1896Direct measurement turns theory into a visible record.
1958The issue moves from science into public life.
1988The Paris Agreement marks a shared political response.
2015The timeline lands in the work still ahead.
TodayGallery / Topic Rail / Rabbit Hole
Container families remain canonical Studio Objects. ScrollyBuilder owns their page placement and navigation treatment.
Good for collectionsside pathsrelated context