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-depthLoading…
Loading…
GoodCase Official Skill · Shared method across creators
Build a motion-led hero around one visual subject, an interaction rhythm, and a clear performance budget.
168 Cases · 32 Creators · AI Coding (UI) · Latest example 09/08/2026
Verified installable Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero --global --copy --yes --full-depthMethod skeleton
Case evidence
A prompt that uses GPT-6 Astra to generate a highly detailed, interactive 3D visualization of a V8 engine.
Prompt
create a highly detailed, interactive visualization of a V8 engine
A technical prompt for building an editable 3D folding carton model with animation in Blender from a die-cut layout, including precise hinge pivot setup and a professional viewport presentation.
Prompt
Create an editable folding-carton model and animation in Blender using my attached dieline image. The main goal is to show how the flat dieline folds into a closed box and unfolds
A complex prompt for generating a detailed real-time 3D forest environment in the browser, using Three.js-style optimization and realistic lighting.
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
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
I made an interactive dumpling feast🥟
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
Single-file HTML recreation of the Vesper.ai one-screen landing page, using inline CSS and a small IIFE for the menu and animation fallback, with no framework and no dependencies. Useful for learning how to fit a whole page spec into one file.
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…
Dark hero for an AI site builder, with dependencies pinned down to the version of motion. The specific use of the animation library is the main point of interest.
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…
Dark hero for a security company that uses an embedded Spline 3D scene as the background instead of the usual video. Connecting @splinetool into React and shadcn/ui is the main interest.
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…
Dark one-page portfolio using GSAP and Framer Motion together with hls.js video streaming. It sets the global design system first and then expands section by section, so the prompt structure itself is a template.
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…
Brand footer as a React function component, with Tailwind, motion/react and lucide-react and font weights fixed in the config. It shows that a footer can also have layered motion.
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…
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…
Creator practice
Creator practices derived from this shared method, including versions not yet listed in the catalog.
Creator evidence
A Skill is a derived reading layer. Every claim must trace back to published Cases.