Gsap Awwwards Website
Spin up an award-style product landing with GSAP scroll motion, React 19, and Tailwind 4, then ship a Vite `dist` build.
Overview
GSAP Awwwards Website is an agent skill for the Build phase that scaffolds a React 19 product landing with GSAP scroll animations, Tailwind CSS 4, and Vite build/deploy commands.
Install
npx skills add https://github.com/eng0ai/eng0-template-skills --skill gsap-awwwards-websiteWhat is this skill?
- React 19 + Vite dev server on port 5173 with production output in `dist/`
- GSAP-driven scroll animations on a SPYLT-style product landing pattern
- Tailwind CSS 4 styling with npm-based setup from Eng0AI’s shallow-clone template
- Documented Vercel flow: `vercel build --prod` then `vercel deploy --prebuilt --prod` (not direct `vercel --prod`)
- Alternate Netlify production deploy via `netlify deploy --prod --dir=dist`
- Dev server port 5173
- Tech stack lists 4 pillars: React 19, Vite, GSAP, Tailwind CSS 4
Adoption & trust: 534 installs on skills.sh; 5 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a high-motion marketing landing but lack a repeatable React + GSAP starter and safe Vercel production deploy steps.
Who is it for?
Solo builders launching a SaaS or product site who want GSAP scroll polish on a modern React 19 stack without authoring animation architecture from zero.
Skip if: Teams that only need a static one-pager with no motion, apps that are not Vite/React, or projects where infra migration (CDK/Pulumi) is the current priority.
When should I use this skill?
You want a SPYLT-style product landing with GSAP scroll animations, React 19, and Tailwind CSS 4 from the Eng0AI template.
What do I get? / Deliverables
You get a runnable Vite app, a `dist/` production build, and copy-paste deploy commands for Vercel prebuilt prod or Netlify—ready to customize copy and ship.
- Runnable Vite React app
- Production `dist/` build
- Deployed hosting URL via documented Vercel or Netlify commands
Recommended Skills
Journey fit
The skill is a full frontend landing scaffold with clone, install, build, and deploy steps—canonical home is Build while you assemble the marketing surface. GSAP timelines, React components, and Tailwind styling are explicitly frontend landing work, not backend or ops.
How it compares
Use as a cloned frontend template with motion baked in—not a generic UI component library or a backend API skill.
Common Questions / FAQ
Who is gsap-awwwards-website for?
Indie and solo builders shipping a product or brand landing who want GSAP scroll effects on React 19 with Tailwind 4 and a clear path to Vercel or Netlify.
When should I use gsap-awwwards-website?
During Build (frontend) when you are replacing a blank marketing page with an animated landing; also fine in Validate if you prototype the landing before full product build.
Is gsap-awwwards-website safe to install?
Review the Security Audits panel on this Prism page before cloning third-party templates; the skill runs shell git/npm commands and deploy CLIs that need your tokens and filesystem access.
SKILL.md
READMESKILL.md - Gsap Awwwards Website
# 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 ```bash git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git . ``` If the directory is not empty: ```bash 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) ```bash rm -rf .git git init ``` ### 3. Install Dependencies ```bash npm install ``` ## Build ```bash 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) ```bash vercel pull --yes -t $VERCEL_TOKEN vercel build --prod -t $VERCEL_TOKEN vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN ``` ### Netlify ```bash netlify deploy --prod --dir=dist ``` ## Development ```bash npm run dev ``` Opens at http://localhost:5173 ## Notes - Static React site - no environment variables needed - Never run `npm run dev` in VM environment