@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-pre-de-bar="/pre-de-bar" href-olan="/olan"></simond-hub>

<simond-olan></simond-olan>
<simond-pre-de-bar></simond-pre-de-bar>

All assets (images and fonts) are served from the project's media server (https://media.play-bold.fr/simond) — no need to copy anything into your project.

Components

| Component | Description | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | <simond-hub> | Horizontal card carousel, scroll-snap navigation | | <simond-olan> | Chauve qui peut — parallax story with year counter, clouds, trail reveal, FR/EN i18n | | <simond-pre-de-bar> | Scroll comic — stacked panels, image text-layer reveals (data-at), a pinned 3D frame sequence (panel L), loader and outro logo. FR/EN image sets |

Configuration

Asset base URL

By default, assets are served from the project's media server (https://media.play-bold.fr/simond). To serve them from a different location 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-pre-de-bar asset-base="/my-custom-path/"></simond-pre-de-bar>

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-pre-de-bar="/pre-de-bar"
  href-olan="/olan"
  title-pre-de-bar="Pré de Bar"
  title-olan="Olan"
  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>

Pré de Bar language

<simond-pre-de-bar> bakes its text into the artwork, so the lang attribute swaps the whole image set rather than any markup text (fr default, en supported). In English mode each story image loads its -en twin; the logo and the panel-L 3D frames are language-neutral and shared.

<simond-pre-de-bar lang="en"></simond-pre-de-bar>

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));

Changelog

Full history in CHANGELOG.md.

1.4.3 — latest release:

• <simond-pre-de-bar>: added an English image set. The lang attribute (fr default, en supported) swaps the whole image set — text is baked into the artwork, so each story image loads its -en twin (<simond-pre-de-bar lang="en">).

Earlier highlights (1.4.x):

• Fixed the visible seam between <simond-pre-de-bar> panels (the anti-aliased export fringe is shaved off the source images).
• Fixed a large layout shift (CLS) caused by the library's fonts colliding with the host page — font families are now namespaced (SimondRector, SimondRoboto, SimondRobotoMono).
• <simond-olan>: faster first paint — the loader reveals the first section instead of waiting for the whole story, and the rest loads in the background afterwards (parallax/zoom animations preserved).
• <simond-pre-de-bar>: title image preloaded so it appears sooner.
• Removed the exploratory <simond-histoire-1|2|3> test stories.