Мыльная плёнка переливается интерференционными цветами: сверху она тоньше, снизу толще, а радужные полосы медленно стекают и закручиваются.
Курсор истончает плёнку под собой и увлекает её за движением, оставляя завихрения. Оттенок задаёт общий цвет отражения, а сила завихрений меняет, насколько плёнка перемешана.
Скопируйте эти файлы в components/thin-film/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ThinFilm } from "@/components/thin-film/thin-film";
export function Hero() {
return (
<div className="h-[480px] w-full">
<ThinFilm intensity={1} />
</div>
);
}speed?Множитель скорости анимации
Тип number·По умолчанию 1
intensity?Яркость отражения, от 0 до 2
Тип number·По умолчанию 1
color?Оттенок отражения
Тип string·По умолчанию "#ffffff"
swirl?Сила завихрений плёнки
Тип number·По умолчанию 1
interactive?Реагировать на курсор
Тип boolean·По умолчанию true
className?Классы холста
Тип string