Parallax Editorial

# Visual style: Parallax Editorial

Editorial layout with physical depth. On warm paper, foreground text and background layers scroll at different rates to build real parallax; sticky image-text interlock, chapter numbers and drop caps turn long-form into a paced turn of the page.

## Philosophy
The parallax-editorial creed: scrolling is turning pages, and depth is the fourth dimension of the layout. When foreground and background move at different rates, a flat page finally gains the thickness of paper — the reader doesn't swipe across a screen, they move through a stack of spreads sliding out of register.

Core principles:
- Depth is hierarchy: background slow, foreground fast. The rate difference itself reads as importance — near things lead, far things lag
- Typography before parallax: parallax is the stage, not the star. The type must stand on its own first — serif display headings, a comfortable measure (65-75 characters), clear chapter structure
- Sticky interlock: an image pins while text scrolls over it, or the reverse — image and text meshing like a magazine spread
- Editorial signals: chapter numbers, drop caps, hanging punctuation, column rules — these are magazine grammar, not decoration
- Restrained accent: brick red #B3401F only for drop caps, chapter numbers, pull quotes and links; body copy stays near-black ink
- Rhythm and rest: generous whitespace is the breath. Parallax passages must alternate with quiet text-only passages or the eye tires

Design principles:
- Performance line: parallax uses transform: translate3d (compositor layer) only, rAF-throttled, never mutating top/margin in a scroll handler
- Accessibility line: under prefers-reduced-motion all layers drop to zero rate difference and become a normal static layout; reading order never changes
- Depth discipline: at most three parallax rate tiers per viewport, more turns muddy
- Responsive: on mobile, weaken or disable parallax (performance + motion sickness) while keeping the typography and sticky structure

## Do
- Warm paper base #F5F0E6 with near-black ink body #1A1712 for a printed feel
- Serif display face for headlines (e.g. Fraunces / Playfair), sans or same-family for body
- Parallax layers via transform: translate3d(0, scrollProgress * rate, 0) — small rate for background, larger for foreground
- Sticky image-text interlock: position: sticky pins the image layer while text scrolls in the adjacent column
- Number chapters with large serif figures and a thin top rule to build magazine structure
- Drop caps: float the paragraph's first letter, scale it 3-4 lines tall, brick red #B3401F
- Keep the measure at 65-75 characters per line, line-height 1.6-1.75
- Brick red #B3401F only on drop caps, chapter numbers, pull quotes and links; keep the rest ink
- rAF-throttle all parallax and ship a prefers-reduced-motion zero-rate fallback

## Don't
- 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
- Never omit the prefers-reduced-motion fallback
- Never use cold or pure-white backgrounds (kills the warm paper feel)

## Rules for the AI
# 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