Awwwards Landing Page
- 1.1k installs
- 15 repo stars
- Updated June 16, 2026
- eng0ai/eng0-template-skills
awwwards-landing-page is an agent skill that scaffolds a designer-quality Next.js portfolio landing page with Locomotive Scroll, GSAP, and Framer Motion for developers who need award-style scroll animations.
About
awwwards-landing-page is a Claude Code template skill that clones the Eng0AI awwwards-landing-page-template into a project and wires smooth scroll and motion effects. It uses Next.js with Locomotive Scroll, GSAP, and Framer Motion, installable via pnpm or npm on dev port 3000. Developers reach for awwwards-landing-page when they need a high-end portfolio or marketing page with buttery scroll choreography without hand-rolling animation boilerplate. The skill focuses on setup, template integration, and animation foundations rather than backend APIs or data layers.
- Next.js portfolio template featuring Locomotive Scroll, GSAP, and Framer Motion
- One-command clone and setup process that works in empty or non-empty directories
- Production deployment instructions for Vercel using prebuilt artifacts and Netlify
- Static site with zero environment variables required
- Runs on dev port 3000 with pnpm or npm
Awwwards Landing Page by the numbers
- 1,079 all-time installs (skills.sh)
- +29 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #345 of 2,244 Frontend Development skills by installs in the Skillselion catalog
- Security screen: HIGH risk (skills.sh audit)
- Data as of Jul 30, 2026 (Skillselion catalog sync)
npx skills add https://github.com/eng0ai/eng0-template-skills --skill awwwards-landing-pageAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 15 |
| Security audit | 2 / 3 scanners passed |
| Last updated | June 16, 2026 |
| Repository | eng0ai/eng0-template-skills ↗ |
How do you build an Awwwards-style animated portfolio in Next.js?
Instantly generate a high-end designer-style portfolio landing page with buttery-smooth scroll and animation effects.
Who is it for?
Frontend developers shipping a designer portfolio or showcase site with premium scroll and motion effects.
Skip if: Teams building data-heavy dashboards, REST APIs, or animation-free corporate sites.
When should I use this skill?
User requests an Awwwards-style portfolio, smooth scroll landing page, or GSAP/Framer Motion showcase.
What you get
Next.js portfolio project with Locomotive Scroll, GSAP, and Framer Motion animations running locally
- Next.js portfolio site
- animated landing page
Files
Awwwards Landing Page
A stunning portfolio landing page with smooth scroll animations using Locomotive Scroll, GSAP, and Framer Motion.
Tech Stack
- Framework: Next.js
- Animation: Locomotive Scroll, GSAP, Framer Motion
- Package Manager: pnpm or npm
- Dev Port: 3000
Setup
1. Clone the Template
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git .If the directory is not empty:
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-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 buildDeploy
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 --prodDevelopment
npm run devOpens at http://localhost:3000
Notes
- Static Next.js 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.4kFAQ
What tech stack does awwwards-landing-page use?
awwwards-landing-page scaffolds Next.js with Locomotive Scroll, GSAP, and Framer Motion. Install dependencies with pnpm or npm and run the dev server on port 3000 after cloning the template.
How does awwwards-landing-page set up the project?
awwwards-landing-page clones https://github.com/Eng0AI/awwwards-landing-page-template with git clone --depth 1, then moves files into the working directory when the folder is not empty.
Is Awwwards Landing Page safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.