LLAKSHAN DEVSTUDIO
INTERACTION LAB · V1.23

Twelve playable studies,
one full shelf.

Twelve interactive studies rebuilt from the remember saves - touch them, then take the code. Below them, the complete shelf: every save, categorized, searchable, linked to source.

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 →
03REMEMBER SHELF · 22-23 SEP 2026

Newest saves, made touchable

Today's X remember items, rebuilt as live studies. Each one keeps the source link, runs in your hands, and shows its code below - no static screenshots.

9 new studiesLive store rev 295
04PIPELINE INTERACTIONS

Hook pipeline

Animated stage status: queued work walks stage to stage, one fails, retry heals it. Press Run and watch the state machine move.

Timed statesRetry pathSource post ↗
LIVE COMPONENT
hook-pipeline.js
05AGENT PLATFORMS

Trace inspector

Live event network: pulses travel between agents. Tap any node to open its trace - events, spans, durations.

Event pulsesPer-node traceSource post ↗
LIVE COMPONENT
TRACE · tap a node
Select a node above to inspect its event trace.
trace-inspector.js
06DESIGN SYSTEMS

UI skills collection

Pre-build reference shelf: filter the skill cards by discipline before a build starts. Instant, keyboard-friendly chips.

Filter chipsReference gridSource post ↗
LIVE COMPONENT
skills-filter.js
07ERP NAVIGATION

One group per scroll

ERP category nav: each scroll step lands on one complete app group - no half-cut rows. Scroll or use the dots.

Scroll snapDot navSource post ↗
LIVE COMPONENT
erp-snap-nav.css
08PROJECT DASHBOARDS

Flow Design filter

Restrained light dashboard: status pills plus a progress threshold, filtering a live project table. Quiet surface, fast controls.

Status pillsThreshold sliderSource post ↗
LIVE COMPONENT
flow-filter.js
09SECURE ENTRY

Passcode entry pair

The login design saves, side by side: masked card-number entry with reveal, and a six-digit code box with auto-advance, paste, and auto-open on match (gate rule: 6 digits, keyboard + touch).

Reveal toggleAuto-openCard reveal ↗KAWAI patterns ↗
LIVE COMPONENT
CARD NUMBER · tap Reveal
5312  ••••  ••••  4501
GATE CODE · try 4-2-8-1-9-3
Code opens automatically on the 6th digit.
passcode-entry.js
10CONTEXT MENUS · MICRO-INTERACTION

Fan-out action menu

boring menus are a choice. So are fun ones: the same four actions, two ways. GOOD drops one flat card; BETTER springs every action out of the button as its own pill, staggered, with the plus morphing into a close. Tap both and feel the difference - then take the code.

Staggered springsPlus-to-close morphEsc / outside closeSource post ↗
LIVE COMPONENT
fan-out-menu.js
11TEXT MOTION · MICRO-INTERACTION

Shift text

Only what changed moves. GOOD swaps the whole value; BETTER diffs the old and new text, so kept characters glide into place and only the changed ones roll, with a soft blur. Tap the tagline, the reactions, the player and the tabs - or flip the grid between GOOD and BETTER.

Character diffPlace-value digitsReduced motionSource post ↗
LIVE COMPONENT
TAGLINEOnly what
changed .
STOCK TICKER
Shift Inc.SHFT · NASDAQ
1D1W1M1Y
TIMER · TAP TO PAUSE
REACTIONS · TAP ONE
MUSIC PLAYER
INSTALL COMMAND
shift-text.js
12ICON SYSTEMS · SHOWROOM

Find the set that fits,
then grab from one pack.

Every icon library saved in the Thinkers Zone, vendored here as real SVG source - no screenshots, exact library version named on each set card. Search the verbs our apps use, flip on Compare to see the same verb across all five packs, judge which set fits the job, then pick a consistent set of icons that all come from the SAME pack. Click a glyph to copy its inline SVG; the name chip copies the library-ready name (lucide:shopping-cart). Light/dark flips with the theme button up top - every glyph is currentColor.

5 librariesReal vendored SVGPack-locked picks
LIVE SHOWROOM
icon-usage.html
LINKED SAVE · NOT AN ICON SETgeohacker/india - India map work

GeoJSON boundaries source (states, districts, more). Saved alongside the icon sets; it is map data for choropleths and drill-down maps, so it lives here as a linked card rather than pretending to be icons.

Open repo ↗ LINKED SAVE · TOOL, NOT A SETIcon Creator

Free custom icon-pack generator from the Thinkers Zone tools shelf - build a pack of your own when none of the five libraries fits.

Open tool ↗
ADOPTION NOTEReference build, no app changes yet

Lucide is our clean-UI standard. Costing/market currently run on emoji + CSS dots - this showroom is the reference we standardise from in a later pass.

13THE FULL SHELF · LIVE STORE

The design shelf, categorized

Design saves only - UI/UX templates, animation & motion, libraries and tools - straight from the live store, grouped by category, searchable, each linked to its source. PLAY means a playable study lives above; REFERENCE means the save is catalogued and its study is queued in an upgrade pass.

loading…rev live
Reading the live store…
14ECOSYSTEM 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