Когда дизайнеры говорят «хочется, чтобы всё жило и двигалось», где-то напрягается разработчик 😅

Так появился Орфан TV.

Нам хотелось уйти от обычного лендинга, где пользователь просто скроллит от блока к блоку. Поэтому здесь скролл работает скорее как таймлайн: двигаешь страницу — и вместе с тобой меняется вся сцена.

✨ Самая интересная часть — частицы.

Это не видео и не готовый эффект из библиотеки. В браузере одновременно живут до 1500 частиц — со своей скоростью, размером, глубиной и траекторией.

Мы создали для них невидимое препятствие: частицы замедляются, собираются по дуге, огибают её и снова возвращаются в поток. Добавили свечение, разные планы и реакцию на курсор — и обычный Canvas 2D начал ощущаться почти как полноценная 3D-сцена.

🎞 Спикеров собрали через секвенции.

Для каждого подготовили 24 WebP-кадра, а номер кадра напрямую связали со скроллом. Листаешь вниз — персонаж появляется. Возвращаешься назад — движение идёт в обратную сторону.

В итоге соединили Canvas, JavaScript, HTML/CSS и несколько десятков заранее подготовленных кадров — без Three.js и тяжёлой 3D-сцены.

А потом OpenAI выпустили страницу GPT-6 Astra с подозрительно знакомым вайбом 👀

Совпадение? Конечно.

Но нам всё равно приятно думать, что где-то в OpenAI просто очень понравился Орфан TV 😅