Damn, I like this website!

src/components/ui/blur-in.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { motion } from 'framer-motion'
+import { ny } from '@/lib/utils'
+
+interface BlurIntProps {
+   word: string
+   className?: string
+   variant?: {
+      hidden: { filter: string, opacity: number }
+      visible: { filter: string, opacity: number }
+   }
+   duration?: number
+}
+function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
+   const defaultVariants = {
+      hidden: { filter: 'blur(10px)', opacity: 0 },
+      visible: { filter: 'blur(0px)', opacity: 1 },
+   }
+   const combinedVariants = variant || defaultVariants
+
+   return (
+      <motion.h1
+         initial="hidden"
+         animate="visible"
+         transition={{ duration }}
+         variants={combinedVariants}
+         className={ny(
+            className,
+            'font-display text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-[5rem]',
+         )}
+      >
+         {word}
+      </motion.h1>
+   )
+}
+
+export default BlurIn