Чёрная капсула в духе Dynamic Island на iPhone. Она пружинисто меняет размер и форму, перетекая между одиннадцатью состояниями: входящий звонок, таймер, запись голоса, музыка, AirDrop, низкий заряд, активный вызов, Локатор и запись экрана.
Состояние выбирается в панели «Настройка». Упругость пружины подобрана отдельно для каждого перехода, а содержимое проявляется из лёгкого размытия.
Скопируйте эти файлы в components/dynamic-island/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { DynamicIslandShowcase } from "@/components/dynamic-island/dynamic-island";
export default function Page() {
return (
<div className="relative h-[640px] w-full">
<DynamicIslandShowcase requestedView="music" />
</div>
);
}requestedView?Состояние, в которое капсула перетекает при изменении пропа
Тип IslandView·По умолчанию "idle"
color?Цвет капсулы
Тип string·По умолчанию #000000
radius?Скругление капсулы в пикселях
Тип number·По умолчанию 32
minWidth?Минимальная ширина капсулы в пикселях
Тип number·По умолчанию 100
scale?Масштаб капсулы
Тип number·По умолчанию 1
className?Дополнительные классы корневого блока
Тип string