Components Library Operations InteractionLab

InteractionLab

Motion and interaction QA lab for timing, easing, risk, and reduced-motion review.

Live demo

Interaction QA

Interaction lab

Reduced motion

hover

Catalogue card hover lift

Ready

Duration: 180ms
Easing: ease-out
Risk: low

Implementation

<script lang="ts">
  import InteractionLab from '$lib/components/InteractionLab.svelte';
</script>

<InteractionLab {scenarios} />

InteractionLab treats motion as a reviewable contract: mode, duration, easing, risk, and reduced-motion readiness are visible before a motion pattern gets copied into production.

Logic explainer

What Does It Do? (Plain English)

InteractionLab lets teams review hover, press, drag, and keyboard interaction scenarios with timing, easing, risk, and reduced-motion readiness.

How It Works (Pseudo-Code)

receive interaction scenarios
choose active scenario
toggle reduced-motion preview
derive readiness note from mode, timing, and risk
render a stage plus scenario controls

Props Reference

Prop	Type	Default	Description
`scenarios`	`InteractionScenario[]`	Required	Interaction scenarios with mode, duration, easing, and risk.
`title`	`string`	`"Interaction lab"`	Heading above the lab.

Dependencies

No external dependencies.

API

Prop	Type	Description
`scenarios`	`InteractionScenario[]`	Motion scenarios with timing and risk metadata.
`title`	`string`	Lab heading.

Installation

cp src/lib/components/InteractionLab.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies

For your agent

01Use this to review motion before copying it into components; high-risk drag scenarios need pointer edge-case tests.

# Install InteractionLab into my Svelte 5 project

Motion and interaction QA lab for timing, easing, risk, and reduced-motion review.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/InteractionLab.svelte
to src/lib/components/InteractionLab.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/interactionlab/+page.svelte to src/routes/interactionlab/+page.svelte.

## 5. Usage
```svelte
<script lang="ts">
  import InteractionLab from '$lib/components/InteractionLab.svelte';
</script>

<InteractionLab {scenarios} />
```