feat: add animated text flip and pointer highlight components with home agent section

2025-10-23 04:24:01 +02:00
parent 82e730346e
commit f2cb22ef66
5 changed files with 248 additions and 2 deletions
--- a/src/components/ui/layout-text-flip.tsx
+++ b/src/components/ui/layout-text-flip.tsx
@@ -0,0 +1,58 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const LayoutTextFlip = ({
+  text = "Build Amazing",
+  words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"],
+  duration = 3000,
+}: {
+  text: string;
+  words: string[];
+  duration?: number;
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
+    }, duration);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <motion.span
+        layoutId="subtext"
+        className="text-2xl font-bold tracking-tight drop-shadow-lg md:text-4xl"
+      >
+        {text}
+      </motion.span>
+
+      <motion.span
+        layout
+        className="relative w-fit overflow-hidden px-8 py-2 font-neuton font-medium italic tracking-tight"
+      >
+        <AnimatePresence mode="popLayout">
+          <motion.span
+            key={currentIndex}
+            initial={{ y: -40, filter: "blur(10px)" }}
+            animate={{
+              y: 0,
+              filter: "blur(0px)",
+            }}
+            exit={{ y: 50, filter: "blur(10px)", opacity: 0 }}
+            transition={{
+              duration: 0.5,
+            }}
+            className={cn("inline-block whitespace-nowrap")}
+          >
+            {words[currentIndex]}
+          </motion.span>
+        </AnimatePresence>
+      </motion.span>
+    </>
+  );
+};
--- a/src/components/ui/pointer-highlight.tsx
+++ b/src/components/ui/pointer-highlight.tsx
@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import { useRef, useEffect, useState } from "react";
+
+export function PointerHighlight({
+  children,
+  rectangleClassName,
+  pointerClassName,
+  containerClassName,
+}: {
+  children: React.ReactNode;
+  rectangleClassName?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDimensions({ width, height });
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        setDimensions({ width, height });
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={cn("relative w-fit", containerClassName)}
+      ref={containerRef}
+    >
+      {children}
+      {dimensions.width > 0 && dimensions.height > 0 && (
+        <motion.div
+          className="pointer-events-none absolute inset-0 z-0"
+          initial={{ opacity: 0, scale: 0.95, originX: 0, originY: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          <motion.div
+            className={cn(
+              "absolute inset-0 border border-neutral-800 dark:border-neutral-200",
+              rectangleClassName,
+            )}
+            initial={{
+              width: 0,
+              height: 0,
+            }}
+            whileInView={{
+              width: dimensions.width,
+              height: dimensions.height,
+            }}
+            transition={{
+              duration: 1,
+              ease: "easeInOut",
+            }}
+          />
+          <motion.div
+            className="pointer-events-none absolute"
+            initial={{ opacity: 0 }}
+            whileInView={{
+              opacity: 1,
+              x: dimensions.width + 4,
+              y: dimensions.height + 4,
+            }}
+            style={{
+              rotate: -90,
+            }}
+            transition={{
+              opacity: { duration: 0.1, ease: "easeInOut" },
+              duration: 1,
+              ease: "easeInOut",
+            }}
+          >
+            <Pointer
+              className={cn("h-5 w-5 text-blue-500", pointerClassName)}
+            />
+          </motion.div>
+        </motion.div>
+      )}
+    </div>
+  );
+}
+
+const Pointer = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"></path>
+    </svg>
+  );
+};