Instruction Animations

Purpose

PPSM micro-instruction animations guide nontechnical users through phone provisioning and future service workflows. They are supplemental to the wizard text and status rows.

Design Direction

• Think Apple setup animations, IKEA assembly drawings, and airport safety cards.
• Do not create marketing animation, decoration, realistic UI animation, or visual clutter.
• Every animation must immediately answer: what should my finger do?

Visual Standard

• Clean line art, black outlines, thick strokes, rounded corners, and rounded line caps.
• Use the existing PagePoint accent color only.
• Use a white or transparent background.
• No shadows, gradients, 3D, textures, tiny text, or unnecessary detail.

Motion Standard

• Loop forever.
• Last about 2 to 3 seconds.
• Move slowly enough to understand.
• Pause briefly before restarting.
• Stay calm and non-distracting.

Technical Decision

The first PPSM implementation uses local animated SVG assets rendered by a small reusable component inside the Provision Phone wizard.

This is preferred over Lottie for the foundation because the first gestures are simple line-art demonstrations, PPSM must operate completely offline, and SVG avoids adding a player dependency. Lottie remains acceptable later if the animation library becomes complex enough to justify bundling a local player.

Implementation

• Assets live under ppsm/public/touch/animations/.
• The proof-of-concept asset is poc-tap.svg.
• Provisioning steps may optionally reference an animation with animation.src and animation.alt.
• Instruction pages use a vertical split workflow layout: procedural checklist on the left, animation/action panel on the right.
• The current actionable checklist row is visually highlighted.
• The animation should correspond to the highlighted action. If a step has no finished animation, the right panel shows a restrained action placeholder.
• No PPSM main screen changes are allowed for this animation system.

Prompt Template

Minimal instructional line-art animation for a small service touchscreen.
Show [specific action].
Clean black rounded strokes, thick outlines, one PagePoint green accent only.
White or transparent background.
No text, no shadows, no gradients, no 3D, no texture, no decorative motion.
Loopable 2-3 seconds with a brief pause before restart.
The animation should immediately show what the user's finger should do.

Next Candidates

• Swipe down twice from the top of the phone.
• Tap the Settings gear.
• Tap Build number seven times.
• Toggle USB Debugging.
• Check Always Allow, then tap Allow.