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.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
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
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.club/c/cursor-005?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…
How to use
<Cursor005
images={["/work/01.jpg", "/work/02.jpg", "/work/03.jpg"]}
caption="Move your cursor"
threshold={80}
size={160}
lifetime={1200}
rotate={12}
max={12}
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Step, px
threshold· default: 80- Size, px
size· default: 160- Lifetime, ms
lifetime· default: 1200- Rotation spread
rotate· default: 12- At once
max· default: 12- Caption
caption· default: Move your cursor- Caption color
accent· default: theme colour- Background
background· default: theme colour
More in Cursors
FAQ
- How do I add Image trail with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Image trail depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Image trail?
- Adapt: 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. Keep as installed: the local --vibeui-cursor-005-* palette — do not swap it for theme tokens; the <img> pool in the markup and the CSS animation restart via data-live with a reflow — do not create elements per move and do not pull in gsap/framer-motion; the distance-based threshold, not a time-based one: the trail has to depend on hand speed.
- Is Image trail free?
- The preview is open to everyone; the source is available with a PRO subscription.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/cursor-005.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
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.
Tags
- cursor
- image trail
- trail
- mouse
- pointer
- gallery
- hover
- phantom
- ghost
- follow
- portfolio
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…