⚜ Building with Lys

A tour of every feature in the structural slide engine

v1.0

What is Lys?

Zero-dependency CSS + TypeScript slide engine
Turns <article> elements into presentations
Visually unopinionated — you bring the theme
Behaviorally opinionated — navigation, accessibility, transitions
Designed for LLM-generated single-file HTML output
JS < 5 KB gzip, CSS < 2 KB gzip

The HTML Contract

<div data-lys>
  <article>
    <h1>First Slide</h1>
    <p>Any HTML content works here.</p>
  </article>

  <article data-class="dark" data-background="#1a1a2e">
    <h2>Second Slide</h2>
    <p>Data attributes control behavior.</p>
  </article>

  <article id="named" data-notes="For the speaker">
    <h2>Named slides enable hash routing</h2>
  </article>
</div>

Data Attributes

Attribute	Purpose	Example
`data-class`	Add CSS classes to the slide	`"title-slide dark"`
`data-background`	Background color, gradient, or image	`"#1a1a2e"`
`data-notes`	Speaker notes (plain text or HTML)	`"Mention Q3 figures"`
`data-transition`	Transition mode for the deck	`"fade"`
`data-timing`	Suggested duration in seconds	`"30"`

CSS Design Tokens

/* Public tokens — set these to customize */
--lys-aspect-ratio: 16/9;
--lys-slide-padding: 4cqi;
--lys-transition-duration: 300ms;
--lys-transition-easing: ease-in-out;
--lys-font-size-base: clamp(0.75rem, 2.5cqi, 1.5rem);
--lys-slide-gap: 0;
--lys-slide-max-width: 100vw;
--lys-slide-max-height: 100vh;
--lys-focus-ring: 2px solid currentColor;

Navigation

Keyboard — Arrow keys, Space/Shift+Space, Home/End, number keys
Touch — Horizontal swipe gestures with configurable threshold
Hash routing — #slide=3 or #slide=intro by slide ID
Programmatic API — lys.next(), lys.prev(), lys.goTo(n)

Accessibility

Every feature must be accessible. prefers-reduced-motion must be respected in all animation code. ARIA attributes must be correct.

— Lys Hard Constraints

role="group" on each slide with aria-roledescription="slide"
aria-live="polite" region announces slide changes
Focus management on navigation — active slide receives focus
Reduced motion disables transitions automatically

Progressive Enhancement

No JS, No CSS

Articles flow as a readable document. Content is always accessible regardless of what loads.

CSS Only

Scroll-snap slides appear. Users navigate by scrolling. Layout and aspect ratio are enforced.

CSS + JS

Full experience: keyboard navigation, ARIA announcements, hash routing, programmatic API, fade transitions.

⚜

Arrow keys or swipe to navigate

View source to see every data attribute in action