Verified installable Agent Skill
SKILL.md + .skillInstall into your agent.
npx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-1srj4fh --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 24 published cases by MotionSites.
24 Cases · 1 Creators · AI Coding (UI) · Latest example 08/20/2026
Verified installable Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-1srj4fh --global --copy --yes --full-depthMethod skeleton
Case evidence
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…
Landing page for the design agency Axion Studio, using a shaders package for a shader effect in the hero background. The only WebGL shader entry in this batch.
Prompt
Build a React + Vite + Tailwind CSS landing page for "Axion Studio" - a design agency site. Use the `shaders` package (npm: `shaders`) for the hero background, `lucide-react` for icons. The page has 3 sections. Match every detail exactly: …
Cinematic full-screen hero for the travel brand Wanderful, built with React, TypeScript, Tailwind and GSAP.
Prompt
Build a full-viewport cinematic hero section for a travel brand called "Wanderful" using React + TypeScript + Vite + Tailwind CSS. Use GSAP for animation and `lucide-react` for icons. **Fonts (load via Google Fonts in `src/index.css`):** `…
A 3D cylindrical carousel of bank cards driven by React hooks, a high-performance interactive component and the most complex interaction in this batch.
Prompt
Create a high-performance, interactive 3D horizontal cylinder carousel showing premium animated bank cards. Core Features & Interactions: Use React (useState, useEffect, useRef), Tailwind CSS v4, and standard requestAnimationFrame for a sm…
Full-screen hero for the AI wellness companion product Aurai, with a looping video background.
Prompt
Build a full-screen hero section landing page for "Aurai" - an always-on AI wellness companion. The page is a single viewport-height section with a looping background video and overlaid content. ## Video Background - Full-screen `<video>` …
Fully transparent sections over a fixed video background, so the video stays still while the content moves on scroll. A clean implementation of a parallax idea.
Prompt
--- **Prompt:** Create a full-viewport section (100vh) that sits over a fixed background video. The section has no background color of its own -- it is fully transparent so the fixed video behind it shows through. **Background video (fixed…
One-page hero for a prosthetics product, built with React, TypeScript and Tailwind, with the whole page living in App.tsx and dependencies kept to a minimum.
Prompt
Build a React + TypeScript + Tailwind CSS single-page hero section using Vite. The entire page lives in `src/App.tsx`. No extra libraries beyond `react`, `react-dom`, `lucide-react`, and Tailwind. **Background:** - A fullscreen autoplaying…
Full-screen hero built with Vite, React and TypeScript, with all motion handled by GSAP and fonts defined in index.css.
Prompt
**Build a fullscreen hero section in a Vite + React + TypeScript + Tailwind CSS project. Use `gsap` and `lucide-react`. No other UI libraries.** ### Fonts (in `src/index.css`) Import at the top of index.css BEFORE ` @tailwind ` directives:…
Creator evidence
A Skill is a derived reading layer. Every claim must trace back to published Cases.