已验证 · 可安装 Agent Skill
SKILL.md + .skill把这套方法装进你的 Agent。
npx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-aqq5ux --global --copy --yes --full-depthSkill · 作者方法
Aceternity UI · 3D / 动效 Hero
从 Aceternity UI 的 97 个已发布 Case 中归纳出的「3D / 动效 Hero」方法。
97 Cases · 1 位作者 · AI 编程(UI) · 最近例证 2026/08/13
方法骨架
- 01先定唯一视觉主角
- 02写清滚动或交互触发关系
- 03限制首屏资源与移动端降级
作者证据
方法归纳出来，作者署名仍然留在证据上。
Case 证据
先看作品，再判断这套方法值不值得学。
AI 编程(UI)Aceternity UI收录 2026/08/13
视差首屏图片
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Parallax Hero Images」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/parallax-hero-images.tsx "use client"; import React, { useEffect, useState, useMemo, useCallback, memo } from "react"; import { motion, useMotionValue, useSpring, useTransform, MotionValue, } from "motion/react"; import { …
来源热度 · Aceternity UI
—
稳定度
78
AI 编程(UI)Aceternity UI收录 2026/08/13
世界地图
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「World Map」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/world-map.tsx "use client"; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import { useTheme } from "next-themes"; interface MapProps { dots?: Array<{ start: { la…
来源热度 · Aceternity UI
—
稳定度
AI 编程(UI)Aceternity UI收录 2026/08/13
文件上传
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「File Upload」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/file-upload.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import { IconUpload } from "@tabler/icons-react"; import { useDropzone…
来源热度 · Aceternity UI
—
稳定度
81
AI 编程(UI)Aceternity UI收录 2026/08/13
占位符与消失输入框
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Placeholders And Vanish Input」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/placeholders-and-vanish-input.tsx "use client"; import { AnimatePresence, motion } from "motion/react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export function Pl…
来源热度 · Aceternity UI
—
稳定度
82
AI 编程(UI)Aceternity UI收录 2026/08/13
Evervault 卡片
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Evervault Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/evervault-card.tsx "use client"; import { useMotionValue } from "motion/react"; import React, { useState, useEffect } from "react"; import { useMotionTemplate, motion } from "motion/react"; import { cn } from "@/lib/utils"…
来源热度 · Aceternity UI
—
稳定度
83
AI 编程(UI)Aceternity UI收录 2026/08/13
侧边栏
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sidebar」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/sidebar.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useState, createContext, useContext } from "react"; import { AnimatePresence, motion } from "motion/react"; import { IconMenu2, IconX } from "@tab…
来源热度 · Aceternity UI
—
稳定度
75
AI 编程(UI)Aceternity UI收录 2026/08/13
Sparkles
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sparkles」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/sparkles.tsx "use client"; import React, { useId, useMemo } from "react"; import { useEffect, useState } from "react"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import type { Container, SingleOrM…
来源热度 · Aceternity UI
—
稳定度
AI 编程(UI)Aceternity UI收录 2026/08/13
Notch
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Notch」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/notch.tsx "use client"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@/lib/utils"; export type NotchOption = { /** Stable id…
来源热度 · Aceternity UI
—
稳定度
83
AI 编程(UI)Aceternity UI收录 2026/08/13
指针高亮
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Pointer Highlight」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/pointer-highlight.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import { useRef, useEffect, useState } from "react"; export function PointerHighlight({ children, rectangleClassN…
来源热度 · Aceternity UI
—
稳定度
92
AI 编程(UI)Aceternity UI收录 2026/08/13
文字悬停效果
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Hover Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-hover-effect.tsx "use client"; import React, { useRef, useEffect, useState } from "react"; import { motion } from "motion/react"; export const TextHoverEffect = ({ text, duration, }: { text: string; duration?: number;…
来源热度 · Aceternity UI
—
稳定度
AI 编程(UI)Aceternity UI收录 2026/08/13
Comet Card
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Comet Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/comet-card.tsx "use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate, } from "motion/react"; import { cn } from "@/lib/utils"; export const CometCa…
来源热度 · Aceternity UI
—
稳定度
87
AI 编程(UI)Aceternity UI收录 2026/08/13
彩色文本
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Colourful Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/colourful-text.tsx "use client"; import React from "react"; import { motion } from "motion/react"; export default function ColourfulText({ text }: { text: string }) { const colors = [ "rgb(131, 179, 32)", "rgb(47, 195, 106…
来源热度 · Aceternity UI
—
稳定度
91