Cursors

Image trail

A trail of images follows the cursor: every few dozen pixels of travel the next image in the set pops up at the cursor, lands at a random angle, holds for a second and dissolves like a phantom, drifting upward. The newest is always on top, the old ones get pushed out. The classic image trail with no animation library.

What you can change

images — your own images (work, frames, covers); the set cycles
threshold — the step between images in px; size — the image side
lifetime — the life span in ms; rotate — the rotation spread in degrees; max — how many hang at once

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Step, px

Size, px

Lifetime, ms

Rotation spread

At once

Caption

Caption color

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/cursor-005?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Step, px

Size, px

Lifetime, ms

Rotation spread

At once

Caption

Caption color

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/cursor-005?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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

One file, zero dependencies, "use client", palette in local --vibeui-cursor-005-* variables. It takes the theme from the environment via light-dark() plus a rule for the .dark class; the field background is background with automatic scheme detection. The field is 16:9 with overflow:hidden. A pool of max <img> elements sits in the markup up front and is reused in a loop: on pointermove the distance from the last spawn point is measured, and if it is ≥ threshold the next ghost gets coordinates (--vibeui-cursor-005-x/y), a random angle within ±rotate (--vibeui-cursor-005-r), a z-index from a counter and a CSS animation restart by removing data-live with a forced reflow. The images set cycles independently of the pool size — src is swapped only when it differs. The vibeui-cursor-005-ghost animation lasts lifetime ms: a pop with overshoot (scale 0.55 → 1.04 → 1 by 26%), a hold until 62%, a dissolve drifting 24px up at scale 0.82. The point is the image center: translate(-50%) inside calc. pointerdown also spawns a ghost so a tap on touch gives feedback; touch-action:pan-y leaves the vertical gesture to the page, the horizontal one drives the trail. The caption sits in the center and fades after the first touch (data-touched). Under prefers-reduced-motion there is no animation: a ghost is placed and stays until the next one in the loop replaces it.