The work you do while you procrastinate is probably the work you should be doing for the r<div class="h17-popup-inner">
<canvas id="h17-matrix-bg"></canvas>

<div class="h17-popup-content">
<h2 class="h17-title">H17.2.0 — обновление сайта</h2>

<div class="h17-text">
<p>
Мы готовим обновлённую версию сайта — с новым ассортиментом,
современным дизайном и расширенными возможностями. Команда H17
уже работает над реконструкцией.
</p>

<p>
Скоро вы увидите товары, созданные в сотрудничестве с дизайнерами
и брендами: мебель, декор, посуду и текстиль — коллекции,
отражающие характер H17.
</p>

<p>
Также появится раздел <strong>услуг</strong> — от стильных решений
в сфере ремонта до индивидуальных проектов по оформлению интерьера.
</p>

<p>
Чтобы не пропустить запуск и анонсы новых коллекций,
подписывайтесь на наши социальные сети. Впереди много интересного.
</p>
</div>

<div class="h17-socials">
<!-- ЗАМЕНИ # НА СВОИ ССЫЛКИ -->
<a href="#" class="h17-social" target="_blank" rel="noopener" aria-label="Telegram">tg</a>
<a href="#" class="h17-social" target="_blank" rel="noopener" aria-label="TikTok">tt</a>
<a href="#" class="h17-social" target="_blank" rel="noopener" aria-label="Pinterest">p</a>
<a href="#" class="h17-social" target="_blank" rel="noopener" aria-label="Instagram">ig</a>
</div>
</div>
</div>

<style>
.h17-popup-inner {
position: relative;
background: #000;
border-radius: 18px;
overflow: hidden;
max-width: 820px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}

/* матричный фон */

#h17-matrix-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0.45; /* фон, не мешающий чтению */
pointer-events: none;
}

.h17-popup-content {
position: relative;
z-index: 1;
padding: 26px 26px 22px;
box-sizing: border-box;
color: #f5f5f5;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

.h17-popup-content.h17-visible {
opacity: 1;
transform: translateY(0);
}

.h17-title {
font-size: 24px;
line-height: 1.2;
margin: 0 0 18px;
font-weight: 600;
letter-spacing: 0.02em;
}

.h17-text p {
font-size: 14px;
line-height: 1.6;
margin: 0 0 12px;
color: #f2f2f2;
}

.h17-text p:last-of-type {
margin-bottom: 18px;
}

.h17-socials {
display: flex;
gap: 10px;
margin-top: 4px;
}

.h17-social {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.7);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
color: #ffffff;
background: transparent;
transition:
background 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
border-color 0.18s ease;
}

.h17-social:hover {
background: #ffffff;
color: #000000;
border-color: #ffffff;
transform: translateY(-1px);
}

@media (max-width: 640px) {
.h17-popup-inner {
border-radius: 14px;
}

.h17-popup-content {
padding: 20px 16px 18px;
}

.h17-title {
font-size: 20px;
margin-bottom: 14px;
}

.h17-text p {
font-size: 13px;
}

.h17-social {
width: 30px;
height: 30px;
font-size: 10px;
}
}
</style>

<script>
(function () {
var wrapper = document.querySelector('.h17-popup-inner');
if (!wrapper) return;

var canvas = document.getElementById('h17-matrix-bg');
var content = wrapper.querySelector('.h17-popup-content');

var popup = wrapper.closest('.t-popup');

function startMatrix() {
if (!canvas) return;
var ctx = canvas.getContext('2d');
if (!ctx) return;

var chars = 'ｱｲｳｴｵｶｷｸｹｺ1234567890';
chars = chars.split('');
var fontSize = 16;
var columns, drops;
var running = true;

function resize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
columns = Math.floor(canvas.width / fontSize);
drops = [];
for (var i = 0; i < columns; i++) {
drops[i] = Math.random() * (canvas.height / fontSize);
}
}

resize();
window.addEventListener('resize', resize);

function draw() {
if (!running) return;
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.font = fontSize + 'px monospace';

for (var i = 0; i < columns; i++) {
var text = chars[Math.floor(Math.random() * chars.length)];
var x = i * fontSize;
var y = drops[i] * fontSize;

var g = 150 + Math.floor(Math.random() * 80);
ctx.fillStyle = 'rgb(0,' + g + ',90)';
ctx.fillText(text, x, y);

if (y > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
} else {
drops[i]++;
}
}

requestAnimationFrame(draw);
}

draw();

// плавное появление текста чуть позже
setTimeout(function () {
if (content) content.classList.add('h17-visible');
}, 350);

// если попап закрыли — гасим анимацию
if (popup) {
var obs = new MutationObserver(function (muts) {
muts.forEach(function (m) {
if (m.attributeName === 'class' && !popup.classList.contains('t-popup_show')) {
running = false;
obs.disconnect();
}
});
});
obs.observe(popup, { attributes: true });
}
}

function onOpen() {
if (content) {
content.classList.remove('h17-visible');
}
startMatrix();
}

if (popup) {
var mo = new MutationObserver(function (muts) {
muts.forEach(function (m) {
if (m.attributeName === 'class' && popup.classList.contains('t-popup_show')) {
onOpen();
}
});
});
mo.observe(popup, { attributes: true });
} else {
// fallback, если по какой-то причине не нашли .t-popup
if (document.readyState === 'complete' || document.readyState === 'interactive') {
onOpen();
} else {
document.addEventListener('DOMContentLoaded', onOpen);
}
}
})();
</script>est of your life.