Summary
A product landing page template built with GSAP scroll animations, React 19, and Tailwind CSS 4. This is for when you need those smooth, Awwwards-style scroll effects without building the animation architecture from scratch. The setup is straightforward: clone the repo, install dependencies, and you're running on localhost:5173. The deployment instructions are notably specific about Vercel (use the build then deploy workflow, not the direct deploy), which suggests the creator learned that lesson the hard way. Good starting point if you want polished scroll interactions and don't want to spend days tweaking GSAP timelines.
Install to Claude Code
npx -y skills add eng0ai/eng0-template-skills --skill gsap-awwwards-website --agent claude-codeInstalls into .claude/skills of the current project.
Keeps your Mac awake while Claude Code, Codex or Cursor works. Lets it sleep when they are done.
Try free for 7 days →
Block distracting apps from your iPhone permanently without a 3rd party app. Free and open source.
Block now (100% free) →
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Free an open-source skills that make AI coding agents easier to understand, verify, and control.
Download for free →
Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →Files
SKILL.md
GSAP Awwwards Website
A stunning product landing page with GSAP scroll animations, modern React 19 architecture, and Tailwind CSS 4 styling.
Tech Stack
- Framework: React 19
- Build Tool: Vite
- Animation: GSAP
- Styling: Tailwind CSS 4
- Package Manager: npm
- Output:
distdirectory - Dev Port: 5173
Setup
1. Clone the Template
git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git .
If the directory is not empty:
git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Remove Git History (Optional)
rm -rf .git
git init
3. Install Dependencies
npm install
Build
npm run build
Creates a production build in the dist/ directory.
Deploy
CRITICAL: For Vercel, you MUST use
vercel build --prodthenvercel deploy --prebuilt --prod. Never usevercel --proddirectly.
Vercel (Recommended)
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify
netlify deploy --prod --dir=dist
Development
npm run dev
Opens at http://localhost:5173
Notes
- Static React site - no environment variables needed
- Never run
npm run devin VM environment
Featured
Keeps your Mac awake while Claude Code, Codex or Cursor works. Lets it sleep when they are done.
Try free for 7 days →Block distracting apps from your iPhone permanently without a 3rd party app. Free and open source.
Block now (100% free) →Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Free an open-source skills that make AI coding agents easier to understand, verify, and control.
Download for free →Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →First SeenJun 3, 2026
