A15-prompt-typewriter-demo

A15 — prompt-typewriter UI demo

Composes

• prompt-typewriter (character-by-character text reveal)
• cursor-puppet (fake mouse cursor that moves and clicks)
• aurora-blob-continuity (pack-required backdrop)
• Optional thinking-state-pulse on the aurora (signals "AI is generating")

Renderer

hyperframe-gsap — linear character typing and cursor SVG motion render more naturally in HTML.

Layout

canvas: 1080x1920 (or pack-specified)

prompt_card: anchor: center origin: { x: canvas_w/2, y: canvas_h/2 } width: 720 height: 320 border_radius: 24 bg: #FFFFFF shadow: soft-drop

prompt_text: position: inside prompt_card, padded 40px font_family: Inter font_size: 22 color: #1A1A1A line_height: 1.4

submit_button: position: bottom-right of prompt_card shape: rounded square with arrow icon bg: pack.accent (peach for SP-F) size: 56 × 56

cursor: layer: above all position_start: somewhere outside the prompt position_end: over the submit_button size: 18 (macos-default svg)

## Choreography

```yaml
phase_1_aurora_holds:
  start_frame: 0
  effect: aurora-blob-continuity
  no_new_morph: true

phase_2_prompt_card_enters:
  start_frame: 6
  effect: pop-in
  duration_frames: 18

phase_3_typing:
  start_frame: 30
  effect: prompt-typewriter
  chars_per_frame: 0.33                  # ~10 chars/sec
  duration_frames: depends on prompt length
  no_easing: true                         # linear, mechanical

phase_4_cursor_arrives:
  start_frame: typing_done + 12          # 400ms after typing ends
  effect: cursor-puppet path
  duration_frames: 24                    # ~800ms travel
  easing: bezier(0.4, 0, 0.2, 1)

phase_5_click:
  start_frame: cursor_at_button
  effect: cursor scale 1.0 → 1.4 → 1.0 (overshoot + recover)
  duration_frames: 6

phase_6_thinking_pulse:
  start_frame: click + 6
  effect: thinking-state-pulse on aurora
  duration_frames: scene_remaining

phase_7_handoff_to_next_scene:
  start_frame: last - 12
  effect: aurora-morph (out)

Style pack compatibility

supported: [SP-F]
preferred_in: [SP-F]
incompatible: [SP-A, SP-B, SP-C, SP-D, SP-E, SP-G]

Exclusive to SP-F.

Pack-specific overrides

SP-F (product-demo)

• Prompt placeholder text: "Build a [thing]…"
• Submit button: peach (#FF8B5A) with white arrow.
• Aurora pulses softly during typing, then strongly during thinking phase.
• Cursor: macOS-default style.

Duration

duration_seconds: [3.0, 5.0]
default: 4.0   # depends on prompt length

Compute as: card_enter (0.8s) + typing (~3s for 30-char prompt at 10cps) + cursor-travel (0.8s) + click + pulse (1s+).

Quality Checks

• Typing is LINEAR (no easing) — feels mechanical, not animated.
• Cursor moves on a bezier path (NOT linear) — feels human.
• Cursor scale-bounces on click (1.4 overshoot, 6-frame recover).
• Aurora pulses synchronously with typing or asynchronously per thinking_state_pulse.
• Submit button is visually obvious — viewer sees where the cursor goes.

Failure Modes

• Typing looks animated (not mechanical). Remove easing. Use char-per-frame counter and integer truncation.
• Cursor moves linearly. Use bezier path.
• Cursor doesn't visibly click. Add scale overshoot at click frame.
• Aurora doesn't pulse during thinking phase. Wire thinking_state_pulse to fire after click.
• Prompt text overflows card. Constrain by char count or shorten prompt.