A flexible text animation that splits a headline by word, character or line and animates each piece with your own Framer Motion variants. Respects reduced motion.
"use client";
import * as React from "react";
import { type Variants } from "framer-motion";
import { TextMotion } from "@/components/ui/text-motion";
const settings = {
text: "Wavy Motion!",
delay: 0,
duration: 0.3,
replay: 0,
};
const demoVariants: Variants = {
hidden: {
opacity: 0,
y: 30,
rotate: 45,
scale: 0.5,
},
show: (i: number) => ({
opacity: 1,
y: 0,
rotate: 0,
scale: 1,
transition: {
delay: i * 0.1,
duration: 0.4,
y: {
type: "spring",
damping: 12,
stiffness: 200,
mass: 0.8,
},
rotate: {
type: "spring",
damping: 8,
stiffness: 150,
},
scale: {
type: "spring",
damping: 10,
stiffness: 300,
},
},
}),
exit: (i: number) => ({
opacity: 0,
y: 30,
rotate: 45,
scale: 0.5,
transition: {
delay: i * 0.1,
duration: 0.4,
},
}),
};
const previewClass =
"text-center text-4xl font-bold tracking-tighter text-foreground md:text-6xl";
export function TextMotionPreview(props: Partial<typeof settings> = {}) {
const state = { ...settings, ...props };
return (
<div className="grid min-h-[360px] w-full place-items-center px-4 py-12 text-center sm:px-8">
<TextMotion
key={state.replay}
text={state.text || "Wavy Motion!"}
as="h1"
by="character"
variants={demoVariants}
delay={state.delay}
duration={state.duration}
startOnView={false}
className={previewClass}
/>
</div>
);
}
export default function Demo(props: Partial<typeof settings>) {
return <TextMotionPreview {...props} />;
}