Stimulus engine · Production guide

Level-Up UI Animation: Make Progress Readable

Turn accumulated effort into a change the player can understand, not just a larger number.

Original-design vocabularyAccessibility includedNo existing-IP imitation

6-second vertical specimen · 1080×1920 · 30 fps · no audio

Watch the interaction grammar

A gold submarine with a small propeller bounces off a red wall at 200m. Tapping the Propulsion card spends four parts one at a time, and the propeller is permanently replaced by a large finned thruster. With a cyan thrust flame it charges the same wall much faster, pauses on impact, and breaks through; the dark water below opens into a glowing deep sea, and a thicker wall at 400m shows the next upgrade.

Made by Claude Opus 5.5 as Canvas 2D drawing code; effort not recorded. The production prompt below is reconstructed from the specimen and taxonomy; it is not the original generation prompt.

Build the sequence

  1. Commit earned resources, confirm an upgrade, finish a milestone, or accept a level result. Show the cost and resulting choice before commitment.
  2. Acknowledge commitment immediately, fill related gauges in a short sequence, then hold the before-and-after comparison.
  3. Use a brief pause when the new level or ability name lands. Do not lock the entire result screen behind a long celebration.
  4. Move from small gauge fills to one large level update, then reveal a single unlock card. The hierarchy should explain what changed.
  5. Pair old and new values, include units, and name the unlocked ability. Avoid a cloud of unlabeled +1 numbers.
  6. Keep the comparison stable. A small push-in on the unlock is enough; avoid motion that makes old and new values hard to compare.
  7. Use ascending tones for staged progress and one resolved tone for the unlock. Haptics should mark commitment or completion, not every gauge tick.
  8. Show the new option or challenge opened by the upgrade and the condition for the next unlock—without artificial urgency.

Production controls

Input

Commit earned resources, confirm an upgrade, finish a milestone, or accept a level result. Show the cost and resulting choice before commitment.

Timing

Acknowledge commitment immediately, fill related gauges in a short sequence, then hold the before-and-after comparison.

Hit stop

Use a brief pause when the new level or ability name lands. Do not lock the entire result screen behind a long celebration.

Amplification

Move from small gauge fills to one large level update, then reveal a single unlock card. The hierarchy should explain what changed.

Text

Pair old and new values, include units, and name the unlocked ability. Avoid a cloud of unlabeled +1 numbers.

Camera

Keep the comparison stable. A small push-in on the unlock is enough; avoid motion that makes old and new values hard to compare.

Sound & haptics

Use ascending tones for staged progress and one resolved tone for the unlock. Haptics should mark commitment or completion, not every gauge tick.

Next expectation

Show the new option or challenge opened by the upgrade and the condition for the next unlock—without artificial urgency.

Where it works—and where it fails

Good uses

  • Level-up and skill-tree result screens
  • Learning milestones and capability unlocks
  • Tool onboarding that reveals advanced functions

Failure modes

  • Inflating numbers without changing options
  • Hiding upgrade cost until after commitment
  • Celebrating so long that users cannot inspect the result

Accessibility

Do not rely on color or animation alone. Announce changed values, retain a static comparison, and let users skip or reduce the sequence.

Manipulation boundary

Progress should represent real capability or completed work. Do not fabricate progress, obscure costs, or use sunk-cost pressure to force continued use.

Creator-ready English prompt

Reconstructed prompt. Derived from the recorded specimen and classification data; not presented as the original prompt.

Produce a 6-second vertical UI motion sample that uses the Growth Upgrade stimulus engine.
Repeated action: Commit earned resources, confirm an upgrade, finish a milestone, or accept a level result. Show the cost and resulting choice before commitment.
Opening state: Make the actionable state and its consequence readable before input.
Trigger and timing: Acknowledge commitment immediately, fill related gauges in a short sequence, then hold the before-and-after comparison.
Hit stop: Use a brief pause when the new level or ability name lands. Do not lock the entire result screen behind a long celebration.
Amplification: Move from small gauge fills to one large level update, then reveal a single unlock card. The hierarchy should explain what changed.
Text: Pair old and new values, include units, and name the unlocked ability. Avoid a cloud of unlabeled +1 numbers.
Camera: Keep the comparison stable. A small push-in on the unlock is enough; avoid motion that makes old and new values hard to compare.
Sound and haptics: Use ascending tones for staged progress and one resolved tone for the unlock. Haptics should mark commitment or completion, not every gauge tick.
Next promise: Show the new option or challenge opened by the upgrade and the condition for the next unlock—without artificial urgency.
Accessibility: Do not rely on color or animation alone. Announce changed values, retain a static comparison, and let users skip or reduce the sequence.
Ethical boundary: Progress should represent real capability or completed work. Do not fabricate progress, obscure costs, or use sunk-cost pressure to force continued use.
Keep enough contrast for text and primary UI, and make the meaning clear in reduced-motion and no-audio settings.
Create original abstract subjects. Do not imitate existing works, characters, logos, brands, or proprietary UI.

Continue art direction