Start with the work. Trace it back to the maker and method.

// components/ui/tracing-beam.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useTransform, useScroll, useVelocity, useSpring, } from…

// components/ui/svg-mask-effect.tsx "use client"; import { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export…

// components/ui/background-beams.tsx "use client"; import React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const BackgroundBeams =…

// components/ui/animated-tooltip.tsx "use client"; import React, { useState, useRef } from "react"; import { motion, useTransform, AnimatePresence, useMotionValue, useSpring, } from…

// components/ui/spotlight.tsx import React from "react"; import { cn } from "@/lib/utils"; type SpotlightProps = { className?: string; fill?: string; }; export const Spotlight = ({…

// components/ui/text-reveal-card.tsx "use client"; import React, { useEffect, useRef, useState, memo } from "react"; import { motion } from "motion/react"; import { twMerge } from…

// components/ui/container-scroll-animation.tsx "use client"; import React, { useRef } from "react"; import { useScroll, useTransform, motion, MotionValue } from "motion/react"; export…

// components/ui/infinite-moving-cards.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useState } from "react"; export const InfiniteMovingCards = ({ items,…

// components/ui/background-gradient-animation.tsx "use client"; import { cn } from "@/lib/utils"; import { useEffect, useRef, useState } from "react"; export const…

// components/ui/layout-grid.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Card = { id: number;…

// components/ui/background-ripple-effect.tsx "use client"; import React, { useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export const BackgroundRippleEffect…

// components/ui/background-gradient.tsx import { cn } from "@/lib/utils"; import React from "react"; import { motion } from "motion/react"; export const BackgroundGradient = ({ children,…

// components/ui/hero-highlight.tsx "use client"; import { cn } from "@/lib/utils"; import { useMotionValue, motion, useMotionTemplate } from "motion/react"; import React from "react";…

// components/ui/wavy-background.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef, useState } from "react"; import { createNoise3D } from…

// components/ui/hover-border-gradient.tsx "use client"; import React, { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; import { cn } from…

// components/ui/hero-parallax.tsx "use client"; import React from "react"; import { motion, useScroll, useTransform, useSpring, MotionValue, } from "motion/react"; export const…

// components/ui/tabs.tsx "use client"; import { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Tab = { title: string; value:…

// components/ui/parallax-scroll.tsx "use client"; import { useScroll, useTransform } from "motion/react"; import { useRef } from "react"; import { motion } from "motion/react"; import {…

// components/ui/direction-aware-hover.tsx "use client"; import { useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@/lib/utils";…

// components/ui/floating-navbar.tsx "use client"; import React, { useState } from "react"; import { motion, AnimatePresence, useScroll, useMotionValueEvent, } from "motion/react"; import…

// components/ui/sticky-scroll-reveal.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { useMotionValueEvent, useScroll } from "motion/react"; import {…