Песочница · MVP 41

Креативная библиотека вайбкодера

Не awesome-list. Сначала стек-рецепт под задачу, потом карточки Tier 1–3: когда брать, что сказать агенту, как не убить FPS.

Стеки-рецепты — начни отсюда

Не выбирай из 32 библиотек. Выбери задачу — получи один рекомендованный стек, проще и сложнее альтернативы.

Уровни — если листаешь каталог

41 из 41

ИллюстрацииTier 1

Lottie / dotLottie

Векторная анимация из дизайн-файла — лёгкая и чёткая

Легко с AIОк на мобиле

Открыть карточку

3D (вход)Tier 1

Spline

3D в браузере без Blender — визуальный редактор + экспорт

Легко с AIОсторожно на мобиле

Открыть карточку

UI motionTier 1

Anime.js

Лёгкие timelines анимации без привязки к React

Легко с AIОк на мобиле

Открыть карточку

ЗвукTier 1

Howler.js

Звук и музыка в вебе без боли с браузерами

Легко с AIОк на мобиле

Открыть карточку

ТипографикаTier 1

SplitType

Режет текст на буквы/слова/строки — топливо для GSAP-типографики

Легко с AIОк на мобиле

Открыть карточку

ТипографикаTier 1

Fluid type (CSS clamp)

Жидкая типографика: clamp + fluid scale без JS-библиотек

Легко с AIОк на мобиле

Открыть карточку

Фон / атмосфераTier 1

Vanta.js

Готовые WebGL-фоны за пару строк — атмосфера без шейдеров с нуля

Легко с AIОсторожно на мобиле

Открыть карточку

Фон / атмосфераTier 1

Mesh / liquid gradients

Анимированные mesh- и liquid-градиенты — тренд атмосферы без WebGL

Легко с AIОк на мобиле

Открыть карточку

Переходы страницTier 1

View Transitions API

Нативные переходы страниц и DOM — без тяжёлой библиотеки

Легко с AIОк на мобиле

Открыть карточку

3D / ARTier 1

model-viewer

Google web component: 3D-модель + AR «в комнате»

Легко с AIОк на мобиле

Открыть карточку

UI motionTier 1

AutoAnimate (FormKit)

Анимация списков одной строкой — без ручных layout-расчётов

Легко с AIОк на мобиле

Открыть карточку

КартыTier 1

Яндекс.Карты API эталон

Карты, метки, маршруты — основной выбор для проектов из России

Легко с AIОк на мобиле

Открыть карточку

КартыTier 1

Leaflet

Лёгкие интерактивные карты на OSM — классика opensource

Легко с AIОк на мобиле

Открыть карточку

Туры / онбордингTier 1

Driver.js эталон

Тур по интерфейсу: spotlight, шаги, «смотри сюда»

Легко с AIОк на мобиле

Открыть карточку

Иллюстрации / 2.5DTier 1

Zdog эталон

Милое псевдо-3D (2.5D) для иллюстраций и маскотов

Легко с AIОк на мобиле

Открыть карточку

Генератив / фонTier 1

CSS Doodle эталон

Генеративные фоны и паттерны на чистом CSS (~2 Кб вайба)

Легко с AIОк на мобиле

Открыть карточку

Scroll / storytellingTier 2

GSAP эталон

Движок плавной анимации для сайтов — от кнопок до scroll-фильмов

СреднеОсторожно на мобиле

Открыть карточку

Scroll / storytellingTier 2

GSAP ScrollTrigger эталон

Плагин GSAP, без которого не бывает scroll-фильма

СреднеОсторожно на мобиле

Открыть карточку

ScrollTier 2

Lenis

Мягкий «масляный» скролл — фундамент под GSAP и WebGL

Легко с AIОк на мобиле

Открыть карточку

UI motionTier 2

Motion (Framer Motion)

React-first анимации UI: layout, жесты, списки без боли

Легко с AIОк на мобиле

Открыть карточку

ИнтерактивTier 2

Rive

Интерактивные иллюстрации со state machine

СреднеОк на мобиле

Открыть карточку

2D-играTier 2

Phaser

Фреймворк 2D HTML5-игр для браузера

СреднеОк на мобиле

Открыть карточку

2D-эффектыTier 2

PixiJS

Быстрый 2D WebGL-рендер для эффектов и частиц

СреднеОсторожно на мобиле

Открыть карточку

ГенеративTier 2

p5.js

Креативный код: генератив, арт, обучение через скетчи

Легко с AIОк на мобиле

Открыть карточку

ФизикаTier 2

Matter.js

2D-физика: падения, коллизии, «живой» интерфейс

СреднеОсторожно на мобиле

Открыть карточку

Фон / атмосфераTier 2

tsParticles

Частицы, реагирующие на курсор — фон и микровзаимодействия

Легко с AIОсторожно на мобиле

Открыть карточку

Переходы страницTier 2

Barba.js эталон

Плавные переходы между страницами — SPA-вайб без React/Vue

СреднеОк на мобиле

Открыть карточку

ЗвукTier 2

Tone.js

Синтез и музыкальный Web Audio — дальше, чем Howler

СреднеОк на мобиле

Открыть карточку

Вирт. пространствоTier 2

Photo Sphere Viewer эталон

360° виртуальные галереи и туры по панорамам с хотспотами

СреднеОсторожно на мобиле

