May 1, 2026

Build a Snap-Scroll Website with Claude

Full Guide for Non-Coders

This guide walks you through building a 3-section snap-scroll landing page (inspired by Nicolai Palmkvist's Elementor tutorial)

You don't need to know how to code, just copy-paste prompts and follow the steps.

Total time: ~2-3 hours for first-timers.

What you need

Accounts:

Claude Pro ($20/month) or higher — required for Claude Code

Machine:

Mac (this guide is for Mac; Windows is similar but a few commands differ)
Terminal (built into Mac, no install needed)

Assets:

8-9 images for 3 hero sections. Each hero needs:
- 1 background image (full screen)
- 1-2 foreground images (figure, focal object)
PNG format, recommend 2000px+ width

Plan your design with Claude AI (web chat)

Before going into Claude Code, use Claude.ai web chat to nail down the design. You upload images + design prompt, Claude builds an HTML demo so you can feel it before committing.

Prompt 1 — Build a prototype demo

Go to claude.ai, start a new conversation, upload all your images, paste this prompt:

(This is the HTML file you will use at step 2.3)

I want to build a 3-section snap-scroll landing page, inspired by this Elementor tutorial: https://www.youtube.com/watch?v=Zl-MS9TY8_w

I'll use Claude Code to build it later, but first I want you to:

1. Create a standalone HTML demo using GSAP for section-by-section snap (1 wheel = 1 panel transition immediately, NOT continuous scrub)
2. Each hero has: background image, foreground image, large headline, paragraph copy, top nav, scroll indicators on both sides, footer socials + contact link, progress dots on the right edge
3. Animation: lock input during transition, support wheel + touch + keyboard + click on dots

Use gradient placeholders instead of real images for now to keep the file small. I'll test the snap feel and then ask you to tweak it.

I want to build a 3-section snap-scroll landing page, inspired by this Elementor tutorial: https://www.youtube.com/watch?v=Zl-MS9TY8_w

I'll use Claude Code to build it later, but first I want you to:

1. Create a standalone HTML demo using GSAP for section-by-section snap (1 wheel = 1 panel transition immediately, NOT continuous scrub)
2. Each hero has: background image, foreground image, large headline, paragraph copy, top nav, scroll indicators on both sides, footer socials + contact link, progress dots on the right edge
3. Animation: lock input during transition, support wheel + touch + keyboard + click on dots

Use gradient placeholders instead of real images for now to keep the file small. I'll test the snap feel and then ask you to tweak it.

I want to build a 3-section snap-scroll landing page, inspired by this Elementor tutorial: https://www.youtube.com/watch?v=Zl-MS9TY8_w

I'll use Claude Code to build it later, but first I want you to:

1. Create a standalone HTML demo using GSAP for section-by-section snap (1 wheel = 1 panel transition immediately, NOT continuous scrub)
2. Each hero has: background image, foreground image, large headline, paragraph copy, top nav, scroll indicators on both sides, footer socials + contact link, progress dots on the right edge
3. Animation: lock input during transition, support wheel + touch + keyboard + click on dots

Use gradient placeholders instead of real images for now to keep the file small. I'll test the snap feel and then ask you to tweak it.

Prompt 2 — Tweak snap speed (optional)

After opening the demo file, scroll-test and report back:

Snap is too slow / too fast / feels heavy on the lead-in. Change:
- DURATION: [0.6 / 0.75 / 0.9 / 1.1 — pick]
- EASE: [power2.out (snappy) / power3.inOut (smooth) — pick]

Update the file and send it back

Snap is too slow / too fast / feels heavy on the lead-in. Change:
- DURATION: [0.6 / 0.75 / 0.9 / 1.1 — pick]
- EASE: [power2.out (snappy) / power3.inOut (smooth) — pick]

Update the file and send it back

Snap is too slow / too fast / feels heavy on the lead-in. Change:
- DURATION: [0.6 / 0.75 / 0.9 / 1.1 — pick]
- EASE: [power2.out (snappy) / power3.inOut (smooth) — pick]

Update the file and send it back

Open the demo, click through presets, pick the intensity you like for each hero. Note the values (scale endpoint + duration).

2. Set up the project and start Claude Code

Step 2.1 — Create the project folder

In Terminal:

cd ~/Documents
mkdir snap-scroll-site
cd snap-scroll-site
mkdir -p public/images

cd ~/Documents
mkdir snap-scroll-site
cd snap-scroll-site
mkdir -p public/images

cd ~/Documents
mkdir snap-scroll-site
cd snap-scroll-site
mkdir -p public/images

What each command does:

cd ~/Documents — go into the Documents folder
mkdir snap-scroll-site — make a new folder
cd snap-scroll-site — go into the folder you just made
mkdir -p public/images — create the nested public/images folders

Step 2.2 — Copy images into the project

cp ~/Documents/[YOUR-IMAGES-FOLDER]/* public/images/
ls public/images

cp ~/Documents/[YOUR-IMAGES-FOLDER]/* public/images/
ls public/images

cp ~/Documents/[YOUR-IMAGES-FOLDER]/* public/images/
ls public/images

ls lists the filenames so you can verify everything copied.

Step 2.3 — Save the demo HTML from Claude AI

Save the demo Claude AI built for you (in Prompt 1) into the snap-scroll-site folder, naming it reference.html. This file becomes the "source spec" Claude Code will read.

Step 2.4 — Create CLAUDE.md

This file is the spec; Claude Code auto-reads it every session. Create a new file called CLAUDE.md in the project folder, paste this content (adjust values based on what you picked in Prompt 3):

# Snap Scroll Landing Page

## Goal
3-section snap-on-scroll landing page. Each wheel/swipe = immediate panel transition (no continuous scrub). Each panel has per-layer animations: entrance + continuous idle zoom.

## Stack
- Vite + vanilla JS + Tailwind CSS v4
- GSAP core (no ScrollTrigger needed)
- Deploy: Vercel

## Snap transition (LOCKED — do not change)
- DURATION: 0.75s
- EASE: power2.out
- Scroll down: current panel yPercent -30, scale 0.95, opacity 0.4 + incoming yPercent 100→0
- Scroll up: reverse
- Lock input during transition
- Inputs: wheel, touch (50px swipe), arrow keys, Space, click on progress dots

## Per-layer animations (LOCKED)
Each hero's entrance + idle run IN PARALLEL with the snap (start at the same instant).
For layers with idle scale: use TWO parallel tweens at position 0 — one for opacity/yPercent (short, snappy), one for scale (long duration = entrance + idle, continuous from t=0).

| Hero | Layer | Entrance | Scale tween (parallel) |
|---|---|---|---|
| 1 | bg     | opacity 0→1, 1.6s, power3.out | scale 1→1.12, 11.6s, none |
| 1 | planet | opacity 0→1, 1.4s, power3.out | scale 0.7→1.20, 7.4s, power3.out |
| 1 | couple | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |
| 2 | bg     | opacity 0→1, 1.4s, power3.out | scale 1→1.22, 8.4s, none |
| 2 | figure | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |
| 3 | bg     | opacity 0→1, 1.6s, power3.out | scale 1→1.17, 10.6s, none |
| 3 | cloud  | opacity 0→1, 1.4s, power3.out | scale 0.94→1.17, 10.4s, power3.out |
| 3 | figure | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |

## Sections

### Hero 1 — "THE UNKNOWN"
- Background: hero1-bg.png (pink/purple clouds)
- Foreground: hero1-planet.png (centered planet) + hero1-couple.png (couple on hill, full viewport width)
- Title centered, uppercase
- Brand: "Into The Unknown"

### Hero 2 — "Into the unseen"
- Background: hero2-bg.png (red moon over city)
- Foreground: hero2-figure.png
- Title bottom-right, copy upper-left
- Brand: "Into The Unseen"

### Hero 3 — "Explore the unfamiliar"
- Background: hero3-bg.png + hero3-cloud.png
- Foreground: hero3-figure.png (full viewport width, bottom)
- Title left, copy right
- Brand: "Into The Unfamiliar"

## Typography
- Title: Bricolage Grotesque, weight 700, lowercase (Hero 1 uppercase)
- Body: Inter, weight 300-500
- Title size: clamp(48px, 8vw, 128px)

## Reference
File `reference.html` is the verified standalone demo. Read it for CSS structure and snap logic. Do NOT change snap timing values.

## Note for assistant
The user is non-technical. Briefly explain what each command/change does. Use Plan Mode for big changes. Pause for approval at each major step

# Snap Scroll Landing Page

## Goal
3-section snap-on-scroll landing page. Each wheel/swipe = immediate panel transition (no continuous scrub). Each panel has per-layer animations: entrance + continuous idle zoom.

## Stack
- Vite + vanilla JS + Tailwind CSS v4
- GSAP core (no ScrollTrigger needed)
- Deploy: Vercel

## Snap transition (LOCKED — do not change)
- DURATION: 0.75s
- EASE: power2.out
- Scroll down: current panel yPercent -30, scale 0.95, opacity 0.4 + incoming yPercent 100→0
- Scroll up: reverse
- Lock input during transition
- Inputs: wheel, touch (50px swipe), arrow keys, Space, click on progress dots

## Per-layer animations (LOCKED)
Each hero's entrance + idle run IN PARALLEL with the snap (start at the same instant).
For layers with idle scale: use TWO parallel tweens at position 0 — one for opacity/yPercent (short, snappy), one for scale (long duration = entrance + idle, continuous from t=0).

| Hero | Layer | Entrance | Scale tween (parallel) |
|---|---|---|---|
| 1 | bg     | opacity 0→1, 1.6s, power3.out | scale 1→1.12, 11.6s, none |
| 1 | planet | opacity 0→1, 1.4s, power3.out | scale 0.7→1.20, 7.4s, power3.out |
| 1 | couple | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |
| 2 | bg     | opacity 0→1, 1.4s, power3.out | scale 1→1.22, 8.4s, none |
| 2 | figure | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |
| 3 | bg     | opacity 0→1, 1.6s, power3.out | scale 1→1.17, 10.6s, none |
| 3 | cloud  | opacity 0→1, 1.4s, power3.out | scale 0.94→1.17, 10.4s, power3.out |
| 3 | figure | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |

## Sections

### Hero 1 — "THE UNKNOWN"
- Background: hero1-bg.png (pink/purple clouds)
- Foreground: hero1-planet.png (centered planet) + hero1-couple.png (couple on hill, full viewport width)
- Title centered, uppercase
- Brand: "Into The Unknown"

### Hero 2 — "Into the unseen"
- Background: hero2-bg.png (red moon over city)
- Foreground: hero2-figure.png
- Title bottom-right, copy upper-left
- Brand: "Into The Unseen"

### Hero 3 — "Explore the unfamiliar"
- Background: hero3-bg.png + hero3-cloud.png
- Foreground: hero3-figure.png (full viewport width, bottom)
- Title left, copy right
- Brand: "Into The Unfamiliar"

## Typography
- Title: Bricolage Grotesque, weight 700, lowercase (Hero 1 uppercase)
- Body: Inter, weight 300-500
- Title size: clamp(48px, 8vw, 128px)

## Reference
File `reference.html` is the verified standalone demo. Read it for CSS structure and snap logic. Do NOT change snap timing values.

## Note for assistant
The user is non-technical. Briefly explain what each command/change does. Use Plan Mode for big changes. Pause for approval at each major step

# Snap Scroll Landing Page

## Goal
3-section snap-on-scroll landing page. Each wheel/swipe = immediate panel transition (no continuous scrub). Each panel has per-layer animations: entrance + continuous idle zoom.

## Stack
- Vite + vanilla JS + Tailwind CSS v4
- GSAP core (no ScrollTrigger needed)
- Deploy: Vercel

## Snap transition (LOCKED — do not change)
- DURATION: 0.75s
- EASE: power2.out
- Scroll down: current panel yPercent -30, scale 0.95, opacity 0.4 + incoming yPercent 100→0
- Scroll up: reverse
- Lock input during transition
- Inputs: wheel, touch (50px swipe), arrow keys, Space, click on progress dots

## Per-layer animations (LOCKED)
Each hero's entrance + idle run IN PARALLEL with the snap (start at the same instant).
For layers with idle scale: use TWO parallel tweens at position 0 — one for opacity/yPercent (short, snappy), one for scale (long duration = entrance + idle, continuous from t=0).

| Hero | Layer | Entrance | Scale tween (parallel) |
|---|---|---|---|
| 1 | bg     | opacity 0→1, 1.6s, power3.out | scale 1→1.12, 11.6s, none |
| 1 | planet | opacity 0→1, 1.4s, power3.out | scale 0.7→1.20, 7.4s, power3.out |
| 1 | couple | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |
| 2 | bg     | opacity 0→1, 1.4s, power3.out | scale 1→1.22, 8.4s, none |
| 2 | figure | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |
| 3 | bg     | opacity 0→1, 1.6s, power3.out | scale 1→1.17, 10.6s, none |
| 3 | cloud  | opacity 0→1, 1.4s, power3.out | scale 0.94→1.17, 10.4s, power3.out |
| 3 | figure | yPercent 30→0, opacity 0→1, 1.2s, delay 0.2s, power3.out | (no scale) |

## Sections

### Hero 1 — "THE UNKNOWN"
- Background: hero1-bg.png (pink/purple clouds)
- Foreground: hero1-planet.png (centered planet) + hero1-couple.png (couple on hill, full viewport width)
- Title centered, uppercase
- Brand: "Into The Unknown"

### Hero 2 — "Into the unseen"
- Background: hero2-bg.png (red moon over city)
- Foreground: hero2-figure.png
- Title bottom-right, copy upper-left
- Brand: "Into The Unseen"

### Hero 3 — "Explore the unfamiliar"
- Background: hero3-bg.png + hero3-cloud.png
- Foreground: hero3-figure.png (full viewport width, bottom)
- Title left, copy right
- Brand: "Into The Unfamiliar"

## Typography
- Title: Bricolage Grotesque, weight 700, lowercase (Hero 1 uppercase)
- Body: Inter, weight 300-500
- Title size: clamp(48px, 8vw, 128px)

## Reference
File `reference.html` is the verified standalone demo. Read it for CSS structure and snap logic. Do NOT change snap timing values.

## Note for assistant
The user is non-technical. Briefly explain what each command/change does. Use Plan Mode for big changes. Pause for approval at each major step

3. Build the project step-by-step with Claude Code

Working with Claude Code is iterative: you describe what you want → it proposes a plan → you approve → it writes code → you test → you report bugs → it fixes. Don't try to one-shot the whole build; go phase by phase.

Always press Shift + Tab before big prompts to enter Plan Mode. Claude Code will lay out a plan instead of writing code immediately. You review the plan, then approve it before any file changes happen.

The build flows through these phases:

Kickoff — point Claude Code at CLAUDE.md and reference.html, ask it to map your images to the spec filenames and propose a build plan.
Project init — Vite scaffold, install Tailwind v4 + GSAP, set up folder structure.
HTML — write index.html with 3 hero sections, fonts, progress dots.
CSS — port layout from reference.html into split CSS files, wire image paths.
First preview — npm run dev, open localhost:5173, confirm layout looks right (no animation yet).
Snap JS — port the snap-scroll logic (wheel/touch/keyboard/dots).
Per-layer animations — entrance + idle, running in parallel with the snap.
Iterate on bugs — test, report, fix, repeat.
Deploy — production build, push to Vercel.

For each phase: don't write your own prompts from scratch. Ask Claude AI (web chat) to write the prompt for you. Open a separate conversation on claude.ai and paste something like:

I'm building a snap-scroll site with Claude Code. I'm at the [phase name] phase. Here's my CLAUDE.md spec: [paste].

Write a prompt I can paste into Claude Code that:
- Asks it to plan first (no code yet)
- Locks down values from CLAUDE.md so it doesn't change them
- Tells it to pause and show output after each major step
- Explains things to me in plain English (I'm non-technical)

Also: tell me what I should expect to see after Claude Code runs the prompt, and what could go wrong

I'm building a snap-scroll site with Claude Code. I'm at the [phase name] phase. Here's my CLAUDE.md spec: [paste].

Write a prompt I can paste into Claude Code that:
- Asks it to plan first (no code yet)
- Locks down values from CLAUDE.md so it doesn't change them
- Tells it to pause and show output after each major step
- Explains things to me in plain English (I'm non-technical)

Also: tell me what I should expect to see after Claude Code runs the prompt, and what could go wrong

I'm building a snap-scroll site with Claude Code. I'm at the [phase name] phase. Here's my CLAUDE.md spec: [paste].

Write a prompt I can paste into Claude Code that:
- Asks it to plan first (no code yet)
- Locks down values from CLAUDE.md so it doesn't change them
- Tells it to pause and show output after each major step
- Explains things to me in plain English (I'm non-technical)

Also: tell me what I should expect to see after Claude Code runs the prompt, and what could go wrong

Claude AI will tailor the prompt for your exact phase, your image filenames, and your spec. Paste that into Claude Code, review the plan it returns, approve, and move on.

When something goes wrong, go back to Claude AI, describe the bug (or screenshot it), and ask:

Claude Code did X but it produced [bug]. Here's the screenshot/error. Write a follow-up prompt that:
- Tells Claude Code exactly what's wrong (root cause, not just symptom)
- Provides a code example or specific fix direction
- Locks down everything that's currently working

Also explain what you think the actual root cause is so I learn

Claude Code did X but it produced [bug]. Here's the screenshot/error. Write a follow-up prompt that:
- Tells Claude Code exactly what's wrong (root cause, not just symptom)
- Provides a code example or specific fix direction
- Locks down everything that's currently working

Also explain what you think the actual root cause is so I learn

Claude Code did X but it produced [bug]. Here's the screenshot/error. Write a follow-up prompt that:
- Tells Claude Code exactly what's wrong (root cause, not just symptom)
- Provides a code example or specific fix direction
- Locks down everything that's currently working

Also explain what you think the actual root cause is so I learn

This split — Claude AI for prompt-writing, Claude Code for execution — is the leverage. Claude AI knows how to phrase things for the agent; you don't need to learn prompt engineering yourself.

Readme.md

UserFlow.md

If this helped, the best thank you from you is a follow + share with one designer friend who needs to see it! More breakdowns coming weekly!!!

— Serena