StrikeSwap

A word gets struck out and its replacement springs in.

Animation should be ~~decoration~~ communication

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/strike-swap.json

React
import StrikeSwap from "@/components/fx/strike-swap"

<p>Animation should be <StrikeSwap from="decoration" to="communication" /></p>

Uses real <del> and <ins>, so assistive tech can tell which word was removed and which replaced it.
The struck word stays readable; the new word is not conveyed by colour alone.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the final strike and word without motion.

Prop	Type	Default	Description
from	ReactNode	—	The struck word (<del>).
to	ReactNode	—	The replacement (<ins>).
color	string	'#f472b6'	Strike and new-word colour.