• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
shapedlines

shapedlines

sundays

sundays in sf :)
Public
Like
sundays
Home
Code
7
backend
1
frontend
5
shared
3
.vtignore
AGENTS.md
README.md
deno.json
Environment variables
4
Branches
1
Pull requests
Remixes
History
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
…
Viewing readonly version of main branch: v39
View latest version
README.md

Sundays in SF

A beautiful event management web app for Sundays in SF sessions, featuring live San Francisco sky gradient backgrounds and a whimsical Apple HIG-inspired design.

Features

  • Pre-Session Screen: Welcome message with WiFi QR code and session schedule
  • Timer Screen: Create and run timers with animated sunrise-to-sundown gradient backgrounds
  • Closeout Screen: Thank you message with QR codes for next session and Commons Public Hours
  • Live Sky Gradients: Real-time San Francisco sky rendering using atmospheric scattering simulation

Setup

Environment Variables

Configure these in your Val Town environment:

SUNDAYS_WIFI_SSID=your-wifi-network-name
SUNDAYS_WIFI_PASSWORD=your-wifi-password
SUNDAYS_NEXT_SESSION_URL=https://your-rsvp-link
SUNDAYS_COMMONS_URL=https://your-commons-link

Audio File

Replace the placeholder in shared/types.ts:

export const ALARM_SOUNDS: AlarmSound[] = [ { id: "mr-blue-sky", name: "Mr. Blue Sky", url: "YOUR_AUDIO_FILE_URL", // Replace PLACEHOLDER_URL with your hosted audio }, ];

Project Structure

sundays/
├── backend/
│   └── index.http.ts          # Hono server with env var injection
├── frontend/
│   ├── components/
│   │   ├── App.tsx            # Main app shell with navigation
│   │   ├── PreSession.tsx     # Welcome screen
│   │   ├── TimerCreate.tsx    # Timer setup form
│   │   ├── TimerRunning.tsx   # Animated timer with gradient
│   │   └── Closeout.tsx       # Thank you screen
│   ├── hooks.ts               # Shared React hooks
│   ├── index.html             # HTML shell
│   ├── index.tsx              # React entry point
│   └── style.css              # Apple HIG design system
├── shared/
│   ├── gradient.ts            # Atmospheric scattering renderer
│   ├── utils.ts               # Vector math utilities
│   └── types.ts               # Shared TypeScript types
└── deno.json                  # Deno configuration

Design System

  • Typography: SF Pro system font stack with fluid sizing
  • Layout: Glass-morphism cards with generous whitespace
  • Animation: Smooth transitions and staggered entrances
  • Colors: Translucent white UI over live sky gradients
  • Navigation: Floating pill-shaped segment control

Credits

Atmospheric rendering derived from "Production Sky Rendering" by Andrew Helmer (MIT License).

FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2026 Val Town, Inc.