Examples, Tricks & Concepts
Svelte translations of UI patterns worth testing before porting them into Sportacus apps. Standalone playground — pure UI, no backend.
Hello Svelte
Trivial interactive placeholder proving the registry + routing pattern.
View example →PDnD Tree: Folders & Files
Typed tree with a two-pane layout — drag to reorder & nest on the left, click to inspect files and folders in a viewer pane that never collapses the tree.
View example →Chat Bubble & Floating Window
Preservation copy of the Sportacus chat bubble + floating window: pointer-event drag with thresholds, snap-to-home, and reactive viewport tracking that re-clamps the window on resize.
View example →Floating Chat: Bubble & Window (neodrag)
Chat bubble & floating window recreated on @neodrag/svelte v2: library drag mechanics (thresholds, handles, viewport bounds) composed with the real app's ported clamp/snap/smart-placement/persistence math via a fixed-at-0,0 coordinate bridge.
View example →Plyr Video: Streaming & Captions
Plyr wrapped for Svelte 5: SSR-safe mounting, .destroy() lifecycle, $state-driven source/provider switching (HTML5 ×2 + YouTube embed), captions en⇄nb, quality/speed from state, sprite seek previews, plyr markers + a Svelte chapters sidebar (kind="chapters" VTTs, en⇄nb) — served over a Range-aware streaming route. Building or auditing an ecosystem video pipeline? Read src/lib/examples/plyr-video/README.md — "Pipeline requirements checklist" is the agent pointer: the 9-feature contract (playback, codec fallback, quality ladder, sprite previews, captions, chapters, markers, poster, Range/206 serving) plus the audit recipe.
View example →PDF Viewer: Inline & Fullscreen
EmbedPDF (@embedpdf/svelte-pdf-viewer v2.15) — the PDFium/WASM engine, virtualized scroll (89-page doc), landscape pages, full-UI toolbar+sidebar, a $state-driven document selector, a fullscreen daisyUI modal (destroy on close), a feature-toggles panel with a Read-only ⇄ Editor master mode (the UX contract: hide mutation affordances — insert, form, redact, comments, protection, close/open document — keep reading affordances), a headless EmbedPDF core viewer (render+scroll+zoom only) as the no-chrome contrast, and an EDITABLE server-persisted document: annotate → autosave → versioned saves on disk → reload persists (real save path via the export plugin’s saveAsCopy), with Ctrl+S/Cmd+S save-intent interception and an honest "Saving… / All changes saved" toast (editor mode only).
View example →Auto-Animate: Fleet Motion Patterns
@formkit/auto-animate 0.10.0 (3.2kB, zero deps) on six fleet list surfaces: the real DataTable.svelte copy (sort FLIP, filter, row add/remove, page-jump exclusion with animated show-amount), chat room re-sort, toast sibling-shift fix, notification bulk clear, file-grid reflow, tag chips + dropdown — plus controller enable/disable, reduced-motion no-op, the gotchas panel, and the source-cited options-baked-at-init verdict with its remount workaround.
View example →Animation Bake-Off & the fleet posture: anime.js · tailwindcss-animated · animate.css · Svelte flip · auto-animate
The definitive fleet pointer for animation decisions. Opens with THE FLEET POSTURE — the Captain's dual-adoption ruling (t_2c3ef21a): tailwindcss-animated is the UTILITY GRAMMAR, animate.css the KEYFRAME CATALOG, anime.js the JS orchestrator, Svelte native the free baseline, auto-animate the convenience tier. Below: the measurement history — identical patterns (sort FLIP, add/remove enter/exit with the leaveTo spike, stagger wave, spring physics, completion events, animate.css flourishes, tailwindcss-animated grammar demos incl. custom @theme keyframes) under the engines side by side, with the reduced-motion honesty panel and the per-job verdict table.
View example →Editor Bake-Off: Fleet TipTap vs Edra
Two writing engines, one markdown truth. The fleet WorkspaceEditor ported and UPGRADED from TipTap 3.11 to 3.29 (the upgrade-path proof: setEditable now emits update events — reactive shells need change-only guards; bubble-menu tippyOptions removed in the floating-ui rewrite) vs Edra headless vendored from upstream Tsuzat/Edra @ 2b9b025 with --edra-* tokens bridged to daisyUI. Sidebar doc tree, per-document engine switcher (load-on-switch, honestly no live cross-sync), live JSON/HTML/Markdown output panel with per-format round-trip load-back, read-only toggle in both engines, light/dark theming, and the verdict panel with real bundle numbers.
View example →Year Wheel Bake-Off: Radial Wheel (Årshjul)
Bake-off contender A of 3 — the year wheel of a realistic Norwegian sports club (28 seed items harvested from Nidelv IL, Drag IL and the NDF/NIF wheel: Årsmøte, Spillemidler, Momskompensasjon, sesonger, dugnader) as a static radial SVG wheel: 12 equal 30° sectors from January at 12 o’clock clockwise, sequential density fill per month (visible count digits + legend — never color alone), a wrapped July→March season crossing the year seam, and a category filter driving both ring and panel. The SVG is decorative; the twelve sectors are real HTML buttons in a single-selection tablist (roving tabindex, Left/Right switch months immediately with a Dec→Jan wrap, Home/End; hovering highlights the wedge itself), feeding a month tabpanel grouped by category with frist badges on confirmed deadlines. Honest landscape note: NIF’s Årshjulet (aarshjulet.nif.no, 2022) already digitized the wheel — our differentiators are span semantics, a11y-first interaction and three lenses on one dataset.
View example →Year Wheel Bake-Off: Span Grid (Årshjul)
Bake-off contender C of 3 — the year wheel of a realistic Norwegian sports club (28 seed items harvested from Nidelv IL, Drag IL and the NDF/NIF wheel) as the digitized NIF paper/Excel template: a real semantic <table> with one row per obligation grouped under category header rows (color dot + label + count), 12 month columns with sticky headers, point obligations as compact chips in one cell, seasons as connected bars with labelled start/end caps, and the wrapped Treningstider season (July→March) as an honest split bar at Jul–Dec AND Jan–Mar around a subtle year-seam marker — never a duplicated January column. Below 1024px the table collapses to a month-grouped list (continuing spans read "continues from June · until March") — exactly one representation exposed to assistive tech at a time. Row selection opens a read-only detail panel (round 1; editing is round 2). Print resolves the grid to a linear report: headers repeated across pages, controls hidden, monochrome-safe. The shared dataset also drives a radial-wheel lens and a month-deck lens (their own bake-off cards).
View example →Year Wheel Bake-Off: Month Deck (Rolodex)
Bake-off contender B of 3 — the same Norwegian club årshjul as an honest paged month navigator. One complete focus month card holds ALL of the month’s items grouped by category with full details (timing incl. day-of-month, ownerRole, frist badges on confirmed deadlines, notes) — no fixed card height, no title truncation. Prev/next month cards peek at the edges (10–14% width, capped ~72px, dropped when the focus card would fall below ~326px; peeks are buttons with 44px hit targets). Navigation wraps December→January with an explicit year-seam marker (annual cycle); direct jumps never animate through intervening months. A persistent 12-cell month index doubles as minimap and density strip — short labels, selected state, current-month marker, per-month density bar, count in the accessible name. Motion is a 200ms 2D translate + slight opacity (cubic-bezier(.2,.8,.2,1)); reduced motion swaps instantly; swipe has a horizontal-intent threshold and never intercepts scrolling starting inside event content. Focus stays on the initiating control; a polite live region announces «<Month>, <N> aktiviteter».
View example →Access Dashboard Clone (Mother /app shell)
Theming lab: the Access (Mother) /app shell + dashboard cloned with verbatim markup — sidebar, pinned app bar, app switcher drawer, notification bell, org context, toasts and dashboard sections — running on static in-memory seeds. Links go nowhere and the widget framework is intentionally omitted; the ThemeSelector switches every daisyUI theme Mother ships, so a theme applied here hits the same classes as the real app.
View example →