hobokenchicken/kira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scenes): add 5 illustrated background scenes

Browse Source 
Generated 5 scene illustrations via gpt-image-2:
- Cozy Room: golden hour bedroom workspace
- Rooftop Cafe: twilight cafe with city skyline
- Garden: indoor botanical reading nook
- Rainy Window: night rain with bokeh lights
- Stargazing: hilltop under stars and cherry blossoms

Scene interface now supports optional 'image' field.
Background shows full-bleed image when available, gradient as fallback.
Rainy window gets rain particles, stargazing gets stars.
This commit is contained in:
Dustin Newkirk
2026-06-05 14:53:38 -04:00
parent 37c06db6be
commit 08932068fd
7 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+9
View File
@@ -96,6 +96,15 @@ export default function App() {
return (
<div className="h-screen relative transition-all duration-1000" style={{ background: currentScene.gradient }}>
{/* Scene background image (when available) */}
{currentScene.image && (
<img
src={currentScene.image}
alt=""
className="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000"
style={{ zIndex: 0 }}
/>
)}
{/* Single Live2D canvas: both Kira and Mochi share one WebGL context */}
<Live2DStage
onKiraReady={(model) => { kiraModelRef.current = model; }}
frontend/src/components/scenes.ts
+9 -8
View File
@@ -2,19 +2,20 @@ export interface Scene {
id: string;
name: string;
gradient: string;
image?: string;
particles?: 'rain' | 'stars' | 'petals' | 'snow' | 'none';
icon: string;
}
export const SCENES: Scene[] = [
{ id: 'cozy-room', name: 'Cozy Room', gradient: 'linear-gradient(135deg, #FFF5F5 0%, #FFE4E1 40%, #FFDAB9 100%)', icon: '🏠' },
{ id: 'coffee-shop', name: 'Coffee Shop', gradient: 'linear-gradient(135deg, #F5E6D3 0%, #E8D5C4 40%, #D4A574 100%)', icon: '☕' },
{ id: 'garden', name: 'Garden', gradient: 'linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 40%, #9AE6B4 100%)', icon: '🌿' },
{ id: 'rainy-window', name: 'Rainy Window', gradient: 'linear-gradient(135deg, #E2E8F0 0%, #CBD5E0 40%, #A0AEC0 100%)', icon: '🌧️' },
{ id: 'starry-night', name: 'Starry Night', gradient: 'linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%)', icon: '🌙' },
{ id: 'sakura', name: 'Sakura Spring', gradient: 'linear-gradient(135deg, #FFF0F5 0%, #FFB6C1 30%, #FF69B4 100%)', icon: '🌸' },
{ id: 'cozy-room', name: 'Cozy Room', gradient: 'linear-gradient(135deg, #FFF5F5 0%, #FFE4E1 40%, #FFDAB9 100%)', image: '/bg-cozy-room.png', icon: '🏠' },
{ id: 'coffee-shop', name: 'Coffee Shop', gradient: 'linear-gradient(135deg, #F5E6D3 0%, #E8D5C4 40%, #D4A574 100%)', image: '/bg-rooftop-cafe.png', icon: '☕' },
{ id: 'garden', name: 'Garden', gradient: 'linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 40%, #9AE6B4 100%)', image: '/bg-garden.png', icon: '🌿' },
{ id: 'rainy-window', name: 'Rainy Window', gradient: 'linear-gradient(135deg, #E2E8F0 0%, #CBD5E0 40%, #A0AEC0 100%)', image: '/bg-rainy-window.png', particles: 'rain', icon: '🌧️' },
{ id: 'starry-night', name: 'Starry Night', gradient: 'linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%)', image: '/bg-stargazing.png', particles: 'stars', icon: '🌙' },
{ id: 'sakura', name: 'Sakura Spring', gradient: 'linear-gradient(135deg, #FFF0F5 0%, #FFB6C1 30%, #FF69B4 100%)', particles: 'petals', icon: '🌸' },
{ id: 'ocean', name: 'Ocean View', gradient: 'linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 40%, #4DD0E1 100%)', icon: '🌊' },
{ id: 'autumn', name: 'Autumn Library', gradient: 'linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 40%, #FFCC80 100%)', icon: '🍂' },
{ id: 'winter-cabin', name: 'Winter Cabin', gradient: 'linear-gradient(135deg, #EDF2F7 0%, #E2E8F0 40%, #CBD5E0 100%)', icon: '❄️' },
{ id: 'autumn', name: 'Autumn Library', gradient: 'linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 40%, #FFCC80 100%)', particles: 'petals', icon: '🍂' },
{ id: 'winter-cabin', name: 'Winter Cabin', gradient: 'linear-gradient(135deg, #EDF2F7 0%, #E2E8F0 40%, #CBD5E0 100%)', particles: 'snow', icon: '❄️' },
{ id: 'sunset', name: 'Sunset Beach', gradient: 'linear-gradient(135deg, #FFF5F5 0%, #FED7E2 30%, #F687B3 60%, #D53F8C 100%)', icon: '🌅' },
];