LLAKSHAN DEVSTUDIO
ISCHATTO STUDY · V1.00

Toast feedback,
ready to reuse.

A working rebuild of the toast and snackbar choreography shared by @itschatto / CreateUI, with live states, source code, and the path into the Lakshan DevStudio ecosystem.

Open toast system ↓Original post ↗
01FEEDBACK SYSTEM

Toast & Snackbar

A queued notification stack with one-at-a-time focus, timed progress, action buttons, pause-on-hover, dismiss, and reduced-motion support.

CSS transitionsWeb AnimationsARIA live
LIVE COMPONENT
QUEUE: 4HOVER TO PAUSE
02SPATIAL STORYTELLING

Art Timeline

A horizontal, zoom-like canvas of movements. Drag, wheel, or use the controls. Cards reveal context; the knowledge check uses a spring modal and reorder interaction.

Pointer EventsCSS transformsSpring motion
LIVE COMPONENT
← drag the timeline →
03ECOSYSTEM WORKFLOW

From reference to product

Keep the interaction independent from product data so it can move into KStudio, PalmBook, DevStudio, or later sites without a rewrite.

01

Tokens

Map color, type, radius, spacing, and motion duration to site design tokens.

tokens.css
→
02

Primitive

Ship one framework-free core with clean state and accessibility behavior.

toast.js · timeline.js
→
03

Adapter

Wrap it for React/Vue or connect it to a product event bus and live data.

useToast() · Timeline<T>
→
04

QA gate

Visual, keyboard, reduced-motion, touch, and 393–3840 px regression checks.

tests/interaction.spec
→
05

Registry

Version the package, source reference, demo URL, owner, and changelog.

@lakshan/interaction-lab

Toast system fit

  • Exports: notify(), dismiss(), clear()
  • Inputs: type, title, body, action, duration
  • Use for saves, background work, updates, errors

Timeline system fit

  • Exports: generic ordered-card data model
  • Inputs: era, range, image, body, relation
  • Use for histories, roadmaps, media libraries, workflows

Original stack observed

  • Art Timeline: Next.js + React
  • Tailwind-style utility CSS
  • Motion / Framer Motion spring and presence APIs