Meridian

一Concept

The concept, in two sentences.

A career runs like a day — licence at sunrise, calendar by noon, the work all afternoon, people read at dusk — so the page passes once from washi morning to indigo evening while a small vermilion sun descends in exact step with your scrolling. Everything else is removed until what remains is type, paper, mountains and one disc of colour.

二Palette

Every colour is sampled from the painting.

The hero artwork governs the system: the page ground continues the painting's paper tone with no visible seam, and the accent is the painted sun itself — not an idealised vermilion.

Product colours appear only as 9-pixel seal stamps — the hanko beside each product's name — never as surfaces.

三Type

Two faces, four registers.

Kanji numerals 一 二 三 四 are the chapter numbers — they genuinely encode the sequence a career runs, and the vertical asides (第一章・朝 … 第四章・夕) name each chapter and its hour.

四Signature

The travelling sun.

One vermilion disc, fixed on screen, moves in exact sync with scroll progress. It begins seated on the painted sun in the hero — same position, same diameter, same sampled colour — lifts to the top of a thin meridian line as the hero leaves, descends that line through the four chapters as the day passes, then leaves the line and lands inside the empty vermilion ring waiting in the final CTA button. The ring sits open until the sun arrives: scroll to the end and the button gains its dot.

It earns its place three times over: it is the narrative (the day passing), the scroll progress indicator (the inked portion of the meridian grows behind it), and the destination (the CTA's dot). One element, no duplication — which is the whole thesis of this version.

五Techniques

What is actually doing the work.

• Scroll-linked positional mapping — a passive scroll listener and one requestAnimationFrame writer drive the sun along a three-phase path (painting → meridian → CTA), with live getBoundingClientRect() anchors so it lands on the ring at any viewport size. Transform-only updates; no layout thrash.
• Pixel-sampled continuity — the page ground (#ECDCC2), the accent (#B75F44) and the sun's start anchor (32.95%, 73.12%, ∅2.9% of width) are measured from inkwash.jpg, and a CSS mask-image fade dissolves the artwork's edges into the page so the paper never shows a seam.
• One-page light→dusk passage — a 172vh gradient section eases washi into indigo through nine tuned stops; no theme toggle, no class switch, just sky.
• Self-adapting chrome — the fixed links and meridian line are washi-coloured under mix-blend-mode: difference, so they read dark on paper and pale on indigo, including mid-gradient.
• GSAP ScrollTrigger character rises — display headings are split into word-wrapped character spans that rise 6px with staggered opacity, once, on first entry.
• Vertical writing modes — writing-mode: vertical-rl with upright orientation for the hero poem, chapter marks and the dusk marker.
• Night reprise by inversion — the same painting returns at the foot of the page under grayscale + invert and a screen blend: ink ridges turn luminous, the sun becomes a pale moon.
• Reduced motion, honoured — under prefers-reduced-motion the sun and meridian retire, the CTA ring renders pre-filled (the sun at rest), and no character animates. Static files only; no build step.