Скролл-сцена на WebGL: облако частиц разлетается из хаоса, собирается в галактику, и на последнем шаге стягивается в сердце. Один index.html, ни сборки, ни зависимостей — просто открыть в браузере или закинуть на статический хостинг.
Три акта, привязанные к прогрессу скролла (#track высотой 460vh, #wrap — sticky на весь экран):
| Прогресс | Сцена |
|---|---|
| 0.06 – 0.26 | Из хаоса — рассеянная пыль |
| 0.38 – 0.60 | Система смыслов — пыль собирается в галактику, появляется вращение |
| 0.74 – 0.98 | Сделано с сердцем — частицы стягиваются в сердце, вращение гаснет |
Технически:
- Three.js (
r128, с CDN) — рендер частиц черезPoints+ кастомный шейдер - Позиции частиц интерполируются между тремя облаками точек (хаос → галактика → сердце) в зависимости от прогресса скролла
- Вращение галактики плавно нарастает и гаснет через smoothstep-подобную функцию (
gw), а не резко включается/выключается - Текстура частицы (
ECLIPSE) зашита прямо в JS как base64 — да, из-за этого файл весит почти мегабайт на один<script>. Отдельным файлом текстуру не тащим, чтобы всё оставалось одним самодостаточным HTML - Плюс тонкий шумовой grain-оверлей поверх для кинематографичности
Файл ничего не собирает — просто:
open index.htmlили через любой статический сервер (npx serve, python3 -m http.server, и т.п.).
Черновик для портфолио, дальше буду дорабатывать.