VCSI Scrolly Kit

A framework for data-driven visual essays built with SvelteKit.

Quick Start

Baked Template (static, pre-rendered)

npx degit Vermont-Complex-Systems/vcsi-starter/templates/baked my-project
cd my-project
npm install
npm run dev

Fresh Template (dynamic, server-rendered)

npx degit Vermont-Complex-Systems/vcsi-starter/templates/fresh my-project
cd my-project
npm install
npm run dev

Package

The core components are available as an npm package:

npm install @the-vcsi/scrolly-kit

Core Components

• Scrolly - Core scroll detector using IntersectionObserver
• ScrollyContent - Opinionated scroll step container with content rendering
• MarkdownRenderer - Markdown + KaTeX math + syntax highlighting
• CodeBlock, CopyCodeBlock, CodeExplainer - Code display components
• SimpleToggle, SimpleSelect - Form controls
• ThemeToggle - Dark/light mode toggle
• Tooltip, Spinner, ScrollIndicator - UI helpers

CSS

Import the styles you need:

@import '@the-vcsi/scrolly-kit/styles/all.css';  /* Everything */

/* Or individually: */
@import '@the-vcsi/scrolly-kit/styles/reset.css';
@import '@the-vcsi/scrolly-kit/styles/tokens.css';
@import '@the-vcsi/scrolly-kit/styles/typography.css';
@import '@the-vcsi/scrolly-kit/styles/layouts.css';

Current Layouts

• .story - Story container with theme isolation
• .split-layout - Two-column with sticky panel (add .reversed to flip)
• .fullscreen-layout - Full-viewport immersive backgrounds
• .triple-layout - Three-column (steps, code, chart)
• .dashboard-layout - Collapsible sidebar

Customization

Override CSS variables in your app.css:

:root {
  --vcsi-color-accent: #your-brand;
  --vcsi-font-serif: "Your Font", Georgia, serif;
  --vcsi-bg: #your-background;
}

Documentation

Visit: https://vermont-complex-systems.github.io/vcsi-starter/

Downstream Projects

• complexstories (simple template)
• complexforms (fresh template)
• cel-website (simple template)

License

MIT