@habemus-papadum/aiui-slides
A slides framework for aiui apps: a deck of viewport-sized slides where the current frame is a pair of controls — durable, deep-linkable, and drivable by keyboard, widget, wheel, touch, URL, or agent ("next", by voice, through the derived tools).
- Slides are data — a deck is an ordered
SlideDef[](id,title,content, optionalpreviewandsteps); the URL segments, HUD grid, and nav all derive from the array. - Scenes — a slide with
steps: nplays n additive scenes inside itself before the deck moves on: components stay mounted and share the slide's reactive graph, a scene is a CSS state flip onuseSlide().step()(theStephelper cans the idiom), and backing up un-plays them one by one. - Every input means one frame. Wheel and touch are interpreted, not native: pure intent machines quantize a flick (inertia tail and all), a wheel notch, or one finger-down into exactly one step — the next scene, or the next slide once the scenes are spent. Keys, the cue, the dots, and the agent verbs dispatch the same unit.
createDeckModel(scope, slides)declares theslide+stepcontrols and thenext/prevactions under your app's scope — one toolkit serves navigation and content.<Deck model={deck} basePath={deckBase("slug")} />renders the translated track (CSS glide between slides) and the chrome: the one-step cue (immediate on the title frame, back after 10 s of rest, flipping up at the very end), scene-position dots, nav widget, HUD overview grid (every slide's cheap purepreviewat a glance — slide-grained, like the URL), modal-kit keymap, and slide ↔ URL binding (replaceState; slide 0 is the bare base).Lens— levels of detail for any page: inline trigger → hover peek → interactive detail overlay, folded into the page's own reactive graph.useSlide()— a slide's handle (index,deck,active(),step()); gate rAF loops onactive()so off-screen slides park themselves.
Default styling is the opt-in stylesheet — retheme via the --aiui-deck-* / --aiui-lens-* tokens or ship your own sheet against the same class names:
ts
import "@habemus-papadum/aiui-slides/styles.css";The reference deck is demos/gear-talk (the involute gear as a six-slide talk); the decided design contract is docs/proposals/slides.md in the pdum_aiui repo.