Sakura Crossing

Two self-contained, cinematic WebGL scenes — a first-person walk through a cel-shaded Japanese suburban street to a sakura railway crossing, framed by a robot's "AI VISION" HUD. Each is a single index.html with all 3D assets inlined (base64 glTF), built for a seek-deterministic render pipeline: every frame is a pure function of timeline time, so scrubbing forward or backward reproduces the exact same image.

Folder	Title	What it does
sakura/	Sakura Crossing — Perception	30s street walk seen through a robot's vision filter (cool tint, scanlines, vignette) with live object-detection boxes locking onto trees, crossing signals, a bicycle, crates and planters. Mid-clip the on-screen VISION toggle flips OFF to reveal the clean anime scene with a passing train and drifting petals, then back ON.
sakura-2/	Sakura Crossing — Vision Reveal	30s walk up a shopping street under a cyberpunk warning dashboard (reticle, scan sweep, corner alerts, a flashing EJECT). The gaze tilts down, the HUD clears, and the camera blasts off the surface to reveal the whole scene as a tiny spinning planet-town — crossing, shrine, lake, forest and blossom.

Viewing

Just open either index.html in a modern browser (Chrome/Edge/Firefox/Safari).

• An internet connection is required the first time — three.js 0.180.0 and GSAP 3.14.2 are loaded from the jsDelivr CDN. Everything else (models, textures, logic) is embedded in the file.

• Opened directly, a small autoplay harness loop-plays the 30-second timeline so the scene animates on its own.

• Some browsers restrict CDN modules and getImageData on file:// URLs. If a scene stays black, serve the folder over HTTP instead:

  # from inside this folder
  python -m http.server 8080
  # then open http://localhost:8080/sakura/  (or /sakura-2/)

How it's built

• three.js renders the scene; the camera path, the anime cel-shading, the passing train / petals / planet reveal, and every HUD element (toggle, boxes, telemetry, EJECT flash) are all analytic functions of a single GSAP timeline.
• The render engine drives playback by dispatching a hf-seek event with a target time and reading window.__timelines.main. That's why the output is frame-accurate and reproducible run-to-run — there's no Math.random(), wall-clock, or physics that drifts between renders.
• meta.json in each folder holds the title, category, tags and a full description.

Structure

sakura-crossing/
├── README.md
├── .gitignore
├── sakura/
│   ├── index.html      # scene 1 (single self-contained file)
│   └── meta.json
└── sakura-2/
    ├── index.html      # scene 2 (single self-contained file)
    └── meta.json

License

No license file is included — add one (e.g. LICENSE) before publishing if you want to set usage terms. Note the embedded 3D assets originate from a third-party sakura-crossing model; confirm their license permits redistribution before making the repo public.