Color BloomAI · Claude 3.5

Core Game Loop and Mechanics

Color Bloom is a relaxing coloring game designed for children that provides a satisfying creative experience through simple tap-to-color mechanics.

Moment-to-Moment Gameplay

1. Player sees a black and white line art image (animal or flower) in the center of the screen
2. A palette of 10 vibrant colors appears on the left side of the screen
3. Player taps a color to select it (selected color gets a visual indicator like a border or glow)
4. Player taps different regions of the image to fill them with the selected color
5. Each region can be recolored as many times as desired - no mistakes, just creative choices
6. When satisfied, player taps a "Next" button to see the next image
7. A brief celebration animation plays showing the completed artwork
8. A new uncolored image appears, and the cycle continues

Progression and Engagement

• No Fail State: This is a pure creative experience with no wrong answers
• Endless Mode: Images cycle through the available collection, allowing unlimited coloring
• Instant Gratification: Each tap immediately fills a region with color, providing satisfying feedback
• Collection Variety: 10 different images (5 animals, 5 flowers) keep the experience fresh
• Replayability: Players can color the same images differently each time

What Makes It Compelling

• Creative Freedom: Children can express themselves without judgment
• Satisfying Feedback: Immediate visual response to every tap
• Cheerful Aesthetics: Bright colors and cute subjects create a joyful atmosphere
• Relaxing Pace: No time pressure or scoring allows stress-free play
• Age-Appropriate: Simple mechanics perfect for young children

Starting Scope

The initial implementation should include:

Must Have (First Iteration):

• 10 distinct, vibrant colors in the palette
• 5 animal images (butterfly, cat, elephant, fish, rabbit)
• 5 flower images (sunflower, tulip, rose, daisy, lotus)
• Tap-to-select color mechanic with clear visual feedback
• Tap-to-fill region mechanic with flood fill
• "Next" button to advance to next image
• Simple celebration animation when advancing (sparkles or confetti)
• Images presented in random order to maintain variety
• Clear, bold line art that's easy for children to color within

Can Be Added Later:

• Save/share completed artwork
• Undo/redo functionality
• Color mixing or custom colors
• More complex images with gradients
• Sound effects for coloring actions
• Background music
• Gallery to view past creations
• Stickers or stamps to add to images

Game Perspective

Fixed-screen perspective with all UI elements visible at once:

• Color palette fixed on the left side (vertical arrangement)
• Large coloring area in the center (the main focus)
• "Next" button at the bottom
• No scrolling required - everything fits in the 720×1280 viewport

Game World and Level Design

Screen Layout (720×1280)

Color Palette (Left Side: 0-120px width)

• Vertical strip containing 10 color buttons
• Each button: 96×96 pixels (touch-friendly)
• Colors stacked vertically with small gaps
• Selected color has a white border or glow effect
• Positioned to be easily reachable by left thumb

Coloring Canvas (Center: 120-720px width)

• Large area (600×900 pixels approximately) for the image
• Image centered within this space
• White or light pastel background
• Image scaled to fit comfortably with padding

Next Button (Bottom)

• Centered button (200×80 pixels)
• Positioned at bottom (y: ~1180px)
• Bright, inviting color (green or rainbow gradient)
• Clear "Next" text or arrow icon

Image Collection

Animals (5 images):

1. Butterfly - Symmetrical wings with distinct sections
2. Cat - Sitting pose, simple body sections (face, body, tail, paws)
3. Elephant - Side view with trunk, ears, body, legs
4. Fish - Side view with fins, body, tail sections
5. Rabbit - Sitting pose with long ears, body, fluffy tail

Flowers (5 images):

1. Sunflower - Large center, petals radiating outward
2. Tulip - Simple cup shape with stem and leaves
3. Rose - Layered petals with stem and leaves
4. Daisy - Center with simple petals and stem
5. Lotus - Layered petals in bloom

Each image should have:

• 8-15 distinct colorable regions
• Clear, thick black outlines (5-8 pixels)
• Simple, recognizable shapes
• Child-friendly proportions (slightly cute/cartoonish)

Color Palette

The 10 colors should be vibrant and distinct:

