landing-page-mvp

Constructs cinematic landing pages with GSAP animations and scroll-driven effects.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/NewEarthAI/vibecode-project-template --skill landing-page-mvp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: landing-page-mvp
Source: https://github.com/NewEarthAI/vibecode-project-template/tree/main/.claude/skills/landing-page-mvp
Command: npx skills add https://github.com/NewEarthAI/vibecode-project-template --skill landing-page-mvp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, react, vite, tailwindcss, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of creating visually stunning and interactive landing pages with GSAP animations and scroll-driven effects, tailored for cinematic experiences.

Core Features & Use Cases

  • GSAP Animation: Integrate GSAP animations for cinematic transitions and effects.
  • Scroll-Driven Effects: Implement scroll-driven animations and parallax effects for engaging user experiences.
  • Aesthetic Presets: Choose from 8 aesthetic presets with coupled motion choreography, color system, and typography pairing.
  • Quality Gate: Runs executable quality gates post-build to ensure the output meets standards.
  • Use Case: Ideal for marketing agencies or businesses looking to create an impactful first impression with a high-end landing page.

Quick Start

To create a cinematic landing page with this skill, use the command: /launch landing-page-mvp preset:A include_seo: true noise_overlay: auto output_dir: ./new-landing-page

Frequently Asked Questions about landing-page-mvp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a cinematic landing page with GSAP scroll-driven animations?

To create a cinematic landing page, you can launch a predefined aesthetic preset that integrates GSAP animations with scroll-driven parallax effects. The system handles the motion choreography, color system, and typography pairing automatically.

Can I build scroll-driven parallax effects using React and Tailwind CSS?

Yes, you can build scroll-driven parallax effects using React and Tailwind CSS. The skill requires Vite, React, Tailwind CSS, and GSAP as dependencies to render the high-fidelity cinematic landing page.

What aesthetic presets are available for a cinematic landing page?

There are 8 aesthetic presets available for a cinematic landing page, each featuring coupled motion choreography, color systems, and typography pairings. You can select a preset or use custom configurations based on your input.

Do I need Vite to run GSAP animations on a marketing landing page?

Yes, you need Vite along with React, Tailwind CSS, and GSAP to run the scroll-driven animations on your marketing landing page. These dependencies are required for rendering the cinematic effects and executing the post-build quality gates.

How do I add SEO metadata and noise overlays when building a landing page?

You can add SEO metadata and noise overlays by passing parameters like include_seo and noise_overlay in the launch command. The system applies these configurations automatically during the landing page generation process.

When should I use GSAP for landing page animations instead of standard CSS transitions?

You should use GSAP for landing page animations when you need a cinematic experience with complex scroll-driven effects and parallax. GSAP provides advanced motion choreography that standard CSS transitions cannot easily achieve for high-end marketing pages.