gsap-awwwards-website

name	gsap-awwwards-website
description	SPYLT-style product landing with GSAP scroll animations, React 19, and Tailwind CSS 4. USE WHEN building a polished React + GSAP product/landing page with scroll-driven sections — a worked Awwwards-grade reference implementation.
cluster	creative-frontend
version	1.0.0
origin	ihlamury/design-skills

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: dist directory
• 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 --prod then vercel deploy --prebuilt --prod. Never use vercel --prod directly.

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 dev in VM environment