Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/artisan-developer/llms.txt

Use this file to discover all available pages before exploring further.

DyeCursor creates a visual cursor trail by spawning small colored circles at the mouse position as you move around the page. Each circle expands and fades over 800 milliseconds using Framer Motion’s animate and exit props, giving the impression of ink drops dissolving into the page. The component mounts as a fixed overlay and is entirely transparent to pointer events, so it never interferes with clicking, hovering, or selecting content.

​
Color palette

The drop colors cycle through an eight-color array that spans the full visible spectrum in a tie-dye spirit: 
const colors = [
  '#06b6d4', // cyan
  '#8b5cf6', // violet
  '#d946ef', // magenta
  '#fb7185', // rose
  '#fb923c', // orange
  '#fde047', // yellow
  '#a3e635', // lime
  '#2dd4bf', // teal
];
Each new drop takes the next color in the array via a modulo index. After all eight have appeared the sequence repeats from cyan.

​
Drop behavior

Each dye drop is a circular motion.div with the following characteristics:
PropertyValue
Size20 × 20 px
Shapeborder-radius: 50%
Blend modemix-blend-mode: multiply
Entry opacity0.8
Exit opacity0
Entry scale1
Exit scale3
Entry blur2px
Exit blur8px
Animation duration0.8s
EasingeaseOut
A throttle gate prevents new drops from spawning more than once every 30 milliseconds, keeping the effect smooth without flooding the DOM. At most 20 drops are alive at any time — when a new drop is added the array is sliced to the last 20 entries. Each drop also has a hard expiry: after 500 milliseconds it is removed from state, and Framer Motion’s AnimatePresence plays its exit animation as it leaves.

​
Overlay settings

The component renders a single wrapper div that covers the entire viewport:
CSS propertyValue
positionfixed
inset0
z-index100
pointer-eventsnone
overflowhidden
The drops are rendered inside a Framer Motion AnimatePresence block so that exit animations play out even after each drop is removed from the React state array.
DyeCursor is purely decorative. Because the overlay uses pointer-events: none, it never intercepts clicks, hovers, drag events, or focus changes on the underlying page content. Accessibility is unaffected.
To disable the cursor trail effect entirely, remove the <DyeCursor /> usage from assets/main.js. No other files need to change — the component file itself can remain in place, and removing its single usage is enough to stop it from mounting.

Build docs developers (and LLMs) love

Get started for freeTalk to us