Animated Components
Note
This component requires motion. It will be installed as you run the cli command
Hover me
Installation
Run the following command to add the changing-text component to your project using the Flow UI CLI:
npx theflowui add changing-textCreate Changing Text
Create the component changing-text.tsx.
"use client";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
type ChangingTextProps = {
initialText: string;
finalText: string;
className?: string;
variant?: "default" | "blur";
blurValue?: number;
speed?: number;
};
const ChangingText = ({
initialText,
finalText,
className,
variant = "default",
blurValue = 4,
speed = 0.3,
} : ChangingTextProps) => {
const [mode, setMode] = useState<"initial" | "final">("initial");
return (
<AnimatePresence mode="wait">
<motion.h1
key={mode}
className={cn(className)}
initial={{ opacity: 0, x: -20, filter: variant === "blur" ? `blur(${blurValue}px)` : "none" }}
animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
exit={{ opacity: 0, x: 20, filter: variant === "blur" ? `blur(${blurValue}px)` : "none" }}
transition={{ duration: speed }}
onMouseEnter={() => setMode("final")}
onMouseLeave={() => setMode("initial")}
>
{mode === "initial" ? initialText : finalText}
</motion.h1>
</AnimatePresence>
)
}
export default ChangingText;Usage
Default Usage
Hover me
import ChangingText from "@/components/ui/changing-text";
export function DefaultExample() {
return (
<ChangingText initialText="Hover me" finalText="Surprise!" className="text-2xl font-semibold" />
)
}Blur Variant
Blur Effect
import ChangingText from "@/components/ui/changing-text";
export function BlurExample() {
return (
<ChangingText
initialText="Blur Effect"
finalText="Focused View"
variant="blur"
blurValue={6}
className="text-2xl font-bold text-primary"
/>
)
}Props
The ChangingText component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
initialText | string | - | The text to display initially. |
finalText | string | - | The text to display on hover. |
className | string | undefined | Additional class names to apply to the component. |
variant | "default" | "blur" | "default" | The animation variant. |
blurValue | number | 4 | The blur value in pixels when using the blur variant. |
speed | number | 0.3 | The duration of the animation in seconds. |