EVIDENCE CASE
Hardening a cinematic WebGL experience for motion, accessibility, and reference fidelity
A real Tsukihara maintenance slice used the complete Motion pack to tighten GSAP lifecycle ownership, reduce WebGL work under reduced motion, preserve cinematic continuity, and reconstruct the eclipse moon from reference-supported Three.js geometry.
01
Problem
Improve an existing GSAP, Lenis, and React Three Fiber experience without redesigning it: honor reduced-motion intent in the persistent world, remove unnecessary ScrollTrigger work, keep one cinematic ownership model, and make the procedural eclipse moon evidence-limited rather than speculative.
02
Methods applied
- 01Craft Premium MotionCreates purposeful, distinctive motion that remains responsive, inclusive, performant, and maintainable.
- 02Engineering GSAP AnimationsDelivers reliable GSAP animation that survives resizing, route changes, repeated mounting, and accessibility preferences.
- 03Orchestrating Cinematic Web MotionGives React and Next.js experiences a coherent sense of hierarchy, depth, and cinematic pacing without sacrificing usability.
- 04Optimizing Frontend Motion PerformanceRestores smooth, stable motion while preserving the intended visual experience.
- 05Reconstructing Images as Three.jsProduces an evidence-backed 3D result whose fidelity, inferred geometry, hierarchy, and runtime readiness are honestly demonstrated.
Decision record
- 01
Make reduced motion a runtime contract
Observe prefers-reduced-motion in the persistent R3F world, switch that mode to demand rendering and lower DPR, and remove continuous petals and pointer embers instead of merely disabling the hero timeline.
- 02
Keep GSAP lifecycle aligned with actual ownership
Do not schedule ScrollTrigger.refresh() when the reduced-motion hero path has no active timeline to refresh.
- 03
Preserve one cinematic system
Keep hero, eclipse state, camera movement, and persistent WebGL world coordinated rather than adding another independent decorative animation layer.
- 04
Reconstruct only what the reference proves
Model the visible eclipse as a deterministic frontal disc/shadow plus crimson RingGeometry rim, explicitly avoiding unseen backside, crater topology, or 360-degree fidelity claims.
03
Verification
Treat this report as evidence for the methods and verification shown here. Related-pack overlap alone is not proof that a pack was used or fully validated.
04
Result
- 01
Reduced-motion sessions now use an on-demand WebGL loop with lower DPR and no continuous petals or pointer embers.
- 02
The reduced-motion hero path no longer schedules an unnecessary ScrollTrigger refresh.
- 03
The eclipse moon has a deterministic, reference-grounded procedural rim/halo without speculative hidden geometry.
- 04
The final Tsukihara candidate passed 8/8 Motion/hero tests, 97/97 REMEMBER tests, formatting, lint, production build, and Chromium hero runtime smoke.
- 05
The merged Tsukihara main commit passed the canonical Quality workflow before this case was recorded.