VibeUI
РусEng
Войти

Курсоры

ASCII-жидкость за курсором

Поле ASCII-символов, в котором за курсором расходится облако: под символами считается настоящая жидкость — вливание, адвекция, давление, — а её плотность выбирает символ.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • color и backgroundColor — цвета символов и фона, если не устраивает палитра компонента
  • cellSize — крупность знакоместа, то есть «зерно» ASCII
  • force, dissipation, brush — сила вливания, длина следа и радиус кисти

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
ASCII-жидкость за курсором — Поле ASCII-символов, в котором за курсором расходится облако: под символами считается настоящая жидкость — вливание, адвекция, давление, — а её плотность выбирает символ.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/cursor-001?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Cursor001 cellSize={12} dissipation={0.05} brush={0.55} />

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Цвет символов
color · по умолчанию: #121212
Цвет фона
backgroundColor · по умолчанию: #ffffff
Знакоместо
cellSize · по умолчанию: 12
Затухание следа
dissipation · по умолчанию: 0.05
Радиус кисти
brush · по умолчанию: 0.55
Сила вливания
force · по умолчанию: 1
Дрейф в покое
animate · по умолчанию: включено
Набор символов
charset · по умолчанию: .'`^",:;Il!i><~+_-?][}{1)(|\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$

Ещё в разделе «Курсоры»

Частые вопросы

Как установить компонент «ASCII-жидкость за курсором» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «ASCII-жидкость за курсором»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «ASCII-жидкость за курсором»?
Можно менять: color и backgroundColor — цвета символов и фона, если не устраивает палитра компонента; cellSize — крупность знакоместа, то есть «зерно» ASCII; force, dissipation, brush — сила вливания, длина следа и радиус кисти. Сохранить как есть: локальную палитру --vibeui-cursor-001-* — не подменяйте её токенами вашей темы (bg-background, text-foreground и подобными); порядок шагов симуляции в кадре: splat → адвекция скорости → дивергенция → итерации давления → вычитание градиента → адвекция краски; перестановка ломает жидкость; упаковку скорости и давления парой enc/dec в диапазон 0…1 — без неё нужны float-текстуры, которых на части устройств нет.
Компонент «ASCII-жидкость за курсором» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/cursor-001.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --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
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…