Explains code step by step: pick a step and a highlight band springs to its lines, the rest dim, and the panel scrolls them into view.
import { useEffect, useState } from "react";export function useDebounce<T>(value: T, delay = 300) { const [debounced, setDebounced] = useState(value); useEffect(() => { // wait until the value has stopped changing const timer = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debounced;}Step 1 of 4: Keep a delayed copy, lines 3 to 4
Customize
Usage
import { CodeWalkthrough } from "@/components/motionkit/code-walkthrough";
<CodeWalkthrough
code={source}
steps={[
{ title: "Keep a delayed copy", description: "The hook stores its own copy of the value.", lines: [3, 4] },
{ title: "Wait for a pause", description: "Every change starts a timer.", lines: [6, 9] },
{ title: "Cancel stale timers", description: "Only the last change in a burst lands.", lines: [9, 10] },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Highlight band
Step chosen
Notes open
Step chosen
Tutorials, API docs, engineering blog posts and onboarding: explaining a file one idea at a time instead of with a wall of comments.
Each step names a line range. Lines are a fixed 24px tall, so the highlight band's top and height are simple sums, and a spring moves it between ranges. Lines outside the range drop to 60% opacity, and an effect scrolls the code panel, not the page, to just above the first highlighted line. A small single-pass tokeniser colours comments, strings, numbers, keywords, functions and components in the MotionKit palette, with no highlighter dependency. Steps are buttons with a roving Tab stop, and each change is announced.
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | — | The source to explain. JavaScript, TypeScript and JSX are highlighted. |
| steps | WalkthroughStep[] | — | Each step's title, description and [from, to] lines. |
| filename | string | "example.tsx" | File name in the panel header. |
| accent | string | "#5FAEB4" | Colour of the band and active step. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/code-walkthrough. It saves the file to components/motionkit and installs its dependencies.
Code Walkthrough is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the band jumps, notes fade without growing and the panel scrolls instantly.
The built-in highlighter knows JavaScript, TypeScript and JSX. Other languages still display correctly, just with fewer colours; for full coverage, swap highlight() for Shiki or sugar-high output.
Copy Button
A copy-to-clipboard button whose clipboard icon spins into a drawn tick while the label swaps to Copied, without the button changing width.
Pricing Section
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
Launch Hero
A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.
import { useEffect, useState } from "react";export function useDebounce<T>(value: T, delay = 300) { const [debounced, setDebounced] = useState(value); useEffect(() => { // wait until the value has stopped changing const timer = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debounced;}Step 1 of 4: Keep a delayed copy, lines 3 to 4
Customize
Usage
import { CodeWalkthrough } from "@/components/motionkit/code-walkthrough";
<CodeWalkthrough
code={source}
steps={[
{ title: "Keep a delayed copy", description: "The hook stores its own copy of the value.", lines: [3, 4] },
{ title: "Wait for a pause", description: "Every change starts a timer.", lines: [6, 9] },
{ title: "Cancel stale timers", description: "Only the last change in a burst lands.", lines: [9, 10] },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Highlight band
Step chosen
Notes open
Step chosen
The live preview is free to explore. Plus unlocks the source for Code Walkthrough and every other premium component.