Full Page Scroll

STYLEKIT_STYLE_REFERENCE
style_name: Full Page Scroll
style_slug: full-page-scroll
style_source: /styles/full-page-scroll

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a frontend expert specializing in Full Page Scroll layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT let content overflow beyond viewport height
- Do NOT omit scroll indicators
- Do NOT use heavy animations that hurt performance
- Do NOT lock scroll for too long
- Do NOT ignore mobile experience
- Do NOT use the same transition delay for all content elements (staggering is mandatory for parallax depth)

## Must Follow

- Container: h-screen overflow-y-auto scroll-snap-type: y mandatory
- Sections: min-h-screen snap-start group (MUST use group class for hover parallax)
- Content: centered with flex items-center justify-center
- Navigation: fixed capsule dots on right side (hover:h-6 to expand)
- Scroll indicator: at bottom of first section
- Smooth scrolling: scroll-behavior: smooth

## Section Structure

Each section:
- min-h-screen (full viewport height)
- snap-start (snap to section start)
- group (required for group-hover parallax)
- overflow-hidden (required for breathing background)
- Content centered both ways
- Distinct background color/gradient
- Number indicator (01, 02, etc.)

## Animation & Interaction Rules

- Staggered Parallax: Content layers inside a group section must use DIFFERENT transition delays to create depth. Use delay-0 for the eyebrow/label (fastest, frontmost), delay-75 for the heading (middle layer), delay-150 for body text (slowest, deepest). All use group-hover:-translate-y-N with transition-transform duration-700 ease-out. This creates the illusion that elements are on different Z-planes flying toward the viewer as the section is hovered/focused.
- Breathing Background: Every section includes an absolute background div (radial-gradient or other atmospheric effect) with group-hover:scale-110 transition-transform duration-1000 ease-out. The scale is slow (1000ms) and subtle -- creates a "room breathing" or "portal opening" sensation without being jarring.
- Capsule Nav Dots: Side navigation dots are circles (w-3 h-3 rounded-full) by default. On hover: hover:h-6 (the dot extends vertically into a capsule/pill shape). The active section's dot is permanently tall (h-10 rounded-full). These indicate section hierarchy and interactivity without needing labels.
- Heading Scale: The main heading uses group-hover:scale-105 in addition to translation -- creates a subtle zoom-in that reinforces the "content approaching" cinematic parallax.
- Scroll Indicator: animate-bounce, positioned absolute bottom-8 left-1/2 -translate-x-1/2. Always present on the first section.
- Easing: Content parallax uses duration-700 ease-out. Background breathing uses duration-1000 ease-out. Nav dots use duration-300.

## Navigation

Side dots:
- Fixed position on right side, vertical center
- Active: w-3 h-10 rounded-full bg-white (tall capsule)
- Inactive: w-3 h-3 rounded-full bg-white/30 hover:bg-white/80 hover:h-6 (expands to capsule on hover)
- transition-all duration-300 for smooth shape morph

## Self-Check

After generating code, verify:
1. All sections have group class
2. Content elements inside sections have DIFFERENT delay values (delay-0, delay-75, delay-150)
3. Each section has a breathing background div (group-hover:scale-110)
4. Navigation dots use hover:h-6 to morph into capsules
5. Active nav dot is permanently h-10 (tall capsule)
6. All sections are exactly viewport height (min-h-screen)
7. Scroll snapping enabled (scroll-snap-type y mandatory on container)

---

# Full Page Scroll Design System

> Immersive scrolling experience where each screen fills the entire viewport, switching complete scenes on scroll. Ideal for brand stories, product introductions, and portfolio showcases.

## Design Philosophy

Full Page Scroll is a layout approach that expands each content block to fill the entire viewport, creating a cinematic narrative experience.

Core principles:
- Immersive experience: Each screen is a complete visual scene
- Narrative rhythm: Scrolling equals page-turning, controlling information pacing
- Focused attention: Only one core message displayed at a time
- Memorable: Scene-based presentation is easier to remember

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-0
Color: border-white/20
Radius: rounded-full
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-all duration-300
Active: active:scale-95
```

### Typefaces
```
Heading: font-bold tracking-tight
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-5xl md:text-7xl lg:text-8xl
H1: text-4xl md:text-6xl
H2: text-3xl md:text-5xl lg:text-7xl
H3: text-2xl md:text-3xl
Body: text-lg md:text-xl lg:text-2xl
Small: text-sm md:text-base
```

### Spacing
```
Section: py-0
Container: px-6 md:px-8 lg:px-12
Card: p-8 md:p-12
Gap sm: gap-2 md:gap-4
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-8
```

### Color roles
```
Background primary: bg-black
Background secondary: bg-zinc-900
Background accent: bg-gradient-to-br from-indigo-600 to-purple-700, bg-gradient-to-br from-cyan-600 to-blue-600, bg-gradient-to-br from-purple-600 to-pink-600, bg-gradient-to-br from-emerald-600 to-teal-600
Text primary: text-white
Text secondary: text-white/80
Text muted: text-white/50
Button primary: bg-white text-black
Button secondary: bg-transparent text-white border-2 border-white
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `border-gray-200`
- `border-gray-300`
- `text-zinc-900`

### Banned patterns
- matches `^shadow-(?!none)`
- matches `^border-gray-`

