@charlie404/simond-stories

Web Components for Simond Mountain Stories — interactive scroll-based storytelling.

Installation

npm install @charlie404/simond-stories

Usage

import '@charlie404/simond-stories/dist/simond-stories.css';
import '@charlie404/simond-stories';

Then use the custom elements in your HTML:

<simond-hub
  href-olan="/olan"
  href-1="/histoire-1"
  href-2="/histoire-2"
  href-3="/histoire-3"
></simond-hub>

<simond-olan></simond-olan>
<simond-histoire-1></simond-histoire-1>
<simond-histoire-2></simond-histoire-2>
<simond-histoire-3></simond-histoire-3>

All assets (images and fonts) are served directly from jsDelivr CDN — no need to copy anything into your project.

Components

| Component | Description | |-----------|-------------| | <simond-hub> | Horizontal card carousel with 4 stories, scroll-snap navigation | | <simond-olan> | Chauve qui peut — parallax story with year counter, clouds, trail reveal, FR/EN i18n | | <simond-histoire-1> | Simple sequential images | | <simond-histoire-2> | Canvas-based frame sequencing (158 frames) | | <simond-histoire-3> | Parallax, zoom and typewriter text reveal |

Configuration

Asset base URL

By default, assets are served from jsDelivr CDN. To use self-hosted assets instead:

import { configure } from '@charlie404/simond-stories';

configure({ assetBase: '/my-custom-path/' });

Call configure() before the library defines its components (typically via dynamic import):

<script type="module">
  const { configure } = await import('@charlie404/simond-stories');
  configure({ assetBase: '/my-custom-path/' });
  await import('@charlie404/simond-stories');
</script>

Or per component via attribute (images only — fonts still use the global config):

<simond-histoire-3 asset-base="/my-custom-path/"></simond-histoire-3>

If you choose to self-host, copy the assets to your public directory:

npx simond-copy-assets
# → ./public/simond-assets/

# Or specify a custom destination:
npx simond-copy-assets ./public/my-path

Hub navigation

The hub links and card titles are configurable via attributes:

<simond-hub
  href-olan="/olan"
  href-1="/histoire-1"
  href-2="/histoire-2"
  href-3="/histoire-3"
  title-olan="Olan"
  title-1="Chaîne Old Post"
  title-2="Lorem Ipsum"
  title-3="Lorem Ipsum"
  lang="fr"
></simond-hub>

Only cards whose href-* attribute is set will be rendered — omit an attribute to hide that card.

The lang attribute switches the "Découvrir" / "Discover" button text (fr default, en supported).

Olan language

The <simond-olan> component supports French (default) and English text:

<simond-olan lang="en"></simond-olan>

Translations cover the year counter, time markers, all descriptive text, and the intro/outro credits.

Smooth scroll (optional)

The package does not include a smooth scroll library. If you want smooth scrolling, install Lenis and connect it to GSAP:

import Lenis from 'lenis';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const lenis = new Lenis();
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));