O que 3d-animation-creator-skill faz?
Claude Code skill: video → FFmpeg frames → Apple-style canvas scroll animation website
Source: https://github.com/sergeyramas/3d-animation-creator-skill
Discovered by the Awesome Skills daily skill hunter.
Habilidade do Claude Code: converte um vídeo em frames com FFmpeg e gera um site de animação scroll no estilo Apple usando canvas.
Esta skill do Claude Code permite transformar um vídeo em uma animação de scroll interativa no estilo Apple, utilizando o FFmpeg para extrair frames individuais e Canvas para renderizar a sequência. Ideal para desenvolvedores que desejam criar experiências visuais impactantes e suaves de rolagem, como landing pages ou portfólios. A skill suporta plataformas como Claude Code e automatiza todo o pipeline, desde a divisão do vídeo em quadros até a geração de um site HTML/CSS/JS responsivo. Com base no repositório GitHub sergeyramas/3d-animation-creator-skill, ela é útil para designers e engenheiros front-end que precisam de uma abordagem rápida e eficiente para criar animações de alta qualidade sem ferramentas complexas.
npx skills add sergeyramas/3d-animation-creator-skillClaude Code skill: video → FFmpeg frames → Apple-style canvas scroll animation website
Source: https://github.com/sergeyramas/3d-animation-creator-skill
Discovered by the Awesome Skills daily skill hunter.
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.
Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.
Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.