Портфолио
Паутина
Портфолио как сайт-паутина: 3D-сцена на three.js — процедурная паутина из нитей с физикой, ветром и обрывами, капли росы, пыль и дымка, лучи луны, bloom и зерно. Работы висят коконами на нитях и перечислены слева: наведение подсвечивает кокон, клик раскрывает карточку. Курсор тянет нити, «Сплести заново» плетёт новую, мухи летают, садятся и попадаются.
Что можно поменять
- sites — работы: title, url (кнопка «Открыть»), description и note в карточке; коконов столько же, сколько работ
- title, subtitle, caption — заголовок, подпись и заголовок списка слева
- palette — moonlight, nightshade, ember, absinthe, aurora, vapor, gilded, crimson, sakura, silver: ключевой, контровой свет, роса, пыль, дымка, блики
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/folio-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, «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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…