Неоновый портал с плазменной кромкой над светящейся сеткой горизонта

SYS://PORTAL v1.0 — канал открыт

Тоннель в киберпанк

Неоновый разлом в пространстве, который открывается прямо во вкладке браузера. Ведите курсором — портал потянется к вам. Кликните — по сети пройдёт импульс.

Что внутри
  • WebGL 2
  • до 60 кадров/с
  • ≈ 5 КБ кода в сжатом виде
  • без установки

01 / по ту сторону

Что ждёт за кромкой

Портал — не видеоролик и не GIF. Каждый пиксель видеокарта рассчитывает заново десятки раз в секунду, поэтому двух одинаковых кадров не бывает: разлом каждый раз ведёт себя чуть иначе.

Кромка портала, по которой бегут плазменная корона и электрические разряды

Горизонт событий

Рваная кромка живёт своей жизнью: по ней бежит плазменная корона, а разряды вспыхивают и гаснут в случайном ритме. Края дышат, будто разлом сопротивляется собственному существованию.

Закрученная воронка тоннеля с неоновыми кольцами и пульсирующим ядром в центре

Сердце тоннеля

Внутри — закрученная воронка с неоновой разметкой, мерцающими ячейками данных и световыми трассами, летящими навстречу. В самом центре пульсирует ядро — точка, куда стекается весь сигнал.

Горизонт и сетка пола, изогнутые гравитацией портала

Гравитационная линза

Пространство вокруг портала искривляется: линия горизонта прогибается, сетка пола стягивается к центру, а частицы по спирали затягивает внутрь. Тоннель буквально притягивает город к себе.

02 / интерфейс

Управление без инструкций

Здесь нет меню и настроек. Портал читает ваши движения и отвечает на них сам.

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

03 / под капотом

Вся сцена — это математика

Два фрагментных шейдера и пара сотен строк JavaScript. Никаких движков, библиотек и тяжёлых текстур: город, тоннель, дождь и свечение рождаются из формул прямо на видеокарте.

Рендер

WebGL 2 и один полноэкранный треугольник. Первый проход рисует сцену в HDR-буфер половинной точности, второй превращает её в финальный кадр.

Сцена

Фрактальный шум, полярные координаты и процедурная геометрия. Тоннель, кольца интерфейса, частицы и сетка горизонта считаются в одном шейдере.

Постобработка

Свечение через цепочку mip-уровней, хроматическая аберрация, глитч-сдвиги строк, сканлайны и плёночное зерно — как у старого ЭЛТ-монитора.

Адаптивность

Если кадр считается дольше 24 мс, разрешение рендера плавно снижается. На сенсорных устройствах сцена сразу стартует в щадящем режиме.

Бережность

Рендер останавливается, когда вкладка скрыта или сцена ушла за край экрана. При включённом «уменьшении движения» показывается неподвижный кадр.

Приватность

Ни аналитики, ни cookies, ни внешних шрифтов. Страница не делает ни одного запроса к сторонним серверам.

04 / записи с камер

Общий план: портал парит над неоновой сеткой, вокруг идёт косой дождь
Общий план: разлом над неоновой равниной.
Крупный план ядра тоннеля со световыми трассами
Ядро крупным планом.
Портал на вертикальном экране смартфона
Так портал выглядит на смартфоне.

05 / частые вопросы

Вопросы перед входом

Нужно ли что-то устанавливать?

Нет. Портал работает в любом современном браузере с поддержкой WebGL 2: Chrome, Edge, Firefox, Safari 15 и новее. Достаточно открыть страницу.

Почему портал может притормаживать?

Сцена целиком рассчитывается видеокартой. Если устройство не успевает, разрешение рендера автоматически снижается, пока анимация не станет плавной. На слабой графике картинка будет мягче, но не остановится.

Работает ли портал на телефоне?

Да. На смартфонах и планшетах сцена подстраивается под вертикальный экран, а притяжение и импульс управляются касаниями.

Расходует ли портал батарею?

Как любая трёхмерная графика — да. Поэтому анимация встаёт на паузу, когда вы переключаетесь на другую вкладку или прокручиваете страницу ниже сцены.

Можно ли оставить портал на весь экран как заставку?

Нажмите «Войти в тоннель»: интерфейс исчезнет, сцена развернётся на весь экран и продолжит жить сама. Выход — клавиша Esc или крестик в углу.

Собирает ли сайт какие-то данные?

Нет. На странице нет счётчиков, рекламы и сторонних скриптов. Всё считается локально в вашем браузере, на сервер ничего не отправляется.

Канал открыт

Разлом уже ждёт наверху. Возьмите курсор — и потяните его на себя.