Line draw revealPro

SVG strokes drawn as if by pen, driven by real progress or by time.

Markdown

On this page

ProAn agent draws the architecture it proposes as its progress events arrive.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/line-draw-reveal

Usage

tsx

import { LineDrawReveal } from "@/components/ui/chatcn/pro/line-draw-reveal"

<LineDrawReveal progress={job.progress} viewBox="0 0 640 240" label="Upload pipeline">
  <rect x={16} y={40} width={120} height={56} rx={10} />
  <path d="M136 68 H190" />
</LineDrawReveal>

Every stroked shape is measured once; in sequence order they share one pen, so it moves at the same speed through a short tick and a long curve, the way a hand draws. A small accent dot rides the end of the line. Fills and any element with data-draw-after fade in once their shape is drawn; data-draw="false" keeps a shape visible from the start. Real progress is eased toward and never runs backwards.

Examples

Signature

ProApprove, and the signature writes itself on the lease.

Driven by progress

ProGenerated line art that follows a progress value and never runs backwards.

States

ProOne pen or all at once, reduced motion, held before it plays, and a chart line.

Props

Prop	Type	Notes
`progress`	`number`	0 to 1 from real events. Leave out to draw over time
`duration`, `delay`	`number`	Milliseconds for a timed drawing. Default 1800 and 0
`play`	`boolean`	Start a timed drawing. Default true
`order`	`"sequence" \| "together"`	One pen, or every stroke at once
`pen`	`boolean`	The dot at the end of the stroke. Default true
`onComplete`	`() => void`	Once, when the drawing is done
`label`	`string`	Describes the drawing; without it the SVG is decorative
`reducedMotion`	`boolean`	Force it on or off

Accessibility

With label the SVG is an image with that name; without it, it is hidden from assistive technology.
Text inside the drawing stays real SVG text, readable once shown.
In forced colors the strokes and the pen use system colors.

Motion

Strokes are revealed with stroke-dashoffset from one requestAnimationFrame loop that stops when the drawing settles. Timed drawings ease in and out over duration; real progress follows a critically damped approach. Reduced motion moves no strokes: each shape fades in whole once reached, and a timed drawing shows its final state.