Engine Overview
The aerial engine explores layered projection techniques for the aerial shot motif. It runs the geometry pipeline once and renders the scene through either the original SVG projection or a CSS transform-based motif.
- Geometry foundation built from bounding boxes and semantic zones
- Pipeline stages: flat pattern → perspective transform → arc animation
- Motif engine compares SVG projection with CSS transform approach
- Debug mode overlays bounding boxes to study spatial grounding
isometric view, oriented diagonal up-right, with receding depth effect, (rough: 0, fairway: 20, approach: 40, green: 60)
Aerial Engine Output: Authentication System
Transformation: isometric view, oriented diagonal up-right, with receding depth effect, (rough: 0, fairway: 20, approach: 40, green: 60)
Pipeline: Flat Pattern → Perspective Transform → Arc Animation
Mode: SVG projection pipeline
Motif Notes
The CSS motif constructs the course using layered div elements that are positioned and rotated via CSS transforms. Shot arcs are approximated using dotted quarter-circle borders whose scale and curvature respond to shot confidence.
This approach enables quick experimentation with perspective cues using standard CSS, while the SVG pipeline provides precise geometric projection. Both modes share the same underlying geometry and arc trajectory data produced by the pipeline.