Skip to content

SPEC.md

Latest commit

 

History

History
126 lines (99 loc) · 4.07 KB

SPEC.md

File metadata and controls

126 lines (99 loc) · 4.07 KB
Raw

Moving Car Parallax Scene Specification

Project Overview

  • Project Name: Scenic Drive
  • Type: Interactive visualization / animation
  • Core Functionality: Side-view animated scene of a moving car with parallax scrolling landscape
  • Target Users: General audience seeking relaxing visual experience

Visual & Rendering Specification

Canvas Setup

  • Full viewport canvas (100vw x 100vh)
  • No external libraries - pure JavaScript and Canvas API
  • RequestAnimationFrame for smooth 60fps animation loop

Scene Layers (back to front, slowest to fastest)

  1. Sky Layer (speed: 0.02x)

    • Gradient from deep orange (#FF6B35) at horizon to dark purple (#2D1B69) at top
    • Sun/moon circle near horizon with soft glow
    • Subtle animated clouds

  2. Distant Mountains (speed: 0.05x)

    • Layered silhouettes in muted purples and blues
    • Rolling hill shapes, varying heights

  3. Mid-ground Hills (speed: 0.15x)

    • Green/brown gradient hills
    • Occasional distant trees as small shapes

  4. Trees Layer (speed: 0.25x)

    • Varied tree silhouettes (deciduous and coniferous mix)
    • Random heights and spacing for natural look

  5. Roadside Poles/Posts (speed: 0.4x)

    • Wooden telegraph poles at regular intervals
    • Slight perspective scaling as they pass

  6. Near Ground/Bushes (speed: 0.6x)

    • Grass tufts and small bushes along road edge
    • Quicker movement for depth illusion

  7. Road Layer (speed: 1.0x base, with texture scroll)

    • Asphalt gray with dashed center line animation
    • Road markings scrolling to show motion

  8. Car Shadow (follows car body)

  9. Car Body (stationary X position, slight Y oscillation + suspension bounce)

    • Detailed side-view sedan silhouette
    • Windows with sky reflection tint
    • Wheel wells and detailed wheels

  10. Wheel Animation

    • Realistic tire treads pattern
    • Rotation synced to perceived forward motion
    • Hubcap detail

Color Palette (Sunset Theme)

Sky Top: #1a0a2e (deep purple)
Sky Mid: #4a1942 (dusty rose)
Sky Horizon: #ff6b35 (warm orange)
Sun: #ffcc00 with glow
Mountains Far: #3d2852
Mountains Near: #5c3d6e
Hills: #2d5016 to #1a3009 gradient
Road: #2a2a2a
Road Lines: #f0f0f0 (white dashes)
Car Body: Deep blue metallic (#1e3a5f) with highlights
Wheels: Dark gray tires, silver hubcaps

Animation Specification

Car Physics

  • Vertical bounce: Sinusoidal motion, amplitude 2px, frequency ~2Hz - simulates road texture response
  • Suspension sway: Slight rotation ±0.3° synced loosely to vertical bounce
  • Wheel rotation: Continuous rotation based on "speed" variable, tire tread pattern visible

Parallax Speeds (relative multipliers)

Layer Speed Factor
Sky 0.02
Mountains Far 0.05
Hills Mid 0.15
Trees 0.25
Poles 0.4
Bushes 0.6
Road/Ground 1.0

Timing

  • Base scroll speed: configurable, default ~100px/sec equivalent
  • All animations use consistent time base for smooth looping

Interaction Specification

User Controls (optional overlay)

  • None required - passive viewing experience
  • Scene loops infinitely without user input

Technical Implementation Notes

Drawing Approach

  • Layer-by-layer rendering in correct z-order
  • Each layer drawn with offset that wraps at screen edge
  • Procedural generation for varied landscape elements
  • No external assets - all graphics drawn via Canvas API paths and gradients

Performance Targets

  • 60fps on modern browsers
  • Efficient redraw (clear only what's needed, or full clear + draw)
  • Object pooling for repeated elements (trees, poles)

Acceptance Criteria

  1. ✓ Full viewport canvas displays correctly
  2. ✓ Car is clearly visible in foreground center-left of screen
  3. ✓ Minimum 6 distinct parallax layers visible moving at different speeds
  4. ✓ Wheels visibly rotate as scene scrolls
  5. ✓ Subtle car body bounce/sway animation present
  6. ✓ Sunset gradient sky with sun glow
  7. ✓ Smooth infinite loop without visual glitches
  8. ✓ No external library dependencies
  9. ✓ Runs in modern browsers (Chrome, Firefox, Safari)