From 3d79a18ea4a3f9c85f1be230d711f7bfe1dc18d5 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@mac-mini.local>
Date: Fri, 17 Jan 2025 16:40:48 -0600
Subject: Animate title

---
 client/src/components/LettersPullUp.tsx | 36 +++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 client/src/components/LettersPullUp.tsx

(limited to 'client/src/components/LettersPullUp.tsx')

diff --git a/client/src/components/LettersPullUp.tsx b/client/src/components/LettersPullUp.tsx
new file mode 100644
index 0000000..0584b5a
--- /dev/null
+++ b/client/src/components/LettersPullUp.tsx
@@ -0,0 +1,36 @@
+import { motion, useInView } from 'framer-motion';
+import * as React from 'react';
+
+export function LettersPullUp({ text }: { text: string }) {
+  const splittedText = text.split('');
+
+  const pullupVariant = {
+    initial: { y: 10, opacity: 0 },
+    animate: (i: number) => ({
+      y: 0,
+      opacity: 1,
+      transition: {
+        delay: i * 0.05,
+      },
+    }),
+  };
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once: true });
+  return (
+    <div>
+      {splittedText.map((current, i) => (
+        <motion.div
+          key={i}
+          ref={ref}
+          variants={pullupVariant}
+          initial="initial"
+          animate={isInView ? 'animate' : ''}
+          custom={i}
+          style={{ display: 'inline-block' }}
+        >
+          {current == ' ' ? <span>&nbsp;</span> : current}
+        </motion.div>
+      ))}
+    </div>
+  );
+}
-- 
cgit v1.2.3