Курсоры
ASCII-жидкость за курсором
Поле ASCII-символов, в котором за курсором расходится облако: под символами считается настоящая жидкость — вливание, адвекция, давление, — а её плотность выбирает символ.
Что можно поменять
- color и backgroundColor — цвета символов и фона, если не устраивает палитра компонента
- cellSize — крупность знакоместа, то есть «зерно» ASCII
- force, dissipation, brush — сила вливания, длина следа и радиус кисти
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/cursor-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-cursor-001-*. Тему берёт из окружения через light-dark() плюс строку для класса .dark. Внутри — симуляция жидкости на WebGL по схеме stable fluids: вливание скорости и краски в точку курсора, адвекция, дивергенция, 14 итераций Якоби для давления, вычитание градиента, адвекция краски. Поля живут в шести текстурах 180×180 и от размера блока не зависят; знакоместо (cellSize) задаёт только крупность «зерна». Скорость пакуется в RGBA-текстуру парой enc/dec, поэтому float-расширения WebGL не нужны и компонент работает на обычном webgl1. Символ выбирается по плотности краски из атласа глифов, нарисованного один раз на 2D-канве. Цвета символов и фона снимаются с пустых узлов-пробников: шейдеру нужны числа, а в CSS-переменных стоит light-dark(). Пока курсор снаружи, поле шевелит себя само (animate) — карточка в каталоге не стоит мёртвой. При prefers-reduced-motion симуляция не считается и мерцание выключено.
Теги
- cursor
- ascii
- fluid
- webgl
- shader
- trail
- pointer
- interactive
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…