Aller au guide d’utilisation
Pixel2Motionpar nolangz

Pixel2Motion Skill.

Reconstruisez un logo matriciel en SVG lisse et examinez une apparition HTML chorégraphiée.

  • Animation de logo
  • SVG
Revue de la source · pixel2motionSKILL.md
Tâche Reconstruisez un logo matriciel en SVG lisse et examinez une apparition HTML chorégraphiée. Résultats Un logo.svg modifiable avec identifiants stables pour les parties animées. Avant de commencer Fournissez le meilleur logo matriciel disponible et précisez dimensions d’affichage, fond et contexte d’apparition. La géométrie SVG statique est examinée avant la chorégraphie : conservez donc l’original pour les superpositions.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Reconstruisez un logo matriciel en SVG lisse et examinez une apparition HTML chorégraphiée

Découvrez pixel2motion pour reconstruire un logo matriciel en SVG, créer des apparitions interactives, comparer des superpositions géométriques et vérifier le mouvement image par image.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

pixel2motion part d’un logo matriciel et le sépare en parties animables indépendamment. Il les reconstruit en géométrie SVG modifiable avant de chorégraphier leur apparition. Des contours lisses, des espaces négatifs corrects et une silhouette fidèle priment sur la correspondance de chaque pixel anticrénelé de la capture originale.

La sortie comprend le logo statique, une étude animée HTML interactive et les preuves d’inspection. Un contrat d’image finale relie les deux étapes : l’animation doit se stabiliser sur le même signe vérifié. Relecture, ralenti et contrôle de vitesse permettent d’examiner la chorégraphie ; des points d’accès temporels permettent d’inspecter croisements et passages de relais difficiles.

Livrables attendus

  • Un logo.svg modifiable avec identifiants stables pour les parties animées.
  • Un logo_motion.html autonome avec relecture, vitesse et ralenti.
  • Une spécification d’animation, des superpositions géométriques et des images capturées du mouvement.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Identifier les éléments animés

    Examinez l’image source, distinguez le symbole du logotype et choisissez le contexte d’usage. Consignez personnalité de marque et ordre d’apparition avant d’ajuster la géométrie.

  2. 02
    Ajuster la forme fidèle la plus simple

    Essayez des primitives et quelques courbes lisses avant de complexifier les tracés. Comparez les superpositions rendues et examinez les contours agrandis ; la source traite l’IoU comme diagnostic, pas comme seuil universel de validation.

  3. 03
    Animer et comparer l’état final

    Construisez l’animation autour d’identifiants stables, puis examinez anticipation, action, croisements et stabilisation. Comparez l’image finale à l’état statique dans le même navigateur et la même fenêtre d’affichage.

02 Cas d’usage

Quand l’utiliser

Fournissez le meilleur logo matriciel disponible et précisez dimensions d’affichage, fond et contexte d’apparition. La géométrie SVG statique est examinée avant la chorégraphie : conservez donc l’original pour les superpositions.

Un bon choix

  • Un logo n’existe qu’en pixelsUtilisez un PNG, une capture ou une autre source matricielle lorsque le signe nécessite une reconstruction vectorielle et une structure animable.
  • L’animation de marque nécessite une inspectionSpécification, contrôles et images capturées permettent de revoir l’apparition avant intégration au produit.

Limites à vérifier

  • La géométrie peut rester un aperçuLa source borne la boucle d’ajustement et exige de déclarer les défauts de forme non résolus plutôt que de les masquer par une animation séduisante.
  • Des outils locaux sont requisLa collecte de preuves utilise des packages d’image Python, Chrome et des captures navigateur déterministes. Lire le skill ne fournit pas ces dépendances.

Éléments à fournir

  • Image sourceFournissez l’image de logo de meilleure qualité, avec le fond et la transparence prévus.
  • Intention de marqueDécrivez la personnalité du signe et l’usage : introduction, apparition d’en-tête, chargement ou survol.
  • Contexte de livraisonPrécisez dimensions d’affichage, timing, fond et géométrie à garder inchangée.

03 Décisions importantes

Les décisions importantes

  1. Géométrie modifiable

    Des parties SVG sémantiques permettent de modifier une courbe ou un logotype sans retracer toute l’image.

  2. Continuité du mouvement

    Les captures des intervalles à risque ciblent arrêts et sauts brusques qu’une planche régulièrement échantillonnée peut manquer.

  3. Arrivée fidèle

    La comparaison dans la même chaîne vérifie que le signe animé termine à l’emplacement du logo statique approuvé.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez l’image de logo de meilleure qualité, avec le fond et la transparence prévus.

Fichier source amont
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise pixel2motion sur le logo PNG fourni pour une courte introduction de site. Préserve proportions du logotype, espaces négatifs et couleurs d’origine. Sépare le symbole circulaire, le petit point et le logotype en parties SVG adressables, puis propose une apparition mesurée se stabilisant en deux secondes maximum. Livre SVG statique, étude HTML interactive, spécification et images d’inspection. Examine les contours agrandis avant d’animer, échantillonne finement le passage du point et compare l’image finale à l’état statique. Si la géométrie ne peut être validée dans le budget d’ajustement, signale clairement le défaut restant.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Examinez les courbes à grande échelle et consignez les écarts structurels.
  • Capturez les images autour de chaque croisement ou passage de pièce, pas seulement au milieu.
  • Vérifiez relecture, contrôle de vitesse en direct, réduction des animations et correspondance à l’état statique final.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
nolangz
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · e9faedb28930
Résumé éditorial de la source
Reconstruisez un logo matriciel en SVG lisse et examinez une apparition HTML chorégraphiée.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Se contente-t-il de décalquer l’image ?

Il part de la géométrie la moins complexe capable de représenter le signe. Les contours issus d’un tracé servent à mesurer et nécessitent lissage ou réajustement avant validation.

Un score IoU élevé suffit-il ?

Non. La source distingue explicitement ajustement numérique, lissage des contours et justesse structurelle. Un contour dentelé bien noté peut échouer au contrôle visuel.

Le résultat par défaut est-il une vidéo ?

Le principal livrable animé documenté est un HTML interactif partageant la géométrie de logo.svg. Un export vidéo nécessiterait une étape de livraison distincte demandée.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Fichier source amont
https://github.com/nolangz/pixel2motion/blob/e9faedb28930df0da2acf17da00c80730a78cfe8/SKILL.md