Verified installable Agent Skill
SKILL.md + .skillInstall into your agent.
npx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-aqq5ux --global --copy --yes --full-depthLoading…
Loading…
Creator method · Unofficial synthesis
An unofficial synthesis of public evidence, not published or endorsed by the creator.
A recurring 3d and motion hero method derived from 97 published cases by Aceternity UI.
97 Cases · 1 Creators · AI Coding (UI) · Latest example 08/13/2026
Verified installable Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-aqq5ux --global --copy --yes --full-depthMethod skeleton
Case evidence
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Parallax Hero Images. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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 { …
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of World Map. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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…
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI File Upload component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// 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…
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Placeholders And Vanish Input. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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…
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Evervault Card component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// 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"…
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Sidebar. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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…
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Sparkles. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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…
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Notch. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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…
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Pointer Highlight. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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…
Copy this TSX component source and hand it to an AI coding tool such as Cursor, v0 or Claude, noting it is the Aceternity UI implementation of Text Hover Effect. The tool can then wire it into your React project, and you swap in your own copy, colors and trigger parameters.
Prompt
// 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;…
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Comet Card component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// 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…
Copy this TSX component source into an AI coding tool such as Cursor, v0, or Claude, and tell it this is the Aceternity UI Colourful Text component. It can then wire it into your React project, and you can swap the copy, colors, and trigger parameters to reuse it.
Prompt
// 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…
Creator evidence
A Skill is a derived reading layer. Every claim must trace back to published Cases.