Skillget

web-animation-skills

agent
Guvenlik Denetimi
Gecti
Health Gecti
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Community trust — 89 GitHub stars
Code Gecti
  • Code scan — Scanned 7 files during light audit, no dangerous patterns found
Permissions Gecti
  • Permissions — No dangerous permissions requested

Bu listing icin henuz AI raporu yok.

SUMMARY

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

README.md

Web Animation Skills

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

Web Animation Skills — animated showcase

Install

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

Or add it as a Claude Code plugin marketplace:

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

then /plugin install web-animation-skills.

The skills run in Claude Code, Cursor, Codex, and 40+ agents. The full agent runs at iart.ai.

What's included

Skill What it does
gsap-web Code-driven web motion with GSAP — timelines, ScrollTrigger, SplitText, Flip, and Lenis smooth-scroll sync.
60fps-animation Hit 60/120fps by animating only transform/opacity and killing layout thrash.
page-transition-animation Enter/exit page transitions in the Next.js App Router, plus the AnimatePresence exit fix.
accessible-animation Tiered prefers-reduced-motion handling that degrades gracefully instead of nuking motion.
micro-interaction Hover/press feedback, toggles, toasts, drawers, and list/layout motion with Framer Motion and CSS.
glassmorphism Frosted-glass / Apple "Liquid Glass" UI — backdrop-filter panels, edge highlights, refraction, and animated specular sweeps, with reduced-transparency fallbacks.
svg-animation Stroke draw-on, path morphing, motion-along-path, and animated icons/gradients/filters.
lottie-animation Integrate, control, theme, and export Lottie/dotLottie across web, iOS, Android, and React Native.
ascii-animation Generative ASCII fields and image/video/3D-to-ASCII for terminals, canvas, and Three.js.

When it activates

  • You ask Claude to build scroll-driven, hero, or text-reveal animations on the web
  • A CSS, hover, or scroll animation feels janky and you want smooth 60fps
  • You need animated page/route transitions in Next.js
  • You want UI micro-interactions, SVG motion, Lottie playback, or ASCII effects
  • You need animation that respects reduced-motion and WCAG

Example prompts

  • "Build a pinned hero section that scrubs a timeline to scroll with GSAP."
  • "My CSS animation is janky — make it run at 60fps."
  • "Add page transitions in my Next.js App Router app; the exit animation never fires."
  • "Make my animations respect prefers-reduced-motion without removing everything."
  • "Animate this SVG logo to draw itself on."

Skills

  • gsap-web
  • 60fps-animation
  • page-transition-animation
  • accessible-animation
  • micro-interaction
  • glassmorphism
  • svg-animation
  • lottie-animation
  • ascii-animation

Topics

web-animation gsap glassmorphism svg-animation lottie micro-interactions css-animation page-transitions accessibility claude-skill

More packs

Part of a 19-pack open-source collection: install only what you need. Browse every pack and skill at iart.ai/skills, or the hub at github.com/iart-ai/motion-skills.

tiktok-video-skills (TikTok / Reels / Shorts creators) · text-message-video-skills (Text-message story creators) · youtube-video-skills (Podcasters & YouTubers) · ecommerce-video-skills (E-commerce sellers) · ad-video-skills (Brand advertisers & marketers) · data-animation-skills (Analysts & PMs) · explainer-video-skills (Educators & content creators) · map-animation-skills (Vox-style editorial maps) · web-animation-skills (Frontend developers) · motion-design-skills (Motion designers) · kinetic-typography-skills (Kinetic type / text animation) · freelance-motion-skills (Freelancers & studios) · webgl-animation-skills (3D / WebGL / technical) · manim-skills (Math / educational animators) · generative-illustration-skills (Generative-illustration & creative coders) · javascript-animation-skills (Every frame drawn in JavaScript) · lower-thirds-skills (Streamers, podcasters & editors) · b-roll-skills (YouTubers, course creators & editors) · talking-head-skills (Creators & educators)

Install any of them:

npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/text-message-video-skills
npx skills add iart-ai/youtube-video-skills
npx skills add iart-ai/ecommerce-video-skills
npx skills add iart-ai/ad-video-skills
npx skills add iart-ai/data-animation-skills
npx skills add iart-ai/explainer-video-skills
npx skills add iart-ai/map-animation-skills
npx skills add iart-ai/web-animation-skills
npx skills add iart-ai/motion-design-skills
npx skills add iart-ai/kinetic-typography-skills
npx skills add iart-ai/freelance-motion-skills
npx skills add iart-ai/webgl-animation-skills
npx skills add iart-ai/manim-skills
npx skills add iart-ai/generative-illustration-skills
npx skills add iart-ai/javascript-animation-skills
npx skills add iart-ai/lower-thirds-skills
npx skills add iart-ai/b-roll-skills
npx skills add iart-ai/talking-head-skills

License

MIT

Built by iart.ai — the AI motion agent: describe it in a prompt — or point it at a CSV or brand kit — and get editable, on-brand motion graphics with exact text and numbers, one-click edits, and batch export.

Yorumlar (0)

Sonuc bulunamadi