Solution · Live
3D Animation Creator
Claude Code скилл: видео → FFmpeg кадры → Apple-style canvas scroll-animation сайт. Annotation snap-stop, starscape, navbar pill, specs count-up, glassmorphism cards. Без фреймворков.
- skills
- claude-code
- scroll-animation
- ffmpeg
- apple-style
- canvas
Что делает
Берёт готовый .mp4 файл, извлекает кадры через FFmpeg и строит полный Apple-style сайт где скролл управляет анимацией через <canvas>. Эффект как у Apple iPhone teardown — объект разбирается/собирается при прокрутке.
Автоматически включает: animated starscape, annotation cards со snap-stop (скролл замирает на каждой карточке), specs с count-up анимацией, navbar → pill transform, glassmorphism feature cards, loader с progress bar.
Нужен FFmpeg: brew install ffmpeg
Установка
curl -fsSL https://raw.githubusercontent.com/sergeyramas/3d-animation-creator-skill/main/install.sh | bash
Триггеры
- «3D анимация сайта / Apple-style scroll / build scroll animation site»
- «привяжи видео к скроллу / scroll-stop build»
- предоставил .mp4 и говорит «сделай из этого сайт»
Solution
Scroll-Scrub Hero
Claude Code скилл: 2 AI-кадра → 7-секундное видео (lumalabs.ai / Kling 3.0) → scroll-scrub hero в Next.js через GSAP ScrollTrigger. Полный пайплайн премиального вау-эффекта.
Solution
3D Website Builder
Claude Code скилл: готовый .mp4 → vanilla HTML/CSS/JS MVP сайт с GSAP scroll-driven hero. 5 вопросов → полная структура проекта. Без FFmpeg, без фреймворков.
Solution
Scroll-Scrub Hero — Туториал
Пошаговая инструкция: START+END кадры в Nano Banana 2 → бесплатное видео в lumalabs.ai → Apple-style сайт через /3d-animation-creator или Next.js через GSAP ScrollTrigger.