Промо-сцены

Паутина

Портфолио как сайт-паутина: 3D-сцена на three.js — процедурная паутина из нитей с физикой, ветром и обрывами, капли росы, пыль и дымка, лучи луны, bloom и зерно. Работы висят коконами на нитях и перечислены слева: наведение подсвечивает кокон, клик раскрывает карточку. Курсор тянет нити, «Сплести заново» плетёт новую, мухи летают, садятся и попадаются.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • sites — работы: title, url (кнопка «Открыть»), description и note в карточке; коконов столько же, сколько работ
  • title, subtitle, caption — заголовок, подпись и заголовок списка слева
  • palette — moonlight, nightshade, ember, absinthe, aurora, vapor, gilded, crimson, sakura, silver: ключевой, контровой свет, роса, пыль, дымка, блики

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Паутина — Портфолио как сайт-паутина: 3D-сцена на three.js — процедурная паутина из нитей с физикой, ветром и обрывами, капли росы, пыль и дымка, лучи луны, bloom и зерно. Работы висят коконами на нитях и перечислены слева: наведение подсвечивает кокон, клик раскрывает карточку. Курсор тянет нити, «Сплести заново» плетёт новую, мухи летают, садятся и попадаются.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/folio-002?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

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

<Folio002
  title="Сайт-паутина"
  subtitle="сайт, который и есть паутина"
  palette="moonlight"
  sites={[
    { title: "Атлас", url: "https://…", description: "Карта проектов студии.", note: "веб · 2025" },
    { title: "Пульс", url: "https://…", description: "Панель метрик поддержки.", note: "приложение · 2024" },
  ]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Палитра
palette · по умолчанию: moonlight
Ветер
wind · по умолчанию: 1
Мухи
flies · по умолчанию: 3
Зерно паутины
seed · по умолчанию: 1
Заголовок
title · по умолчанию: Сайт-паутина
Подпись
subtitle · по умолчанию: сайт, который и есть паутина
Камера мышью
orbit · по умолчанию: включено

Частые вопросы

Как установить компонент «Паутина» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Паутина»?
npm-пакеты: three.
Что можно поменять в компоненте «Паутина»?
Можно менять: sites — работы: title, url (кнопка «Открыть»), description и note в карточке; коконов столько же, сколько работ; title, subtitle, caption — заголовок, подпись и заголовок списка слева; palette — moonlight, nightshade, ember, absinthe, aurora, vapor, gilded, crimson, sakura, silver: ключевой, контровой свет, роса, пыль, дымка, блики. Сохранить как есть: зависимость three и WebGL2-рендер: без пост-обработки (bloom, лучи, блики, зерно) сцена теряет весь свет — не переписывать на canvas2D; физику нитей как есть: типы нитей, память формы, бюджет обрывов, захват курсором — это и есть поведение паутины; пост-конвейер и порядок проходов: сцена → bloom → свет на уменьшенном кадре → финал; не заменять на EffectComposer с полноразмерными проходами — слабое железо не потянет.
Компонент «Паутина» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/folio-002.json

npm-зависимости: three

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Один файл, «use client», зависимость three (WebGL2, не WebGPU — ради Safari/Firefox). Паутина: buildWeb(seed, n) с mulberry32 — рама из 8 углов с джиттером, растяжки к закреплённым далёким якорям, 30 радиусов с заранее вставленными узлами стыков, две петли ступицы, свободная зона, 16 колец спирали с геометрическим ростом, 4 свисающих обрывка, коконы (тяжёлые узлы с обмоткой к стыку и соседям). Физика: верлет в типизированных массивах — 2 сабстепа × 8 итераций пружин по типам нитей (жёсткость, провисание, порог разрыва, бюджет 4 обрыва), сгибы через узел, гравитация, ветер (бриз + порывы + дрожь), «память формы» к сплетённому положению (иначе сеть сминается), захват курсором с прилипанием и разрыв при рывке. Камера: fov 46, четыре ракурса с весами (паутина лежит в плоскости, наклон даёт только камера), джиттер ±3°/±2°, покачивание, в портрете отъезд ×1.3; OrbitControls с демпфированием — drag по пустому месту вращает, колесо зумит только с Ctrl/⌘ или когда блок выше 80 % окна (иначе колесо листает страницу), захват нити орбиту выключает. Свет нитей: три точечных источника с затуханием 1/(d²·0.5+1) — ключевой (−1.3, 1, 1.15) ×3.1, контровой (1.7, −0.45, −1.9) ×1.4 и блуждающий по синусоиде ×0.8; блик Кадзия—Кэя shininess 75, диффуз 0.09, мерцание вдоль дуги, бусины росы sin(arc·340)^16 по липкости нити (спираль 1, ступица 0.18, каркас 0.05), вариация толщины, спад exp(−d·0.09), «лужа» видимости 1.15–1.7 от центра (растяжки тают к якорям). Рендер: нити — ленты из двух треугольников с шириной в пикселях (не тоньше 1.1px), аддитивно; световой столб от луны и пятно света внизу — видны при отдалении; роса — 240 точек на узлах спирали; пыль — 520 точек в объёме, дрейф по ветру; коконы — InstancedMesh гранёных эллипсоидов (икосаэдр с бугристыми вершинами) с шейдером шёлка; мухи — тело из сфер, красные глаза, 6 ног линиями, крылья с иридесценцией и двумя смазанными копиями (взмах 48 Гц); ИИ: саккады, зависание, вылазки, посадка на нить с чисткой, испуг от курсора, попадание в сеть (бьётся, дёргает узлы, вырывается или улетает через 12 с). Пост: сцена в HalfFloat → UnrealBloomPass (0.5/0.55/0.12 на полукадре) → свет на 0.4 кадра (лучи от луны 36 сэмплов с дизерингом, анаморфные блики по двум осям, halation) → финал (хроматика, цветокоррекция, зерно, виньетка, ACES, sRGB). Кадр 60 fps с cap DPR 1.25; при 40 медленных кадрах — DPR 1, лучи в 2 раза реже, рисование через кадр. Пауза вне вьюпорта и на скрытой вкладке. Reduced-motion: без ветра, мух и зерна во времени. Панель, список и карточка — HTML поверх canvas, карточка следует за коконом и не выходит за края. Без WebGL — текстовая заглушка.

Теги

  • portfolio
  • spider web
  • three.js
  • webgl
  • 3d
  • physics
  • particles
  • bloom
  • interactive
  • hero
  • dark
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…