По нажатию на кнопку по краям блока проявляется мягкая радужная рамка из синего, фиолетового, красного и оранжевого — как свечение экрана при вызове Apple Intelligence. Градиент непрерывно проворачивается по кругу, а степень размытия свечения задаётся отдельно.
При включении звучит короткий звук «свипа». Повторное нажатие плавно гасит рамку.
Скопируйте эти файлы в components/apple-ai-gradient/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { AppleAiGradient } from "@/components/apple-ai-gradient/apple-ai-gradient";
export function Glow() {
return (
<div className="relative h-[480px] overflow-hidden rounded-3xl bg-muted">
<AppleAiGradient intensity="2xl" duration={4} />
</div>
);
}intensity?Размытие свечения
Тип "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"·По умолчанию "xl"
colors?Цвета радужной рамки
Тип string[]·По умолчанию APPLE_GRADIENT_COLORS
duration?Период одного оборота градиента в секундах
Тип number·По умолчанию 5
hint?Подсказка над кнопкой
Тип string·По умолчанию "Нажмите, чтобы увидеть рамку"
turnOnLabel?Текст кнопки, пока рамка видна
Тип string·По умолчанию "Включить Apple Intelligence"
turnOffLabel?Текст кнопки, пока рамка скрыта
Тип string·По умолчанию "Отключить Apple Intelligence"
sound?Звук при включении
Тип boolean·По умолчанию true
className?Классы корневого блока
Тип string