Damn, I like this website!

src/components/ui/word-pull-up.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import type { Variants } from 'framer-motion'
+import { motion } from 'framer-motion'
+import { ny } from '@/lib/utils'
+
+interface WordPullUpProps {
+   words: string
+   delayMultiple?: number
+   wrapperFramerProps?: Variants
+   framerProps?: Variants
+   className?: string
+}
+
+export default function WordPullUp({
+   words,
+   wrapperFramerProps = {
+      hidden: { opacity: 0 },
+      show: {
+         opacity: 1,
+         transition: {
+            staggerChildren: 0.2,
+         },
+      },
+   },
+   framerProps = {
+      hidden: { y: 20, opacity: 0 },
+      show: { y: 0, opacity: 1 },
+   },
+   className,
+}: WordPullUpProps) {
+   return (
+      <motion.h1
+         variants={wrapperFramerProps}
+         initial="hidden"
+         animate="show"
+         className={ny(
+            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
+            className,
+         )}
+      >
+         {words.split(' ').map((word, i) => (
+            <motion.span
+               key={i}
+               variants={framerProps}
+               style={{ display: 'inline-block', paddingRight: '8px' }}
+            >
+               {word === '' ? <span>&nbsp;</span> : word}
+            </motion.span>
+         ))}
+      </motion.h1>
+   )
+}