gfsg

neerajrekwar · Jun 14, 2024 · 63ff171 · 63ff171
1 parent 37b0a83
commit 63ff171
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 5 deletions.
diff --git a/app/components/FlipWords.tsx b/app/components/FlipWords.tsx
@@ -0,0 +1,17 @@
+"use client";
+import React from "react";
+import { FlipWords } from "./ui/flip-words";
+
+export function FlipWordsDemo() {
+  const words = ["better", "cute", "beautiful", "modern"];
+
+  return (
+    <div className="h-[40rem] flex justify-center items-center px-4">
+      <div className="text-4xl mx-auto font-normal text-neutral-600 dark:text-neutral-400">
+        Build
+        <FlipWords words={words} /> <br />
+        websites with Aceternity UI
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/ui/flip-words.tsx b/app/components/ui/flip-words.tsx
@@ -0,0 +1,85 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, LayoutGroup } from "framer-motion";
+import { cn } from "@/app/utils/cn";
+
+export const FlipWords = ({
+  words,
+  duration = 3000,
+  className,
+}: {
+  words: string[];
+  duration?: number;
+  className?: string;
+}) => {
+  const [currentWord, setCurrentWord] = useState(words[0]);
+  const [isAnimating, setIsAnimating] = useState<boolean>(false);
+
+  // thanks for the fix Julian - https://github.com/Julian-AT
+  const startAnimation = useCallback(() => {
+    const word = words[words.indexOf(currentWord) + 1] || words[0];
+    setCurrentWord(word);
+    setIsAnimating(true);
+  }, [currentWord, words]);
+
+  useEffect(() => {
+    if (!isAnimating)
+      setTimeout(() => {
+        startAnimation();
+      }, duration);
+  }, [isAnimating, duration, startAnimation]);
+
+  return (
+    <AnimatePresence
+      onExitComplete={() => {
+        setIsAnimating(false);
+      }}
+    >
+      <motion.div
+        initial={{
+          opacity: 0,
+          y: 10,
+        }}
+        animate={{
+          opacity: 1,
+          y: 0,
+        }}
+        transition={{
+          duration: 0.4,
+          ease: "easeInOut",
+          type: "spring",
+          stiffness: 100,
+          damping: 10,
+        }}
+        exit={{
+          opacity: 0,
+          y: -40,
+          x: 40,
+          filter: "blur(8px)",
+          scale: 2,
+          position: "absolute",
+        }}
+        className={cn(
+          "z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
+          className,
+        )}
+        key={currentWord}
+      >
+        {currentWord.split("").map((letter, index) => (
+          <motion.span
+            key={currentWord + index}
+            initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
+            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+            transition={{
+              delay: index * 0.08,
+              duration: 0.4,
+            }}
+            className="inline-block"
+          >
+            {letter}
+          </motion.span>
+        ))}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import NavBar from "./components/NavBar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,10 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <NavBar/>
-        {children}
-        </body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,11 +2,13 @@ import Image from "next/image";
 import FlipComponent from "./components/FlipComponent";
 import React from "react";
 import { AuroraBackgroundDemo } from "./components/BackgroundAurra";
+import { FlipWordsDemo } from "./components/FlipWords";
 
 export default function Home() {
   return (
     <main className="antialiased">
       <AuroraBackgroundDemo />
+      <FlipWordsDemo />
       <section className="m-2 bg-white">
         <div className="m-2 p-1">
           <figure className="flex-1 sm:flex ">