Docs
Jitter Text
Animated Text component that applies a jittery effect
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/text/jitter-text.jsonManual
Install dependencies
npm install motionRun the following command
It will create a new file jitter-text.tsx inside the components/animata/text directory.
touch components/animata/text/jitter-text-.tsxPaste the code
Open the newly created file and paste the following code:
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
interface JitteryTextProps {
text: string;
duration?: number;
className?: string;
}
export default function JitterText({ text, duration, className }: JitteryTextProps) {
const animationDuration = duration || 0.6;
return (
<div>
<motion.span
className={cn("inline-block", className)}
animate={{
y: [1.5, 1, -1, 1.5, -1.5, 1, -0.5, 0],
x: [0, -1, 1.5, -1.5, 1, -1, 0.5, 0],
rotate: [0.5, -1.5, 1, -1.5, 1, -1, 1, 0],
}}
transition={{
repeat: Infinity,
repeatDelay: 0.5,
repeatType: "reverse",
ease: "easeInOut",
duration: animationDuration,
}}
>
{text}
</motion.span>
</div>
);
}Credits
Built by DoffuXx