Animated Landing Page Builder (GSAP + 3D Parallax)
A single-file HTML landing page with copy built from a positioning brief, GSAP scroll reveals, and 3D mouse parallax that works everywhere.
Before & after
Same prompt, same agent — the only difference is the skill.
A landing page is a great way to introduce your product. You'll want to include an engaging headline that describes what your tool does. Add some benefits and features to show value. Include testimonials or social proof if you have them. Make sure you have a clear call to action button. Keep the design clean and professional. You might add a demo video. Consider your target audience and what matters to them. A good landing page can help with conversions.
LANDING PAGE DELIVERABLE (single self-contained HTML file) BEFORE WRITING: Product intake locked Headline: 'AI schedules your calendar 10x faster' Audience: Small business owners, 50-500 employees Elevator pitch: 'Smart scheduling that learns your meeting patterns and books time automatically' Brand overrides: Use teal+charcoal instead of defaults Tone: Direct, no hype SECTION 1: Hero 3D CSS hero animation (rotating calendar glyph) Headline + CTA (calendar-booking deep link) GSAP scroll-trigger animation enters heading character-by-character SECTION 2: Pain → Relief Parallax depth: 'Wasting 8 hours/month on calendar admin' fades as 'Auto-book optimized slots' slides in Mouse-parallax effect creates layering illusion SECTION 3: How It Works 3-step animated timeline (scroll-driven) Step 1: 'Connect calendar' (Outlook/Google) Step 2: 'AI learns your patterns' (demo screenshot) Step 3: 'Meetings auto-book' (real UI screengrab) SECTION 4: Proof Invented stat tile: '2,400+ hours saved by Teams' Invented quote: 'Cut my admin work by 90%' — Company Name, VP Ops (generic headshot) SECTION 5: CTA + FAQ Call-to-action button: 'Start free trial' Accordion: Common questions OUTPUT: landing.html (all CSS/JS inline, no external dependencies)
About this skill
Most AI-built landing pages fail in two places. The headline could belong to any competitor. The animations look great on a laptop, then show a blank page on slow connections and stutter on phones. This skill writes the positioning and copy first. Then it adds GSAP scroll reveals, CSS 3D depth and mouse parallax, built so they degrade safely everywhere.
What it does
- Writes a 5-line positioning brief (buyer, pain, outcome, mechanism, one action) and tests every headline against it
- Builds one self-contained HTML file with GSAP + ScrollTrigger reveals, a layered 3D hero mockup and pointer-driven parallax
- Keeps content visible without JavaScript, respects reduced-motion settings, and turns off parallax on touch devices
- Fixes the common 3D and GSAP failures: tilt that renders flat, content that flashes before animating, jittery mouse tracking, triggers that fire in the wrong place
- Sets your brand through CSS custom properties and checks button contrast
- Marks testimonials, logos and stats as visible placeholders instead of inventing them
What you get
A positioning brief with labeled assumptions, a complete index.html you can open or deploy, and a checklist of what to replace before launch. Smaller asks get smaller answers: a single section, a copy deck, a review of your existing page, or a patch for one animation bug.
Best for
Founders, indie makers, marketers and freelance developers who need a polished, animated product or launch page quickly and don't want it to look like a template demo.
SKILL.md preview
---
name: animated-landing-page-builder
description: Builds a conversion-focused single-file HTML landing page with scroll reveals, CSS 3D depth and mouse parallax, using zero-dependency vanilla JS by default and GSAP only when the brief needs it. It writes positioning and copy before any markup, and the motion degrades safely for reduced-motion users, touch devices, old browsers and failed scripts. Use when the user says "build a landing page for X", "make a one-pager for my product", "I need a sales page", "make it feel premium with scroll animations", "add parallax to my hero", "my GSAP animations are janky", "my 3D tilt looks flat", or "my landing page looks like every other template".
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.