# 笑う男 — Style Reference
> a clean corporate smile-training site on warm paper that loses tracking as you scroll: the page tints green, the type splits red and blue, and the joker on the card keeps flipping into a wider grin.

**Theme:** light that collapses into dark  **Series:** EDGE 003  **World:** 企業向け表情研修会社「株式会社ホホエミ」のコーポレートサイトが、スクロールのたびにVHSのように壊れていく。

## Concept
The first screen is a believable B2B site: paper background, one bold heading, one sentence, a playing card as the brand object. Nothing is wrong yet. Every scroll step adds damage. The background drifts from paper to a muddy near black, scanlines and a rolling tracking band appear, text picks up red and green fringes and starts to jitter, and single characters flicker into 笑. The card is the only thing that stays bright. It flips on every section change and each flip re-rolls the warp on the etched jester so the smile is wider, higher and less symmetrical the further down the page you are. The copy stays polite the whole way, which is where the unease comes from.

## Signature Technique
Three.js r170, one renderer, one requestAnimationFrame, a two pass pipeline.

- **Pass 1, the card.** A rounded rectangle `ShapeGeometry` (2.3 x 3.22, radius 0.12) for each face, UVs rebuilt from position so the texture fits, plus an `ExtrudeGeometry` ring 0.028 deep for the edge (`MeshStandardMaterial`, lit by ambient 1.15 + key 1.6 + rim 0.6). A radial gradient sprite behind it is the soft shadow. The scene renders into a `WebGLRenderTarget` with a transparent clear.
- **Face texture.** One generated image: a copperplate-etching jester in court-card style, black cross-hatching on foxed paper with hand-tinted crimson and bottle green, no text. It is embedded as a base64 WebP (540 px wide, about 76 KB) because a file:// page cannot upload an external image into WebGL. Both card faces use the same image.
- **Face warp shader (per face, ShaderMaterial).** Lambert paper lighting plus local UV surgery driven by `mad` (0 to 1 from scroll) and re-rolled on every flip: each eye region (radius 0.09 UV) drifts by its own random vector; an elliptical mouth region (0.21 x 0.10 UV) is widened by compressing u toward the mouth centre (`stretch` 1.0 to 2.4 x mad), heightened (`tall`), has its corners pulled up by a `side^2` term (`lift`) and tilted asymmetrically. Inside the picture there is separate tape damage: gusting row jitter, chroma split, grain and dropped rows at 55 percent of mad, and a sickly contrast grade. At the hero mad is 0 and the etching is untouched.
- **Pass 2, the VHS shader.** Fullscreen quad, uniforms `uAmt` (damage 0 to 1), `uDark` (paper to void), `uTime`, `uRes`. In order: a tracking band at `fract(t * 0.11)` that displaces x by noise; per 3px row jitter gated by a slow `gust` noise so the picture is readable most of the time and tears in bursts; random horizontal slices; chroma split sampling R at +dx and B at -dx with dx = 0.0025 to 0.0125; wide block dropouts (90 x 9 px cells) only above amt 0.45; static snow mixed by amt; scanlines at half the device row frequency; a muddy grade that pushes shadows toward green (0.17, 0.35, 0.23) and highlights toward red (0.54, 0.11, 0.11) by 45 percent of amt; a vignette; and finally a manual linear to sRGB transfer because a ShaderMaterial writing to the canvas gets no colour space conversion from three.
- **Scroll mapping.** A continuous section index `s` from the sections' offsetTop. `amt = smoothstep(0.35, 3.9, s)`, `dark = smoothstep(1.2, 1.8, s)` so the light to dark switch happens between sections 1 and 2 and never parks mid gray on a readable screen. Each section change adds a 0.9 burst that decays at 1.6 per second. Card x alternates +1.72 / -1.72 per section (desktop; the card is 3.22 tall at camera distance 7.3 and fov 30, about 82% of the screen height, with its outer edge about 60px inside the viewport) through a smoothstep plateau. All values lerp with `1 - exp(-8 dt)`.
- **DOM damage.** CSS variables `--ink`, `--mute`, `--hair`, `--bgc` are mixed in JS from the same `dark` value. Headings carry `text-shadow` red right / green left with distance `--cs = amt^2 * 3.2px`. Above amt 0.06 headings get an SVG filter: `feTurbulence` (baseFrequency 0.001 0.35, seed re-rolled on half the frames) feeding `feDisplacementMap` with scale `amt^2 * 16` (10 on mobile). Above amt 0.5 one visible heading has one or two characters swapped to 笑 or ハ for 90 to 250 ms, then restored; the CTA heading is excluded so the action line stays legible.
- **Mobile.** Pixel ratio 1.25, no MSAA on the render target, card centred in the upper half at camera distance 12.5, copy at the bottom over a gradient of `--bgc`.
- **Reduced motion.** No sway, no parallax, instant flips, shader time frozen, no SVG jitter and no character swaps. The chroma text-shadow and colour grade still follow scroll so the page reads as a static, damaged frame.

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #f3f1ec | opening canvas, card stock |
| --void | #070708 | final canvas (reached through the shader's green grade) |
| --ink | #141414 to #ecebe6 | headings and body, mixed by `dark` |
| --mute | #6a6a66 to #9a9a95 | eyebrow, paragraph, footer |
| dark paragraph | #d2d1cb | paragraphs once `dark` passes 0.5, with a two-layer dark `text-shadow` (6px / 14px, rgb 20,24,21) so the lede reads over the VHS static band |
| --red | #8a1c1c | jester hat, mouth, right text fringe, focus ring |
| --green | #2b5a3b | hat, left text fringe, shader shadow tint |
| etching paper | about #e8dcc0 | the card image's aged stock |
| grade shadows / highlights | rgb(43,89,59) / rgb(138,28,28) | shader colour pull at full damage |

