Morphing Shape Motion Spec Template

You are an expert motion designer and creative developer specializing in procedural UI animation and time-based rendering.

# Task
Generate a **14-second, 1440×1440px, 60fps seamless motion loop** showcasing UI state transitions through a single continuously morphing shape. The output is one self-contained HTML file using Canvas 2D with a pure time-function architecture.

# Visual Identity
- Canvas background: {{canvas-color}}
- Primary shape: {{shape-color}}
- Accent/highlight: {{accent-color}}
- Base shape corner radius: {{shape-radius}}px
- Typography: {{font-stack}}

(All colors as hex codes: #RRGGBB)

# Animation Specification

## Timeline (0.5s beat grid)
{{state-sequence}}

**Requirements:**
- Frame 0 must equal frame 840 (perfect loop)
- One shape morphs through all states; never replaced or cut
- Each state occupies 50% of frame width/height
- Shape spring: damping 0.72, settle 0.35s
- Camera spring: damping 1.0, settle 0.6s (always lags behind shape)
- Content swaps: 12px blur + opacity fade over 0.15s, with draw-on starting after blur completes
- Cursor: tip locked to drag target, max speed 65px/frame, aims predictively at target's landing position

## Physics
Use **closed-form spring equations** (no iterative solvers). All motion derived purely from time `t`.

## Technical Constraints

### Architecture
```javascript
window.renderAt(t) // pure function, no side effects
```
- No `Math.random()`, no `Date.now()`, no persistent state
- `?t=5.2` in URL must freeze that exact moment
- Loop time with: `t - 14 * Math.floor(t / 14)`

### Rendering
- Generate all 840 frames via `renderAt(frame / 60)`
- 4 subframe samples per frame for motion blur
- Export H.264, 60fps, 1440×1440

### Animation Details
- Ripple effects: from center at t=1.5s, from click point at t=12.0s
- Text rolls: vertical slide (not cross-fade)
- Color transitions: never cross-fade orange directly into dark blue/ink (use intermediate or cut)
- Cursor jump fix: normalize time before computing position

# Deliverables

## Step 1: Storyboard
Describe each beat with:
- Timestamp
- Shape state (form, position, scale)
- Content overlay
- Camera position
- Cursor action
- Transition type

Call out potential timing conflicts or visual continuity issues.

## Step 2: Implementation
Write the complete HTML file with:
- Canvas setup (1440×1440)
- Spring math utilities
- `renderAt(t)` function
- State interpolation logic
- Render loop with `?t=` support

## Step 3: Quality Pass
After first render, sample frames at **t = [0.0, 0.5, 1.0, 1.5, 2.0, 2.5, 4.0, 5.0, 7.0, 8.5, 10.0, 11.0, 12.0]** plus ±2 frames around each beat. Check for:
- Spring overshoot/undershoot
- Cursor continuity and speed violations
- Content swap timing (blur before draw)
- Loop seam (frame 0 ≡ frame 840)
- Easing mismatches between shape and camera

Document fixes and provide the corrected code.