a15-prompt-typewriter-demo

name

A15-prompt-typewriter-demo

description

motion-graphic scene archetype — character-by-character text typing into a realistic prompt card, ending with a cursor-puppet click on a submit button. canonical base44 "user types prompt → app appears" beat. composes prompt-typewriter + cursor-puppet + aurora-blob-continuity backdrop + optional thinking-state-pulse on the aurora. renderer = hyperframe-gsap (linear text typing renders better in HTML).

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

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:          
   


     
     
   


     
    

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.