1. Red - Bright cherry red (#FF3333)
2. Orange - Warm orange (#FF9933)
3. Yellow - Sunny yellow (#FFDD33)
4. Green - Grass green (#33DD33)
5. Blue - Sky blue (#3399FF)
6. Purple - Royal purple (#9933FF)
7. Pink - Bubblegum pink (#FF66CC)
8. Brown - Chocolate brown (#996633)
9. Black - Pure black (#000000)
10. White - Pure white (#FFFFFF)

Edit Mode Design

Edit mode allows users to customize the game experience while maintaining its core simplicity.

Editable Properties

Color Palette Customization:

• Users can modify any of the 10 colors
• Each color slot shows a color picker
• Colors update immediately in the palette
• Default colors can be restored with a reset button

Image Collection:

• Users can add their own line art images (must be black and white with clear regions)
• Users can remove images from the rotation
• Users can reorder which images appear first
• Minimum 3 images required to prevent empty game

UI Customization:

• Background color/pattern for the canvas area
• "Next" button text and color
• Celebration animation style (sparkles, confetti, hearts, stars)

Constraints

• Color palette must always have exactly 10 colors (no more, no fewer)
• Colors must be distinct enough to differentiate (minimum contrast check)
• At least 3 images must be active in rotation
• User-uploaded images must be validated for proper format (black outlines on white/transparent background)
• Images must fit within the canvas area (auto-scaled if too large)

Edit Mode Interface

When in edit mode:

• Color palette shows small edit icons on each color
• Image list appears with thumbnails and add/remove buttons
• Settings panel for UI customization
• "Preview" button to test changes before saving
• "Reset to Default" option for each section

Control Design

Color Bloom uses simple tap-based controls optimized for touch, with full mouse support for desktop.

Mobile Controls (Primary)

Color Selection:

• Tap any color button in the left palette to select it
• Selected color shows visual feedback (white border, slight scale increase)
• No drag required - single tap selection

Coloring:

• Tap any region of the image to fill it with the selected color
• Each tap fills one connected region (flood fill algorithm)
• Tapping an already-colored region changes it to the new selected color
• No dragging or painting - just tap to fill

Navigation:

• Tap "Next" button at bottom to advance to next image
• No swipe gestures needed

Touch Handling:

• Track touch IDs to prevent accidental multi-touch interference
• Ignore touches that start on UI elements (color palette, next button) from affecting the canvas
• Provide immediate visual feedback on touch (slight highlight before fill)

Desktop Controls (Secondary)

Mouse Controls:

• Click color buttons to select (same as tap)
• Click image regions to fill (same as tap)
• Click "Next" button to advance
• Hover effects on interactive elements for discoverability

Keyboard (Optional Enhancement):

• Number keys 1-0 to select colors 1-10
• Enter/Space to advance to next image
• Not required for core gameplay

Control Implementation Notes

• No complex input needed - pure tap/click interface
• No joysticks, no dragging, no multi-touch gestures
• All interactive elements are 96×96 pixels minimum (touch-friendly)
• Clear visual feedback for all interactions
• Prevent default browser behaviors on used inputs
• Clear input state on window blur

Art Style and Visual Theme

Color Bloom uses a cheerful, child-friendly art style that's inviting and non-intimidating.

Overall Aesthetic

• Style: Clean, cartoon line art with bold outlines
• Mood: Bright, cheerful, playful, and encouraging
• Target Audience: Children ages 3-8, but enjoyable for all ages

Visual Elements

Line Art Images:

• Bold black outlines (5-8 pixels thick)
• Simple, recognizable shapes
• Slightly stylized/cute proportions (big eyes on animals, friendly expressions)
• Clear region separation for easy coloring
• White or transparent backgrounds
• High contrast for easy visibility

Color Palette:

• Vibrant, saturated colors that appeal to children
• Colors displayed as solid circles or rounded squares
• Selected color has white border and slight glow
• Arranged vertically in a pleasing rainbow-like order

UI Elements:

• Rounded corners on all buttons and panels
• Soft shadows for depth
• Playful font for "Next" button (rounded, friendly)
• Pastel or light neutral background (cream, light blue, or soft yellow)

Celebration Animation:

• Colorful confetti or sparkles when advancing
• Brief (1-2 seconds) and delightful
• Doesn't obscure the completed artwork
• Positive reinforcement for completing an image

Color Palette

• Background: Soft cream (#FFF9E6) or light sky blue (#E6F3FF)
• UI accents: Warm, inviting colors
• Outlines: Pure black (#000000)
• Shadows: Subtle, soft (#00000020)

Asset Sizes

• Line art images: 800×800 pixels (scaled to fit canvas)
• Color buttons: 96×96 pixels
• Next button: 200×80 pixels
• Icons: 48×48 pixels

Consistency Notes

• All line art should have the same outline thickness
• All animals and flowers should have similar stylization level
• Color palette should remain consistent across all screens
• UI elements should share the same rounded corner radius (16px)