Tokens
Map color, type, radius, spacing, and motion duration to site design tokens.
tokens.cssMICKA_DESIGN STUDY · V1.00
Spatial history,
ready to reuse.
A working rebuild of the spatial art-timeline interaction shared by @micka_design, with draggable movement cards, spring panels, a knowledge check, source code, and the implementation workflow.
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.
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.
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.
Primitive
Ship one framework-free core with clean state and accessibility behavior.
toast.js · timeline.jsAdapter
Wrap it for React/Vue or connect it to a product event bus and live data.
useToast() · Timeline<T>QA gate
Visual, keyboard, reduced-motion, touch, and 393–3840 px regression checks.
tests/interaction.specRegistry
Version the package, source reference, demo URL, owner, and changelog.
@lakshan/interaction-labToast 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