НЕМНОГО BIOS. НЕМНОГО НОСТАЛЬГИИ.

Reboot_

А что, если сайт перезагрузится как твой первый компьютер? Тот самый BIOS, Windows Me и долгожданный звук запуска.

Один JS-файлБез зависимостейКартинки и звук внутри
Оригинальная анимация запуска BIOS
01
Сначала — BIOSПроверка памяти. Всё как тогда.
Оригинальная заставка Windows Me
02
Здравствуй, Windows MeЕщё чуть-чуть. Почти загрузились.
Курсор→BIOS→Курсор→Windows Me→Загрузка→Твой сайт
22 секунды в 2000-м

Загрузка модуля…

Твой вызов · настройки из демо
import reboot from './reboot.mjs';

await reboot();

Это шутка: страница остаётся на месте. В любой момент нажми Esc или «Остановить» на экране. Эффект содержит мигающий курсор и оригинальные GIF-анимации.

ДВА ШАГА ДО ПЕРЕЗАГРУЗКИ

Добавь маленький сбой в матрице

Для обычной HTML-страницы, PHP-шаблона или приложения на JavaScript. Без npm, jQuery и сборки.

  1. Скачай reboot.mjs и положи рядом со страницей на своём сервере.
  2. Вставь готовый код перед </body>. Нажми кнопку — и вернись в 2000-й.
↓ Скачать reboot.mjs
Готовый пример · HTML / PHP
Пример появится после загрузки модуля.

Настройки выше сразу попадают в пример. Путь ./reboot.mjs считается от URL страницы. Если файл лежит в другой папке, замени путь в import.

HTML и PHP

Вставь код в HTML или HTML-часть PHP-шаблона, вне <?php ?>. PHP здесь только отдаёт страницу, эффект работает в браузере.

JavaScript

Импортируй модуль в свой JS и вызови await reboot() внутри обработчика клика. Если подключаешь JS отдельным тегом, укажи type="module".

Один вызов. Всё под контролем.

import reboot from './reboot.mjs';

const result = await reboot({
  sound: true,
  volume: 0.7,
  speed: 1,
});
// result: { status: 'completed', soundPlayed: true }

// Из другого обработчика, пока идёт эффект:
reboot.stop();
НастройкаЧто делает
soundfalse отключает звук. По умолчанию true.
volumeГромкость от 0 до 1. По умолчанию 1. Ноль также полностью отключает аудио.
speedСкорость смены этапов от 0.1 до 10. По умолчанию 1: весь цикл 22 секунды. Значение 2 сокращает его до 11 секунд.
durationОбщая длительность в миллисекундах: от 600 до 300000. Например, reboot({ duration: 11000 }). Имеет приоритет над speed.
reboot.stop()Сразу убирает эффект. Возвращает true, если что-то остановлено, иначе false.

Темп меняет время показа этапов. Оригинальные GIF и звуки сохраняют свою скорость; при коротком сценарии звук обрывается при выходе.

Promise завершается после очистки. status: completed — весь цикл, cancelled — остановка, replaced — новый вызов заменил предыдущий. soundPlayed сообщает, был ли запущен звук. Неверные параметры и ошибки показа отклоняют Promise; страница восстанавливается.

Перед первым запуском

А сайт точно вернётся?

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

Почему иногда нет звука?

Запускай эффект из клика или тапа: в этот момент модуль активирует аудио. Если браузер запрещает звук, визуальная часть продолжит работать. Импорт ничего не запускает. Ограничения браузеров на автозапуск.

Как открыть скачанный пример локально?

Положи HTML и модуль в одну папку, запусти python3 -m http.server 8000 и открой http://localhost:8000. ES-модулю нужен HTTP-сервер; двойной клик по HTML через file:// не подходит.

Что настроить в nginx: MIME и CORS?

Добавь этот блок в существующий server, использующий папку сайта как root. CORS нужен, только если другие сайты импортируют модуль с твоего сервера. Домен публикации пока не выбран.

location = /reboot.mjs {
    types { text/javascript mjs; }
    default_type text/javascript;
    add_header Access-Control-Allow-Origin "*" always;
    try_files $uri =404;
}

Проверь конфигурацию через nginx -t, затем перезагрузи nginx. Если модуль в подпапке, измени location. При собственных заголовках безопасности учти правила наследования add_header. Для одного домена строку CORS можно убрать. MIME · Заголовки nginx.

Какие браузеры и ограничения CSP?

Нужен современный браузер с ES-модулями, Shadow DOM и модальным dialog. Для строгой CSP разреши источник модуля в script-src, data: и blob: в img-src и встроенные стили в style-src (например, 'unsafe-inline'). Встроенному скрипту примера понадобится разрешённый nonce или отдельный JS-файл. Аудио декодируется из встроенных байтов через Web Audio. Оригинальные GIF продолжают анимироваться и при reduced motion; плавное исчезновение в этом режиме отключено.