Pixel2Motion (v2)

Pixel → Vector → Motion. This skill fuses two disciplines: • Vectorization discipline (from logo-vectorizer-minimal-smooth): fit the raster source with the lowest-complexity editable geometry that passes visual QA. • Motion discipline (from Disney's 12 Principles of Animation): choreograph that geometry into brand-appropriate motion with evidence-based timing and easing. The fusion rests on one insight: minimal smooth geometry IS animatable geometry. A logo built from 3 semantic parts animates cleanly; a logo built from 400 pixel-stair traced points cannot be choreographed or accepted as a professional logo vector. Phase 2 therefore does not merely vectorize — it structures for motion. And the animation must always land exactly on the QA-verified static vector (the Final Frame Contract).

• logo.svg — final static vector (motion-ready structure) • logo_motion.html — showcase-style standalone HTML with the main animation, atomic motion studies, replay/slow/speed controls, and QA hooks • motion_spec.md — personality words, principles applied, timeline table, easing tokens, atomic motions, tunable controls • outputs/fit_iterations/*.png + overlay_progress_strip.png — geometry QA evidence • outputs/motion_frames/*.png + motion_strip.png — motion QA evidence • final_render.png, html_render.png — static renders; path audit artifacts when smoothness was a concern ---

• Analyze the raster source. Record image size, mode, alpha, foreground colors, background (transparent/solid). Identify the semantic parts: mark vs wordmark, individual letters, dots, swooshes, containers, negative space. Each part is a future actor in the animation. • Write the motion brief before touching geometry: • Personality: 3 brand motion words (e.g. "swift, precise, confident"). Derive from the logo's own visual language (geometric = engineered motion, organic = flowing motion, rounded = soft/bouncy) plus any user-stated brand context. See references/motion-personality.md to map words → timing scale, easing tokens, principle emphasis. • Usage context: splash/intro (deliberate 1200–2000ms), header reveal (300–800ms), loading state (continuous loop), hover micro-interaction (150–300ms). Ask the user only if genuinely ambiguous; default to a splash-style reveal plus a static end state. • Choreography sketch: which parts move, in what order, using which reveal pattern (see references/reveal-patterns.md). • Record the brief in motion_spec.md. Every later parameter must trace back to it.

Follow the lowest-complexity-first workflow. Do not maximize pixel-fit by default; start with the simplest editable geometry that can explain the mark, escalating only when an overlay shows a structural mismatch.