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)

## 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