אתר משרד אדריכלים מינימליסטי יפני

Build a "Kanso Architects Website" React component.

CONCEPT: The website of a four-person architecture practice in Kyoto that builds tea houses and small homes. Silence is the main material.

LAYOUT & CONTENT:
- Nav: 'KANSO 簡素' left, links Works / Practice / Writing / Contact right, all small.
- Hero: on the right two-thirds, a line-drawn south elevation of the Tea House at Ohara on a stone-paper plate (#E9E3D6): hipped roof with deep eaves, four posts, shoji grid, raised engawa, a maple drawn as loose circles, a vermilion sun outline, the time in serif bottom-left with the caption 'TEA HOUSE AT OHARA, SOUTH ELEVATION' and 'MOVE ACROSS TO CHANGE THE HOUR' top-right. On the left 'Less, built carefully.' and a vertical Japanese caption 少なく、丁寧に。
- Philosophy: three principles in a row with kanji (間 Ma, 簡 Kan, 素 So) and two-line explanations.
- Works: a list of 4 projects (name, place, year, m²); each row ends in a small line-drawn floor plan on a stone plate that slides aside to reveal one sentence about the build.
- Process: a horizontal timeline of 5 specific steps ('Walk the site at four different hours', 'Draw by hand, at 1:50' ...) with small numerals.
- Contact: address in Kyoto, email, and the vermilion seal stamp.

INTERACTIONS & MOTION:
- Light study: pointer x over the drawing sets the hour (06:30-17:30) through a spring (stiffness 120, damping 26). The sun travels an arc, the eave shadow on the wall deepens with sun altitude (overhang × tan(altitude)) and the building's ground shadow swings from west to east. The hour label is a MotionValue rendered directly. Static at 10:30 under reduced motion.
- Everything moves slowly: springs with low stiffness (120) and high damping (26).
- Project rows: on hover or keyboard focus the plan plate translates 58% right revealing the text underneath.
- Seal stamps in with scale 1.4 → 1 when the contact section enters view.

DESIGN SYSTEM — Japanese Minimal:
- Washi #F4F0E6, sumi ink #1B1B1B, stone #A8A39A, one vermilion #C8372D seal per screen.
- Asymmetric layout, wide empty fields, thin 1px rules, vertical text for captions.
- Noto Serif JP for Japanese, a light serif for Latin headings, small sans for metadata.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion().
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and numbers.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.