Cursors
ASCII fluid cursor
A field of ASCII characters where a cloud spreads behind the cursor: a real fluid runs underneath — splat, advection, pressure — and its density picks the character.
What you can change
- color and backgroundColor — ink and paper, if the component palette does not fit
- cellSize — the size of one character cell, that is the ASCII grain
- force, dissipation, brush — splat strength, trail length and brush radius
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/cursor-001?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
Self-contained: one file, zero dependencies, palette in local --vibeui-cursor-001-* variables. Picks up the theme through light-dark() plus a rule for the .dark class. Inside runs a WebGL fluid simulation following stable fluids: velocity and dye splats at the cursor, advection, divergence, 14 Jacobi pressure iterations, gradient subtraction, dye advection. The fields live in six 180×180 textures and do not depend on the block size; cellSize only sets how coarse the ASCII grain is. Velocity is packed into an RGBA texture with an enc/dec pair, so no float extensions are needed and plain webgl1 is enough. The character is picked by dye density from a glyph atlas drawn once on a 2D canvas. Ink and paper colours are read from empty probe nodes: the shader needs numbers, while the CSS variables hold light-dark(). While the cursor is outside, the field stirs itself (animate) so the catalog card is never dead. Under prefers-reduced-motion the simulation is not stepped and the flicker is off.
Tags
- cursor
- ascii
- fluid
- webgl
- shader
- trail
- pointer
- interactive
- animated
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…