Explorable lessonPro

An interactive explainer in the thread: steps, sliders and a drawing that redraws as they move, with prose rewritten from the live values so the words always describe the picture.

Markdown

On this page

ProHow a lens forms an image in four steps: each step glides the setup into place and the prose follows the sliders.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/explorable-lesson

Usage

tsx

import { ExplorableLesson } from "@/components/ui/chatcn/pro/explorable-lesson"

<ExplorableLesson
  title="How a lens forms an image"
  params={params}
  steps={steps}
  defaultValues={{ d: 36, f: 14 }}
>
  {(values, step) => <LensDrawing values={values} step={step} />}
</ExplorableLesson>

Each step's text is a function of the live values and of the values before the last change, so it can say what moved: the image went 6.1 cm further out. Wrap numbers in <b> and they render in the foreground color with tabular figures.

A step can carry values it glides to when it opens, so the drawing travels from one idea to the next, and focus to dim the sliders it is not about. The drawing is yours: any SVG, canvas or component that takes the values.

Examples

Loading, error, last step and RTL

ProThe lesson loading, failing with a retry and on the magnifier step.

Props

Prop	Type	Notes
`title`	`ReactNode`
`params`	`LessonParam[]`	`{ id, label, min, max, step, format? }`
`steps`	`LessonStep[]`	`{ id, title, text(values, prev), values?, focus? }`
`children`	`(values, step) => ReactNode`	The drawing
`values`, `defaultValues`, `onValuesChange`	`Record<string, number>`	Controlled or not
`step`, `defaultStep`, `onStepChange`	`number`	Controlled or not
`status`	`"ready" \| "loading" \| "error"`	Default `ready`
`error`, `onRetry`		Error copy and retry

Keyboard

Key	Action
`Tab`	Steps, sliders, then Previous and Next
Arrow keys	Step a slider. Page Up and Down, Home and End jump
`Enter`, `Space`	Open a step. From the keyboard the setup jumps, it never glides

Accessibility

Steps are a navigation list with aria-current. Sliders are native ranges with their value in words and describe themselves with the step text.
The step text is a polite live region, so moving a slider reads the new explanation once, not a stream of numbers.

Motion

Opening a step with a pointer glides the values for 280 ms with an ease-out curve; dragging a slider cancels it at once.
Keyboard and reduced motion: the setup jumps.