Открыть карточку

КартыTier 2

MapLibre GL

Векторные карты со своим стилем — наследник open Mapbox GL

СреднеОсторожно на мобиле

Открыть карточку

AI / креативный MLTier 2

ml5.js эталон

Креативный Machine Learning в браузере: вебка, позы, звук

СреднеОсторожно на мобиле

Открыть карточку

Scroll / параллаксTier 3

Lenis + ScrollSmoother

Связка мягкого скролла и GSAP-параллакса уровня Awwwards

ТяжелоОсторожно на мобиле

Открыть карточку

3DTier 3

Three.js

Стандарт WebGL — свой 3D-мир в браузере

ТяжелоОсторожно на мобиле

Открыть карточку

3DTier 3

React Three Fiber

Three.js декларативно в React

СреднеОсторожно на мобиле

Открыть карточку

3D / хелперыTier 3

drei (@react-three/drei)

Готовые хелперы для R3F: Environment, OrbitControls, Text, Float…

СреднеОсторожно на мобиле

Открыть карточку

Креативный timelineTier 3

Theatre.js

Визуальный timeline для сложных креативных сцен

ТяжелоОсторожно на мобиле

Открыть карточку

Шейдеры / WebGLTier 3

Curtains.js эталон

WebGL-искажения на обычных HTML-элементах — без целого 3D-мира

СреднеОсторожно на мобиле

Открыть карточку

3D / нейроTier 3

Gaussian Splatting

Фотореал нейро-облака точек в браузере

ТяжелоDesktop-first

Открыть карточку

AI / трекингTier 3

MediaPipe

Трекинг рук, лица и позы в браузере — AI-вход в интерфейс

ТяжелоОсторожно на мобиле

Открыть карточку

WebGLTier 3

OGL

Крошечная альтернатива Three — один шейдер без жира

ТяжелоОсторожно на мобиле

Открыть карточку

AI на клиентеTier 3

Transformers.js эталон

AI-модели Hugging Face прямо в браузере — без бэкенда

ТяжелоОсторожно на мобиле

Открыть карточку

Performance / FPS Killers

Вайб умирает, если телефон греется и скролл лагает. Прочитай до того, как повесишь Three.js на весь сайт.

Three / p5 на мобиле без LOD

Опасно: Полная сцена WebGL или тяжёлый draw-loop на телефоне → 10–20 fps, нагрев, закрытие вкладки.

Делай так: Упрощённая сцена / статичный кадр на mobile, LOD, меньше полигонов, throttle requestAnimationFrame, отключение при reduced-motion.

Lenis + тяжёлый RAF ест батарею

Опасно: Smooth scroll крутит RAF каждый кадр вместе с ScrollTrigger и параллаксом — телефон греется, батарея тает.

Делай так: На mobile оставь нативный скролл или лёгкий Lenis. Один RAF-цикл на всё. Pause при hidden tab (Page Visibility).

Слишком много ScrollTrigger pin

Опасно: 5+ pinned секций подряд ломают скролл, адресную строку и gesture на iOS — пользователь «залипает».

Делай так: 1–2 pin на десктопе, на mobile — scrub без pin или короткие fade. Cleanup kill() при unmount.

Vanta / tsParticles на весь экран телефона

Опасно: Full-screen WebGL/particles на слабом GPU → лаги скролла и белый экран при уходе с вкладки.

Делай так: Статичный градиент или CSS mesh на mobile. Particles только desktop / после idle. Меньше density.

Gaussian Splatting / Curtains без fallback

Опасно: Нейро-облака и шейдерные плоскости без fallback крашат Safari/старые Android или показывают чёрный квадрат.

Делай так: Картинка/видео fallback, feature detect WebGL2, lazy-load после LCP, desktop-first для splats.

Забыли prefers-reduced-motion

Опасно: Автоплей, бесконечный motion и shake вызывают тошноту и недоступность — часть аудитории уйдёт сразу.

Делай так: matchMedia('(prefers-reduced-motion: reduce)') → статичный layout, один fade, без scrub-оргии.

requestAnimationFrame без дисциплины

Опасно: Несколько независимых RAF, анимации в фоне вкладки, отсутствие cancelAnimationFrame → утечки и джитер.

Делай так: Один shared ticker где возможно; cancel при unmount; pause при document.hidden; не анимируй то, что вне viewport.

360° / карта на весь экран телефона

Опасно: 8K-панорамы и десятки маркеров без кластеризации → лаги жестов, белый экран WebGL, съеденный трафик.

Делай так: Панорамы 2–4K, lazy соседних сцен, кластер маркеров, статичный fallback. Карту не анимируй на каждый scroll-тик.

AI / WebGL «осторожно на мобиле» без fallback

Опасно: Curtains, ml5, Transformers.js, тяжёлый WebGL на iPhone SE → краш вкладки, нагрев, съеденная батарея.

Делай так: Тест на слабом устройстве. matchMedia + детект мощности/WebGL. Фоллбэк на статику. Камера/модели — только opt-in.

Как пользоваться

Выбери задачу («Мне нужно…») или открой карточку.
Прочитай Design DNA и Do / Don't.
Скопируй промпт → вставь агенту в Cursor / Claude Code.
Собери в своём стеке. Код чужих демо не копируем — копируем решение.

Центр продукта — /resheniya. Эта библиотека — слой «на чём сделать необычно».