Variant crossfadePro

Compares image variants in one frame that never moves: only the picture changes, so the eye compares content, not layout. Number keys blink between takes.

Markdown

On this page

ProFour takes on one prompt in a frame that never moves. Click a thumbnail, or press 1 to 4 to blink between them.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/variant-crossfade

Usage

tsx

import { VariantCrossfade } from "@/components/ui/chatcn/pro/variant-crossfade"

<VariantCrossfade variants={takes} aspectRatio="4:3" onValueChange={setPicked} />

Each variant is { src, alt, label?, meta? }. Every variant is cropped into the same frame, so switching never changes its size. All variants are decoded up front, and a switch waits for the next picture to be decoded, so the crossfade never starts on a blank. The previous picture stays opaque underneath, so the fade never dips through the frame.

Clicking a thumbnail crossfades. Number keys swap at once: a keyboard action never animates, and an instant swap is what blink comparison needs. Pass value and onValueChange to drive it from your own controls.

Examples

States

Controlled from outside without thumbnails, a take that failed to load, and right to left.

ProControlled from outside without thumbnails and a take that failed to load.

Props

Prop	Type	Notes
`variants`	`{ src, alt, label?, meta? }[]`	`label` defaults to "Variant n"
`value`, `defaultValue`, `onValueChange`	`number`	Controlled or uncontrolled index
`aspectRatio`	`number \| "4:3"`	The frame. Default 1
`showThumbnails`	`boolean`	Default true
`showLabel`	`boolean`	The chip with label and meta. Default true
`duration`	`number`	Crossfade for pointer changes, in ms. Default 200
`errorText`	`ReactNode`	Shown in the frame when a variant fails to load
`frameClassName`	`string`	Classes for the frame

Keyboard

Key	Action
`1` to `9`	Shows that variant at once, while focus is inside the component
`Tab`	Moves focus into the thumbnails
`ArrowLeft` / `ArrowRight`	Moves between thumbnails (mirrored in right to left)
`Enter` / `Space`	Shows the focused variant

Accessibility

Thumbnails are a Base UI toggle group named Variants, each toggle named with its label and shortcut, for example Take 2, key 2, and pointing at the frame with aria-controls.
The frame image carries the shown variant's alt; the others are hidden.
A polite live region says which variant is shown, for example Take 2 of 4.
A variant that fails shows what happened in the frame and an icon on its thumbnail; the others keep working.

Motion

Pointer changes crossfade over 200 ms. Keyboard changes swap in one frame.
Thumbnails press to 0.97 over 100 ms; hover only raises opacity.
Under reduced motion the crossfade is 150 ms and nothing scales.