Сложные сайты на вайбкоде: четыре лендинга, два пути к «дорогим» эффектам и 3D-логотип из спрайтов
TL;DR Я собрал в режиме вайбкодинга четыре лендинга — три для программ МФТИ (Школа Техпреда, конференция «Точка сборки», курс «ИИ Продакт-менеджмент» aimipt.ru ) и ещё один свой, личный. Вайбкодинг здесь — это когда код пишет агент под мою постановку задачи, а я ставлю рамки, правлю и проверяю результат. У всех четырёх есть слой «дорогих» визуальных эффектов: интерактивная вода на WebGL-шейдере с освещением, 3D-логотип Физтеха из тысяч частиц-спрайтов, живая 3D-башня из кубов, облако частиц, которое морфит форму по скроллу. К этому слою я пришёл двумя разными путями. На «Точке сборки» эффекты написаны руками на чистом WebGL — ноль анимационных библиотек. На остальных работает свой движок на Three.js: вынесен отдельными файлами, переиспользуется между сайтами и откатывается на 2D-canvas, если CDN не ответит. На личном лендинге я раскачал этот движок сильнее всего. Между «насмотренностью» и кодом стоит цепочка инструментов: сначала дизайн-система в формате DESIGN.md , из неё мокап в Claude Design, из мокапа handoff-бандл и только потом перенос в код. Ниже — оба пути на реальном коде, эта цепочка и грабли, на которые я наступил. Сразу про проверяемость, чтобы не выглядело как имитация пруфов. Репозитории этих лендингов закрытые — они клиентские. Всё, что ниже выглядит как имена файлов, их размеры и счётчики, — это моя рабочая копия, по ссылке вы её не откроете. Снаружи можно проверить живые страницы и чужой референс, который я разбираю. Код в статье — фрагменты из работающих файлов, приведены как есть.
https://habr.com/ru/companies/alpinadigital/articles/1066732/
#вайбкодинг #WebGL #Threejs #шейдеры #лендинг #Claude_Code #фронтенд #GLSL #анимация #AIагенты
