chore: front page glow

web/components/custom/text-blur-transition.tsx

@@ -0,0 +1,26 @@
+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>
+	)
+}