Solution · Live
Scroll-Scrub Hero — Туториал
Пошаговая инструкция: START+END кадры в Nano Banana 2 → бесплатное видео в lumalabs.ai → Apple-style сайт через /3d-animation-creator или Next.js через GSAP ScrollTrigger.
- skills
- claude-code
- gsap
- scroll-animation
- lumalabs
- next-js
- tutorial
Полный гайдscroll-scrub-tutorial.vercel.app
ОткрытьЧто делает
Полный пошаговый туториал по созданию «вау» hero-эффекта: скролл управляет видео-анимацией, объект разбирается или собирается перед глазами пользователя.
Пайплайн: Nano Banana 2 (START кадр) → Nano Banana 2 (END кадр) → lumalabs.ai бесплатно (видео из 2 картинок) → /3d-animation-creator (Apple-style canvas сайт) или /scroll-scrub-hero (Next.js).
Включает точные команды для Claude Code, copy-paste промпты, таблицы настроек (multi-shot OFF, enhance OFF), сравнение трёх скиллов сборки.
Скиллы которые задействованы
/scroll-stop-prompter— генерирует промпты для Nano Banana 2/3d-animation-creator— ⭐ главный: FFmpeg кадры + canvas, Apple-style, annotation snap-stop/3d-website-builder— vanilla HTML MVP без FFmpeg/scroll-scrub-hero— Next.js + TypeScript + GSAP/ship-to-vercel— деплой