Demo Catalog
A working tour of the Scrolly Suite: what each module does, when to use it, and how to choose the right tool for a story page.
Pick the module based on the reader’s job.
If the reader needs to pause, compare, explore, reveal, or understand a system, there is a different Scrolly tool for that job. This page is the front door to the suite.
Core is the foundation.
Use Core once on each page. It carries the shared CSS, scroll progress, fonts, spacing, cards, responsiveness, and JavaScript helpers that the rest of the modules rely on.
Use these when the main job is storytelling.
Centered, Split, Background, Parallax, and Video help control pace, mood, emphasis, and visual rhythm.
Centered is for one clean idea.
Use it for thesis statements, transitions, reflective pauses, section openings, and moments where the reader needs room to absorb something.
Split is for side-by-side meaning.
Use it when text and image need to explain each other: a concept beside a scene, a claim beside evidence, or a metaphor beside its interpretation.
Background is for immersive setting.
Use it when one image should hold the reader inside a place, metaphor, or mood while several cards move through it.
Use it when the setting is part of the argument.
Good for landscapes, bridges, rivers, cities, crowds, thresholds, or recurring visual metaphors.
Parallax is for a dramatic visual breath.
Use it sparingly as a threshold, mood shift, or chapter break.
Video is for atmosphere, not essential information.
Use it for slow movement: water, clouds, streets, forests, or gathering people. The story should still work if the video does not load.
Use these when the reader should touch or choose.
Buttons, Expand, RabbitHole, StickySteps, and Swap let readers compare, open optional context, and move through steps.
Buttons are for parallel choices.
Use them for examples, categories, cases, or perspectives that sit at the same level. If the order matters, use Swap or StickySteps instead.
Interactive / Expand: open the optional layer
Use Expand for definitions, caveats, citations, source notes, technical details, or extra nuance. It stays in the page flow.
Expand keeps optional context quiet.
Use this when the reader may want more, but the main argument should keep moving.
RabbitHole is for a deeper side quest.
Use it for mini-essays, quote walls, datasets, galleries, glossaries, or extended asides.
Use StickySteps when one visual has several meanings.
The image stays put while the reader moves through explanatory cards.
Diagrams, photos, maps, or metaphors.
Each card can interpret a different part of the same visual.
If the image itself changes, use Swap.
StickySteps unfolds one visual. Swap moves through a sequence of visuals.
Swap changes the image as the reader scrolls.
Use it for stages, walkthroughs, or visual sequences.
Move to the next stage.
The visual updates to match the active text card.
End with a changed understanding.
Use three to five steps for a comfortable first version.
Use these when the reader needs a conceptual model.
Circles shows related parts in a system. Pyramid shows layered or dependent concepts.
Circles is for nested systems.
Use it when influence moves across layered conditions: individual, interpersonal, institutional, community, and policy.
Start with the person at the center.
Use this layer for the body, choices, beliefs, lived experience, or capacity of an individual person.
Add the relationship layer.
Use this layer for households, friendships, care networks, social support, and everyday relationships.
Show organized settings.
Use this layer for schools, workplaces, clinics, agencies, churches, and other institutions that shape daily life.
Move to shared local conditions.
Use this layer for neighborhoods, civic life, local culture, belonging, and shared infrastructure.
Name the outer conditions.
Use this layer for rules, laws, budgets, incentives, and large-scale choices that shape the conditions below.
Pyramid is for layered or dependent concepts.
Use it when some conditions build on others: foundations, prerequisites, hierarchy, stacked capacity, or bottom-up development.
Start with the physical foundation.
Use this layer for air, water, food, shelter, sleep, health, and bodily survival.
Build the conditions for stability.
Use this layer for safety, protection, predictability, and freedom from immediate threat.
Add relationship and social connection.
Use this layer for attachment, friendship, community, care, and being held by others.
Show dignity and valued contribution.
Use this layer for confidence, respect, competence, and the feeling that one’s contribution matters.
Name the fuller human possibility.
Use this layer for growth, meaning, purpose, creativity, and higher-order capacity.
Use these when the visual should emerge step by step.
Bar, Bell, Line, Loop, Pie, and Timeline are for explaining data, distributions, trends, feedback, composition, and sequence.
The module is a reader-experience decision.
Centered pauses. Split compares. Background immerses. Parallax transitions. Video gives atmosphere. Buttons invite choice. Expand adds quiet context. RabbitHole creates a side quest. StickySteps interprets one visual. Swap walks through change. Circles and Pyramid model concepts. Reveal modules teach visual patterns.