Only red and green are chromatic, and both are dirty. There is no saturated colour anywhere until the shader's chroma split produces it as an artifact.

## Typography
- **Zen Kaku Gothic New** 300 / 500 / 900. h1 clamp(40px, 5.6vw, 80px) weight 900, line-height 1.12, letter-spacing -0.02em. h2 clamp(30px, 3.6vw, 52px) weight 900. The quote section drops to weight 500 with no tracking. Body clamp(15px, 1.1vw, 17px) weight 300, line-height 1.8, max 38ch.
- **DM Mono** 400 for eyebrows (11px, 0.18em, uppercase), the Visit link, scroll hint and footer.
- The contrast is Pika's whisper to shout: weight 300 everywhere except the one heading per screen at 900. The heavy heading is also what makes the displacement and chroma fringing read; thin type would just blur.
- Japanese primary; English only on the Visit link and the scroll hint.

## Spacing & Layout
- Gutter `clamp(20px, 7vw, 112px)`. Copy column max 560px. Sections `min-height: 100svh`, flex, vertically centred, alternating left / right with the card on the opposite side.
- Header is two items on one line, fixed. Footer is a hairline and two mono labels.
- Breakpoint 760px: copy moves to the bottom, card to the top half, both alignments collapse to left, scroll hint hidden.

## Motion
- Card: idle sway 0.06 rad, pointer tilt up to 0.18 rad (desktop only), flip 0.85 s ease-in-out cubic with a 0.9 unit lift toward the camera, auto flip every 7 to 11 s, flip on every section change, on pointer down on the canvas, and on the F key.
- Damage never jumps: scroll sets targets, everything eases at 8 per second, section changes add a burst that fades in about half a second.
- Tracking band rolls once every 9 s. Row jitter and slices come in gusts from a 2.3 Hz noise.
- CRT photograph behind the final section fades in at 0.6 s linear once `dark` passes 0.5, blended screen at 40 percent under a radial vignette.

## Components
- **hero**: eyebrow, h1, one sentence, scroll hint; card right of centre, undamaged, on paper.
- **section**: eyebrow, h2, one sentence; damage level set by position.
- **quote section**: same block, h2 at weight 500 inside 「」.
- **cta**: eyebrow, h2 (never character-corrupted), one sentence, outlined button with a trailing rule that fills with `--ink` on hover; CRT image behind.
- **button**: 1px border in `--ink`, 15/24px padding, 14px weight 500, 0.08em tracking.
- **footer**: hairline top, `VALE / EDGE 003` and the company name.
- **fallback**: `html.nogl` hides the canvas, keeps paper, shows a bordered note under the hero copy.

## Do / Don't
Do
- Start clean. The first screen must pass as a real corporate site.
- Add damage in steps tied to scroll; hold each step still while the text is read.
- Keep the card the brightest object on every screen.
- Keep copy polite and short; the words never acknowledge the breakage.

Don't
- No purple, no neon, no glow; the only colour is the dirty red and green.
- No skulls, blood or horror iconography; the menace comes from an old etching and a smile that is slightly too wide.
- No damage on the CTA action line beyond jitter and fringing.
- No random rectangles on the paper phase; block dropouts only once the page is dark.

## References
- **aave.com** (stock/refero/md/aave-com.md): a light hero that collapses into a near black product surface with one colour threading both halves, and hierarchy from size and tight tracking rather than weight changes. Abstracted: the light to dark collapse as the page's spine, one accent surviving the transition. Changed: the transition is damage rather than a section cut, the surviving accent is a dirty red instead of violet, and corners are square, not pills.
- **Pika** (stock/refero/md/pika.md): cream paper against a cinema void, type that whispers at 300 and detonates at 900 on one line, bare rectangular components with hairlines and no shadows. Abstracted: paper tone, the 300 / 900 contrast, hairline chrome. Changed: the diptych became a time sequence (paper first, void later) instead of a left / right split, and the display weight carries glitch effects that need heavy strokes to read.