VibeUI
РусEng
Войти

О компании

История пары плёночной лентой

«Наша история» плёночной лентой: кадры с перфорацией по краям идут горизонтальной прокруткой со snap'ом, каждый чуть повёрнут по-своему и выпрямляется по наведению, под фото дата, название и пара строк. Слева заголовок курсивным serif'ом, стрелки листают на ширину кадра, свайп и колесо работают сами.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • eyebrow, title, lede, frames (date, title, text, image, imageAlt)
  • prevLabel, nextLabel
  • accent и background, tone

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
История пары плёночной лентой — «Наша история» плёночной лентой: кадры с перфорацией по краям идут горизонтальной прокруткой со snap'ом, каждый чуть повёрнут по-своему и выпрямляется по наведению, под фото дата, название и пара строк. Слева заголовок курсивным serif'ом, стрелки листают на ширину кадра, свайп и колесо работают сами.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/about-011?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<About011
  eyebrow="Наша история"
  title="Шесть лет, четыре кадра"
  frames={[
    { date: "Октябрь 2021", title: "Кофе у окна", text: "Познакомились в очереди за кофе.", image: "/photos/story-01.webp" },
    { date: "Май 2027", title: "Пирс на закате", text: "Артём встал на одно колено.", image: "/photos/story-04.webp" },
  ]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
title · по умолчанию: Шесть лет, четыре кадра
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «О компании»

Частые вопросы

Как установить компонент «История пары плёночной лентой» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «История пары плёночной лентой»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-130.
Что можно поменять в компоненте «История пары плёночной лентой»?
Можно менять: eyebrow, title, lede, frames (date, title, text, image, imageAlt); prevLabel, nextLabel; accent и background, tone. Сохранить как есть: импорты card-130 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; плёночные кадры с перфорацией и номером в углу — главный образ секции; разный наклон кадров по nth-child и выпрямление по наведению.
Компонент «История пары плёночной лентой» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/about-011.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует card-130 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, «use client» ради стрелок (scrollBy на ширину первого кадра) и колеса: вертикальный deltaY над лентой переводится в горизонтальную прокрутку, на краях ленты — отдаётся странице. Лента — <ul> с overflow-x:auto, scroll-snap-type:x mandatory, скрытым скроллбаром и отрицательными полями до края блока. Кадр — flex-basis min(78cqi,20rem); от 56rem flex:1 1 0 с min-width 15rem и max-width 22rem, так четыре кадра помещаются без прокрутки, а пять и больше уходят в ленту, наклон через --vibeui-about-011-tilt по nth-child, hover выпрямляет и поднимает. Перфорация — repeating-linear-gradient в ::before/::after тёмной плёнки, номер кадра «01A» в углу с mix-blend-mode. Фото 3:2 object-fit:cover с приглушённой насыщенностью. Шапка от 56rem — сетка заголовок/лид слева, стрелки справа. Палитра --vibeui-about-011-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на Georgia и системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.

Теги

  • wedding
  • couple
  • story
  • timeline
  • film
  • filmstrip
  • carousel
  • scroll snap
  • photos
  • serif
  • cream
  • about
  • composite
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…