Framelink MCP for Figma
Lets your coding agent read Figma layout and style data to build the design you point at
by Framelink
reanimate
by Niaz MorshedSkillWrite code
Rebuilds an animation you point at in your own code and checks it frame by frame
The problem it solves
You saw a great hover effect or entrance on another site and want something like it, but one AI pass from a link or a screenshot misses.
For People rebuilding an animation they likeClaude Code usersPeople with a screen recording or gif
- Before
- You ask an agent to rebuild it from a link or a screenshot and it makes one pass, calls it done, and misses.
- After
- The agent films the original and its copy, compares them frame by frame and keeps fixing until the numbers match.
- Stars
- ★ 1.3k
- License
- MIT
- Cost
- Free
- Level
- Intermediate
- Contents
- Includes scripts
Overview
reanimate is a Claude Code skill that copies the motion of an animation you like into your own project. You point it at a live website, a screen recording, an mp4, a gif or a Lottie file; it films the original, writes the animation in your code, films the copy the same way and compares the two until the timing matches. By default it matches the motion and leaves the look to you. You end up with a close starting point to make your own.
It measures the copy against the original, so you get numbers and side-by-side sheets instead of a guess.
Try these first
Start with the first one: it is a small task you can check easily.
- /reanimate the hover effect on [web address], motion only, into [file]First try · writes files
- /reanimate this loader, [start time] to [end time] of [video file]writes files
- /reanimate the card hover in this gif, match it exactlypixel match
- /reanimate the logo marquee from [web address], with our logos and pause on hoverwrites files
Example prompts written by Agent Flows Hub.
What you get
From the creator's documentation.
| Output | What it is | Reads |
|---|---|---|
| Reference recording | Films a page, video or gif and logs its declared animations and element positions | The web |
| Motion spec | Writes one row per element and property: start, duration, easing and stagger | Your files |
| Build in your stack | Writes the animation with what your project already uses, such as CSS, Framer Motion, GSAP or three.js | Your computer |
| Frame-by-frame check | Films the copy the same way and compares timing, easing and pixels | Your computer |
| Canvas and 3D | Traces WebGL, WebGPU and canvas drawing to recover shaders and animated values | Your computer |
| Fidelity levels | Matches motion by default; exact fonts, colours and spacing only when you ask | What you give it |
Good to know
You saw a hover effect, an entrance animation or a loader on another site and want a close copy in your own project. reanimate records the original, builds the animation with the stack you already use and keeps comparing recordings until the timing and easing match.
Limits
- It needs Bun on macOS or Linux; Windows is untested. The first run downloads a browser and a static ffmpeg, about 250 MB together.
- Pages behind a login, YouTube and Loom cannot be recorded directly, so you hand it a screen recording. The author says it has only been used with Claude Code so far.
Notes by Agent Flows Hub (original project name: reanimate), written from the creator's documentation, not from running it ourselves. reanimate README · reanimate SKILL.md
Stuck setting it up?
Tell us what happened. We take a look first; if it needs paid work, you get an estimate before anything starts.
More to write code
Other skills
- Relationship Strategist Reads chats you share and your dating situation, then suggests what to say or do next
- Resume Tailor Adapts your resume to a specific job posting without stretching the truth
- Scenario Lets your agent generate images, video, 3D and audio through your Scenario account
- Scroll-Driven Website Builder Builds a scroll-driven landing page where scrolling plays video and moves layered scenes
- SEO Site Audit Checks your website for search ranking problems and gives a prioritized fix list
- Sepia De-AI Writing Revises stories and work documents so they stop reading like AI wrote them