ship-modern-3d-sitelisted

Build and deploy a modern 3D/motion website end-to-end — Next.js (App Router) + TypeScript + Tailwind v4 + react-three-fiber + drei + motion (Framer) + Lenis, shipped to Vercel. Use when the user wants a "modern website", "3D hero", "scroll animations / parallax reveals", a "portfolio / landing page with motion", a three.js/R3F site, or asks to deploy such a site to Vercel. Covers project setup, the component/animation patterns, local verification, and the Vercel deploy gotchas.
hellokianben-collab/vishal-agarwal-context · ★ 0 · Web & Frontend · score 63

Install: claude install-skill hellokianben-collab/vishal-agarwal-context

# Ship a Modern 3D / Motion Site Build a fast, accessible, animated Next.js site (3D hero, scroll reveals, smooth scroll) and get it live on Vercel — without re-hitting the traps that eat hours. This skill is the compressed end-to-end pipeline: **Setup → Scaffold → Build → Verify → Deploy.** Read the relevant reference file for each phase. The deploy file is the highest-value one — it documents non-obvious failures (401 protection, `framework:null` → 404, stray GitHub auto-connect) that look like "the site is broken" but are config. ## Stack (don't swap without asking) | Layer | Choice | Version proven | | --------------- | ---------------------------------------------------- | ----------------------------------------- | | Framework | Next.js (App Router) + TypeScript | `next` 16.2.7, `react`/`react-dom` 19.2.4 | | Styling | Tailwind CSS v4 | `tailwindcss` 4 (`@tailwindcss/postcss`) | | Components | shadcn/ui (Radix + Tailwind) | add as needed | | 3D | `three` + `@react-three/fiber` + `@react-three/drei` | fiber 9.6.1, drei 10.7.7, three 0.184.0 | | Motion | `motion` (Framer) + `gsap` + `lenis` | motion 12.40.0, gsap 3.15.0, lenis 1.3.23 | | Icons | `lucide-react` | latest