### Why they are banned
- `shadow-lg`: Full Page Scroll uses bold color backgrounds instead of shadows for depth
- `border-gray-200`: Full Page Scroll uses white/transparent borders for dark backgrounds
- `text-black`: Full Page Scroll uses white text on dark/gradient backgrounds

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-8 md:px-12 py-4 md:py-5
font-semibold text-lg
transition-colors
```

### Every card must include
```
min-h-screen
snap-start
flex items-center justify-center
```

### Every input must include
```
bg-transparent
border-b border-white/30
text-white text-lg
placeholder-white/50
focus:outline-none focus:border-white
transition-colors
```

---

## [COMPARE] Full Page Scroll wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-8 md:px-12 py-4 md:py-5 font-semibold text-lg transition-colors bg-white text-black">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="min-h-screen snap-start flex items-center justify-center p-8 md:p-12">
 <h3 class="font-bold tracking-tight text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-transparent border-b border-white/30 text-white text-lg placeholder-white/50 focus:outline-none focus:border-white transition-colors" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Full Page Scroll page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-black text-white border-0 border-white/20 px-6 md:px-8 lg:px-12">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
 <a href="/" class="font-bold tracking-tight text-2xl md:text-3xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-sans text-sm md:text-base">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-gradient-to-br from-indigo-600 to-purple-700 text-white py-0 px-6 md:px-8 lg:px-12">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-bold tracking-tight text-5xl md:text-7xl lg:text-8xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-lg md:text-xl lg:text-2xl max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="px-8 md:px-12 py-4 md:py-5 font-semibold text-lg transition-colors bg-white text-black">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-black text-white py-0 px-6 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-bold tracking-tight text-3xl md:text-5xl lg:text-7xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 <!-- Card template - repeat for each card -->
 <div class="min-h-screen snap-start flex items-center justify-center p-8 md:p-12">
 <h3 class="font-bold tracking-tight text-2xl md:text-3xl">{CARD_TITLE}</h3>
 <p class="font-sans text-lg md:text-xl lg:text-2xl text-white/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-transparent border-b border-white/30 text-white text-lg placeholder-white/50 focus:outline-none focus:border-white transition-colors" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-zinc-900 text-white/80 py-0 px-6 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
 <div>
 <span class="font-bold tracking-tight text-2xl md:text-3xl">{LOGO_TEXT}</span>
 <p class="font-sans text-sm md:text-base">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-bold tracking-tight text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-sm md:text-base">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Full Page Scroll post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-8 md:px-12 py-4 md:py-5 font-semibold text-lg transition-colors`
- [ ] Card includes: `min-h-screen snap-start flex items-center justify-center`
- [ ] Input includes: `bg-transparent border-b border-white/30 text-white text-lg placeholder-white/50 focus:outline-none focus:border-white transition-colors`

### Forbidden check
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`
- [ ] Not using `border-gray-200`
- [ ] Not using `border-gray-300`
- [ ] Not using `text-zinc-900`

### Style rule check
- [ ] Each section set to min-h-screen or h-screen
- [ ] Use scroll-snap for smooth snapping scroll-snap-type: y mandatory
- [ ] Center content vertically and horizontally flex items-center justify-center
- [ ] Add scroll indicators and page navigation dots
- [ ] Use CSS scroll-behavior: smooth

### Style drift check
- [ ] Does not violate: Do not let content overflow beyond viewport height (should not need scrolling to see everything)
- [ ] Does not violate: Do not omit scroll indicators (users may not know to scroll down)
- [ ] Does not violate: Do not use overly complex animations causing performance issues
- [ ] Does not violate: Do not lock scroll for too long
- [ ] Does not violate: Do not ignore mobile experience

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Full Page Scroll

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a brand story page with full page scroll:
1. Container with scroll-snap-type: y mandatory
2. 5 sections, each min-h-screen with different gradient backgrounds
3. Section 1: Hero with brand name and tagline
4. Sections 2-4: Timeline moments with year, title, description
5. Section 5: CTA to explore more
6. Fixed navigation dots on right side
7. Scroll indicator on first section
Content centered, smooth transitions between sections
```

### 2. 

```
Create a product features page with full page scroll:
1. 4 full-screen sections with scroll snap
2. Each section: feature icon, headline, description, visual
3. Alternating dark/light backgrounds
4. Section entrance animations (fade up)
5. Progress indicator showing current section
6. Final section with pricing CTA
7. Skip button to jump to end
Use bold typography, centered content
```

### 3. 

```
Create a portfolio showcase with full page scroll:
1. Hero section with name and role
2. Each project in full-screen section
3. Project sections: large image, title, description, link
4. Different color schemes per project
5. Navigation dots with project names on hover
6. Final section with contact form
7. Smooth scroll between sections
Use dramatic visuals, minimal text
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- let content overflow beyond viewport height (should not need scrolling to see everything)
- omit scroll indicators (users may not know to scroll down)
- use overly complex animations causing performance issues
- lock scroll for too long
- ignore mobile experience
- use the same transition delay for all content elements (staggering is required for depth perception)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not let content overflow beyond viewport height (should not need scrolling to see everything)
- [ ] do not omit scroll indicators (users may not know to scroll down)
- [ ] do not use overly complex animations causing performance issues
- [ ] do not lock scroll for too long
- [ ] do not ignore mobile experience