Parallax Editorial

视差杂志

stylekitMITContent & media · content-mediaBlog · blogDashboard · dashboardExperimental · experimentalLight · lightLow (display) · lowOrange · orangeMedium · mediumSerif · serif

有物理纵深的杂志排版。暖纸底色上，前景文字与背景层以不同速率滚动，制造真实的层叠景深；sticky 图文交错、章节编号、首字下沉，把长内容读成一场有节奏的翻页。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Parallax Editorial" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/parallax-editorial · bfa7da909e86 · © AnxForever

Do

暖纸底色 #F5F0E6，正文近黑墨 #1A1712，营造印刷纸感
衬线展示字体做大标题（如 Fraunces / Playfair），无衬线或同族做正文
视差层用 transform: translate3d(0, scrollProgress * rate, 0)，背景 rate 小、前景 rate 大
sticky 图文交错：position: sticky 钉住图像层，文字在侧栏继续滚动
章节以大号衬线编号 + 顶部细横线分隔，建立杂志式结构
首字下沉 drop cap：段落首字母 float、放大 3-4 行高、砖红 #B3401F
正文测度控制在 65-75 字符/行，行高 1.6-1.75
砖红 #B3401F 只用于首字、章节号、引文、链接；其余保持墨黑

Don't

禁止在 scroll 事件里直接改 top / margin / height（触发重排卡顿）——视差只用 transform
禁止一屏超过 3 个视差速率层级（景深浑浊）
禁止让视差压过可读性：正文永远不做视差主体，测度不超 75 字符
禁止移动端保留强视差（性能差 + 眩晕），应削弱或关闭
禁止多个强调色，禁止把砖红铺成大面积底色
禁止省略 prefers-reduced-motion 降级
禁止用冷色/纯白背景（失去暖纸质感）

Prompt

Create a parallax editorial longform feature page with:
1. Warm paper #F5F0E6, ink #1A1712 body, single brick-red #B3401F accent
2. Load Fraunces serif from fonts.loli.net for headings and pull quotes
3. Hero: three parallax layers via transform translate3d — a giant faint background year (rate 0.15), a brick vertical rule (rate 0.4), and static foreground title
4. Chapters numbered with large serif figures and a thin top rule; first paragraph of each uses a brick drop cap
5. One sticky interlock section: an image column pinned while the text column scrolls beside it
6. Body measure capped at 68ch, line-height 1.7
7. Single rAF scroll loop drives all [data-parallax] layers; prefers-reduced-motion sets transform:none and parallax weakens on mobile

---
"Parallax Editorial" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Parallax Editorial. \"Parallax Editorial\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-parallax-editorial",
      "license": "MIT",
      "attribution": "\"Parallax Editorial\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f5f0e6"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1a1712"
    },
    "card": {
      "$type": "color",
      "$value": "#f5f0e6"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1a1712"
    },
    "primary": {
      "$type": "color",
      "$value": "#1a1712"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f5f0e6"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1a1712"
    },
    "accent": {
      "$type": "color",
      "$value": "#b3401f"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e6e2d8"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6a6865"
    },
    "border": {
      "$type": "color",
      "$value": "#d3cec6"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1a1712"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0px"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Parallax Editorial" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86. */
:root {
  --background: #f5f0e6;
  --foreground: #1a1712;
  --card: #f5f0e6;
  --card-foreground: #1a1712;
  --primary: #1a1712;
  --primary-foreground: #fafaf9;
  --secondary: #f5f0e6;
  --secondary-foreground: #1a1712;
  --accent: #b3401f;
  --accent-foreground: #fafaf9;
  --muted: #e6e2d8;
  --muted-foreground: #6a6865;
  --border: #d3cec6;
  --destructive: #dc2626;
  --ring: #1a1712;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Parallax Editorial" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86. */
/** Tailwind theme extend for Parallax Editorial (stylekit-parallax-editorial) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f5f0e6",
        "foreground": "#1a1712",
        "card": "#f5f0e6",
        "primary": "#1a1712",
        "primary-foreground": "#fafaf9",
        "secondary": "#f5f0e6",
        "accent": "#b3401f",
        "muted": "#e6e2d8",
        "border": "#d3cec6",
        "destructive": "#dc2626",
        "ring": "#1a1712"
      },
      "borderRadius": {
        "lg": "0px"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Parallax Editorial" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/parallax-editorial @ bfa7da909e86. */
@layer base {
:root {
  --background: #f5f0e6;
  --foreground: #1a1712;
  --card: #f5f0e6;
  --card-foreground: #1a1712;
  --primary: #1a1712;
  --primary-foreground: #fafaf9;
  --secondary: #f5f0e6;
  --secondary-foreground: #1a1712;
  --accent: #b3401f;
  --accent-foreground: #fafaf9;
  --muted: #e6e2d8;
  --muted-foreground: #6a6865;
  --border: #d3cec6;
  --destructive: #dc2626;
  --ring: #1a1712;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}