# Open Window — Hero Section Design Notes Planning notes for the homepage hero. Captures the concept, art direction, and technical decisions made while designing the side-scrolling pixel-art hero. ## Mission (context) Open Window accepts computers that would otherwise become e-waste (from companies and individuals), refurbishes them, and delivers them to people in need through organizations like housing communities. --- ## 1. Core concept & narrative - The hero is a **cozy, freely-drawn pixel-art scene** (skribbl.io-like style). - Chose the **HOME** metaphor (warmth, belonging, stability) over alternatives like a train car (journey/momentum). The home best fits "housing communities." - The org name **"Open Window"** is the spine: you literally scroll *through an open window* into the home — opening a window for someone = a warm home on the other side. - **Three-beat scroll narrative:** 1. **Outside (the hook)** — cold/quiet exterior, one lit window, headline + CTA. 2. **Through the window (the transition)** — scroll carries you through. 3. **Inside (the payoff)** — the cozy side-scrolling wall with everything on it. - Emotional arc: cold outside -> warm inside mirrors a recipient's journey. --- ## 2. Beat 1 — The exterior - **Layout:** window on the LEFT, text on the RIGHT. - **Keep it minimal:** window + moderately dark background + text. No ground props (they compete with the window and the text). Any optional props stay faint, in the dark falloff, and never in the text column. - **Contrast sells it:** cool/dark exterior vs. warm glowing window. - **Exterior fades to black** toward the edges, as if the camera's exposure is adjusting to the bright interior. This also means you only need to detail the area near the window ("pool of light" approach). - **House style:** a modest, real home (brick rowhouse / apartment), NOT a fairy-tale cottage. **Tight crop** — show only part of the wall; **no whole-house silhouette, no roof** (that's what makes it look like stock clipart). - **Distinctive muted palette** + **lived-in imperfections** (a patched brick, ivy, weathering) — echoes the "second chance / refurbished" theme. - **The window is OPEN** (ties to the brand + welcoming + gives the transition its opening). **No curtains** — always welcoming, never "shutting you out." --- ## 3. The window itself **Golden rule:** draw the glass as a **glowing light source, not a view into a room.** A bright window seen from darkness reads as a glowing rectangle — you see the structure, not the interior. This is realistic *and* solves the resolution + transition problems (nothing to draw inside). - **3-zone value plan** (readability = value contrast): 1. Glass = lightest values (warm white -> soft gold, 1–2 shades). 2. Frame / muntins / sill = dark or mid — crisp silhouettes against the glow. 3. Exterior wall = dark, low contrast. - **Make features pop** against both the bright glass and dark wall via: a warm **bloom/halo**, **rim light** on inner edges facing the glass, and a thin **bright seam** where glass meets frame. - **Muntins (the pane grid)** are the main "this is a window" signal — chunky **2×3 grid**, dark, silhouetted. - **Allowed inside the glass:** faint gradient, soft glow blobs, diagonal glass-shine streaks. **Forbidden:** any readable furniture/object silhouettes. ### Window type & the "open" look - **Casement window, CRACKED open a few degrees** (not swung wide). This keeps the iconic lit-paned look *and* signals "open/welcoming," while avoiding hard perspective. Save the full swing for the scroll transition. - **Hinge on the left, opens outward**, free edge tipped toward the viewer; a thin glow gap + **light shaft spills toward center** (toward the text). - **Structural rule (the AI got this wrong):** the **muntins belong to the SASH**. If the sash opens, the grid moves *with it*. Never draw a fixed grid PLUS a separate empty swinging frame. - **Show the sash's EDGE-THICKNESS band** — the thin sliver of the panel's depth is what sells "this panel is turned" (the AI omitted this). - **STRAIGHT-ON / flat orthographic view.** The camera is square to the wall (no 3/4 perspective on the whole scene) so it matches the flat side-scrolling wall and the straight-through fly-through. Only the **sash** is tilted, not the scene. ### Anatomy vocabulary - **Casing/frame** (fixed border in wall) · **Sill** (bottom ledge) · **Sash** (movable glass panel) · **Muntins/glazing bars** (the grid) · **Lite/pane** (each glass rectangle). ### Build order when drawing 1. Casing → 2. Sill → 3. Glowing opening → 4. Tilted sash w/ edge-thickness → 5. Muntins on the sash → 6. Glow gap + light shaft → 7. Rim light + halo → 8. Sill prop (small potted-plant silhouette). --- ## 4. The transition (scroll-through) - **Scroll-driven**, and once inside, scroll **pans the wall sideways**. - **Chosen technique:** only the **EXTERIOR scales up and fades out**; the interior sits behind at **native resolution** and settles to exactly 1:1. Because the exterior is fading away, nobody notices its pixels getting chunky. - Combine with the **fade-to-black exposure** beat to mask the handoff. - **Principle: never smooth-scale pixel art you want crisp — "reveal, swap, or re-render."** - **Match the glow color to the interior's average brightness** so the crossfade is seamless. - The Beat-1 through-glass glimpse should be **vague/atmospheric (glow only)**, NOT a mini interior — avoids reconciling two resolutions of the same art. - Optional gentle flicker of the glow; honor `prefers-reduced-motion`. --- ## 5. The interior wall (Beat 3) - Side-scroll = you "walk" along the wall. Arrange **left → right as the journey of a computer**: donated/incoming box → refurbishing/workbench → delivered/happy recipients. - **What goes on the wall** (pick ~8–12, keep negative space — don't overcrowd): - **Story/identity:** framed pixel vignettes, sticky-note mission statement, a corkboard for How It Works (Donate → Refurbish → Deliver), calendar/postcard. - **Live stats:** clock-counter, flip-counter/plaques (computers refurbished, delivered, lbs of e-waste diverted), a thermometer-style goal gauge. - **Decoration:** string lights, a vine/potted plant, a small bookshelf, a clock, a small refurbished computer with a glowing screen cycling partner logos. - **Floor (optional):** rug, donation box, stack of computers, a cat. --- ## 6. Trimming the rest of the site The hero/wall absorbs a lot, so the page can shrink. - **Fold into the hero/wall:** headline + CTA, Numbers (stat counters), About (pinned mission note), How It Works (corkboard/route), Partners (glowing screen logos). - **Keep separate (trimmed):** Our Team; Donate/Contact (a clean, conventional, high-contrast section — don't bury the conversion action in the pixel whimsy); Footer. - **Resulting flow:** Hero (outside → wall) → Team → Donate/Contact → Footer. --- ## 7. Art-style direction ("free" but not childish) - Target the **skribbl.io "freeness."** Skribbl is **raster freehand brush on a low-res canvas** — NOT vector, NOT deliberate grid pixel art. Pixels are visible because of low resolution + a hard brush + loose linework. - **Freeness =** wobbly confident outlines, flat bucket fills, hard limited palette, **no dithering**, minimal/no shading, simple/sparse, intentional imperfection, one dark outline. - **How to get it:** draw freehand with a small **hard brush (1–2px, no anti-aliasing)** at low native resolution, and **skip all pixel-art polish** (dithering, anti-aliased curve cleanup, shading ramps). - **AI generators produce clean/tidy pixel art, not skribbl freeness** — the looseness must be hand-drawn. Use any generated images as **structure / lighting / layout references only.** ### Avoiding the "children's site" feel Childishness comes from saturation + clutter + cutesy overload + careless line — NOT from being hand-drawn. Levers (most impactful first): 1. **Muted, cohesive palette** (avoid primary rainbow). ← biggest lever 2. **Atmosphere/lighting** — mood reads as maturity. 3. **Confident, economical linework** (consistent weight, intentional imperfection). 4. **Loose marks, disciplined layout** (whitespace, hierarchy, alignment). 5. **Clean, restrained typography.** 6. **Ration the whimsy** — a few curated charming details, not everywhere. 7. **Subtle finish** (paper/film grain, vignette) as an overlay layer. 8. **Sincere copy + real data** anchor credibility. **Mantra: "loose hand, disciplined everything-else."** **Touchstones:** Spiritfarer, Night in the Woods, Mailchimp illustration. --- ## 8. Technical: resolution, text, images, font ### Canvas / pixel size - **Anchor on the smallest readable detail** (book spines, clock hands). A book ≈ **16px tall** is a good anchor. - **Native resolution: 320×180** (clean 16:9, integer-scales nicely). - Outside (Beat 1) = one screen, **320×180**. - Inside = **180px tall × wide** (e.g., a 320×180 viewport panning across a ~960–1600px-wide wall). Sharing the **180px height** guarantees consistent pixel size inside and out. - **Display:** scale up with `image-rendering: pixelated` at an **integer factor**, targeting **~4–6 CSS px per art-pixel**. ### Text & stats = HTML (not baked into the art) - Keep text and stat counters as **real HTML** (crisp, selectable, accessible, SEO-friendly). This **decouples canvas resolution from text legibility** and removes the "chunky pixels vs. readable text" conflict. ### Framed images - Drawn as **tiny native-res pixel art on the same grid** — mental model: "draw a tiny picture at the wall's resolution," not "place a photo." At small sizes do **iconic vignettes, not portraits** (bonus: protects recipient privacy). - **Real photos** live in an **HTML lightbox/modal** at full res (pixel frame = the clickable thumbnail), or in a dedicated gallery section. Don't auto-"pixelate" photos (looks bad) — trace/redraw by hand if needed. ### Custom pixel font - Design the font on the **same grid as the art** (glyph cell e.g. **5×7 or 6×8** native px; each font-pixel = one art-pixel). - **Scale the font by the same integer factor as the art** (drive both from one CSS variable) so font-pixels match art-pixels. Integer multiples only. - Prefer building a real webfont (`.woff/.woff2`); sprite-sheet glyphs are a fallback. Use the pixel font for headings; consider a clean readable face for long body copy. --- ## 9. Cautions to plan for early - **Mobile:** "scroll down to enter" + "scroll sideways along the wall" is two scroll axes — tricky on touch. Plan a fallback (vertical stack or swipe carousel; simplified transition). - **Reduced motion:** provide a `prefers-reduced-motion` fallback (static wall, no through-window animation). - **Accessibility/SEO:** keep the real text (mission, stats, how-it-works) as HTML behind/around the art, not only inside images. - **Performance:** parallax + animated lights/counters can get heavy — budget for it. --- ## 10. Reference images generated so far - An angled 3/4 concept (rejected — wrong projection for a flat wall + fly-through). - A **straight-on, flat-projection** concept (current reference): cracked-open casement, glowing paned glass, sill plant, dark fade to the right for text. Note: still rendered as tidy pixel art — use for **structure/lighting/layout**, not as the final "free" style or a real asset. --- ## Suggested next steps - Generate/draw an **interior wall reference** (shelves, frames, lights, stat plaques). - Sketch the **layer / parallax map** for the scroll-through transition. - Set up the **canvas resolution + pixel-font scaffolding** in the page.