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

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

// components/ui/text-hover-effect.tsx "use client"; import React, { useRef, useEffect, useState } from "react"; import { motion } from "motion/react"; export const TextHoverEffect = ({…

// components/ui/comet-card.tsx "use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate, } from "motion/react";…

// components/ui/colourful-text.tsx "use client"; import React from "react"; import { motion } from "motion/react"; export default function ColourfulText({ text }: { text: string }) {…

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({…

// components/ui/wobble-card.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const WobbleCard =…

// components/ui/text-flipping-board.tsx "use client"; import React, { useEffect, useRef, useState, useMemo } from "react"; import { motion } from "motion/react"; import { cn } from…

// components/ui/scales.tsx import { cn } from "@/lib/utils"; import React from "react"; export interface ScalesProps { orientation?: "horizontal" | "vertical" | "diagonal"; size?: number;…

// components/ui/ascii-art.tsx "use client"; import React, { useEffect, useLayoutEffect, useRef, useState, useCallback, useId, } from "react"; import { motion, useInView } from…

// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from…

// components/ui/keyboard.tsx "use client"; import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from "react"; import { motion, AnimatePresence } from…

// components/ui/dither-shader.tsx "use client"; import React, { useEffect, useRef, useCallback, useState } from "react"; import { cn } from "@/lib/utils"; type DitheringMode = "bayer" |…

// components/ui/encrypted-text.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useInView } from "motion/react"; import { cn } from…

// components/ui/dotted-glow-background.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; type DottedGlowBackgroundProps = { className?: string; /** distance…

// components/ui/canvas-text.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef, useState, useCallback } from "react"; interface CanvasTextProps { text:…

// components/ui/sticky-banner.tsx "use client"; import React, { SVGProps, useState } from "react"; import { motion, useMotionValueEvent, useScroll } from "motion/react"; import { cn }…

// components/ui/draggable-card.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring,…

// components/ui/resizable-navbar.tsx "use client"; import { cn } from "@/lib/utils"; import { IconMenu2, IconX } from "@tabler/icons-react"; import { motion, AnimatePresence, useScroll,…

// components/ui/container-text-flip.tsx "use client"; import React, { useState, useEffect, useId } from "react"; import { motion } from "motion/react"; import { cn } from "@/utils/cn";…

// components/ui/glowing-effect.tsx "use client"; import { memo, useCallback, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; import { animate } from "motion/react";…

// components/ui/spotlight-new.tsx "use client"; import React from "react"; import { motion } from "motion/react"; type SpotlightProps = { gradientFirst?: string; gradientSecond?: string;…