Solution · Live
3D Website Builder
Claude Code скилл: готовый .mp4 → vanilla HTML/CSS/JS MVP сайт с GSAP scroll-driven hero. 5 вопросов → полная структура проекта. Без FFmpeg, без фреймворков.
- skills
- claude-code
- scroll-animation
- gsap
- vanilla-js
- landing-page
Что делает
Берёт готовый .mp4 (7 секунд, от lumalabs.ai или Kling 3.0), задаёт 5 вопросов (бренд, логотип, цвета, путь к видео, CTA) и строит MVP-лендинг на чистом HTML/CSS/JS.
Скролл управляет video.currentTime через GSAP ScrollTrigger — без FFmpeg, без фреймворков. Выдаёт: index.html + css/style.css + js/scroll.js + README. Готово к деплою на Vercel за минуты.
Установка
curl -fsSL https://raw.githubusercontent.com/sergeyramas/3d-website-builder-skill/main/install.sh | bash
Триггеры
- «собери MVP сайта / привяжи видео к скроллу / scroll stop builder»
- «hero с этим видео / build 3D site»
- есть готовое .mp4, нужен быстрый лендинг
Solution
3D Animation Creator
Claude Code скилл: видео → FFmpeg кадры → Apple-style canvas scroll-animation сайт. Annotation snap-stop, starscape, navbar pill, specs count-up, glassmorphism cards. Без фреймворков.
Solution
Scroll-Scrub Hero
Claude Code скилл: 2 AI-кадра → 7-секундное видео (lumalabs.ai / Kling 3.0) → scroll-scrub hero в Next.js через GSAP ScrollTrigger. Полный пайплайн премиального вау-эффекта.
Solution
Scroll-Scrub Hero — Туториал
Пошаговая инструкция: START+END кадры в Nano Banana 2 → бесплатное видео в lumalabs.ai → Apple-style сайт через /3d-animation-creator или Next.js через GSAP ScrollTrigger.