Container Text Flip

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

A pill cycles through words, resizing its width and blurring each letter in.

Code

"use client";
import { ContainerTextFlip } from "@/lab/aceternity/ui/container-text-flip";
import { Fit } from "./_fit";

export default function ContainerTextFlipDemo() {
  return (
    <Fit width={520} height={220} max={1.6}>
      <div className="flex h-full w-full items-center justify-center">
        <ContainerTextFlip words={["better", "modern", "Tyler Durden", "awesome"]} />
      </div>
    </Fit>
  );
}

Prompt

Build "Container Text Flip", a text animation. What it does: A pill cycles through words, resizing its width and blurring each letter in. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/container-text-flip (Aceternity UI, Aceternity UI licence (free component)).