{"id":49421229,"url":"https://github.com/stewalexander-com/rain-view","last_synced_at":"2026-04-29T06:04:36.922Z","repository":{"id":349279321,"uuid":"1201711562","full_name":"StewAlexander-com/rain-view","owner":"StewAlexander-com","description":"Find stillness in the rain — A contemplative ambient rain experience with 4 cozy scenes, procedural rain effects, and generative piano","archived":false,"fork":false,"pushed_at":"2026-04-18T13:49:29.000Z","size":148968,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-18T14:23:50.657Z","etag":null,"topics":["ambient","asmr","canvas","contemplative","generative-music","meditation","rain","relaxation","web-audio-api","zen"],"latest_commit_sha":null,"homepage":"https://stewalexander-com.github.io/rain-view/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StewAlexander-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-05T03:44:36.000Z","updated_at":"2026-04-18T13:49:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/StewAlexander-com/rain-view","commit_stats":null,"previous_names":["stewalexander-com/rain-view"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/StewAlexander-com/rain-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StewAlexander-com%2Frain-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StewAlexander-com%2Frain-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StewAlexander-com%2Frain-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StewAlexander-com%2Frain-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StewAlexander-com","download_url":"https://codeload.github.com/StewAlexander-com/rain-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StewAlexander-com%2Frain-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32412891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T05:20:56.964Z","status":"ssl_error","status_checked_at":"2026-04-29T05:19:54.749Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ambient","asmr","canvas","contemplative","generative-music","meditation","rain","relaxation","web-audio-api","zen"],"created_at":"2026-04-29T06:04:26.028Z","updated_at":"2026-04-29T06:04:36.914Z","avatar_url":"https://github.com/StewAlexander-com.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rain View\n\n**Find stillness in the rain.**\n\nA contemplative ambient rain simulator — 4 cozy cinematic scenes with real rain audio, gentle piano, a resizable sleep clock, and looping video. Built for mobile, optimized for iOS PWA. No frameworks, no dependencies, no ads.\n\n[**Live Demo →**](https://stewalexander-com.github.io/rain-view/)\n\n![Rain View — Splash Screen](screenshots/splash.jpg)\n\n---\n\n## Scenes\n\n| Scene | Setting | Mood |\n|-------|---------|------|\n| **Tokyo Evening** | Cozy room overlooking Shibuya neon streets | Rain on glass, warm lamp, urban calm |\n| **New York Night** | Manhattan apartment window, Empire State | Steam, taxis, amber bokeh through rain |\n| **Autumn Forest** | Log cabin porch, New England fall foliage | Rain in the trees, lantern glow, solitude |\n| **Zen Garden** | Japanese engawa, cherry blossoms, koi pond | Gentle rain, mist, stillness |\n\n![Tokyo Evening — Scene Controls](screenshots/scene-tokyo.jpg)\n\n---\n\n## Sleep Clock\n\nTap the clock icon in the upper right to activate an elegant overlay clock — perfect for bedside use while rain plays in the background.\n\n![Sleep Clock — New York Night](screenshots/clock-nyc.jpg)\n\n- **Cinzel typeface** — Roman-proportioned serif with a brushed brass metallic finish (regular weight, not bold)\n- **Embossed gold effect** — gradient text fill sweeping from warm ruddy brass to lighter gold, with bevel shadows creating a raised stamped-metal appearance\n- **Pinch to resize** — two-finger pinch anywhere on screen (mobile) or scroll wheel (desktop) to scale from compact to screen-filling (0.4x–3.0x)\n- **Background dims** when the clock is active for clear readability against any scene\n- **Tap to dismiss** — tap the dimmed background or the clock button to close\n- **Always accessible** — clock button stays visible in the top-right even when audio controls auto-hide\n- **Controls suppressed** — audio controls hide while the clock is active so pinch gestures aren't intercepted\n- **Visual hint** — subtle expand-arrows icon pulses briefly on activation to signal resizability\n\n![Sleep Clock — Mobile Portrait](screenshots/clock-mobile.jpg)\n\n---\n\n## Audio\n\n### Rain Variants\n\n| Variant | Character |\n|---|---|\n| Gentle | Light, soft patter |\n| Heavy | Full, immersive downpour |\n| Window | Rain tapping on glass |\n| Forest | Rain on leaves and canopy |\n| Thunder | Rain with distant rumble |\n\n### Piano Variants\n\n| Variant | Character |\n|---|---|\n| Contemplative | Sparse, minor key, cinematic |\n| Jazz | Warm, major 7th chords, nostalgic |\n| Melancholic | Emotional, modern classical |\n| Ethereal | Ambient, spacious, slow |\n| Pastoral | Light, meditative, Satie-like |\n\nPiano starts muted — slide the volume up to layer it in. Each scene has a default rain + piano pairing, but you can mix and match freely.\n\n---\n\n## Features\n\n- **AI-generated looping video** — each scene is an 8-second cinematic loop with rain baked into the animation\n- **5 rain + 5 piano variants** — real recordings, professionally cleaned and seamless-looped\n- **Sleep clock** — elegant resizable brass clock overlay for bedside use\n- **Mobile-first** — 720p mobile video variants (~400KB vs ~7MB desktop), compact touch-friendly controls\n- **iOS PWA optimized** — auto-recovery from MEDIA_ERR_DECODE on cold start, Web Audio API bypassed on iOS\n- **Installable** — PWA manifest, home screen icon, standalone display mode\n- **Social sharing** — Open Graph + Twitter Card meta tags with preview image\n- **Auto-hiding controls** — glassmorphism UI fades after 4 seconds, reappears on touch\n- **Zero dependencies** — vanilla HTML/CSS/JS, no build tools, no npm\n\n---\n\n## Running Locally\n\n```bash\nnpx serve .\n# or\npython3 -m http.server 8000\n```\n\n---\n\n## Tech Notes\n\n### iOS Audio Architecture\n\niOS Safari and PWA mode have strict audio restrictions. Rain View handles them:\n\n1. **No Web Audio API on iOS** — `AudioContext` and `MediaElementSource` are bypassed entirely. Volume is controlled via `HTMLAudioElement.volume` (iOS overrides with physical volume buttons).\n2. **No blob URLs on iOS** — `fetch()→blob→createObjectURL` causes `MEDIA_ERR_DECODE` in PWA mode. Plain src URLs are used instead.\n3. **MEDIA_ERR_DECODE auto-recovery** — on PWA cold start, iOS sometimes fails to decode audio before the media session initializes. When detected, the tainted `\u003caudio\u003e` element is destroyed and replaced with a fresh one.\n4. **Silent MP3 activation** — a tiny data URI MP3 is played on first touch to activate the iOS audio session.\n5. **Retry cascade** — after entering a scene, playback is retried at 50/150/350/700/1200/2000/3500ms.\n\n### Diagnostic Panel\n\nTriple-tap the scene title to show a real-time audio diagnostic overlay. Shows AudioContext state, element playback state, MES connection status, errors, and version number.\n\n### Performance\n\n- Desktop video: ~7MB per scene (1080p)\n- Mobile video: ~400KB per scene (720p, auto-detected)\n- Audio: 5 rain + 5 piano MP3s, professionally EQ'd and seamless-looped\n- Total mobile payload: ~3MB for first scene load\n\n---\n\n## Credits\n\n**Rain audio** — [Pixabay Sound Effects](https://pixabay.com/sound-effects/) (Pixabay Content License)\n**Piano audio** — [Pixabay Music](https://pixabay.com/music/) (Pixabay Content License)\n**Scene video/images** — AI-generated\n\nAll audio professionally cleaned: high-pass filtered (60Hz), low-pass filtered (14kHz), normalized, seamless crossfade loop spliced. See [AUDIO-CREDITS.txt](AUDIO-CREDITS.txt) for individual track attributions.\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n\n---\n\n*Built with stillness in mind.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstewalexander-com%2Frain-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstewalexander-com%2Frain-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstewalexander-com%2Frain-view/lists"}