Solution · Live
Scroll-Scrub Hero
Claude Code скилл: 2 AI-кадра → 7-секундное видео (lumalabs.ai / Kling 3.0) → scroll-scrub hero в Next.js через GSAP ScrollTrigger. Полный пайплайн премиального вау-эффекта.
- skills
- claude-code
- gsap
- scroll-animation
- next-js
- ai-video
Что делает
Проводит через полный пайплайн «вау» hero-эффекта: скролл управляет video.currentTime, объект разбирается или собирается перед глазами пользователя. Sticky-scroll секция 300vh, GSAP ScrollTrigger scrub, mobile autoplay fallback.
Охватывает генерацию START + END кадров в Nano Banana 2 (batch=4, 2K, 16:9, белый фон), создание 7-секундного видео через lumalabs.ai (режим start/end image) или Higsfield Kling 3.0, и полную реализацию в Next.js 16 с тултипами компонентов.
Паттерн из пайплайна Джека («$10K сайты»), отработан на проекте ROCKMESH (лендинг стеклопластиковой сетки).
Установка
curl -fsSL https://raw.githubusercontent.com/sergeyramas/scroll-scrub-hero-skill/main/install.sh | bash
Триггеры
- «вау эффект на скролле / scroll-scrub hero / привяжи видео к скроллу»
- «3D hero / две картинки в видео / lumalabs / Kling hero»
- «сделай анимацию при скролле»
Solution
Scroll-Scrub Hero — Туториал
Пошаговая инструкция: START+END кадры в Nano Banana 2 → бесплатное видео в lumalabs.ai → Apple-style сайт через /3d-animation-creator или Next.js через GSAP ScrollTrigger.
Solution
3D Animation Creator
Claude Code скилл: видео → FFmpeg кадры → Apple-style canvas scroll-animation сайт. Annotation snap-stop, starscape, navbar pill, specs count-up, glassmorphism cards. Без фреймворков.
Solution
3D Website Builder
Claude Code скилл: готовый .mp4 → vanilla HTML/CSS/JS MVP сайт с GSAP scroll-driven hero. 5 вопросов → полная структура проекта. Без FFmpeg, без фреймворков.
Project
Боевой мех из кода: 3D-кино за вечер силами ИИ-агентов
Робот, город, машины и 43 секунды кино со взрывами в Blender, целиком из Python-кода. Я не умею 3D и не написал ни строки: работали 7 агентов. Промежуточный результат, скрипты и инструкция открыты.