Gsap Awwwards Website
- 679 installs
- 15 repo stars
- Updated June 16, 2026
- eng0ai/eng0-template-skills
gsap-awwwards-website is an Eng0AI template skill that generates a high-end SPYLT-style product landing page with GSAP scroll animations using React 19, Vite, and Tailwind CSS 4.
About
gsap-awwwards-website from eng0ai/eng0-template-skills clones the Eng0AI gsap-awwwards-website-template into your workspace with git clone --depth 1, producing a Vite React 19 app styled with Tailwind CSS 4 and animated with GSAP scroll effects. The dev server runs on port 5173 and builds to a dist directory via npm. Developers reach for it when they need an Awwwards-caliber marketing landing fast instead of hand-rolling scroll choreography. The SPYLT product demo shows buttery section transitions suitable for SaaS or consumer product launches. Setup assumes npm as the package manager and an empty or prepared target directory.
- Production-ready React 19 + Vite template with GSAP scroll animations
- Modern Tailwind CSS 4 styling optimized for Awwwards-level polish
- One-command Vercel prebuilt deployment workflow
- Includes dev server on port 5173 and production dist output
- Optional git history reset for clean project starts
Gsap Awwwards Website by the numbers
- 679 all-time installs (skills.sh)
- Ranked #500 of 2,244 Frontend Development skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 30, 2026 (Skillselion catalog sync)
npx skills add https://github.com/eng0ai/eng0-template-skills --skill gsap-awwwards-websiteAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 679 |
|---|---|
| repo stars | ★ 15 |
| Security audit | 2 / 3 scanners passed |
| Last updated | June 16, 2026 |
| Repository | eng0ai/eng0-template-skills ↗ |
How do you scaffold a GSAP scroll landing page?
Instantly generate a high-end product landing page featuring buttery GSAP scroll animations, React 19, and Tailwind CSS 4.
Who is it for?
Frontend developers who need a polished GSAP scroll-animated product landing without building motion choreography from scratch.
Skip if: Backend-heavy dashboards or apps without marketing landing pages should use app scaffolds instead of this animation-focused template.
When should I use this skill?
A developer asks for an Awwwards-style landing page with GSAP scroll animations, React 19, and Tailwind CSS 4.
What you get
Vite React 19 project with GSAP scroll animations, Tailwind CSS 4 styles, and dist build output on port 5173.
- Vite React landing project
- GSAP scroll animation sections
- dist/ production build
By the numbers
- Dev server port 5173
- Build output directory dist
- Stack includes React 19 and Tailwind CSS 4
Files
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_template2. Remove Git History (Optional)
rm -rf .git
git init3. Install Dependencies
npm installBuild
npm run buildCreates a production build in the dist/ directory.
Deploy
CRITICAL: For Vercel, you MUST usevercel 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_TOKENNetlify
netlify deploy --prod --dir=distDevelopment
npm run devOpens at http://localhost:5173
Notes
- Static React site - no environment variables needed
- Never run
npm run devin VM environment
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kHow it compares
Use gsap-awwwards-website for motion-rich marketing landings; use minimal Next.js scaffolds when SEO routing matters more than scroll theatrics.
FAQ
What stack does gsap-awwwards-website use?
gsap-awwwards-website scaffolds React 19 with Vite, GSAP scroll animations, and Tailwind CSS 4, serving dev on port 5173 and building static output to dist/ via npm.
How do you install gsap-awwwards-website?
gsap-awwwards-website runs git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git into the target directory, then npm install and dev for the SPYLT GSAP landing.
Is Gsap Awwwards Website safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.