# Design Language for renai.tube ## Aesthetics and Tone renai.tube is a **surreal dreamscape archive of love-scenes** — not a video host, but a slow-drifting projection room suspended somewhere between a 1970s repertory cinema and the inside of a half-remembered dream. "Renai" (恋愛) means *romance, the falling kind*, and the whole site behaves like the moment just before a confession: warm, breathless, slightly unreal, time gone elastic. The aesthetic is **surreal cinema melted into liquid glass** — wide letterbox bars that breathe, frames that float untethered like reels left running in an empty theatre, light that pools and refracts as if shone through a glass of water onto a velvet wall. Tone is **dreamy-ethereal with a cinematic ache**: tender, hushed, a little melancholy, the way old film stock feels warm even when the scene is sad. Nothing here is sold; scenes are *encountered*, the way you catch a stranger's eye across a tram. The mood word, repeated everywhere in micro-copy, is *渦* / "the swirl" — the gentle vortex love pulls you into. The site should feel like floating face-up in warm water while a film plays on the ceiling. ## Layout Motifs and Structure The page is a **single vertical drift through nine "reels"** — full-bleed, immersive-scroll, no card-grid anywhere. Each reel occupies one viewport-and-a-half and is built as a **floating cinema frame**: a 16:9 (or occasionally 2.39:1 anamorphic) rectangle that does *not* sit on a baseline grid — it hovers, tilted 1–3°, casting a long soft shadow onto a deep velvet field, as if pinned to nothing. Around each frame, **thick letterbox bars** (top + bottom, ~14vh each) frame the content the way black cinema bars frame a film; these bars **gently expand and contract** (a 6s breath cycle, ±1.2vh) so the whole page feels like it's inhaling. Reels are connected by a **single hand-drawn "film strip" SVG path** — a wavering vertical ribbon of sprocket holes that the page draws as you scroll, threading reel to reel like a continuous strip of celluloid being fed through a projector. Navigation is **minimal**: a slim right-edge rail of nine tiny film-frame icons (each a 6px rounded rectangle); the active reel's frame glows. No top nav, no hamburger, no logo lockup, no footer columns, no breadcrumb. The opening reel is a near-empty velvet void with a single shaft of dust-flecked projector light cutting diagonally across it and the wordmark *renai.tube* set small, lower-left, like a film's opening title card. Layout principle: **everything important floats; everything structural is a frame.** ## Typography and Palette **Type system (Google Fonts only):** - **Display / titles — `Fraunces`** (variable, optical-size axis pushed high, soft serif, slight wonk). Used for reel titles and the wordmark. Fraunces' "Soft" and "Wonk" axes give it a hand-cut, slightly tipsy elegance — perfect for letterpressed-feeling film titles. Titles are set large (clamp 2.6rem–6rem), italic for emotional emphasis, with `letter-spacing: -0.01em` and a faint warm text-shadow that reads like light bleeding off old type. - **Body / captions — `Newsreader`** (variable, optical, serif). A literary, slightly bookish serif for synopsis text, dialogue snippets, and the running poetic micro-copy. Set at a generous `line-height: 1.75`, max ~58ch, color softened off pure white. - **Micro-labels / runtime stamps — `IBM Plex Mono`** (mono). For reel numbers (`恋 / 03`), runtimes (`14′ 22″`), aspect-ratio tags (`2.39:1`), and the right-rail tooltips. Uppercase, `letter-spacing: 0.14em`, small, the way technical slate-board text looks. **Palette:** - `#0E0A12` — *theatre velvet* (near-black aubergine; the base field / the dark of the room) - `#1C1322` — *upholstery* (slightly lifted velvet for the letterbox bars) - `#F4E4D4` — *projector cream* (warm off-white; primary text, the color of light on a screen) - `#E8A37C` — *amber bloom* (warm peach-amber; the projector beam, glow accents, active states) - `#C45B6E` — *confession rose* (dusty rose-red; emotional highlights, the "渦" mark, link underlines) - `#6E5A9C` — *dream violet* (muted twilight purple; secondary glows, the cool edge of refracted light) - `#3B7A78` — *deep teal* (water-tank teal; rare cool counterpoint, used in one reel's refraction) Gradients are used as **soft radial light-pools** only — amber bloom fading into theatre velvet — never as flat banner gradients. Warm-dominant palette, low-key (mostly dark) with luminous warm focal points. ## Imagery and Motifs - **The floating cinema frame** — every reel's centerpiece. Inside: a slowly drifting clip-stand-in rendered as a **gradient-mesh of two warm tones** (amber → rose) with a faint scanline overlay and a 1px cream inner border, like a frame paused on a warm scene. A pulsing "▸" play glyph sits center, breathing. - **Hand-drawn film strip** — the connecting SVG ribbon: wavering edges (not ruler-straight), sprocket holes as soft-cornered rectangles, drawn-on-scroll with `stroke-dasharray`. It threads behind the frames, occasionally curling into a loose loop in the margin. - **Dust-in-the-beam particles** — slow, sparse motes drifting through the diagonal projector shaft on the opening and closing reels; never a busy particle field — maybe 30 motes, each barely moving. - **The 渦 / swirl mark** — a single hand-drawn spiral glyph in confession rose, used as the bullet, the section divider, the scroll-cue, the favicon. A tiny vortex. - **Refraction caustics** — on two reels, the velvet field is overlaid with a faint, slow-moving caustic pattern (the wobbly light you see at the bottom of a pool), in dream violet at ~6% opacity — the "love is like being underwater" motif. - **Slate-board corners** — each frame's top-left carries a tiny mono-text slate stamp: reel number, a one-word emotion (`焦がれ` / "longing", `戸惑い` / "hesitation"), runtime. Decorative, atmospheric, not functional metadata. - **Title-card vignettes** — heavy soft vignette on the velvet field corners so every reel feels lit by a single warm source. ## Prompts for Implementation Build renai.tube as a **single HTML page, one CSS file, one ES module** — no framework, no build step. The page is roughly a 2-minute drift past nine floating reels in a dark, breathing theatre. There is **no CTA section, no pricing, no email capture, no testimonials, no stat-grid, no logo wall, no FAQ, no contact form, no newsletter bar, no cookie banner, no upload button** — it is an experience, not a product page. **Storytelling spine (nine reels, vertical immersive-scroll):** 1. **Reel 00 — Title card.** Velvet void, diagonal projector shaft with drifting dust, wordmark *renai.tube* small lower-left in Fraunces italic, a single line of Newsreader below: *"nine scenes from the swirl."* The 渦 mark pulses once. Scroll cue: a tiny film-strip arrow. 2. **Reel 01 — "The first glance."** First floating frame enters with a slow spring + 2° tilt; letterbox bars slide in; slate stamp reads `恋 / 01 · 焦がれ · 03′ 11″`. Newsreader synopsis to the side, set ragged-right. 3. **Reel 02 — "The unsent message."** Frame drifts in from the opposite side; caustic refraction overlay begins here; rose underline draws under a key phrase as it scrolls into view. 4. **Reel 03 — "Rain, and a shared umbrella."** Anamorphic 2.39:1 frame (wider, more cinematic); the film-strip ribbon curls into a loop in the right margin. 5. **Reel 04 — "Almost."** The breathing of the letterbox bars deepens here (±1.8vh) — the page's longest inhale. Frame is nearly off-screen, only 70% visible, deliberately unresolved. 6. **Reel 05 — "The confession."** The amber bloom radial light pool swells to its brightest; the 渦 mark at center grows and slowly rotates; rose text glows. 7. **Reel 06 — "After."** Cool teal refraction reel — the only one with the deep-teal accent; quieter, dimmer, frame tilted the other way. 8. **Reel 07 — "Re-watching it later."** Frame shows a faint scrub-bar that auto-replays a 4s loop of the amber→rose mesh; mono runtime ticks. 9. **Reel 08 — End card.** Back to the velvet void; projector shaft returns; the film strip runs off the bottom of the screen and the sprocket holes fade; closing line in Newsreader italic: *"play it again."* The 渦 mark drifts upward and dissolves. **Motion direction:** Everything is **slow, weighted, liquid** — spring entrances with low stiffness / high damping (nothing snappy), `cubic-bezier(0.16, 1, 0.3, 1)` for frame drifts. Parallax: frames move slightly slower than scroll (depth), the film strip exactly with scroll, the dust motes slowest of all. Cursor: a faint amber light-bloom follows the pointer at ~0.12 lerp, brightening frames it passes over (a soft `box-shadow` glow + 1.5° tilt-toward-cursor). The letterbox-bar breathing runs on a continuous `requestAnimationFrame` sine. Reel titles do a gentle `blur-focus` reveal (from `blur(8px)` + `opacity 0` to sharp) staggered word-by-word. Honor `prefers-reduced-motion`: freeze the breathing, the dust, the caustics, and the cursor bloom; keep only opacity fades. All scroll-driven via `IntersectionObserver` + a single rAF loop — no scroll-jacking, native scroll preserved. **Texture:** a very fine film-grain canvas overlay (animated, ~8% opacity, regenerated every 3 frames) over the whole page; a heavy corner vignette on the velvet; warm `text-shadow` bleed on display type. No flat solid panels — the letterbox bars get a subtle vertical velvet-nap gradient. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A video site that shows zero video UI.** No thumbnails grid, no play-count chips, no channel sidebar, no recommended-rail — the conventions of "tube" sites are entirely refused. The "videos" are *floating cinema frames in a dream theatre*, encountered one at a time on a scroll, never browsed. 2. **The breathing letterbox.** Letterbox bars are usually static decoration; here they are the page's heartbeat — a continuous sine-driven inhale/exhale tied to the emotional arc (deepest at "Almost," brightest at "The confession"). I have not seen letterbox-as-living-element elsewhere in the corpus. 3. **Surreal + cinematic + liquid-glass, not hand-drawn or glassmorphism-as-frosted-cards.** Sidesteps the corpus's two dominant aesthetics (hand-drawn 95%, glassmorphism 82%) — the only "glass" here is *water and refracted projector light* (caustics, light-pools), and the only hand-drawn element is a single wavering film-strip ribbon, not an illustrated world. 4. **Bilingual emotional micro-copy as ornament.** Tiny Japanese emotion-words (焦がれ, 戸惑い, 渦) live on slate-board frame corners as atmosphere — not as a language toggle, not as headings, just as the texture of *renai*. 5. **The 渦 / swirl mark** as a single recurring hand-drawn glyph that grows, rotates, divides sections, and dissolves — one motif carrying the whole emotional throughline. **Chosen seed / style:** `surreal dreamscape promo` — aesthetic: surreal, layout: immersive-scroll, typography: elegant-serif, palette: midnight-blue (re-cast as theatre-velvet warm-dark), patterns: blur-focus, imagery: gradient-mesh, motifs: candle-atmospheric (re-cast as projector-beam), tone: dreamy-ethereal. **Avoided overused patterns (per frequency analysis):** hand-drawn aesthetic (95% — used only as one ribbon), glassmorphism (82% — replaced with water-caustic refraction), card-grid layout (91% — none; pure vertical drift), warm-but-bright palettes (kept warm yet deliberately low-key/dark), photography imagery (98% — none; gradient-mesh stand-ins only), cursor-follow done as a hard dot (89% — softened to a slow amber light-bloom).