Container Text Flip
Text that flips between two states within a container, triggered by hover or scroll.
Preview
Container Text Flip
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Before/after comparisons and feature toggles.
Why this component matters
The flip reveals a contrast — ideal for showing the transformation a product provides.
Usage guidance
Use for before/after messaging. The two text states should be concise and contrasting. Set flip duration to 500-700ms.
Installation
bash
npx shadcn@latest add @aceternity/container-text-flipUsage
example.tsxtsx
import { ContainerTextFlip } from "@/components/ui/container-text-flip";
export default function Example() {
return (
<ContainerTextFlip>
{/* Your content here */}
</ContainerTextFlip>
);
}Source
container-text-flip.tsx
components/ui/container-text-flip.tsx