LLAKSHAN DEVSTUDIO
INTERACTION LAB · V1.00

Two interaction systems,
ready to reuse.

Working studies of the toast choreography and spatial art timeline shared from X. Each study includes the live design, source code, and an implementation path.

Explore systems ↓Source posts ↗
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