Skip to content
Riffle

Examples

Real, runnable apps, each proving a specific thing (a build tool, an adapter, an SSR setup, a particular option). Every one lives in examples/ in the repository, is built and typechecked in CI, and is the actual source of the code shown throughout this track, never a copy.

vanilla-movie-stack

The hero with no framework: a fanned poster stack built by hand on createRiffle(), with Previous/Next buttons.

A preview of the vanilla-movie-stack example: a fanned stack of movie posters with Neon Harbor, 1998 on the front card.

Source · Open in StackBlitz

vanilla-basic

A single HTML file: no build step, no framework, @rpxl/riffle loaded from a CDN <script type="module"> import.

A preview of the vanilla-basic example: five color cards fanned behind a blue front card labelled 1, with Prev and Next buttons below.

Source · Open in StackBlitz

vanilla-recipes

The four recipe pages, mounted with plain createRiffle() and no build-tool adapter: infinite feed, clamp with controls, programmatic control, forms inside cards, plus a vertical stack.

A preview of the vanilla-recipes example: a stack of film cards, each with a title, a label and a text input, with Prev and Next buttons below.

Source · Open in StackBlitz

custom-layout

Writing a LayoutStrategy from scratch: a spread() function replacing the default fan, shown live and explained on Layouts.

A preview of the custom-layout example: a blue front card labelled One with four more cards fanned out further to the right than the default layout, plus a 1 of 7 readout.

Source · Open in StackBlitz