Прелоадер с процентами

Классика японских студий: тёмный экран с вордмарком и счётчиком 0→100, затем занавес уезжает вверх и открывает хиро с построчным заголовком.

Интро играет само. Кнопка «Повторить» — ещё раз.

Сайт начинается

с первой секунды

STUDIO 0

Код

<div class="loader">
  <b class="word">STUDIO</b>
  <b class="num" data-to="100">0</b>
</div>
<header class="hero"> ... контент сайта ... </header>

<style>
.loader { position: fixed; inset: 0; z-index: 99; background: #101010;
  color: #fff; display: flex; align-items: center; justify-content: center;
  animation: loaderUp .9s cubic-bezier(.16,1,.3,1) 1.5s forwards; }
.loader .num { position: absolute; right: 26px; bottom: 20px;
  font-variant-numeric: tabular-nums; }
@keyframes loaderUp { to { transform: translateY(-101%); } }
/* заголовок хиро стартует, когда занавес уехал */
.hero .line span { transform: translateY(115%);
  animation: lineUp .7s cubic-bezier(.16,1,.3,1) 1.7s forwards; }
</style>

<script>
// счётчик 0 → 100 за 1.2s (ease-out), синхронизирован с занавесом
var el = document.querySelector(".loader .num"), t0 = null;
function tick(t) {
  if (!t0) t0 = t;
  var p = Math.min((t - t0) / 1200, 1);
  el.textContent = Math.round(100 * (1 - Math.pow(1 - p, 3)));
  if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
</script>

Промпт для ИИ

Сделай интро-прелоадер как у японских студий (4wide.jp): фиксированный оверлей на весь экран (#101010), по центру вордмарк, в углу счётчик 0→100 за 1.2s (ease-out-cubic, tabular-nums, через rAF). Через 1.5s оверлей уезжает вверх translateY(-101%) за 0.9s по cubic-bezier(0.16,1,0.3,1) (animation forwards). Заголовок хиро под ним — построчно из маски с задержкой 1.7s, чтобы стартовал в момент открытия. Прелоадер показывай только при первом заходе (sessionStorage). При prefers-reduced-motion пропускай интро полностью.