从作品结果，回到作者与方法。

// 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 {…

// components/ui/moving-border.tsx "use client"; import React from "react"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useTransform, } from "motion/react";…

// components/ui/card-stack.tsx "use client"; import { useEffect, useState } from "react"; import { motion } from "motion/react"; let interval: any; type Card = { id: number; name: string;…

// components/ui/focus-cards.tsx "use client"; import React, { useState } from "react"; import { cn } from "@/lib/utils"; export const Card = React.memo( ({ card, index, hovered,…

// components/ui/following-pointer.tsx import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "motion/react"; import { cn } from…

// components/ui/loader.tsx "use client"; import { motion } from "motion/react"; import React from "react"; export const LoaderOne = () => { const transition = (x: number) => { return {…

// components/ui/stateful-button.tsx "use client"; import { cn } from "@/lib/utils"; import React from "react"; import { motion, AnimatePresence, useAnimate } from "motion/react";…

// components/ui/apple-cards-carousel.tsx "use client"; import React, { useEffect, useRef, useState, createContext, useContext, } from "react"; import { IconArrowNarrowLeft,…

// components/ui/pixelated-canvas.tsx "use client"; import React from "react"; type PixelatedCanvasProps = { src: string; width?: number; height?: number; /**…