Lipsync panelPro

Pair a voice track with a face clip and preview sync quality.

Markdown

On this page

ProA Spanish dub on a close-up: compare the original and synced take, then sync again.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/lipsync-panel

Usage

tsx

import { LipsyncPanel } from "@/components/ui/chatcn/pro/lipsync-panel"

<LipsyncPanel face={face} voice={voice} status={status} result={result} onSync={sync} view={view} onViewChange={setView} currentTime={time} onSeek={seek} />

The stage switches between the original and the synced take at the same moment, so the comparison is honest. The voice lane lines up with the clip and shows what happens past its end: loop the clip, hold its last frame, or trim the voice. After a sync, a confidence line runs under the voice with every stretch below threshold flagged and listed with its reason; click one to jump there. The offset slider moves the voice up to 200 ms either way.

Examples

States

ProFinding the face, syncing frames, no face found, poor sync and nothing paired.

Props

Prop	Type	Notes
`face`	`{ label, duration, preview?, box? }`	`box` is drawn while the face is found
`voice`	`{ label, duration, peaks }`	Seconds
`status`	`idle \| analyzing \| rendering \| ready \| error`	With `progress` and `error`
`result`	`{ score, confidence, issues? }`	0 to 1; issues are `{ start, end, label }`
`fit`, `onFitChange`	`loop \| hold \| trim`	When the voice is longer
`offset`, `onOffsetChange`	`number`	Milliseconds, positive is later
`view`, `onViewChange`	`original \| synced`	Shows the take switch
`onSync`, `onCancel`, `onPickFace`, `onPickVoice`	`() => void`	Actions

Accessibility

The voice lane is a slider: arrow keys step 0.5 s, Shift steps 2 s, Home and End go to the ends.
Status changes are announced politely; a failure is an alert that says how to fix it.
Flags pair amber with an icon, a label and a time, never color alone.