{children}
;
+};
+
+export const ModalFooter = ({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const Overlay = ({ className }: { className?: string }) => {
+ return (
+
+ {propTabs.map((tab, idx) => (
+
+ ))}
+
+
+ {tabs.map((tab, idx) => (
+
+ {tab.content}
+
+ ))}
+
+ );
+};
diff --git a/components/ui/animated-tooltip.tsx b/components/ui/animated-tooltip.tsx
new file mode 100644
index 0000000..2b0447c
--- /dev/null
+++ b/components/ui/animated-tooltip.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from "motion/react";
+
+export const AnimatedTooltip = ({
+ items,
+}: {
+ items: {
+ id: number;
+ name: string;
+ designation: string;
+ image: string;
+ }[];
+}) => {
+ const [hoveredIndex, setHoveredIndex] = useState setHoveredIndex(item.id)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ >
+
+ {hoveredIndex === item.id && (
+
+
+
+
+ )}
+
+ 
+
+ ))}
+
+ );
+};
diff --git a/components/ui/aurora-background.tsx b/components/ui/aurora-background.tsx
new file mode 100644
index 0000000..81983ed
--- /dev/null
+++ b/components/ui/aurora-background.tsx
@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "@/lib/utils";
+import React, { ReactNode } from "react";
+
+interface AuroraBackgroundProps extends React.HTMLProps{item.name}
+ {item.designation}
+
+
+
+
+
+ {children}
+
+
+
+ );
+});
+
+BackgroundBeams.displayName = "BackgroundBeams";
diff --git a/components/ui/background-boxes.tsx b/components/ui/background-boxes.tsx
new file mode 100644
index 0000000..172bdcd
--- /dev/null
+++ b/components/ui/background-boxes.tsx
@@ -0,0 +1,69 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
+ const rows = new Array(150).fill(1);
+ const cols = new Array(100).fill(1);
+ const colors = [
+ "#93c5fd",
+ "#f9a8d4",
+ "#86efac",
+ "#fde047",
+ "#fca5a5",
+ "#d8b4fe",
+ "#93c5fd",
+ "#a5b4fc",
+ "#c4b5fd",
+ ];
+ const getRandomColor = () => {
+ return colors[Math.floor(Math.random() * colors.length)];
+ };
+
+ return (
+
+ {rows.map((_, i) => (
+
+ {cols.map((_, j) => (
+
+ {j % 2 === 0 && i % 2 === 0 ? (
+
+ ) : null}
+
+ ))}
+
+ ))}
+
+ );
+};
+
+export const Boxes = React.memo(BoxesCore);
diff --git a/components/ui/background-gradient-animation.tsx b/components/ui/background-gradient-animation.tsx
new file mode 100644
index 0000000..0b44bbf
--- /dev/null
+++ b/components/ui/background-gradient-animation.tsx
@@ -0,0 +1,171 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef, useState } from "react";
+
+export const BackgroundGradientAnimation = ({
+ gradientBackgroundStart = "rgb(108, 0, 162)",
+ gradientBackgroundEnd = "rgb(0, 17, 82)",
+ firstColor = "18, 113, 255",
+ secondColor = "221, 74, 255",
+ thirdColor = "100, 220, 255",
+ fourthColor = "200, 50, 50",
+ fifthColor = "180, 180, 50",
+ pointerColor = "140, 100, 255",
+ size = "80%",
+ blendingValue = "hard-light",
+ children,
+ className,
+ interactive = true,
+ containerClassName,
+}: {
+ gradientBackgroundStart?: string;
+ gradientBackgroundEnd?: string;
+ firstColor?: string;
+ secondColor?: string;
+ thirdColor?: string;
+ fourthColor?: string;
+ fifthColor?: string;
+ pointerColor?: string;
+ size?: string;
+ blendingValue?: string;
+ children?: React.ReactNode;
+ className?: string;
+ interactive?: boolean;
+ containerClassName?: string;
+}) => {
+ const interactiveRef = useRef
+
+
+ );
+};
diff --git a/components/ui/background-gradient.tsx b/components/ui/background-gradient.tsx
new file mode 100644
index 0000000..2433a5c
--- /dev/null
+++ b/components/ui/background-gradient.tsx
@@ -0,0 +1,72 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+import { motion } from "motion/react";
+
+export const BackgroundGradient = ({
+ children,
+ className,
+ containerClassName,
+ animate = true,
+}: {
+ children?: React.ReactNode;
+ className?: string;
+ containerClassName?: string;
+ animate?: boolean;
+}) => {
+ const variants = {
+ initial: {
+ backgroundPosition: "0 50%",
+ },
+ animate: {
+ backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
+ },
+ };
+ return (
+ {children}
+
+
+
+
+
+
+
+ {interactive && (
+
+ )}
+
+
+
+ );
+};
diff --git a/components/ui/bento-grid.tsx b/components/ui/bento-grid.tsx
new file mode 100644
index 0000000..8b8f732
--- /dev/null
+++ b/components/ui/bento-grid.tsx
@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+
+export const BentoGrid = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children?: React.ReactNode;
+}) => {
+ return (
+ {children}
+
+ {children}
+
+ );
+};
+
+export const BentoGridItem = ({
+ className,
+ title,
+ description,
+ header,
+ icon,
+}: {
+ className?: string;
+ title?: string | React.ReactNode;
+ description?: string | React.ReactNode;
+ header?: React.ReactNode;
+ icon?: React.ReactNode;
+}) => {
+ return (
+
+ {header}
+
+ );
+};
diff --git a/components/ui/card-hover-effect.tsx b/components/ui/card-hover-effect.tsx
new file mode 100644
index 0000000..b173b30
--- /dev/null
+++ b/components/ui/card-hover-effect.tsx
@@ -0,0 +1,99 @@
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "motion/react";
+
+import { useState } from "react";
+
+export const HoverEffect = ({
+ items,
+ className,
+}: {
+ items: {
+ title: string;
+ description: string;
+ link: string;
+ }[];
+ className?: string;
+}) => {
+ const [hoveredIndex, setHoveredIndex] = useState
+ {icon}
+
+
+ {title}
+
+
+ {description}
+
+
+ {items.map((item, idx) => (
+ setHoveredIndex(idx)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ >
+
+ {hoveredIndex === idx && (
+
+
+ {item.title}
+ {item.description}
+
+
+ ))}
+
+ );
+};
+
+export const Card = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) => {
+ return (
+
+
+ );
+};
+export const CardTitle = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) => {
+ return (
+
+
+ {children}
+ {children}
+ ); +}; +export const CardDescription = ({ + className, + children, +}: { + className?: string; + children: React.ReactNode; +}) => { + return ( ++ {children} +
+ ); +}; diff --git a/components/ui/card-spotlight.tsx b/components/ui/card-spotlight.tsx new file mode 100644 index 0000000..3f51533 --- /dev/null +++ b/components/ui/card-spotlight.tsx @@ -0,0 +1,61 @@ +"use client"; + +import { useMotionValue, motion, useMotionTemplate } from "motion/react"; +import React, { MouseEvent as ReactMouseEvent, useState } from "react"; +import { cn } from "@/lib/utils"; + +export const CardSpotlight = ({ + children, + radius = 350, + color = "#262626", + className, + ...props +}: { + radius?: number; + color?: string; + children: React.ReactNode; +} & React.HTMLAttributes
+
+ {isHovering && (
+
+ )}
+
+ {children}
+
+ );
+};
diff --git a/components/ui/card-stack.tsx b/components/ui/card-stack.tsx
new file mode 100644
index 0000000..042ac3e
--- /dev/null
+++ b/components/ui/card-stack.tsx
@@ -0,0 +1,65 @@
+"use client";
+import { useEffect, useState } from "react";
+import { motion } from "motion/react";
+
+type Card = {
+ id: number;
+ name: string;
+ designation: string;
+ content: React.ReactNode;
+};
+
+export const CardStack = ({
+ items,
+ offset,
+ scaleFactor,
+}: {
+ items: Card[];
+ offset?: number;
+ scaleFactor?: number;
+}) => {
+ const CARD_OFFSET = offset || 10;
+ const SCALE_FACTOR = scaleFactor || 0.06;
+ const [cards, setCards] = useState
+ {cards.map((card, index) => {
+ return (
+
+
+ );
+ })}
+
+ );
+};
diff --git a/components/ui/container-scroll-animation.tsx b/components/ui/container-scroll-animation.tsx
new file mode 100644
index 0000000..46b49c6
--- /dev/null
+++ b/components/ui/container-scroll-animation.tsx
@@ -0,0 +1,95 @@
+"use client";
+import React, { useRef } from "react";
+import { useScroll, useTransform, motion, MotionValue } from "motion/react";
+
+export const ContainerScroll = ({
+ titleComponent,
+ children,
+}: {
+ titleComponent: string | React.ReactNode;
+ children: React.ReactNode;
+}) => {
+ const containerRef = useRef{card.content}
+
+
+ {card.name}
++ {card.designation} +
+
+
+ );
+};
+
+export const Header = ({ translate, titleComponent }: any) => {
+ return (
+
+
+ {children}
+
+
+
+ {children}
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ ref={ref}
+ className="group/cover relative inline-block rounded-sm bg-neutral-100 px-2 py-2 transition duration-200 hover:bg-neutral-900 dark:bg-neutral-900"
+ >
+
+ {hovered && (
+
+
+
+
+ )}
+
+ {beamPositions.map((position, index) => (
+
+ {children}
+
+
+ );
+};
+
+export const Beam = ({
+ className,
+ delay,
+ duration,
+ hovered,
+ width = 600,
+ ...svgProps
+}: {
+ className?: string;
+ delay?: number;
+ duration?: number;
+ hovered?: boolean;
+ width?: number;
+} & React.ComponentProps
+
+ );
+};
+
+export function CardPattern({ mouseX, mouseY, randomString }: any) {
+ const maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;
+ const style = { maskImage, WebkitMaskImage: maskImage };
+
+ return (
+
+
+
+
+
+
+ {text}
+
+
+
+
+
+
+ );
+}
+
+const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+export const generateRandomString = (length: number) => {
+ let result = "";
+ for (let i = 0; i < length; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+ return result;
+};
+
+export const Icon = ({ className, ...rest }: any) => {
+ return (
+
+ );
+};
diff --git a/components/ui/flip-words.tsx b/components/ui/flip-words.tsx
new file mode 100644
index 0000000..1e25081
--- /dev/null
+++ b/components/ui/flip-words.tsx
@@ -0,0 +1,98 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const FlipWords = ({
+ words,
+ duration = 3000,
+ className,
+}: {
+ words: string[];
+ duration?: number;
+ className?: string;
+}) => {
+ const [currentWord, setCurrentWord] = useState(words[0]);
+ const [isAnimating, setIsAnimating] = useState+ {randomString} +
+
+
+ {open && (
+
+ {items.map((item, idx) => (
+
+
+
+ ))}
+
+ )}
+
+
+
+ );
+};
+
+const FloatingDockDesktop = ({
+ items,
+ className,
+}: {
+ items: { title: string; icon: React.ReactNode; href: string }[];
+ className?: string;
+}) => {
+ const mouseX = useMotionValue(Infinity);
+ return (
+ {item.icon}
+
+ setHovered(index)}
+ onMouseLeave={() => setHovered(null)}
+ className={cn(
+ "relative h-60 w-full overflow-hidden rounded-lg bg-gray-100 transition-all duration-300 ease-out md:h-96 dark:bg-neutral-900",
+ hovered !== null && hovered !== index && "scale-[0.98] blur-sm"
+ )}
+ >
+ 
+
+ )
+);
+
+Card.displayName = "Card";
+
+type Card = {
+ title: string;
+ src: string;
+};
+
+export function FocusCards({ cards }: { cards: Card[] }) {
+ const [hovered, setHovered] = useState
+
+
+ {card.title}
+
+
+ {cards.map((card, index) => (
+
+ );
+}
diff --git a/components/ui/glare-card.tsx b/components/ui/glare-card.tsx
new file mode 100644
index 0000000..67b80fe
--- /dev/null
+++ b/components/ui/glare-card.tsx
@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { useRef } from "react";
+
+export const GlareCard = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ const isPointerInside = useRef(false);
+ const refElement = useRef {
+ const rotateFactor = 0.4;
+ const rect = event.currentTarget.getBoundingClientRect();
+ const position = {
+ x: event.clientX - rect.left,
+ y: event.clientY - rect.top,
+ };
+ const percentage = {
+ x: (100 / rect.width) * position.x,
+ y: (100 / rect.height) * position.y,
+ };
+ const delta = {
+ x: percentage.x - 50,
+ y: percentage.y - 50,
+ };
+
+ const { background, rotate, glare } = state.current;
+ background.x = 50 + percentage.x / 4 - 12.5;
+ background.y = 50 + percentage.y / 3 - 16.67;
+ rotate.x = -(delta.x / 3.5);
+ rotate.y = delta.y / 2;
+ rotate.x *= rotateFactor;
+ rotate.y *= rotateFactor;
+ glare.x = percentage.x;
+ glare.y = percentage.y;
+
+ updateStyles();
+ }}
+ onPointerEnter={() => {
+ isPointerInside.current = true;
+ if (refElement.current) {
+ setTimeout(() => {
+ if (isPointerInside.current) {
+ refElement.current?.style.setProperty("--duration", "0s");
+ }
+ }, 300);
+ }
+ }}
+ onPointerLeave={() => {
+ isPointerInside.current = false;
+ if (refElement.current) {
+ refElement.current.style.removeProperty("--duration");
+ refElement.current?.style.setProperty("--r-x", `0deg`);
+ refElement.current?.style.setProperty("--r-y", `0deg`);
+ }
+ }}
+ >
+
+ );
+};
diff --git a/components/ui/gooey-input.tsx b/components/ui/gooey-input.tsx
new file mode 100644
index 0000000..983797e
--- /dev/null
+++ b/components/ui/gooey-input.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { useState, useRef, useEffect, useId, useMemo, useCallback, type ChangeEvent } from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+function GooeyFilter({ filterId, blur }: { filterId: string; blur: number }) {
+ return (
+
+ );
+}
+
+function SearchIcon({ layoutId }: { layoutId: string }) {
+ return (
+
+
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/components/ui/google-gemini-effect.tsx b/components/ui/google-gemini-effect.tsx
new file mode 100644
index 0000000..42bd043
--- /dev/null
+++ b/components/ui/google-gemini-effect.tsx
@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { motion, MotionValue } from "motion/react";
+
+const transition = {
+ duration: 0,
+ ease: "linear" as const,
+};
+
+export const GoogleGeminiEffect = ({
+ pathLengths,
+ title,
+ description,
+ className,
+}: {
+ pathLengths: MotionValue[];
+ title?: string;
+ description?: string;
+ className?: string;
+}) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/components/ui/hero-highlight.tsx b/components/ui/hero-highlight.tsx
new file mode 100644
index 0000000..9243110
--- /dev/null
+++ b/components/ui/hero-highlight.tsx
@@ -0,0 +1,136 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { useMotionValue, motion, useMotionTemplate } from "motion/react";
+import React from "react";
+
+export const HeroHighlight = ({
+ children,
+ className,
+ containerClassName,
+}: {
+ children: React.ReactNode;
+ className?: string;
+ containerClassName?: string;
+}) => {
+ const mouseX = useMotionValue(0);
+ const mouseY = useMotionValue(0);
+
+ // SVG patterns for different states and themes
+ const dotPatterns = {
+ light: {
+ default: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%23d4d4d4' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
+ hover: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%236366f1' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
+ },
+ dark: {
+ default: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%23404040' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
+ hover: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%238183f4' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E")`,
+ },
+ };
+
+ function handleMouseMove({ currentTarget, clientX, clientY }: React.MouseEvent+ {title || `Build with Aceternity UI`} +
++ {description || + `Scroll this component and see the bottom SVG come to life wow this + works!`} +
+
+
+
+
+
+
+
+
+ );
+};
+
+export const Highlight = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ return (
+ {children}
+
+
+
+ {firstRow.map((product) => (
+
+
+ {secondRow.map((product) => (
+
+
+ {thirdRow.map((product) => (
+
+
+
+ );
+};
+
+export const Header = () => {
+ return (
+
+
+ The Ultimate
+
+ );
+};
+
+export const ProductCard = ({
+ product,
+ translate,
+}: {
+ product: {
+ title: string;
+ link: string;
+ thumbnail: string;
+ };
+ translate: MotionValue
+ The Ultimate
development studio
+
+ + We build beautiful products with the latest technologies and frameworks. We are a team of + passionate developers and designers that love to build amazing products. +
++ {product.title} +
+
+
+ );
+};
diff --git a/components/ui/magnetic-button.tsx b/components/ui/magnetic-button.tsx
new file mode 100644
index 0000000..869cd1d
--- /dev/null
+++ b/components/ui/magnetic-button.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { motion } from "motion/react";
+
+export const MagneticButton = ({
+ children,
+ strength = 0.8,
+ maxDistance = 100,
+}: {
+ children: React.ReactNode;
+ strength?: number;
+ maxDistance?: number;
+}) => {
+ const ref = useRef-
+ {items.map((item) => (
+
-
+
+ + + {item.quote} + +
++ + + {item.name} + + + {item.title} + + ++
+ ))}
+
+
+ {children}
+
+
+ );
+};
diff --git a/components/ui/meteors.tsx b/components/ui/meteors.tsx
new file mode 100644
index 0000000..277a464
--- /dev/null
+++ b/components/ui/meteors.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+
+export const Meteors = ({ number, className }: { number?: number; className?: string }) => {
+ const meteors = new Array(number || 20).fill(true);
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+ {loadingStates.map((loadingState, index) => {
+ const distance = Math.abs(index - value);
+ const opacity = Math.max(1 - distance * 0.2, 0); // Minimum opacity is 0, keep it 0.2 if you're sane.
+
+ return (
+
+
+ );
+ })}
+
+ );
+};
+
+export const MultiStepLoader = ({
+ loadingStates,
+ loading,
+ duration = 2000,
+ loop = true,
+}: {
+ loadingStates: LoadingState[];
+ loading?: boolean;
+ duration?: number;
+ loop?: boolean;
+}) => {
+ const [currentState, setCurrentState] = useState(0);
+
+ useEffect(() => {
+ if (!loading) {
+ setCurrentState(0);
+ return;
+ }
+ const timeout = setTimeout(() => {
+ setCurrentState((prevState) =>
+ loop
+ ? prevState === loadingStates.length - 1
+ ? 0
+ : prevState + 1
+ : Math.min(prevState + 1, loadingStates.length - 1)
+ );
+ }, duration);
+
+ return () => clearTimeout(timeout);
+ }, [currentState, loading, loop, loadingStates.length, duration]);
+ return (
+
+ {index > value &&
+
+ {loadingState.text}
+
+
+
+
+
+
+
+
+ {optionsPanel}
+
+
+
+ );
+};
diff --git a/components/ui/parallax-scroll.tsx b/components/ui/parallax-scroll.tsx
new file mode 100644
index 0000000..a3d6787
--- /dev/null
+++ b/components/ui/parallax-scroll.tsx
@@ -0,0 +1,76 @@
+"use client";
+import { useScroll, useTransform } from "motion/react";
+import { useRef } from "react";
+import { motion } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+export const ParallaxScroll = ({ images, className }: { images: string[]; className?: string }) => {
+ const gridRef = useRef
+
+ );
+};
diff --git a/components/ui/placeholders-and-vanish-input.tsx b/components/ui/placeholders-and-vanish-input.tsx
new file mode 100644
index 0000000..5c7bb63
--- /dev/null
+++ b/components/ui/placeholders-and-vanish-input.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export function PlaceholdersAndVanishInput({
+ placeholders,
+ onChange,
+ onSubmit,
+}: {
+ placeholders: string[];
+ onChange: (e: React.ChangeEvent
+
+
+ {firstPart.map((el, idx) => (
+
+ 
+
+ ))}
+
+
+ {secondPart.map((el, idx) => (
+
+
+
+ ))}
+
+
+ {thirdPart.map((el, idx) => (
+
+
+
+ ))}
+
+
+
+
+ {content.map((item, index) => (
+
+
+
+ {item.title}
+
+
+ {item.description}
+
+
+ ))}
+
+
+ {content[activeCard].content ?? null}
+
+ {
+ setIsHovered(true);
+ }}
+ onMouseLeave={() => {
+ setIsHovered(false);
+ }}
+ className="relative z-20 mx-auto max-w-4xl text-center text-4xl font-bold"
+ >
+ {children}
+
+ {revealText}
+
+
+ );
+};
diff --git a/components/ui/text-hover-effect.tsx b/components/ui/text-hover-effect.tsx
new file mode 100644
index 0000000..d712963
--- /dev/null
+++ b/components/ui/text-hover-effect.tsx
@@ -0,0 +1,122 @@
+"use client";
+import { useRef, useEffect, useState } from "react";
+import { motion } from "motion/react";
+
+export const TextHoverEffect = ({
+ text,
+ duration,
+}: {
+ text: string;
+ duration?: number;
+ automatic?: boolean;
+}) => {
+ const svgRef = useRef
+
+
+ {renderWords()}
+
+
+ {children}
+
+
+ );
+};
+
+export const TextRevealCardTitle = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ return
+ 0 ? 1 : 0,
+ clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`,
+ }
+ : {
+ clipPath: `inset(0 ${100 - widthPercentage}% 0 0)`,
+ }
+ }
+ transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
+ className="absolute z-20 bg-[#1d1c20] will-change-transform"
+ >
+
+ 0 ? 1 : 0,
+ }}
+ transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
+ className="absolute z-50 h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent will-change-transform"
+ >
+
+
+ + {revealText} +
+
+
+ + {text} +
+{children}
; +}; + +export const TextRevealCardDescription = ({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) => { + return{children}
; +}; + +const Stars = () => { + const randomMove = () => Math.random() * 4 - 2; + const randomOpacity = () => Math.random(); + const random = () => Math.random(); + return ( +
+ {[...Array(80)].map((_, i) => (
+
+ );
+};
+
+export const MemoizedStars = memo(Stars);
diff --git a/components/ui/timeline.tsx b/components/ui/timeline.tsx
new file mode 100644
index 0000000..8a624ab
--- /dev/null
+++ b/components/ui/timeline.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { useScroll, useTransform, motion } from "motion/react";
+import React, { useEffect, useRef, useState } from "react";
+
+interface TimelineEntry {
+ title: string;
+ content: React.ReactNode;
+}
+
+export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
+ const ref = useRef
+
+ );
+};
diff --git a/components/ui/tooltip-card.tsx b/components/ui/tooltip-card.tsx
new file mode 100644
index 0000000..65c5273
--- /dev/null
+++ b/components/ui/tooltip-card.tsx
@@ -0,0 +1,187 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const Tooltip = ({
+ content,
+ children,
+ containerClassName,
+}: {
+ content: string | React.ReactNode;
+ children: React.ReactNode;
+ containerClassName?: string;
+}) => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [mouse, setMouse] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+ const [height, setHeight] = useState(0);
+ const [position, setPosition] = useState<{ x: number; y: number }>({
+ x: 0,
+ y: 0,
+ });
+ const contentRef = useRef
+
+
+ + Changelog from my journey +
++ I've been working on Aceternity for the past 2 years. Here's a timeline of my + journey. +
+
+ {data.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ + {item.title} +
+
+
+ + {item.title} +
+ {item.content}{" "} +
+
+
+ {children}
+
+ {isVisible && (
+
+
+ )}
+
+
+ );
+};
diff --git a/components/ui/tracing-beam.tsx b/components/ui/tracing-beam.tsx
new file mode 100644
index 0000000..cb765de
--- /dev/null
+++ b/components/ui/tracing-beam.tsx
@@ -0,0 +1,108 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { motion, useTransform, useScroll, useSpring } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const TracingBeam = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ const ref = useRef
+ {content}
+
+
+ 0 ? "none" : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+ }}
+ className="border-netural-200 ml-[27px] flex h-4 w-4 items-center justify-center rounded-full border shadow-sm"
+ >
+ 0 ? "white" : "#10b981",
+ borderColor: scrollYProgress.get() > 0 ? "white" : "#059669",
+ }}
+ className="h-2 w-2 rounded-full border border-neutral-300 bg-white"
+ />
+
+
+
+ {children}
+
+ {word.text.map((char, index) => (
+
+ {char}
+
+ ))}
+
+
+ );
+ })}
+
+ {renderWords()}
+
+ );
+};
+
+export const TypewriterEffectSmooth = ({
+ words,
+ className,
+ cursorClassName,
+}: {
+ words: {
+ text: string;
+ className?: string;
+ }[];
+ className?: string;
+ cursorClassName?: string;
+}) => {
+ // split text inside of words into array of characters
+ const wordsArray = words.map((word) => {
+ return {
+ ...word,
+ text: word.text.split(""),
+ };
+ });
+ const renderWords = () => {
+ return (
+
+ {wordsArray.map((word, idx) => {
+ return (
+
+ );
+ };
+
+ return (
+
+ {word.text.map((char, index) => (
+
+ {char}
+
+ ))}
+
+
+ );
+ })}
+
+
+
+
+ );
+};
diff --git a/components/ui/wavy-background.tsx b/components/ui/wavy-background.tsx
new file mode 100644
index 0000000..3cb25a9
--- /dev/null
+++ b/components/ui/wavy-background.tsx
@@ -0,0 +1,115 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef, useState } from "react";
+import { createNoise3D } from "simplex-noise";
+
+export const WavyBackground = ({
+ children,
+ className,
+ containerClassName,
+ colors,
+ waveWidth,
+ backgroundFill,
+ blur = 10,
+ speed = "fast",
+ waveOpacity = 0.5,
+ ...props
+}: {
+ children?: any;
+ className?: string;
+ containerClassName?: string;
+ colors?: string[];
+ waveWidth?: number;
+ backgroundFill?: string;
+ blur?: number;
+ speed?: "slow" | "fast";
+ waveOpacity?: number;
+ [key: string]: any;
+}) => {
+ const noise = createNoise3D();
+ let w: number, h: number, nt: number, i: number, x: number, ctx: any, canvas: any;
+ const canvasRef = useRef
+ {renderWords()}{" "}
+
{" "}
+
+
+
+ );
+};
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 05e726d..9f9e6c5 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -13,6 +13,25 @@ const eslintConfig = defineConfig([
"build/**",
"next-env.d.ts",
]),
+ {
+ // Vendored third-party components (Aceternity UI registry) keep their
+ // upstream animation patterns (random beam decoration, refs during
+ // render, setState inside effects). These are intentional microinteraction
+ // implementations, not application code debt — relax the React Compiler
+ // advisory rules here while keeping type safety.
+ files: ["components/ui/**/*.tsx"],
+ rules: {
+ "react-hooks/purity": "off",
+ "react-hooks/refs": "off",
+ "react-hooks/set-state-in-effect": "off",
+ "react-hooks/immutability": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "no-var": "off",
+ "@next/next/no-img-element": "off",
+ "react-hooks/exhaustive-deps": "off",
+ "@typescript-eslint/no-unused-expressions": "off",
+ },
+ },
]);
-export default eslintConfig;
+export default eslintConfig;
\ No newline at end of file
diff --git a/package.json b/package.json
index ef17520..74bdeb6 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,12 @@
"@base-ui/react": "^1.8.0",
"@hookform/resolvers": "^5.9.1",
"@shadcn/react": "^0.3.1",
+ "@tabler/icons-react": "^3.47.0",
"@tanstack/react-query": "^5.103.1",
"@tanstack/react-table": "^9.2.4",
+ "@tsparticles/engine": "^3",
+ "@tsparticles/react": "^3",
+ "@tsparticles/slim": "^3",
"better-auth": "^1.7.5",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -43,6 +47,7 @@
"input-otp": "^1.5.0",
"ky": "^2.1.0",
"lucide-react": "^1.47.0",
+ "mini-svg-data-uri": "^1.4.4",
"motion": "^13.4.0",
"next": "16.3.5",
"next-themes": "^0.4.6",
@@ -58,6 +63,7 @@
"remark-gfm": "^4.0.1",
"shadcn": "^4.21.0",
"shiki": "^4.4.3",
+ "simplex-noise": "^4.0.3",
"sonner": "^2.0.8",
"tailwind-merge": "^3.7.0",
"tw-animate-css": "^1.4.0",
+ {children}
+
+