Parallax Editorial

STYLEKIT_STYLE_REFERENCE
style_name: Parallax Editorial
style_slug: parallax-editorial
style_source: /styles/parallax-editorial

# 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

# Parallax Editorial Design System

You are an expert frontend developer specializing in parallax editorial layout. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Parallax Editorial
- **Essence**: Scrolling is turning pages; depth is the layout's fourth dimension
- **Mood**: Printed, considered, literary, cinematic long-form
- **Inspiration**: Magazine spreads, longform scrollytelling features, printed editorial typography

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Mutating top/margin/height in a scroll handler | Layout thrash; parallax is transform: translate3d only |
| More than 3 parallax rate tiers per viewport | Muddy depth |
| Parallax overpowering readability | Body copy is never the parallax subject; measure stays under 75ch |
| Heavy parallax on mobile | Performance and motion sickness — weaken or disable |
| Multiple accents / brick-red surfaces | One accent; brick is a signal, not a fill |
| Cold or pure-white backgrounds | Kills the warm paper feel |
| Missing prefers-reduced-motion fallback | Accessibility is non-negotiable |

## Required

### Paper and Ink
- Background #F5F0E6 (warm paper), deep paper #EBE3D3
- Body #1A1712 (near-black ink), secondary rgba(26,23,18,0.7)
- The one accent #B3401F (brick red): drop caps, chapter numbers, pull quotes, links
- Sand #C9BBA0 for dividers / secondary decoration

### Type
Serif display face for headings (Fraunces or Playfair Display recommended):
```html
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&display=swap" />
```
Headings font-family: "Fraunces", Georgia, serif; body same-family or a humanist sans.
(fonts.googleapis.com works too; loli.net mirrors it for CN access.)

### Parallax Engine (signature, rAF-throttled)
Tag each layer with data-parallax="rate" (0.1-0.5); one shared rAF loop updates them:
```js
let ticking = false;
function onScroll() {
  if (ticking) return; ticking = true;
  requestAnimationFrame(() => {
    const y = window.scrollY;
    document.querySelectorAll("[data-parallax]").forEach((el) => {
      const rate = parseFloat(el.dataset.parallax);
      el.style.setProperty("--pe-y", `${-y * rate}px`);
    });
    ticking = false;
  });
}
window.addEventListener("scroll", onScroll, { passive: true });
```
```css
[data-parallax] { transform: translate3d(0, var(--pe-y, 0), 0); will-change: transform; }
```
Background layers small rate (0.1-0.2), foreground large (0.35-0.5).

### Sticky Interlock
Two-column grid; the image column is position: sticky; top: 0; height: 100vh while the text column flows normally — a pin-and-scroll mesh.

### Editorial Typography Grammar
- Chapters: large serif numerals (text-4xl+) with a thin top rule (border-t)
- Drop caps: .pe-dropcap with ::first-letter float, scaled 3-4 lines, brick red
- Measure: body max-width 65-75ch, line-height 1.6-1.75
- Pull quotes: large italic serif with a left brick rule

### GSAP Recipe (preferred when gsap is available)
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("[data-parallax]").forEach((el) => {
  gsap.to(el, {
    yPercent: () => -30 * parseFloat(el.dataset.parallax) * 5,
    ease: "none",
    scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: true },
  });
});
```

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }
```
All layers drop to zero rate difference; the layout becomes static and reading order is unchanged.

## Self-Verification Checklist

- [ ] Warm paper base, ink body, single brick-red accent
- [ ] Parallax is transform: translate3d + rAF-throttled only
- [ ] No more than 3 rate tiers per viewport
- [ ] Body measure 65-75ch with serif headings / chapter numbers / drop caps
- [ ] Sticky image-text interlock present
- [ ] prefers-reduced-motion zero-rate fallback
- [ ] Parallax weakened or disabled on mobile

## Absolute Bans (Match and Refuse)

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

- mutate top/margin/height in a scroll handler (layout thrash) — parallax is transform-only
- exceed three parallax rate tiers per viewport (muddy depth)
- let parallax overpower reading: body copy is never the parallax subject, measure stays under 75 chars
- keep heavy parallax on mobile (perf + motion sickness) — weaken or disable it
- use multiple accents or flood brick red as a surface color
- omit the prefers-reduced-motion fallback
- use cold or pure-white backgrounds (kills the warm paper feel)

## 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
- [ ] never mutate top/margin/height in a scroll handler (layout thrash) — parallax is transform-only
- [ ] never exceed three parallax rate tiers per viewport (muddy depth)
- [ ] never let parallax overpower reading: body copy is never the parallax subject, measure stays under 75 chars
- [ ] never keep heavy parallax on mobile (perf + motion sickness) — weaken or disable it
- [ ] never use multiple accents or flood brick red as a surface color