На странице стоит небольшое беззвучное превью, которое крутится по кругу. Когда курсор над ним, рядом появляется надпись с иконкой воспроизведения и мягко следует за указателем.
По клику превью раскрывается в большой плеер: окно вырастает из маленькой области с пружинной анимацией, а фон размывается. У плеера свои кнопки воспроизведения и звука и полоса перемотки, которые прячутся, пока мышь неподвижна. Клик по фону или крестику закрывает окно.
Скопируйте эти файлы в components/video-modal-player/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { VideoModalPlayer } from "@/components/video-modal-player/video-modal-player";
export function Showreel() {
return (
<div className="h-[600px]">
<VideoModalPlayer src="/videos/showreel.mp4" playLabel="Смотреть" />
</div>
);
}srcАдрес видео
Тип string
hint?Подсказка над превью
Тип string·По умолчанию "Нажмите на видео"
playLabel?Надпись у курсора
Тип string·По умолчанию "Play"
previewSize?Размер превью в пикселях, по умолчанию 180
Тип number
previewRadius?Скругление превью в пикселях
Тип number
background?Цвет фона секции
Тип string
openStiffness?Жёсткость пружины раскрытия окна
Тип number·По умолчанию 100
className?Классы секции
Тип string