Convert raster logo images into SVG paths with CSS animations.
npx skills add https://github.com/phuhao00/bony-agent --skill logo-motion
Please help me install this Agent Skill. Skill: logo-motion Source: https://github.com/phuhao00/bony-agent/tree/main/.agent/skills/logo-motion Command: npx skills add https://github.com/phuhao00/bony-agent --skill logo-motion
This Skill solves the challenge of converting static brand assets into high-quality, web-ready motion graphics without requiring manual animation software expertise.
Use the logo-motion skill to convert the uploaded logo.png into a cinematic animation with a duration of 2000ms.
High-intent search queries and answers about installing and using this skill.
To convert a static raster logo into an animated SVG, this Skill uses automated path tracing to vectorize the image and generates custom CSS animations for direct web integration. It outputs semantic SVG paths alongside performance-optimized motion code.
Yes, you can generate specific CSS animation styles like a cinematic reveal from a PNG logo. The Skill accepts natural language style requirements to create dynamic motion profiles, supporting subtle, energetic, and cinematic reveal effects.
The best way to automate creating web-ready motion graphics from brand assets is using headless browser rendering and path tracing. This process converts static images into high-fidelity visual output without requiring manual animation software expertise.
Converting images to SVG paths with Playwright does support high-fidelity visual output. The Skill utilizes headless browser rendering to ensure the generated semantic SVG paths and CSS animations maintain visual accuracy across web platforms.
To set a specific duration for a CSS logo animation, you include the timing requirement in your natural language prompt. For example, you can request a cinematic animation with a duration of 2000ms to get precisely timed CSS code.
A limitation of using automated tracing for logo animation is that it requires a static raster image input to generate semantic SVG paths. Complex source images may affect the fidelity of the automated vectorization and subsequent CSS motion profiles.
tta-labConvert PNG/JPG images to SVG and edit rasters with ImageMagick.
RadiumAgGenerate Apple Liquid Glass UI components with CSS, Tailwind CSS, and SVG filters.
binggandataConvert raster images to layered PSD files with named layers and alpha channels.
husnainfareedCreate animated SVG graphics with SMIL, CSS, and motion paths.
