gsap-awwwards-website

Eng0AI's avatarfrom Eng0AI

SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 16, 2025
[Ads and Landing Pages]

When & Why to Use This Skill

This Claude skill provides a high-performance template for creating visually stunning, 'Awwwards-style' product landing pages. By integrating the latest React 19 framework, GSAP for sophisticated scroll-driven animations, and Tailwind CSS 4 for modern styling, it solves the challenge of building immersive, high-conversion web experiences with cutting-edge technology and optimized performance.

Use Cases

  • High-End Product Launches: Rapidly deploy premium landing pages for tech products or startups that require immersive storytelling through advanced scroll animations.
  • Creative Portfolios: Build professional showcases for designers and developers that demonstrate technical mastery and aesthetic excellence using modern web standards.
  • Marketing Campaign Pages: Create high-engagement promotional sites that capture user attention with smooth transitions and responsive layouts, optimized for both desktop and mobile.
  • Modern Web Prototyping: Quickly scaffold projects using the latest versions of React and Tailwind CSS to test UI/UX concepts with production-ready code.
namegsap-awwwards-website
descriptionSPYLT 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: 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 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