<Devsly/>
NotebookLM Watermark Remover
Remove the NotebookLM watermark from PDF slide exports — free, unlimited, and 100% in your browser.
View
NotebookLM Video Watermark Remover
Remove the NotebookLM watermark from every frame of your MP4 and auto-trim the end card — free and unlimited.
View
Gemini Watermark Remover
Remove the Gemini (Veo) sparkle watermark from every frame of your AI-generated MP4 — free and unlimited.
View
MCP https://devsly.io/mcp MCP Tools Best Skills API Docs
Devsly

Keyboard Shortcuts

Navigation

Quick Search
⌘ / Ctrl + K
Toggle Dark Mode
⌘ / Ctrl + D
Close Dialogs
Esc

Tool Actions

Execute / Process
⌘ / Ctrl + Enter
Clear Input
⌘ / Ctrl + Shift + C
Copy Output
⌘ / Ctrl + Shift + X

Editor

Select All
⌘ / Ctrl + A
Undo
⌘ / Ctrl + Z
Redo
⌘ / Ctrl + Shift + Z

Updated 3mo ago

by iart-ai

web-animation-skills

Web animation skills for Claude Code — GSAP, SVG, Lottie, micro-interactions, page transitions, and 60fps performance, installed straight into your agent.

Works with
  • Claude
View on GitHub (opens in a new tab)

42 GitHub stars (42)

+12 in 16 days

Stars gained per day · daily snapshots since Sep 30
Stars gained per day, Sep 30 to Oct 16: +12 in total; the busiest day was Oct 14 with +3 stars.Oct 1: 0 starsOct 2: 0 starsOct 3: 0 starsOct 4: 0 starsOct 5: +1 starsOct 6: 0 starsOct 7: +1 starsOct 8: 0 starsOct 9: +2 starsOct 10: +1 starsOct 11: +1 starsOct 12: +1 starsOct 13: 0 starsOct 14: +3 starsOct 15: +1 starsOct 16: +1 stars
Stars gained between daily snapshots
PeriodNew stars
Oct 10
Oct 20
Oct 30
Oct 40
Oct 5+1
Oct 60
Oct 7+1
Oct 80
Oct 9+2
Oct 10+1
Oct 11+1
Oct 12+1
Oct 130
Oct 14+3
Oct 15+1
Oct 16+1
  • 9 skills (9 skills found in its SKILL.md files)
  • 6 forks (6 forks)
  • 3mo ago last update (Last updated 3mo ago)

Install

Skills CLI

npx skills add iart-ai/web-animation-skills

Asks which skills and agents to install. Just one: npx skills add iart-ai/web-animation-skills --skill 60fps-animation — add -g for every project.

Claude Code

git clone https://github.com/iart-ai/web-animation-skillscp -r "web-animation-skills/skills/60fps-animation" ~/.claude/skills/

Copies the 60fps-animation skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.

Plugin

/plugin marketplace add iart-ai/web-animation-skills

Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.

Skills can run code on your machine — read the SKILL.md first.

What it does

In the author's own words, from each skill's SKILL.md.

  • 60fps-animation

    This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".

    skills/60fps-animation/SKILL.md on GitHub (opens in a new tab)

  • accessible-animation

    This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.

    skills/accessible-animation/SKILL.md on GitHub (opens in a new tab)

  • ascii-animation

    This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character…

    skills/ascii-animation/SKILL.md on GitHub (opens in a new tab)

  • glassmorphism

    This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights…

    skills/glassmorphism/SKILL.md on GitHub (opens in a new tab)

  • gsap-web

    This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollT…

    skills/gsap-web/SKILL.md on GitHub (opens in a new tab)

  • lottie-animation

    This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation on web or mobile", "control Lottie playback / segments", "make a scroll-driven Lottie", "recolor a Lottie at runtime", or "export an AE animation to Lottie". Covers dotLottie/lottie-web integration, playback control, interactivity, theming,…

    skills/lottie-animation/SKILL.md on GitHub (opens in a new tab)

  • micro-interaction

    This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.

    skills/micro-interaction/SKILL.md on GitHub (opens in a new tab)

  • page-transition-animation

    This skill should be used when the user asks to "animate page or route transitions", "add a page transition or crossfade between views", "animate route changes in Next.js App Router", "use the View Transitions API", "AnimatePresence exit doesn't fire on navigation", or "Framer Motion exit animation not working / exit animation before unmount in Next.js". Covers enter/exit page-transition animatio…

    skills/page-transition-animation/SKILL.md on GitHub (opens in a new tab)

  • svg-animation

    This skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.

    skills/svg-animation/SKILL.md on GitHub (opens in a new tab)

Review before you install

A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.