# Design Language for chika.webcam ## Aesthetics and Tone chika.webcam is a **wet cyberpunk** site — a cyberpunk that has been rained on, then bled into rice paper, then scanned at 600 DPI through a CRT. The .webcam TLD pulls the site toward live-broadcast iconography (rec dots, signal bars, scan-lines, timecodes), but rather than treating the surveillance camera as cold and clinical, this design treats it as a *wounded* observer — its lens fogged with breath, its sensor saturated with deep burgundy, its housing rusted at the seams. The aesthetic is what would happen if Wong Kar-wai shot a Ghost in the Shell remake on water-damaged 16mm and then someone painted the dailies in single-pigment madder-root watercolor before re-digitizing them through a glitching capture card. **The page is not a dashboard, a portfolio, or a marketing site.** It is a single continuous descending scroll — a "transmission" — through which the visitor falls down the optical path of a camera that has begun to dream. There is no header, no nav, no hero, no CTA stack, no pricing, no testimonials. There are seven *exposures*, each a full-viewport scene that the visitor scrolls through vertically while geometric SVG paths trace themselves across the screen as if a draftsman were sketching the diegetic geometry of each scene in real time, ahead of the visitor's eye. The tone is **energetic but grieving** — a charged, kinetic forward motion underlain by deep-red sorrow. Cyberpunk usually performs cool detachment; chika.webcam performs heat. The text breathes hard. The geometry is drawn fast, as if the draftsman is racing the scroll. Watercolor blooms expand at the edges of the scenes like blood lifting in still water. Nothing on the page is symmetric. Nothing is centered. Nothing repeats twice in the same form. The site borrows from: Stan Brakhage's hand-painted 16mm leader; Push Pin Studios' early-70s slab-serif posters before they went playful; the corner-burn timecodes of Hi8 home video; the wet ink-wash backgrounds of Kawanabe Kyōsai; the shoji-paper damage in Wong Kar-wai's *2046*; the red-zone overlays of late-90s Sony VX1000 footage; the typographic anger of Push Pin x Vignelli when they were briefly violent. ## Layout Motifs and Structure The page is **one column, 7 viewport-heights deep**, scrolled top-to-bottom with no horizontal travel and no fixed header. The seven exposures are: 1. **Exposure 0 — Sensor Wake.** The lens opens. A single watercolor bloom of `#5C1721` expands from the geometric center-bias point (40vw, 60vh — never the dead center) while a hexagon SVG path draws itself around the bloom in 1.4 seconds. The site's name "chika.webcam" appears as 96px Roboto Slab in `#F2E4D7`, kerned tight (-0.04em), with a single `#C7415A` underscore-cursor blinking after it at 1.0 Hz. 2. **Exposure 1 — Aperture.** A tilted iso-rectangle is drawn by an animated SVG `stroke-dasharray` path; inside it sits a paragraph (left-aligned, ragged-right, max 38ch wide) describing what the lens sees. The rectangle is rotated -7° from horizontal — a deliberately unstable angle. 3. **Exposure 2 — Iris Geometry.** A nine-pointed irregular star (its points at the φ-conjugate angles 137.5° apart, *not* at 40° intervals) is path-drawn over a watercolor wash of `#7A2230`. Text wraps the star asymmetrically — there are 4 lines on the left of the star and 1 on the right. 4. **Exposure 3 — Scanline.** Six horizontal slab-serif headings stack vertically, each one drawn in a different weight-axis position (300, 400, 500, 600, 700, 800), with thin SVG diagonal lines drawn across them at +/- 3°, +/- 7°, +/- 11° (prime angles only). This is the typographic spine of the page. 5. **Exposure 4 — White Balance.** A single oversize watercolor splash of `#F2E4D7` (cream) on a `#1A0610` (near-black-burgundy) field. Two SVG triangles — one filled, one stroked — draw themselves at the splash's unstable edge. Three lines of body copy float in the splash. This is the page's quiet exhale. 6. **Exposure 5 — Frame Drop.** Twelve slab-serif words at 64px each, scattered (never grid-aligned) across the viewport with deliberate uneven baselines (each word offset by a different prime number of pixels: 3, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43). An SVG path draws a single zigzag connecting all twelve in their reading order. 7. **Exposure 6 — Recording Stops.** A small (12px) `#C7415A` filled circle with the label "REC" in 11px Roboto Mono next to it, top-right, fades out over 1.6 seconds. The page closes with one final slab-serif sentence in 28px and the geometric SVG of a closing aperture iris (12 trapezoid-blades drawing inward in sequence). No footer. No links. No social row. **Geometric grid.** The underlying grid is a **broken 12-column** that I will not respect. Instead, all elements are positioned by hand using one of three systems: (a) the φ-grid points (38.2% / 61.8% along each axis), (b) the **prime-pixel offset** (every element nudged by a prime number of pixels off the grid intersection it would otherwise sit on), and (c) the **watercolor-bleed origin** (the geometric center of the watercolor bloom in each exposure). No element ever sits at viewport-center. No element is ever flush-left or flush-right with another element on the same exposure. **Negative space.** Each exposure leaves at least 55% of the viewport empty (in burgundy). The text and geometry occupy the minority of every scene. This is non-negotiable. The empty burgundy is the page's *primary content*; the text is the secondary content; the geometry is the connective tissue between them. **Scroll behavior.** The scroll is continuous — `scroll-behavior: smooth` plus an IntersectionObserver-driven progress timeline. Each exposure becomes "active" when its top crosses 25vh from the viewport top, at which point its SVG path begins drawing and its watercolor bloom begins expanding. There is no scroll-snap (snap feels too clean for this aesthetic); the visitor can stop mid-exposure and the geometry will simply pause partway through its draw. ## Typography and Palette **Type stack** (Google Fonts only, all confirmed available): - **Display & Headings:** *Roboto Slab* — variable axis 100–900, used at 96px / 64px / 48px / 32px / 24px on the seven exposures. Slab-serif is at 5% in the registry; Roboto Slab specifically gives us the brutal industrial feel cyberpunk needs while its slab terminals echo old broadcast title cards. - **Body:** *Roboto Slab* at 400 weight, 16px / 1.55 line-height, max-width 38ch, ragged-right (never justified). The body copy uses the *same* family as the display — this is intentional. The page is monolithic in its type-voice. - **Mono accents:** *JetBrains Mono* at 11px / 13px only, used exclusively for the "REC" label, the timecode in the bottom-left of each exposure (e.g. `00:01:24:14`), and the four-line corner readout (lens diameter, aperture stop, ISO, shutter). Mono is at 95% in the registry — we use it sparingly and in tiny sizes only, as a counter-rhythm to the slab dominance. **Type sizing on a 1440×900 reference viewport:** | Element | Family | Size | Weight | Tracking | |---|---|---|---|---| | Site name (Exposure 0) | Roboto Slab | 96px | 700 | -0.04em | | Exposure heading | Roboto Slab | 64px | 800 | -0.02em | | Sub-heading | Roboto Slab | 32px | 500 | 0 | | Body | Roboto Slab | 16px | 400 | 0 | | Caption | JetBrains Mono | 11px | 400 | +0.05em uppercase | | Timecode | JetBrains Mono | 13px | 500 | +0.08em | **Palette** — eight colors, all hand-picked, none generated by a palette tool. The palette is **deep-burgundy** (4% in registry — actively underused). | Token | Hex | Usage | |---|---|---| | `--ink-burgundy-deep` | `#1A0610` | Page background, base of every viewport | | `--ink-burgundy-mid` | `#3D0E1C` | Watercolor bloom underlayer | | `--ink-burgundy-rich` | `#5C1721` | Watercolor bloom core | | `--ink-wine-warm` | `#7A2230` | Secondary bloom on Exposures 2 & 5 | | `--accent-rec-red` | `#C7415A` | The recording dot, the cursor blink, the single highlighted word per exposure (and *only* there — never used decoratively) | | `--cream-paper` | `#F2E4D7` | Slab-serif text on burgundy field; the white-balance splash on Exposure 4 | | `--cream-shadow` | `#C9B8A4` | Body copy (slightly knocked-back from cream) | | `--ink-trace` | `#8A4A56` | Stroke color for the SVG geometric paths (a desaturated burgundy that reads as a draftsman's pencil on the burgundy field) | The **gradient** category is at 96% in the registry — chika.webcam contains **zero CSS gradients**. Color is delivered exclusively through (a) flat fills, (b) watercolor SVG/PNG textures with built-in tonal gradation, and (c) the natural blending of overlapping watercolor blooms. This is a deliberate refusal of the dominant pattern. ## Imagery and Motifs **Imagery: watercolor (8% in registry).** Every soft-edged shape on the page is a watercolor wash. Watercolor is implemented as inline SVG with two filters chained: a `feTurbulence` (baseFrequency 0.018, numOctaves 3) producing a low-frequency displacement map, fed into `feDisplacementMap` (scale 14) acting on a soft elliptical fill. The result is a single-pigment madder-root bloom with naturalistic edge-bleed and feathering. There are seven such blooms on the page — one per exposure — each slightly different in shape, scale, and bleed direction. **No raster watercolor PNGs.** All blooms are SVG so they remain crisp at any zoom and scale with viewport. **Motifs: geometric-shapes (5% in registry).** The site's narrative arc is told through geometry that draws itself ahead of the visitor's scroll: - Exposure 0: hexagon (lens-element symbol) - Exposure 1: tilted rectangle (frame border) - Exposure 2: nine-pointed irregular star (iris diaphragm abstracted) - Exposure 3: parallel diagonal lines (scanlines) - Exposure 4: triangle pair (white-balance reference) - Exposure 5: zigzag polyline (frame-drop trace) - Exposure 6: twelve-blade closing iris (the page's final image) All geometry is **monochromatic stroke** (`#8A4A56`, 1.5px stroke-width, no fill except where explicitly noted), drawn via `stroke-dasharray` + `stroke-dashoffset` animation. No filled shapes anywhere except the watercolor blooms, the REC dot, and the white-balance splash. **Path-draw-svg pattern (21% in registry).** This is the site's signature animation. Every geometric shape is constructed as one or more `` elements whose `pathLength` is normalized to 100, and whose `stroke-dashoffset` animates from 100 to 0 over a duration proportional to the path's perceived complexity (simple shapes 0.8s, the nine-pointed star 1.8s, the closing iris 2.4s). The animation is triggered when each exposure becomes active in the viewport. The drawing speed is **not constant** — it uses a custom CSS `cubic-bezier(0.22, 1, 0.36, 1)` that starts fast, settles slow, like a confident draftsman's hand finishing a stroke. **Watercolor-bleed origin animation.** When each exposure activates, its watercolor bloom expands from a 12px radius to its full size (350–620px depending on exposure) over 2.6 seconds with a custom easing that simulates capillary action — fast in the first 200ms, decelerating logarithmically thereafter. The bloom does *not* fade in by opacity; it physically grows by `transform: scale()` from a tiny seed, with a secondary `feGaussianBlur` on the displacement filter that decreases over the animation (more chaotic edges early, settled edges late) to mimic real wet-on-wet diffusion. **Decorative non-grid elements:** - A faint horizontal scanline (1px, `rgba(199, 65, 90, 0.04)`) sweeps top-to-bottom across the page once every 6 seconds, behind the content. This is the only animation that does not respond to scroll. - A 11px JetBrains Mono timecode in the bottom-left of every exposure increments by 1 frame (1/24th of a second) every 1/24th of a real second, formatted `HH:MM:SS:FF`. The timecode does not reset between exposures — it is one continuous transmission. - A 4-line corner readout in the bottom-right shows live-computed values: lens-diameter (a derived function of viewport width), aperture-stop (function of scroll velocity), ISO (function of average viewport luminance — yes, sampled from a hidden canvas), and shutter (function of time-since-last-frame). These values are real, not faked. ## Prompts for Implementation Build chika.webcam as **one HTML document, one CSS file, one ES module**, and one inline-SVG-only watercolor-and-geometry layer (no external SVG/PNG/JPG/WEBP files except a single `noise.png` 256×256 tile at 8 KB used by the `feTurbulence` fallback for old Safari). No framework. No bundler. No Lottie. No WebGL. No video. No external watercolor textures. Google Fonts CDN only for *Roboto Slab* (weights 400, 500, 700, 800) and *JetBrains Mono* (weights 400, 500), subsetted to Latin Basic + Latin Extended-A. Total page weight target: **under 180 kB** including all assets and the two webfonts. **Bias every implementation decision toward immersion, atmosphere, and the *transmission* metaphor — not toward dashboards, conversion, feature-grids, pricing tables, or marketing copy.** chika.webcam is a *piece of footage that happens to be a webpage*, not a webpage that happens to depict footage. **Composition.** The page is one long single-column flow exactly 7× viewport-height (using `scroll-padding` and CSS `100vh` sections — not `dvh`, since the page is intended to feel fixed-camera). Every exposure section has `position: relative` and contains its own absolutely-positioned watercolor bloom, geometric SVG, text block, and timecode. There is **no shared header, no fixed navigation, no scroll-progress bar, no back-to-top button, no chat widget**. The *only* persistent UI is the bottom-left timecode and the bottom-right four-line readout — both 11–13px JetBrains Mono, both `position: fixed`, both with `pointer-events: none`. **Animation choreography.** The page's motion language is **draw-then-bloom-then-breathe**: 1. As an exposure enters the viewport (top edge crosses 25vh), its geometric SVG path begins drawing via `stroke-dashoffset`. 2. 320ms after the path begins, the watercolor bloom begins expanding from its seed point. 3. 1100ms after the bloom begins, the text fades up (not in — *up*, with `transform: translateY(8px)` resolving to 0) one line at a time, staggered by 90ms. 4. Once an exposure is fully active, it "breathes" — the watercolor bloom oscillates in opacity between 0.92 and 1.0 over a 4.4s sine cycle, and the geometric path's stroke-width oscillates between 1.4px and 1.6px on the same cycle but offset by π/2. The breathing is the heartbeat of each exposure. It must be subtle — visitors should feel that the page is alive without being able to point to what is moving. **Cursor behavior.** The cursor does *not* leave a trail (cursor-follow is at 75% — actively avoided). Instead: when the cursor moves, a single 1px dashed circle of `#8A4A56` is briefly drawn at its position, lasting 180ms before fading. The effect is of a draftsman's compass pricking the page. No magnetic effects, no tilt-3d, no parallax follow. The cursor is **observational, not magnetic**. **Scroll-triggered events.** The seven exposures each have one micro-event triggered by scroll position: - Exp 0: site name's underscore-cursor doubles its blink rate when the visitor scrolls past 5vh - Exp 1: the tilted rectangle's rotation increases by 0.5° per 100vh of scroll velocity - Exp 2: the nine-pointed star's points pulse outward by 4px when the exposure first becomes fully active - Exp 3: the diagonal scanlines flicker once (8ms off, 12ms on, 8ms off, 12ms on) - Exp 4: the cream watercolor splash gains a single drop of `#C7415A` that bleeds inward over 1.4s (the only non-burgundy bloom on the page) - Exp 5: the zigzag polyline draws backward (right-to-left, bottom-to-top) — the only path that draws against reading order - Exp 6: the closing iris-blades draw inward simultaneously, over 2.4s, ending in total burgundy darkness; the timecode freezes mid-frame **Energetic pacing.** Energetic tone (15% in registry) is achieved not by bouncy entrances or punchy CTAs but by **density of incident**: every exposure contains at least 6 simultaneous animations (path-draw, bloom-expand, text-stagger, scanline, timecode, breathing). The page is never quiet; even the "quiet" Exposure 4 contains 6 layered slow motions. Energetic ≠ loud; energetic = constantly-becoming. **Accessibility-of-spirit (not WCAG).** The page must be readable. Body copy at 16px on `#1A0610` background uses `#C9B8A4` text (10.8:1 contrast), well above slab-serif's threshold for dim viewing. Headings use `#F2E4D7` (12.4:1). The single `#C7415A` accent on burgundy is 5.2:1 — used only for short labels and never for body. Reduced-motion preference disables the breathing oscillation, the watercolor bloom expansion (renders at full size immediately), and the path-draw animations (renders fully drawn) — but keeps the hue, geometry, and composition. The page must remain *the same painting* whether motion is on or off. **Structural ban list.** No header. No global nav. No newsletter modal. No cookie banner styled as a card. No featured-in logo strip. No "trusted by" row. No pricing. No testimonials. No team grid. No FAQ. No contact form. No social-icons row. No "back to top" floater. No skip-to-content link styled as a button. No CTA buttons of any kind. No card components. No bento boxes. No pill-tags. No avatars. No metrics counters. No statistics. No "powered by". No legal footer microtype. The *only* fixed UI elements are the bottom-left timecode and bottom-right readout. **Bandwidth & build.** Hand-authored HTML, CSS, JS — no preprocessor, no minifier required (the files are short enough that minification is unnecessary). CSS is a single file, ordered as: tokens → base → exposure-shared → exposure-specific (0 through 6) → @media reduced-motion. JS is a single ES module that sets up IntersectionObservers, the timecode loop, the cursor-prick handler, and the readout state. No fetches. No analytics. No third-party scripts. Page works entirely offline after first load. ## Uniqueness Notes **Chosen seed (planned, honored exactly):** `aesthetic: cyberpunk, layout: immersive-scroll, typography: slab-serif, palette: deep-burgundy, patterns: path-draw-svg, imagery: watercolor, motifs: geometric-shapes, tone: energetic`. Every element of this seed is honored — no substitutions, no softenings. **Three-plus differentiators from the existing 120-design corpus:** 1. **Wet cyberpunk is unprecedented in the corpus.** Cyberpunk (22% in the registry) almost universally appears with neon-electric or chrome-metallic palettes, gradient backgrounds, glassmorphism cards, sci-fi-hud motifs, and tech-mono typography. chika.webcam mates cyberpunk with deep-burgundy (4%), watercolor imagery (8%), slab-serif (5%), and zero gradients/glass/chrome. The cyberpunk here is not the sci-fi cyberpunk of *Tron* or *Cyberpunk 2077*; it is the wet, analog, melancholic cyberpunk of late-90s Wong Kar-wai-meets-Brakhage — which no other site in the corpus attempts. 2. **Deep-burgundy + watercolor + slab-serif is a triple-rare combination.** Each of these tokens is at or below 8% individually; their intersection is statistically zero in the corpus. Most slab-serif sites are pastoral or editorial; most watercolor sites are botanical or hand-drawn; most deep-burgundy sites are luxury/wine. Combining them under cyberpunk discipline produces a color/texture/type voice that does not exist elsewhere in the registry. 3. **Zero CSS gradients on a "cyberpunk" page.** Gradient is at 96% in the corpus and is *especially* dominant in cyberpunk pages. chika.webcam refuses gradients entirely — all tonal variation comes from layered watercolor SVG washes with `feTurbulence`/`feDisplacementMap` filters. This is a load-bearing aesthetic refusal: gradients feel synthetic, watercolor feels analog and pigmented; the page commits to the pigmented end of that spectrum without compromise. 4. **Seven-exposure transmission instead of seven-section landing page.** Most immersive-scroll sites in the corpus (8%) still present sections as feature/about/pricing/testimonials with cinematic styling. chika.webcam treats its seven sections as **frames of a single piece of footage** — an exposure-numbered, timecode-linked, irreversible descent. The visitor is not navigating a product; they are watching a transmission run from `00:00:00:00` to its final freeze-frame. The closing iris is the page's only "end state" and there is no scroll-back-to-top. 5. **Path-draw-svg is the *only* entrance pattern.** Parallax (94%), stagger (77%), spring (75%), cursor-follow (75%), magnetic (65%) — all are absent. Path-draw-svg (21%) is doing 100% of the entrance-animation work, supplemented only by the watercolor bloom expansion. This singular commitment to one underused pattern, applied across the entire page, is unusual; most sites use 4–7 patterns simultaneously. 6. **Breathing as the persistent micro-animation.** Most sites use cursor-follow trails or magnetic hovers as their persistent background motion. chika.webcam uses **synchronized 4.4-second sine breathing** of bloom-opacity + path-stroke-width on every exposure. The page's persistent motion is respiratory, not reactive. This is unique in the corpus and ties directly to the energetic-but-grieving tone — the page is alive but laboring. 7. **Real generative readouts, not faked numbers.** The bottom-right four-line corner readout displays *actual* derived values (viewport-width-derived lens-diameter, scroll-velocity-derived aperture, canvas-sampled luminance ISO, requestAnimationFrame-derived shutter). No fake data. This is one of the few corpus sites where the "stats" panel is computed from real DOM/page state. **Avoided patterns (referenced from frequency analysis):** - **Gradient** (96%): *zero* used. All color is flat fill or watercolor SVG. - **Photography** (98%): *zero* used. The page contains no photos. The "camera" metaphor is enacted through geometry and watercolor, not imagery. - **Parallax** (94%): zero parallax. All motion is path-draw or breathing. - **Cursor-follow** (75%): rejected. Cursor produces single 180ms compass-pricks only. - **Stagger** (77%): rejected as an entrance pattern. Text staggers (90ms per line) only as a follow-on to the path-draw, not as a primary entrance. - **Spring** (75%): rejected. All easing is `cubic-bezier(0.22, 1, 0.36, 1)` (slow-out, draftsman-confident). - **Magnetic** (65%): rejected. No element responds to cursor proximity. - **Card-grid** (75%): the page contains no cards. - **Bento-box** (14%): the page contains no bento. - **Centered** (82%): no element is viewport-centered. φ-grid + prime-pixel offset only. - **Hand-drawn aesthetic** (95%): rejected. The page is *drafted*, not hand-drawn — the geometry is precise; the watercolor is the only soft element. - **Mono typography** (95%): used only at 11–13px in fixed UI corners; never as a primary voice. - **Warm palette** (95%): the burgundy palette technically warms toward red, but the page tonally reads as cool-wet, not warm-inviting. The result is a page that, when placed alongside the corpus's 120 existing designs, looks like a wounded transmission from a different medium entirely — slower than cyberpunk, redder than editorial, wetter than terminal, more architectural than watercolor, and angrier than energetic usually performs. It will not be confused with any other design in the registry.