Документация

Установка через shadcn CLI

Каждая запись — валидный registry-item.json. В проекте с настроеннымcomponents.json:

npx shadcn add <host>/r/<slug>.json

CLI сам поставит npm-зависимости записи (gsap, motion, three…) и скопирует исходники в проект — включая vanilla-версию, если она есть у записи.

Форматы: React и vanilla JS

Каталог не привязан к React: 56 из 160 записей идут в двух+ форматах. На странице записи — вкладки кода (React | JSили CSS).

• Vanilla-версия — файл *.vanilla.js: init-функция или класс, оживляющие вашу разметку (jsdoc с HTML-примером внутри), с destroy(). Без React.
• Демо = выбранный код: у мультиформатных записей на сцене есть тумблер ⚛ react | js; клик по вкладке кода переключает и демо — что читаете, то и крутится.
• CSS-записи фреймворк-агностичны сами по себе — разметка + стили переносятся куда угодно.

Сцена превью (на странице записи)

• Device-size — Desktop / Tablet / Mobile ширина iframe.
• Фон — dots / grid / solid / transparent, без перезагрузки.
• ⚛ react | js — какая реализация запущена в демо (у мультиформатных).
• fps — FPS-метр внутри демо (среднее + минимум, краснеет ниже 50); на WebGL-записях (three/ogl) включается сам.
• ↻ replay — перезапуск one-shot демо (лоадеры, входы).
• ⤢ fullscreen — демо на весь экран (полные ширина и высота).
• ↗ — открыть превью в отдельной вкладке, ваши настройки едут с ним.
• 🎛 Настройки — у 59 tunable-записей: крутите параметры, демо обновляется на лету, «Копировать настройки» отдаёт готовый JSX.

Страница превью (standalone)

У каждой записи есть отдельная страница /preview/<slug> — там тоже есть панель настроек (у tunable), а состояние живёт в URL, так что ссылкой можно делиться:

• ?p=<base64> — сохранённые настройки (пишутся автоматически)
• ?fmt=js — запустить vanilla-реализацию
• ?fps=1 / ?fps=0 — FPS-метр принудительно вкл/выкл
• ?noanim — статичный стоп-кадр (для скриншотов)

Избранное и коллекции

• ♡ на карточке каталога или на странице записи — быстро в «Избранное».
• /favorites — свои коллекции: создавайте, переименовывайте, раскладывайте записи по подборкам.
• Хранится локально в браузере (localStorage) — аккаунт не нужен.

Другие способы забрать код

• Копировать — кнопка на вкладках кода.
• Скачать zip — манифест + все исходники записи.
• Open in StackBlitz — песочница с работающим демо в один клик.

Поиск и навигация

• ⌘K — быстрый поиск, понимает русские и английские запросы («шлейф», «hover reveal»).
• /browse — фасетные фильтры (категория × движок × интеракция × сложность), сортировка, состояние в URL; тумблер «🎛 Playground» (?pg=1) — только интерактивные примеры.
• /c — все категории с примерами.

Конвенции записей

• Все записи уважают prefers-reduced-motion — анимации отключаемы системно.
• Анимации — на transform/opacity (композитор), тяжёлые лупы засыпают в простое.
• У записи указана честная «стоимость» — ~N КБ бандла движка.
• Плейсхолдер-изображения — процедурные или picsum; замените на свои ассеты.