Vertical Writing Spread

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<VerticalWritingSpread/>

    </div>
  );
}

Installation

Usage

Use VerticalWritingSpread as the container and place vertical VerticalColumn and horizontal HorizontalInsert elements inside it in reading order. The layout flows right to left, so the first column sits at the far right; the container needs a fixed height (the vertical columns fill it):

import {
  VerticalWritingSpread,
  VerticalColumn,
  HorizontalInsert,
} from "@/components/ui/vertical-writing-spread";

<VerticalWritingSpread className="h-[320px]" showProgress fadeEdges>
  <VerticalColumn variant="heading">Vertical Order</VerticalColumn>
  <VerticalColumn>The text flows in vertical columnsFlowing, from the rightLeftReads……</VerticalColumn>

  <HorizontalInsert>
    <blockquote>“White space is not blank, but breathing.”</blockquote>
  </HorizontalInsert>

  <VerticalColumn>HorizontalQuotes and images appear throughout, giving your eyes a place to rest……</VerticalColumn>
  <VerticalColumn variant="heading">The layout is the narrative.</VerticalColumn>
</VerticalWritingSpread>

Vertical columns reveal character by character from top to bottom as they come into view. wheelToHorizontal is on by default, so a vertical wheel turns into horizontal advancement through the columns, releasing page scrolling automatically once either end is reached.

Props

VerticalWritingSpread

VerticalColumn

HorizontalInsert

How it works

• Vertical writing is built with CSS writing-mode: vertical-rl, so the body text descends vertically and wraps automatically into multiple vertical lines; HorizontalInsert breaks the vertical flow with horizontal-tb to carry horizontal pull quotes and images
• The layout runs right to left: the track uses flex-row-reverse, the first column sits at the far right, and it scrolls to the far right automatically on mount, matching the Chinese and Japanese reading direction
• Entrance detection is driven by IntersectionObserver (with the scroll container as the root); headings reveal character by character from top to bottom with a stagger, and body columns are revealed top-down via clip-path
• wheelToHorizontal maps the vertical wheel onto horizontal advancement, so scrolling down moves the column order forward (to the left); once either end is reached, page scrolling is released rather than locked

Accessibility

• The scrollable region is a focusable role="region" with an aria-label; ArrowDown / Space advance and ArrowUp goes back, switching between smooth and instant scrolling according to reduced motion
• Character-by-character headings keep an sr-only copy of the complete text, and the split graphemes are hidden from assistive technology (aria-hidden), so what is announced is complete words and phrases
• When the user has "reduce motion" enabled at the system level, the vertical writing layout and horizontal scrolling are preserved and only the reveal and stagger animations are disabled (the content appears in full immediately)