KQ-870 · TRANSLATE/FLIP

Translate Flip

A message that turns over into its translation. The card rotates about its horizontal axis on snap — one crisp overshoot, two keyframes — with the original and the translation as the two faces of one card, each hiding its back, while observers measure both faces so the card glides to the active one's height on glide rather than reserving room for the longer text. The original stays under a fold that opens at a measured height, Escape closes it and hands focus back, and a language chip rides the corner rail from one corner to the other as a layout FLIP.

KQ-870 · TRANSLATE/FLIP

Rui Baptista09:12
CDR
Dokka trei vandre nove uur. Pallets Basinworks kunn gaan mit morgen-run, twe stukk.
Dokka trei vandre nove uur. Pallets Basinworks kunn gaan mit morgen-run, twe stukk.

showing cadran

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/translate-flip

Props

text: string; default —; The message as it arrived, in the source language.
translation: string; default —; The rendering in the reader's language.
source / target: TranslateLanguage; default —; Where it came from and the reader's language; each is a code for the chip and a name for every control.
translated / defaultTranslated: boolean; default false; Controlled or initial face.
onTranslatedChange: (translated: boolean) => void; default —; Fires from the control or Space with the next face.
originalOpen / defaultOriginalOpen: boolean; default false; Controlled or initial state of the fold that holds the original.
onOriginalOpenChange: (open: boolean) => void; default —; Fires from the fold control, from Escape, and when turning back closes the fold.
pending: boolean; default false; The host is still producing the translation: the chip turns an arc and the control refuses with aria-disabled.
author: string; default —; Printed above the card.
time: string; default —; Sent time, already formatted.
label: string; default "Thread"; Names the thread list for assistive technology.

Prop	Type	Default	Description
text	string	—	The message as it arrived, in the source language.
translation	string	—	The rendering in the reader's language.
source / target	TranslateLanguage	—	Where it came from and the reader's language; each is a code for the chip and a name for every control.
translated / defaultTranslated	boolean	false	Controlled or initial face.
onTranslatedChange	(translated: boolean) => void	—	Fires from the control or Space with the next face.
originalOpen / defaultOriginalOpen	boolean	false	Controlled or initial state of the fold that holds the original.
onOriginalOpenChange	(open: boolean) => void	—	Fires from the fold control, from Escape, and when turning back closes the fold.
pending	boolean	false	The host is still producing the translation: the chip turns an arc and the control refuses with aria-disabled.
author	string	—	Printed above the card.
time	string	—	Sent time, already formatted.
label	string	"Thread"	Names the thread list for assistive technology.