Тёмный экран-обложка с логотипом, над которым работает волновая симуляция воды на WebGL. Курсор оставляет за собой расходящиеся круги: волны преломляют логотип, отражаются от краёв и вспыхивают бликами на гребнях, постепенно затухая.
Размер капли, сила волны, преломление и яркость бликов меняются на лету без пересоздания сцены. Вместо картинки можно вывести крупный текст.
Скопируйте эти файлы в components/liquid-ripple/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { LiquidRipple } from "@/components/liquid-ripple/liquid-ripple";
export default function Page() {
return (
<div className="relative h-screen w-full overflow-hidden bg-black">
<LiquidRipple imagePath="/logo.svg" strength={2} distortion={0.3} />
</div>
);
}imagePath?Картинка, которую преломляют волны
Тип string·По умолчанию "/web-components/liquid-ripple/astra-mark.svg"
text?Текст вместо картинки, если imagePath пустой
Тип string
logoScale?Доля экрана, которую занимает картинка
Тип number·По умолчанию 0.5
radius?Радиус капли под курсором в долях экрана
Тип number·По умолчанию 0.02
strength?Сила возмущения от курсора
Тип number·По умолчанию 2
distortion?Сила преломления картинки волнами
Тип number·По умолчанию 0.3
specular?Яркость бликов на гребнях
Тип number·По умолчанию 1.5
className?Дополнительные классы слоя
Тип string