awwwards-landing-page

majiayu000's avatarfrom majiayu000

Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Ads and Landing Pages]

When & Why to Use This Skill

This Claude skill provides a high-performance, visually stunning designer portfolio template built with Next.js. It integrates advanced animation libraries like Locomotive Scroll for smooth scrolling, GSAP for complex timelines, and Framer Motion for interactive UI elements, enabling developers and designers to create Awwwards-level landing pages with professional-grade motion design and optimized performance.

Use Cases

  • Personal Branding: Quickly launch a high-end professional portfolio that showcases creative work with fluid, award-winning animation styles.
  • Marketing Campaigns: Build engaging promotional landing pages for products or services that require premium visual storytelling and sophisticated scroll-triggered effects.
  • Frontend Boilerplate: Serve as a robust starting point for developers needing a pre-configured stack of GSAP, Framer Motion, and Locomotive Scroll within a Next.js environment.
nameawwwards-landing-page
descriptionDesigner portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.

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 --prod then vercel deploy --prebuilt --prod. Never use vercel --prod directly.

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 dev in VM environment