mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
27 lines
737 B
TypeScript
27 lines
737 B
TypeScript
import { cn } from "@/lib/utils"
|
|
import { motion } from "framer-motion"
|
|
|
|
export default function TextBlurTransition(props: { children: string; className?: string }) {
|
|
const words = props.children.split(" ")
|
|
|
|
return (
|
|
<motion.div className={cn("flex w-full flex-wrap justify-center gap-3 transition-all", props.className)}>
|
|
{words.map((word, index) => {
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ filter: "blur(8px)", translateY: "18px", opacity: 0 }}
|
|
animate={{ filter: "blur(0px)", translateY: "0px", opacity: 1 }}
|
|
transition={{
|
|
duration: index * 0.4 + 0.7,
|
|
easings: "cubic-bezier(.77, 0, .175, 1)"
|
|
}}
|
|
>
|
|
{word}
|
|
</motion.div>
|
|
)
|
|
})}
|
|
</motion.div>
|
|
)
|
|
}
|