⚜ Lys

Zero-dependency CSS+JS slide engine for accessible, LLM-generated presentations.

Quick Start

Add the stylesheet and script from a CDN:

<link rel="stylesheet" href="https://unpkg.com/lys/dist/lys.css">
<script src="https://unpkg.com/lys/dist/lys.iife.js"></script>

Then write slides as <article> elements inside a [data-lys] container:

<div data-lys>
  <article><h1>First Slide</h1></article>
  <article><h2>Second Slide</h2></article>
</div>

That is it. The IIFE auto-initializes on DOMContentLoaded — no setup code needed.

Token Reference

Override any --lys-* token at :root, on the container, or on a single slide.

Token Default
--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

Article Contract

Each <article> inside [data-lys] is a slide. These optional data attributes are recognized:

Attribute Purpose Example
data-notes Speaker notes (plain text or HTML) data-notes="Mention Q3 figures"
data-transition Transition hint data-transition="fade"
data-class Additional CSS classes for this slide data-class="title-slide dark"
data-background Background shorthand (color, image, gradient) data-background="#1a1a2e"
data-timing Suggested duration in seconds data-timing="30"

Examples