Summary
This is what you reach for when you want that buttery smooth scrolling experience you see on award-winning agency sites. It combines three heavy-hitter animation libraries (Locomotive Scroll, GSAP, and Framer Motion) in a Next.js template, which is either perfectly orchestrated or a recipe for bundle bloat depending on how you look at it. The setup is straightforward, cloning from a GitHub template and running npm install. Worth noting the deployment instructions are unusually specific about Vercel's build process, which suggests someone learned that lesson the hard way. Good starting point if you're building a portfolio or creative agency site and don't want to wire up the animation stack yourself.
Install to Claude Code
npx -y skills add eng0ai/eng0-template-skills --skill awwwards-landing-page --agent claude-codeInstalls into .claude/skills of the current project.
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.mdView on GitHub
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_template
2. Remove Git History (Optional)
rm -rf .git
git init
3. Install Dependencies
npm install
Build
npm run build
Deploy
CRITICAL: For Vercel, you MUST use
vercel 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_TOKEN
Netlify
netlify deploy --prod
Development
npm run dev
Opens at http://localhost:3000
Notes
- Static Next.js site - no environment variables needed
- Never run
npm run devin VM environment
Featured
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →