Family Dashboard Kiosk — Redesign v2

Date: 2026-02-28 Status: Design approved

Overview

Visual polish and new elements for the Family Dashboard kiosk view (portrait mode, wall-mounted Lenovo monitor, Raspberry Pi). Builds on the existing “Living Canvas” time-of-day theme system.

Goals

1. Increase text readability across all calendar rows (+50-75%)
2. Add person emojis to all calendar days (not just today)
3. Add a family photo frame (Google Photos album)
4. Add countdown chips for birthdays, holidays, and milestones
5. Add a continuous-scroll news ticker
6. Compress groceries, chores, horoscope, transit, and country into a smart rotating panel
7. Eliminate wasted space in the bottom section

Layout

┌──────────────────────────────────┐
│ ☀ 16°C    12:21    19°/6°       │  ~5%   HEADER
│ ☼06:56 ☾17:41  Fri Feb 27       │        (unchanged)
├──────────────────────────────────┤
│ TODAY — February 27              │
│ 🌸 Wren Gotcha Day!             │  ~18%  TODAY HERO
│ 🍪 JF: Cristian + Joshua  1pm   │        (text +50-75%)
│ 🍪 JF: Justine + Masawa   2pm   │
├───────────────┬──────────────────┤
│ Saturday      │ Sunday           │
│ ☁ 3°         │ ☀ 5°            │  ~12%  NEXT 2 DAYS
│ 🌸 Piano 10a │ No events        │        (text +50-75%,
│               │                  │         person emojis)
├─────┬─────┬─────┬────────────────┤
│ Mon │ Tue │ Wed │ Thu            │  ~10%  COMPACT ROW
│ ☁3° │ ☀7° │ ☁5° │ ☀8°           │        (4 columns,
│     │ 🥭  │     │ 🍪🥭          │         text +50-75%,
│     │     │     │                │         person emojis)
├─────┴─────┴─────┴───┬────────────┤
│                     │            │
│                     │  PAGE A/B  │
│   FAMILY            │  rotating  │  ~35%  BOTTOM SECTION
│   PHOTO             │            │        2-column:
│                     │  (crossfade│        55% photo (L)
│  (Google Photos     │   every    │        45% rotating (R)
│   album, crossfade  │   20-30s)  │
│   every 10-15 min)  │            │
│                     │            │
├─────────────────────┴────────────┤
│ ▸ Reuters: Markets rally as...   │  ~4%   NEWS TICKER
│        ← continuous scroll →     │        (always visible)
└──────────────────────────────────┘

Component Details

1. Calendar Text Increase

All calendar rows get +50-75% text size increase for readability from 2-3 meters:

2. Person Emoji Mapping

Emojis are assigned by calendar/person, not by event content. They appear on every event across all calendar rows.

Events from work calendars inherit the parent person’s emoji. Multi-person events show multiple emojis.

3. Bottom Section — 2-Column Layout

Left column (~55%): Family Photo Frame - Source: Google Photos shared album via Google Photos API - Proxy: Cloudflare Worker for CORS (same pattern as calendar feeds) - Rotation: crossfade to next photo every 10-15 minutes - Aspect ratio: object-fit: cover with subtle Ken Burns effect (slow pan/zoom) - Transition: 1.5-2s ease-in-out crossfade - Styling: subtle rounded corners, slight shadow to lift off background - Prefetch next photo for smooth transition

Right column (~45%): Smart Rotating Panel

Two pages that crossfade every 20-30 seconds:

Page A — “Life Stuff” (actionable/personal): - Countdowns: next 4 upcoming events, emoji + name + days remaining - Groceries: compact list of items - Chores: status summary

Page B — “World Stuff” (informational/ambient): - Horoscopes: 3 signs, truncated to 1-2 sentences each (sign symbol + name + summary) - Transit: next 3 BVG departures - Country of the day: flag + name + region

Smart skip rules: - Always reserve section space — show “Nothing needed” / “All done” placeholders for empty sections - Do NOT collapse empty sections (keeps layout stable between rotations) - Both pages fill the same fixed-height container - Content reflows within each page with consistent internal spacing

Transition: Same easing curve and duration as photo crossfade (800ms ease-in-out) for cohesive motion.

4. Countdown Configuration

Curated list, hardcoded in a config file. Computed dates for moveable events.

Display: always show next 4 upcoming events, sorted by nearest-first. Auto-cycles as events pass.

5. News Ticker

• Style: continuous left-scroll, classic ticker tape
• Sources (RSS feeds):
• Reuters (world news)
• Hacker News (tech)
• DW English (German news in English)
• Fetch: RSS via Cloudflare Worker proxy, refreshed every 15 minutes
• Text: 16-18px, scroll speed ~50px/second
• Source label before each headline: Reuters: / HN: / DW:
• Animation: CSS transform-based (Pi-safe, compositor-friendly)
• Always visible at the bottom of the screen

6. Visual Polish

• All crossfade transitions use matching easing (800ms ease-in-out)
• Photo frame: rounded corners, subtle shadow
• Compact row: 4 columns (unchanged count), larger text
• Next-2-day row: larger text with person emojis
• No layout shifts from smart skip (placeholder text for empty states)
• All animations remain Pi-safe (transform/opacity only, no backdrop-filter)

Technical Notes

New Dependencies

• Google Photos API client (or REST via Cloudflare Worker)
• RSS parser for news feeds

New Hooks

• useGooglePhotos() — fetch photos from shared album, manage rotation
• useCountdowns() — compute days remaining from config
• useNewsTicker() — fetch and manage RSS headlines
• usePageRotation() — manage Page A/B cycling with smart skip logic

New Components

• KioskPhotoFrame — photo display with crossfade
• KioskCountdownChips — countdown display
• KioskNewsTicker — scrolling news ticker
• KioskRotatingPanel — 2-page rotating container
• KioskRotatingPageA — countdowns + groceries + chores
• KioskRotatingPageB — horoscopes + transit + country

Modified Components

• KioskTodayCard — larger text, person emojis on all events
• KioskNextDayCard — larger text, person emojis on all events
• KioskCompactRow — larger text, person emojis on events
• KioskDashboard — new grid layout with 2-column bottom section

Config Files

• src/config/countdowns.ts — curated countdown events
• src/config/emojiMap.ts — person/calendar → emoji mapping (may already exist)
• src/config/newsFeeds.ts — RSS feed URLs

What’s Removed/Changed

• Horoscope paragraph text → truncated to 1-2 sentences in rotating panel
• Transit full panel → compact list in rotating panel
• Country of day panel → compact display in rotating panel
• Dedicated groceries/chores large panels → compact sections in rotating panel
• Separate rotating strip → absorbed into right column rotation