gsap-awwwards-website
Builds SPYLT product landing pages using GSAP scroll animations and React 19, achieving a smooth interactive experience.
npx skills add eng0ai/eng0-template-skills --skill gsap-awwwards-websiteBefore / After Comparison
1 组Traditional web animation development is complex, performance optimization is difficult, and achieving smooth scroll effects is challenging. Websites often lack sufficient visual expressiveness, making it hard to stand out among many others.
By combining GSAP, React, and Tailwind, you can easily create high-performance scroll animations. The website's visual effects will be stunning, the user experience smooth, reaching Awwwards-level quality.
description SKILL.md
name: gsap-awwwards-website description: SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.
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
forumUser Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill