Программа мероприятия в технологичном стиле
Программа мероприятия в виде бенто-сетки из стеклянных карточек на тёмном фоне с цветными пятнами, как у северного сияния.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Сделай блок с программой мероприятия в стилистике северного сияния и матового стекла.
Учитывай следующий контекст: это программа двухдневной технологической конференции без параллельных треков, её темы — продукты, инженерия, дизайн и управление.
Представь его так:
Фон — тёмно-синий, почти чёрный, #070B1A. По нему медленно плывут два больших размытых цветовых пятна — розовое #EC4899 справа и бирюзовое #06B6D4 слева, как северное сияние. Поверх — едва заметная сетка из точек.
Вверху — короткая подпись в скруглённой плашке, крупный заголовок и поясняющий абзац справа от него.
Ниже — бенто-сетка из четырёх карточек разного размера: высокая карточка на две строки слева, обычная карточка, акцентная карточка с короткой фразой в две строки на лёгкой градиентной подложке из фиолетового, бирюзового и розового и широкая карточка на две колонки. В карточках программы — сцена или день в скруглённой плашке, время бирюзовым цветом, название темы и короткое описание. В углу каждой карточки — круглый значок со стрелкой ↗.
Карточки полупрозрачные, размывают фон под собой, с тонкой светлой обводкой и скруглением 24 пикселя.
Типографика: крупный чистый гротеск, заголовки набраны плотно. Вторая строка акцентной фразы — бирюзовая.
При наведении по карточке скользит мягкий световой блик вслед за курсором, карточка чуть приподнимается, а обводка становится светлее.
Соблюдай ограничения: пятна двигаются медленно и не отвлекают от текста. Текст на стекле всегда контрастный и читается. На планшете бенто-сетка перестраивается в две колонки, на телефоне — в одну, заголовок и абзац встают друг под другом, а пятна становятся меньше и размываются слабее, чтобы страница не тормозила. Если в системе включено уменьшение движения, пятна неподвижны, а карточки реагируют на наведение без плавной анимации. Блок самостоятельный: фон, декор, стили и скрипт лежат только внутри него, у блока есть id. Шрифты бери из стилей проекта. Весь текст не мельче 15 пикселей, основной текст без полупрозрачности, все надписи — на русском. Ни один элемент не выходит за край экрана и не создаёт горизонтальную прокрутку.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: блок выглядит как раздел сайта технологичного продукта мирового уровня — глубокий, светящийся, но спокойный и читаемый.
Учитывай следующий контекст: это программа двухдневной технологической конференции без параллельных треков, её темы — продукты, инженерия, дизайн и управление.
Представь его так:
Фон — тёмно-синий, почти чёрный, #070B1A. По нему медленно плывут два больших размытых цветовых пятна — розовое #EC4899 справа и бирюзовое #06B6D4 слева, как северное сияние. Поверх — едва заметная сетка из точек.
Вверху — короткая подпись в скруглённой плашке, крупный заголовок и поясняющий абзац справа от него.
Ниже — бенто-сетка из четырёх карточек разного размера: высокая карточка на две строки слева, обычная карточка, акцентная карточка с короткой фразой в две строки на лёгкой градиентной подложке из фиолетового, бирюзового и розового и широкая карточка на две колонки. В карточках программы — сцена или день в скруглённой плашке, время бирюзовым цветом, название темы и короткое описание. В углу каждой карточки — круглый значок со стрелкой ↗.
Карточки полупрозрачные, размывают фон под собой, с тонкой светлой обводкой и скруглением 24 пикселя.
Типографика: крупный чистый гротеск, заголовки набраны плотно. Вторая строка акцентной фразы — бирюзовая.
При наведении по карточке скользит мягкий световой блик вслед за курсором, карточка чуть приподнимается, а обводка становится светлее.
Соблюдай ограничения: пятна двигаются медленно и не отвлекают от текста. Текст на стекле всегда контрастный и читается. На планшете бенто-сетка перестраивается в две колонки, на телефоне — в одну, заголовок и абзац встают друг под другом, а пятна становятся меньше и размываются слабее, чтобы страница не тормозила. Если в системе включено уменьшение движения, пятна неподвижны, а карточки реагируют на наведение без плавной анимации. Блок самостоятельный: фон, декор, стили и скрипт лежат только внутри него, у блока есть id. Шрифты бери из стилей проекта. Весь текст не мельче 15 пикселей, основной текст без полупрозрачности, все надписи — на русском. Ни один элемент не выходит за край экрана и не создаёт горизонтальную прокрутку.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: блок выглядит как раздел сайта технологичного продукта мирового уровня — глубокий, светящийся, но спокойный и читаемый.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<section id="programma" class="vb-r4q-program" data-section-name="Программа" data-vibeblock-unique-section="yes" aria-labelledby="vb-r4q-title">
<style>
.vb-r4q-program,.vb-r4q-program *{box-sizing:border-box}.vb-r4q-program input,.vb-r4q-program textarea,.vb-r4q-program select{font:inherit}.vb-r4q-program{position:relative;isolation:isolate;overflow:hidden;padding:104px max(20px,calc((100vw - 1240px)/2));background:#070B1A;color:#F7FAFF;font-family:var(--t-text-font)}.vb-r4q-program:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;background-image:radial-gradient(circle,rgba(224,235,255,.52) 1px,transparent 1.2px);background-size:18px 18px}.vb-r4q-program__aurora{position:absolute;z-index:-2;width:560px;height:380px;border-radius:50%;filter:blur(105px);opacity:.4;pointer-events:none}.vb-r4q-program__aurora--pink{top:330px;right:-220px;background:#EC4899;animation:vb-r4q-drift 22s ease-in-out infinite alternate}.vb-r4q-program__aurora--cyan{top:480px;left:-260px;background:#06B6D4;animation:vb-r4q-drift 25s ease-in-out infinite alternate-reverse}.vb-r4q-program__intro{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}.vb-r4q-program__kicker{display:inline-block;padding:8px 12px;border:1px solid rgba(231,240,255,.22);border-radius:999px;background:rgba(20,28,55,.56);font-family:var(--t-text-font);font-size:15px;font-weight:700;color:#F3F6FF}.vb-r4q-program__title{margin:15px 0 0;font-family:var(--t-headline-font);font-size:clamp(34px,4.5vw,58px);line-height:1;letter-spacing:-.04em;text-wrap:balance}.vb-r4q-program__copy{max-width:390px;margin:0;font-family:var(--t-text-font);font-size:16px;line-height:1.5;color:#EEF3FF}.vb-r4q-program__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr .9fr;grid-template-rows:260px 260px;gap:16px}.vb-r4q-program__card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border:1px solid rgba(235,243,255,.23);border-radius:24px;background:rgba(18,27,55,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 45px rgba(0,0,0,.15);backdrop-filter:blur(16px);transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s ease}.vb-r4q-program__card:hover{transform:translateY(-5px);border-color:rgba(234,244,255,.5)}.vb-r4q-program__card:after{content:"";position:absolute;width:230px;height:230px;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.18),transparent 66%);opacity:0;transition:opacity .35s ease;pointer-events:none}.vb-r4q-program__card:hover:after{opacity:1}.vb-r4q-program__card--large{grid-row:span 2}.vb-r4q-program__card--wide{grid-column:span 2}.vb-r4q-program__label{align-self:flex-start;margin-bottom:auto;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(9,14,33,.52);font-family:var(--t-text-font);font-size:15px;font-weight:700;color:#F8FBFF}.vb-r4q-program__time{margin:0 0 12px;font-family:var(--t-text-font);font-size:16px;font-weight:750;color:#8FEAF1}.vb-r4q-program__name{margin:0;font-family:var(--t-headline-font);font-size:clamp(24px,2.5vw,34px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}.vb-r4q-program__caption{margin:10px 0 0;font-family:var(--t-text-font);font-size:15px;line-height:1.45;font-weight:600;color:#F0F5FF}.vb-r4q-program__plain{justify-content:center;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(6,182,212,.14),rgba(236,72,153,.2))}.vb-r4q-program__plaintext{max-width:280px;margin:0;font-family:var(--t-headline-font);font-size:27px;line-height:1.08;letter-spacing:-.035em}.vb-r4q-program__plaintext span{color:#9CEEF3}.vb-r4q-program__arrow{position:absolute;right:20px;bottom:20px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:rgba(12,20,43,.52);font-family:var(--t-text-font);font-size:20px;color:#fff}@keyframes vb-r4q-drift{to{transform:translate(-100px,35px) scale(1.08)}}@media(max-width:960px){.vb-r4q-program__grid{grid-template-columns:1fr 1fr;grid-template-rows:290px 260px 260px}.vb-r4q-program__card--wide{grid-column:auto}.vb-r4q-program__card--large{grid-row:span 2}}@media(max-width:640px){.vb-r4q-program{padding:72px 20px}.vb-r4q-program__intro{display:block}.vb-r4q-program__copy{margin-top:18px}.vb-r4q-program__grid{display:flex;flex-direction:column;gap:14px}.vb-r4q-program__card{min-height:270px}.vb-r4q-program__card--large{min-height:390px}.vb-r4q-program__aurora{width:400px;height:280px;filter:blur(65px)}.vb-r4q-program__aurora--pink{top:330px}.vb-r4q-program__aurora--cyan{top:620px}}@media(prefers-reduced-motion:reduce){.vb-r4q-program__aurora{animation:none}.vb-r4q-program__card{transition:none}}
</style>
<div class="vb-r4q-program__aurora vb-r4q-program__aurora--pink"></div><div class="vb-r4q-program__aurora vb-r4q-program__aurora--cyan"></div>
<header class="vb-r4q-program__intro"><div><span class="vb-r4q-program__kicker">Без параллельных треков</span><h2 id="vb-r4q-title" class="vb-r4q-program__title">Программа, в которой всё связано</h2></div><p class="vb-r4q-program__copy">Продукты, инженерия, дизайн и управление — в одном разговоре о том, как создавать важное.</p></header>
<div class="vb-r4q-program__grid">
<article class="vb-r4q-program__card vb-r4q-program__card--large"><span class="vb-r4q-program__label">Сцена «Север»</span><p class="vb-r4q-program__time">День 1 · 10:00–18:30</p><h3 class="vb-r4q-program__name">Продукты, в которые возвращаются</h3><p class="vb-r4q-program__caption">Стратегия, пользовательский опыт и решения, которые выдерживают реальность.</p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
<article class="vb-r4q-program__card"><span class="vb-r4q-program__label">Сцена «Полюс»</span><p class="vb-r4q-program__time">День 1 · 12:40</p><h3 class="vb-r4q-program__name">Инженерия без шума</h3><p class="vb-r4q-program__caption">Надёжные системы, культура и скорость.</p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
<article class="vb-r4q-program__card vb-r4q-program__plain"><p class="vb-r4q-program__plaintext">Сложные вопросы.<br><span>Честные ответы.</span></p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
<article class="vb-r4q-program__card vb-r4q-program__card--wide"><span class="vb-r4q-program__label">День 2</span><p class="vb-r4q-program__time">11:00–17:30</p><h3 class="vb-r4q-program__name">Люди, которые собирают будущее</h3><p class="vb-r4q-program__caption">Лидерство, команды и сообщество, способное двигать индустрию дальше.</p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
</div>
<script>(function(){var r=document.getElementById('programma');if(!r)return;r.querySelectorAll('.vb-r4q-program__card').forEach(function(el){el.addEventListener('pointermove',function(e){var b=el.getBoundingClientRect();el.style.setProperty('--mx',(e.clientX-b.left)+'px');el.style.setProperty('--my',(e.clientY-b.top)+'px')})})})();</script>
</section>
<style>
.vb-r4q-program,.vb-r4q-program *{box-sizing:border-box}.vb-r4q-program input,.vb-r4q-program textarea,.vb-r4q-program select{font:inherit}.vb-r4q-program{position:relative;isolation:isolate;overflow:hidden;padding:104px max(20px,calc((100vw - 1240px)/2));background:#070B1A;color:#F7FAFF;font-family:var(--t-text-font)}.vb-r4q-program:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;background-image:radial-gradient(circle,rgba(224,235,255,.52) 1px,transparent 1.2px);background-size:18px 18px}.vb-r4q-program__aurora{position:absolute;z-index:-2;width:560px;height:380px;border-radius:50%;filter:blur(105px);opacity:.4;pointer-events:none}.vb-r4q-program__aurora--pink{top:330px;right:-220px;background:#EC4899;animation:vb-r4q-drift 22s ease-in-out infinite alternate}.vb-r4q-program__aurora--cyan{top:480px;left:-260px;background:#06B6D4;animation:vb-r4q-drift 25s ease-in-out infinite alternate-reverse}.vb-r4q-program__intro{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}.vb-r4q-program__kicker{display:inline-block;padding:8px 12px;border:1px solid rgba(231,240,255,.22);border-radius:999px;background:rgba(20,28,55,.56);font-family:var(--t-text-font);font-size:15px;font-weight:700;color:#F3F6FF}.vb-r4q-program__title{margin:15px 0 0;font-family:var(--t-headline-font);font-size:clamp(34px,4.5vw,58px);line-height:1;letter-spacing:-.04em;text-wrap:balance}.vb-r4q-program__copy{max-width:390px;margin:0;font-family:var(--t-text-font);font-size:16px;line-height:1.5;color:#EEF3FF}.vb-r4q-program__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr .9fr;grid-template-rows:260px 260px;gap:16px}.vb-r4q-program__card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border:1px solid rgba(235,243,255,.23);border-radius:24px;background:rgba(18,27,55,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 45px rgba(0,0,0,.15);backdrop-filter:blur(16px);transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s ease}.vb-r4q-program__card:hover{transform:translateY(-5px);border-color:rgba(234,244,255,.5)}.vb-r4q-program__card:after{content:"";position:absolute;width:230px;height:230px;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.18),transparent 66%);opacity:0;transition:opacity .35s ease;pointer-events:none}.vb-r4q-program__card:hover:after{opacity:1}.vb-r4q-program__card--large{grid-row:span 2}.vb-r4q-program__card--wide{grid-column:span 2}.vb-r4q-program__label{align-self:flex-start;margin-bottom:auto;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(9,14,33,.52);font-family:var(--t-text-font);font-size:15px;font-weight:700;color:#F8FBFF}.vb-r4q-program__time{margin:0 0 12px;font-family:var(--t-text-font);font-size:16px;font-weight:750;color:#8FEAF1}.vb-r4q-program__name{margin:0;font-family:var(--t-headline-font);font-size:clamp(24px,2.5vw,34px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}.vb-r4q-program__caption{margin:10px 0 0;font-family:var(--t-text-font);font-size:15px;line-height:1.45;font-weight:600;color:#F0F5FF}.vb-r4q-program__plain{justify-content:center;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(6,182,212,.14),rgba(236,72,153,.2))}.vb-r4q-program__plaintext{max-width:280px;margin:0;font-family:var(--t-headline-font);font-size:27px;line-height:1.08;letter-spacing:-.035em}.vb-r4q-program__plaintext span{color:#9CEEF3}.vb-r4q-program__arrow{position:absolute;right:20px;bottom:20px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:rgba(12,20,43,.52);font-family:var(--t-text-font);font-size:20px;color:#fff}@keyframes vb-r4q-drift{to{transform:translate(-100px,35px) scale(1.08)}}@media(max-width:960px){.vb-r4q-program__grid{grid-template-columns:1fr 1fr;grid-template-rows:290px 260px 260px}.vb-r4q-program__card--wide{grid-column:auto}.vb-r4q-program__card--large{grid-row:span 2}}@media(max-width:640px){.vb-r4q-program{padding:72px 20px}.vb-r4q-program__intro{display:block}.vb-r4q-program__copy{margin-top:18px}.vb-r4q-program__grid{display:flex;flex-direction:column;gap:14px}.vb-r4q-program__card{min-height:270px}.vb-r4q-program__card--large{min-height:390px}.vb-r4q-program__aurora{width:400px;height:280px;filter:blur(65px)}.vb-r4q-program__aurora--pink{top:330px}.vb-r4q-program__aurora--cyan{top:620px}}@media(prefers-reduced-motion:reduce){.vb-r4q-program__aurora{animation:none}.vb-r4q-program__card{transition:none}}
</style>
<div class="vb-r4q-program__aurora vb-r4q-program__aurora--pink"></div><div class="vb-r4q-program__aurora vb-r4q-program__aurora--cyan"></div>
<header class="vb-r4q-program__intro"><div><span class="vb-r4q-program__kicker">Без параллельных треков</span><h2 id="vb-r4q-title" class="vb-r4q-program__title">Программа, в которой всё связано</h2></div><p class="vb-r4q-program__copy">Продукты, инженерия, дизайн и управление — в одном разговоре о том, как создавать важное.</p></header>
<div class="vb-r4q-program__grid">
<article class="vb-r4q-program__card vb-r4q-program__card--large"><span class="vb-r4q-program__label">Сцена «Север»</span><p class="vb-r4q-program__time">День 1 · 10:00–18:30</p><h3 class="vb-r4q-program__name">Продукты, в которые возвращаются</h3><p class="vb-r4q-program__caption">Стратегия, пользовательский опыт и решения, которые выдерживают реальность.</p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
<article class="vb-r4q-program__card"><span class="vb-r4q-program__label">Сцена «Полюс»</span><p class="vb-r4q-program__time">День 1 · 12:40</p><h3 class="vb-r4q-program__name">Инженерия без шума</h3><p class="vb-r4q-program__caption">Надёжные системы, культура и скорость.</p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
<article class="vb-r4q-program__card vb-r4q-program__plain"><p class="vb-r4q-program__plaintext">Сложные вопросы.<br><span>Честные ответы.</span></p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
<article class="vb-r4q-program__card vb-r4q-program__card--wide"><span class="vb-r4q-program__label">День 2</span><p class="vb-r4q-program__time">11:00–17:30</p><h3 class="vb-r4q-program__name">Люди, которые собирают будущее</h3><p class="vb-r4q-program__caption">Лидерство, команды и сообщество, способное двигать индустрию дальше.</p><span class="vb-r4q-program__arrow" aria-hidden="true">↗</span></article>
</div>
<script>(function(){var r=document.getElementById('programma');if(!r)return;r.querySelectorAll('.vb-r4q-program__card').forEach(function(el){el.addEventListener('pointermove',function(e){var b=el.getBoundingClientRect();el.style.setProperty('--mx',(e.clientX-b.left)+'px');el.style.setProperty('--my',(e.clientY-b.top)+'px')})})})();</script>
</section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
