Skill

Review

Audit score 70

awwwards-landing-page

rebyteai-template/rebyte-skills

Stunning portfolio landing page with smooth scroll animations using Locomotive Scroll, GSAP, and Framer Motion.

What is awwwards-landing-page?

A Next.js-based designer portfolio template featuring advanced scroll animations and motion effects. Use this when you need a visually impressive, animated landing page with smooth scrolling interactions and modern animation libraries.

Provides a pre-built Next.js portfolio template with Locomotive Scroll integration
Includes GSAP and Framer Motion animation libraries for smooth, interactive effects
Offers smooth scroll animations and parallax effects out of the box
Configured for development on port 3000 with hot reload support
Ready to deploy to Vercel or Netlify with optimized build settings
Static site generation with no environment variables required

How to install awwwards-landing-page

npx skills add https://github.com/rebyteai-template/rebyte-skills --skill awwwards-landing-page

Prerequisites

Node.js and npm or pnpm installed
Git installed for cloning the template
Vercel or Netlify account for deployment (optional)

Claude Code

Cursor

Windsurf

Cline

How to use awwwards-landing-page

1.Clone the template repository using the provided git command
2.Install dependencies with npm install
3.Run npm run dev to start the development server on port 3000
4.Customize the portfolio content and styling as needed
5.For Vercel deployment, use vercel build --prod followed by vercel deploy --prebuilt --prod
6.For Netlify deployment, use netlify deploy --prod

Use cases

Good for

Building a designer or creative professional portfolio website
Creating an animated landing page with scroll-triggered effects
Showcasing work with smooth parallax and motion animations
Deploying a high-performance portfolio to Vercel or Netlify
Demonstrating advanced web animation techniques in a portfolio context

Who it's for

Designers and creative professionals building portfolios
Web developers creating animated landing pages
Teams needing a modern, animation-rich portfolio template
Developers familiar with Next.js and animation libraries

awwwards-landing-page FAQ

What animation libraries does this template use?

The template uses Locomotive Scroll for smooth scrolling, GSAP for timeline-based animations, and Framer Motion for React component animations.

Can I deploy this to platforms other than Vercel or Netlify?

Yes, it's a static Next.js site. You can deploy to any static hosting platform, but Vercel and Netlify are recommended with the provided deployment scripts.

Do I need environment variables to run this?

No, this is a static Next.js site with no environment variables required.

Why shouldn't I run npm run dev in a VM environment?

The template documentation notes that npm run dev should not be run in VM environments, likely due to performance or file-watching issues in virtualized contexts.

What's the critical deployment requirement for Vercel?

You must use vercel build --prod followed by vercel deploy --prebuilt --prod. Never use vercel --prod directly, as it bypasses the proper build process.

Full instructions (SKILL.md)

Source of truth, from rebyteai-template/rebyte-skills.

name: awwwards-landing-page description: Designer 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

Related skills

More from rebyteai-template/rebyte-skills and the wider catalog.

release-management

recoupable/release-management

Manage music releases with RELEASE.md as your single source of truth for campaigns, metadata, and deliverables.

1.6k installs

setup-artist

recoupable/setup-artist

Scaffold a complete artist workspace with directories, context files, and memory system for immediate agent collaboration.

1.1k installs

setup-sandbox

recoupable/setup-sandbox

Initialize sandbox folder structure for Recoup organizations and artists.

1.6k installs

recoup-platform-api-access

recoupable/skills

Call the Recoup API and external connectors directly—fetch platform resources and run actions on Google Docs, Gmail, TikTok, Instagram.

4.4k installs

recoup-platform-build-os

recoupable/skills

Scaffold a self-managing music-label operating system backed by the Recoup API, with auto-syncing roster, compound learning, and in-place plugin skills.

4.2k installs

recoup-platform-email-helper

recoupable/skills

Reliable Node helper for sending emails via Recoup API without silent failures.

4.3k installsAudited