motion2code
De la autor
Rebuilds an AI-generated (or any) flat motion design video as clean, editable code: inline SVG shapes animated by one GSAP timeline, seekable frame by frame, looping seamlessly, checked side by side against the source; and optionally turns an interface recording into a real interactive website (GSAP ScrollTrigger, real clicks). Ships scripts to study the video (frames, cuts, contact sheet, exact palette), render the code to mp4/GIF through anim.seek, compare it with the source frame by frame and check the loop seam and page contract. Use when the user wants a video, GIF, Lottie-like clip, motion design shot, animated logo, UI screen recording or AI video "recreated in code", "converted to SVG/GSAP", "made into an HTML animation" or "made into a real site". Not for photographic footage, 3D rendering or video editing.
Instalare
npx skills add lovisdotio/motion2code --skill motion2code -a claude-code
Se instalează în .claude/skills/motion2code/ · Fiecare comandă descarcă skill-ul direct de pe GitHub cu utilitarul open source skills.
Identic octet cu octet cu commit-ul scanat, cu licența depozitului și un fișier SOURCE.txt.
Vrei ca agentul să-ți propună skill-uri în timp ce scrii? Vezi cum folosești skill-urile din IDE.
Verificări de siguranță pe SKILL.md
- Include scripturi pe care nu le-am verificatScăzut
De ce 79
aiqbench calculează scorul de încredere din semnale publice. Nu este un audit de securitate, așa că citește un skill înainte să-l instalezi.
Skill-uri similare
Cele mai apropiate de acesta prin ce fac și când sunt folosite.
- cineticLeonxlnx/cineticDirect, build and render premium cinematic motion design from code — launch films, product and feature videos, looping feature animations for landing pages and social, logo stings and reveals, UI walkthroughs, app demos, kinetic type, teasers, trailers, intros and promo clips. Use this whenever the user wants any video, animation, motion graphic or animated demo made with Remotion, HyperFrames, HTML/GSAP or React, or asks to storyboard, time, score, render, polish or critique one — even if they only say "make a video about X", "animate this feature" or "we need a launch clip". It supplies concept and copy discipline, type and colour taste that defers to a supplied brand, a beat-locked timeline that drives both picture and a code-made soundtrack, choreography and transition craft, real product UI in motion, film-grade finishing (true motion blur, no banding, BT.709, sync-checked mux) and a measured self-critique loop on contact sheets and renders.Design★ 884
- make-videoBintzGavin/heliosMake videos drawn with code: motion graphics, launch and explainer videos, animated shorts, animated charts and data, logo reveals, social clips, music visualizers, UI demos and GIF loops. Write one HTML page that draws any frame from its time t, render it frame-exact to MP4 with Helios, check stills and contact sheets, and add a soundtrack. Use when the user asks for one of these as an MP4, GIF or animation file. Not for live-action or AI-generated realistic footage or editing camera video.Media★ 123
- motion-graphicsMort1d/motion-graphics-skillsCreates showreel-grade motion graphics videos entirely from code — HTML scenes rendered frame by frame in headless Chrome with real motion blur, plus an original score composed for each video on the same beat grid. It directs the film itself from whatever the person gives — their words, a site, a GitHub repository, an app, screenshots, their own video clips and photos, or reference clips — and sets the pace and the energy of the music from them. Use for any promo, ad, launch video, explainer, reel, Shorts or TikTok, intro, kinetic type or logo animation for a business, product, app, site, bot, channel or person, even when all you have is a link or a name.Browser★ 64
- motion-directorfrankxai/awesome-motion-design-agent-skillsUse when designing motion concepts, animation systems, choreography, timing, easing, reduced-motion behavior, or deciding which motion stack to use for web UI, video, GIF, Rive, Lottie, GSAP, Motion, Remotion, or Three.js work.Design★ 81
- motion-adfabricioctelles/skillsProduce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4. Researches the destination landing page so every on-screen claim matches it, pulls real product imagery off the live site, animates one paused GSAP timeline in a single HTML page, and renders it frame-accurately through Playwright and ffmpeg. Use this whenever the user wants a video ad, promo video, animated ad, "an ad for my product", Meta/TikTok/Reels creative in video form, a 9:16 or 1:1 cut of an existing spot, or a re-render of an earlier ad with a different hook, hero or CTA — including when they never say the words "motion graphics". Not for animating UI inside an app, not for static image ads, and not for long-form or voiceover-led video.Marketing★ 121
- motion-designLottieFiles/motion-design-skillApplies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.Design★ 2.5K
Note și recenzii
—
nicio recenzie
Ai încercat acest skill? Notează-l ca să-i ajuți pe alții. Autentifică-te
Discuție
Intră în discuție. Autentifică-te