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

// components/ui/animated-testimonials.tsx "use client"; import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"; import { motion, AnimatePresence } from "motion/react"; import…

// components/ui/lens.tsx "use client"; import React, { useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; interface LensProps { children:…

// components/ui/timeline.tsx "use client"; import { useMotionValueEvent, useScroll, useTransform, motion, } from "motion/react"; import React, { useEffect, useRef, useState } from…

// components/ui/background-beams-with-collision.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, AnimatePresence } from "motion/react"; import React, { useRef,…

// components/ui/floating-dock.tsx "use client"; /** * 注意：请根据你的需求使用固定定位 * 桌面端导航栏更适合放在底部 * 移动端导航栏更适合放在右下角。 **/ import { cn } from…

// components/ui/card-spotlight.tsx "use client"; import { useMotionValue, motion, useMotionTemplate } from "motion/react"; import React, { MouseEvent as ReactMouseEvent, useState } from…

// components/ui/animated-modal.tsx "use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import React, { ReactNode, createContext,…

// components/ui/glare-card.tsx "use client"; import { cn } from "@/lib/utils"; import { useRef } from "react"; export const GlareCard = ({ children, className, }: { children:…

// components/ui/link-preview.tsx "use client"; import * as HoverCardPrimitive from "@radix-ui/react-hover-card"; import { encode } from "qss"; import React from "react"; import {…

// components/ui/flip-words.tsx "use client"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, LayoutGroup } from "motion/react";…

// components/ui/aurora-background.tsx "use client"; import { cn } from "@/lib/utils"; import React, { ReactNode } from "react"; interface AuroraBackgroundProps extends…

// components/ui/multi-step-loader.tsx "use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState, useEffect } from "react";…

// components/ui/macbook-scroll.tsx "use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { MotionValue, motion, useScroll, useTransform } from…

// components/ui/google-gemini-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, MotionValue } from "motion/react"; import React from "react"; const transition =…

// components/ui/images-slider.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, AnimatePresence } from "motion/react"; import React, { useEffect, useState } from…

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

// components/ui/typewriter-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, stagger, useAnimate, useInView } from "motion/react"; import { useEffect } from…

// components/ui/gooey-input.tsx "use client"; import { useState, useRef, useEffect, useId, useMemo, useCallback, type ChangeEvent, } from "react"; import { motion } from "motion/react";…

// components/ui/vortex.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef } from "react"; import { createNoise3D } from "simplex-noise"; import { motion…

// components/ui/card-hover-effect.tsx import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState } from "react"; export const HoverEffect…

// components/ui/bento-grid.tsx import { cn } from "@/lib/utils"; export const BentoGrid = ({ className, children, }: { className?: string; children?: React.ReactNode; }) => { return (…