106.9K+Download
Skip to the usage guide
Pixel2Motionby nolangz

Pixel2Motion Skill.

Rebuild a raster logo as smooth SVG and inspect a choreographed HTML reveal.

  • Logo Animation
  • SVG
Download OpenDesignView Usage Guide
Source Review · pixel2motionSKILL.md
Task Rebuild a raster logo as smooth SVG and inspect a choreographed HTML reveal. Produces An editable logo.svg with stable identifiers for animated parts. Before You Start Provide the best available raster logo and specify its display size, background and reveal context. The static SVG geometry is reviewed before choreography, so preserve the original image for overlay comparisons.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Rebuild a raster logo as smooth SVG and inspect a choreographed HTML reveal

Explore pixel2motion for raster-to-SVG logo reconstruction, interactive reveals, geometry overlays and frame-by-frame motion checks.

Source-based workflowNot an execution benchmark

The Working Approach

pixel2motion starts with a raster logo and separates it into parts that can move independently. It rebuilds those parts as editable SVG geometry before choreographing a reveal. Smooth edges, correct negative space and a faithful silhouette take priority over matching every antialiased pixel in the original screenshot.

The output includes the static logo, an interactive HTML motion study and inspection evidence. A final-frame contract connects the two stages: the animation must settle onto the same verified mark. Replay, slow motion and speed controls make the choreography reviewable, while timestamp hooks let the agent inspect difficult crossings and handoffs.

Expected Deliverables

  • An editable logo.svg with stable identifiers for animated parts.
  • A standalone logo_motion.html with replay, speed and slow-motion controls.
  • A motion specification plus geometry overlays and captured motion frames.
See the Example Brief

From Brief to Review

  1. 01
    Identify the actors

    Inspect the source image, distinguish the mark from its wordmark, and choose a usage context. Record the brand personality and reveal order before fitting geometry.

  2. 02
    Fit the simplest faithful shape

    Try primitives and a few smooth curves before adding path complexity. Compare rendered overlays and inspect enlarged edges; the source treats IoU as a diagnostic rather than a universal pass mark.

  3. 03
    Animate and compare the landing

    Build motion around stable part identifiers, then inspect anticipation, action, crossings and settle. Compare the final animation frame with the static state using the same browser and viewport.

02 When to Use It

When to Use It

Provide the best available raster logo and specify its display size, background and reveal context. The static SVG geometry is reviewed before choreography, so preserve the original image for overlay comparisons.

A Good Fit

  • A logo exists only as pixelsUse a PNG, screenshot or other raster source when the mark needs both vector reconstruction and a motion-ready structure.
  • Brand motion needs inspectionThe specification, controls and captured frames make it suitable for reviewing a reveal before embedding it in a product.

Limits to Check

  • Geometry can remain a previewThe source limits the fitting loop and requires unresolved shape defects to be disclosed rather than hidden behind an attractive animation.
  • Local tooling is requiredIts evidence workflow uses Python image packages, Chrome and deterministic browser capture. Reading the Skill alone does not supply those dependencies.

Bring These Inputs

  • Source imageProvide the highest-quality logo image, including its intended background and transparency.
  • Brand intentDescribe the mark's personality and whether this is an intro, header reveal, loader or hover state.
  • Delivery contextSpecify the display size, timing, background and any geometry that must remain unchanged.

03 Decisions That Matter

Decisions That Matter

  1. Editable geometry

    Semantic SVG parts let the agent revise a swoosh or wordmark without tracing the whole image again.

  2. Motion continuity

    Risk-window captures target stalls and sudden jumps that a regularly spaced contact sheet can miss.

  3. Faithful landing

    The same-pipeline comparison checks that the moving mark ends where the approved static logo sits.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide the highest-quality logo image, including its intended background and transparency.

Upstream Source File
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use pixel2motion on the supplied PNG logo for a short website intro. Preserve the wordmark proportions, negative space and original colors. Separate the circular mark, small dot and wordmark into addressable SVG parts, then propose a restrained reveal that settles within two seconds. Deliver the static SVG, interactive HTML study, motion specification and inspection images. Inspect enlarged edges before animating, sample the dot handoff closely, and compare the final frame with the static state. If the geometry cannot pass within the fitting budget, label the remaining defect clearly.

Inspect the Result

Check the actual output against these observable criteria.

  • Inspect curved edges at enlarged scale and record structural mismatches.
  • Capture frames around every crossing or piece handoff, not only the midpoint.
  • Verify replay, live speed control, reduced motion and the final static-state match.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
nolangz
Repository
nolangz/pixel2motion
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · e9faedb28930
Editorial Source Summary
Rebuild a raster logo as smooth SVG and inspect a choreographed HTML reveal.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it simply trace the image?

It begins with the lowest-complexity geometry that can explain the mark. Trace-derived contours are a measurement aid and require smoothing or refitting before acceptance.

Is a high IoU score sufficient?

No. The source explicitly separates numerical fit from edge smoothness and structural correctness. A jagged high-scoring outline can still fail its visual gate.

Is the default result a video file?

The documented primary motion deliverable is interactive HTML with the same geometry as logo.svg. A video export would require a separate requested delivery step.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md