Крупное поле ввода без рамок, в котором набранный текст выглядит как заголовок. Пока поле пустое, справа стоит стрелка, а как только появляется текст — подсказка об отправке.
После нажатия Enter или кнопки текст перерисовывается на холст и распадается на отдельные пиксели: они дрожат, уменьшаются и исчезают волной справа налево, после чего поле очищается и снова готово к вводу.
Скопируйте эти файлы в components/vanish-form/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { VanishForm } from "@/components/vanish-form/vanish-form";
export function Subscribe() {
return (
<div className="border-b border-black/10">
<VanishForm placeholder="Ваша почта" onSubmit={(event) => event.preventDefault()} />
</div>
);
}placeholder?Подсказка в пустом поле
Тип string
submitHint?Надпись справа, когда в поле есть текст
Тип string·По умолчанию "[ ввод ↵ ]"
textColor?Цвет текста и частиц, по умолчанию чёрный
Тип string
vanishSpeed?На сколько пикселей за кадр сдвигается волна исчезновения
Тип number·По умолчанию 8
onChange?Вызывается при вводе
Тип (event: ChangeEvent<HTMLInputElement>) => void
onSubmit?Вызывается при отправке
Тип (event: FormEvent<HTMLFormElement>) => void
className?Классы формы
Тип string