Галерея работ

Заголовок по словам + список с летающим превью + фото-грид со шторками + зум в рамке. Готовая секция портфолио.

Наводите на пункты и карточки.

01Горный бренд 02Водопад-кампания 03Городская айдентика

Код

<!-- КОМБО = заголовок по словам + список ссылок с летающим превью
     + грид фото со шторками clip-path + зум внутри рамки -->
<section class="works">
  <h2 class="words" data-text="Избранные работы"></h2>

  <div class="list">
    <a href="/case-1" data-prev="a.jpg"><em>01</em> Кейс один</a>
    <a href="/case-2" data-prev="b.jpg"><em>02</em> Кейс два</a>
  </div>
  <img class="preview" alt="">      <!-- следует за курсором, лерп 0.12 -->

  <div class="grid">
    <span class="rv rv-left"   style="background-image:url(a.jpg)"></span>
    <span class="rv rv-bottom" style="background-image:url(b.jpg)"></span>
    <span class="rv rv-center" style="background-image:url(c.jpg)"></span>
  </div>
</section>

<!-- механики берутся из эффектов библиотеки:
     «По словам» + «Превью у ссылок» + «Шторки clip-path» + «Ховеры»
     (код каждого — на его странице) -->

Промпт для ИИ

Собери секцию портфолио из связки эффектов: (1) заголовок появляется по словам (каскад 90мс) при входе в кадр; (2) список кейсов с номерами — при наведении рядом с курсором всплывает фото проекта (absolute img, лерп-слежение 0.12, scale .85 rotate -3° → 1/3°) и меняется по data-prev; (3) ниже грид фото, раскрывающихся шторками clip-path в трёх направлениях при появлении; (4) в раскрытых фото — зум scale(1.08) внутри неподвижной рамки по ховеру. Строки списка при ховере краснеют и сдвигаются на 14px.