Reference

Page Layout

The .page class provides a centered, width-constrained container for standard content pages. It's typically used with Nav and Footer components.

<script>
  import { Nav, Footer } from '@the-vcsi/scrolly-kit';
</script>

<Nav />

<article class="page">
  <h1>Page Title</h1>
  <p>Content goes here...</p>
</article>

<Footer />

CSS Variables

Nav, Footer, and .page all use the same width/padding variables for consistent alignment:

When to Use

• .page — Standard content pages (docs, about, home)
• .story — Scrollytelling articles with layouts that break out

Story Container

The .story class is the main container for scrollytelling content. It provides:

• Centered prose by default (max-width 600px)
• Light theme isolation from global dark mode
• Padding and spacing for readability

<article class="story">
  <h1>Story Title</h1>
  <p>Centered prose content...</p>

  <section class="split-layout">
    <!-- Layout breaks out to full width -->
  </section>

  <p>Back to centered prose...</p>
</article>

CSS Variables

Dark Theme

Add data-theme="dark" for dark stories:

<article class="story" data-theme="dark">
  <!-- Dark background, light text -->
</article>

Split Layout

Two-column layout with a sticky visualization panel and scrolling content. While it breaks out of the prose max-width, it maintains its own side padding (2rem by default) rather than going edge-to-edge like .fullscreen-layout.

<section class="split-layout">
  <div class="sticky-panel">
    <!-- Your visualization component -->
  </div>
  <div class="scrolly-content">
    <!-- ScrollyContent or custom steps -->
  </div>
</section>

<!-- Reversed: panel on left -->
<section class="split-layout reversed">
  ...
</section>

CSS Variables

Mobile Behavior

On screens <768px, the layout stacks with the sticky panel as a full-screen background and content overlaying it.

Cookbook

Customizing Panel Size

To give the visualization more space while capping its absolute width:

The grid uses minmax(min-width, width), so the panel scales between the min and percentage values. Adding max-width on .sticky-panel caps the absolute size on wide screens.

Fullscreen Layout

Full-viewport immersive layout for dramatic visualizations.

<section class="fullscreen-layout">
  <div class="sticky-panel">
    <!-- Full-viewport visualization -->
  </div>
  <div class="scrolly-content">
    <!-- Overlaid step boxes -->
  </div>
</section>

CSS Variables

Cookbook

Repositioning Step Boxes

By default, step boxes are horizontally centered via margin: 0 auto on .scrolly-content. Override to position them differently:

The margin-left: auto / margin-right: auto pattern pushes the content to the opposite side. Add a fixed margin on the aligned side for padding from the edge.

Examples in the Wild

Inspiring fullscreen scrollytelling stories from around the web.

Hello Stranger

The Pudding

Visualizing neglect

Nadieh Bremer

A Guide to the Circular Deals Underpinning the AI Boom

Bloomberg

Dashboard Layout

Sidebar + main content for interactive data dashboards.

<article class="dashboard-layout">
  <aside class="dashboard-sidebar">
    <button class="sidebar-toggle">...</button>
    <div class="sidebar-content">
      <!-- Filters, controls -->
    </div>
  </aside>
  <main class="dashboard-main">
    <!-- Visualization -->
  </main>
</article>

CSS Variables

Collapsible Sidebar

Toggle .sidebar-collapsed class on .dashboard-layout to collapse/expand.

Mobile Behavior

On mobile, sidebar becomes a slide-down drawer. Toggle .sidebar-open class to show.

Step Styling

Step boxes in scrolly layouts use these CSS variables for colors and sizing. These apply to both .split-layout and .fullscreen-layout.

CSS Variables

--story-step-* variables control colors and are typically set globally in app.css for consistent theming across your story. --step-* variables control layout and can be set per-section for local customization.

Example Override

For a minimal look where only text floats over the visualization:

Global CSS Variables

Design tokens available throughout your project. See tokens.css for the full source.

Colors

Semantic Colors (auto-switch with dark mode)

Typography

Font Sizes (responsive clamp)

Font Weights & Line Heights

Spacing

Border Radius

Transitions