Verified installable Agent Skill
SKILL.md + .skillInstall into your agent.
npx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero --global --copy --yes --full-depthSkill · Shared method
3D and motion hero
Build a motion-led hero around one visual subject, an interaction rhythm, and a clear performance budget.
166 Cases · 30 Creators · AI Coding (UI) · Latest example 09/08/2026
Method skeleton
- 01Choose one visual protagonist
- 02Specify scroll or interaction triggers
- 03Limit first-load assets and mobile fallback
Creator evidence
Methods stay attached to their makers.
97 CasesAceternity UIView creator →24 CasesMotionSitesView creator →14 CasesviktoroddyView creator →3 Casessergey_molomanView creator →2 CasesOluwaphilemon1View creator →2 Casesshushant_lView creator →1 Casesaaryan_kakadView creator →1 Casesaiedge_View creator →1 CasesAv1dliveView creator →1 CasesAvalaunchHQView creator →1 CaseschetasluaView creator →1 CasesDork_senseView creator →
Case evidence
Judge the Skill through finished work.
Prompt
First search for the "/unlazy" skill, read it fully, and use it throughout the entire task. Treat this as a major visual build lasting at least {argument name="minimum duration" d
Source heat · X
79
Stability
52
Prompt
Use Blender MCP to build a small, stylized Japanese flower shop scene. Focus on faithfully recreating the key visual elements: the green awnings, the rooftop sign displaying the Ja
Source heat · X
70
Stability
67
Prompt
Build a complete, polished interactive 3D website called “The Dumpling Club” using Three.js and the provided dumpling GLB model. Art direction: Create a cozy miniature food scene
Source heat · X
93
Stability
86
AI Coding (UI)MotionSites
Agent Wave
单文件 HTML 复刻 Vesper.ai 单屏落地页，内联 CSS 加一小段 IIFE 处理菜单和动画降级，零框架零依赖，适合学怎么把整页规格压进一个文件。
Prompt
Recreate this exact single-viewport landing page for **Vesper.ai**. Document title: `Vesper.ai — Operational AI Infrastructure`. `lang="en"`. One HTML file with inline CSS and a small IIFE for the menu + animation fallback. Pure black `#00…
Source heat · MotionSites
—
Stability
71
Prompt
Create a dark mode hero section for an AI website builder with the following exact specifications: ## Technical Setup ### Required Packages Install these packages: - `motion` (version 12.23.24 or later) - for animations - `hls.js` (version…
Source heat · MotionSites
—
Stability
90
AI Coding (UI)MotionSites
Sentinel AI
安全公司暗色 hero，背景用内嵌 Spline 3D 场景替代常规视频，@splinetool 接进 React + shadcn/ui 的用法是主要看点。
Prompt
Create a full-screen dark hero landing page for a security company called "SENTINEL AI" using React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and an embedded Spline 3D scene as the background. The tech stack uses @splinetool/react-spline…
Source heat · MotionSites
—
Stability
AI Coding (UI)MotionSites
Portfolio Cosmic
暗色作品集单页，GSAP 与 Framer Motion 双动画库再加 hls.js 视频流，先定全局设计系统再逐区块展开，prompt 结构本身就是模板。
Prompt
Prompt to recreate this landing page: Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js. --- ## Global Design System ### Fonts Google Fonts import: Inter (300–700…
Source heat · MotionSites
—
Stability
AI Coding (UI)MotionSites
HAUL!
React 函数组件形态的品牌 footer，Tailwind + motion/react + lucide-react，字重配置写死，证明 footer 也能做出动效层次。
Prompt
Build a React functional component using Tailwind CSS, `motion/react` for animations, and `lucide-react` for icons. **1. Typography & Setup:** - Import the "Inter" font from Google Fonts (weights 400, 500, 600, 700) and set it as the defau…
Source heat · MotionSites
—
Stability
AI Coding (UI)Aceternity UI
Parallax Hero Images
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Parallax Hero Images」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
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 { …
Source heat · Aceternity UI
—
Stability
AI Coding (UI)Aceternity UI
World Map
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「World Map」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
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…
Source heat · Aceternity UI
—
Stability
AI Coding (UI)Aceternity UI
File Upload
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「File Upload」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
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…
Source heat · Aceternity UI
—
Stability
AI Coding (UI)Aceternity UI
Placeholders And Vanish Input
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Placeholders And Vanish Input」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
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…
Source heat · Aceternity UI
—
Stability