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.

ColorWheel is a decorative element that renders a circular div filled with the .tie-dye-bg conic gradient and set spinning by the .animate-spin-slow CSS animation. It creates a slowly rotating colour reference point that ties the projects section’s interactive wheel interface back to the theme’s hand-crafted aesthetic identity. Unlike TieDyeSwirl — which fills large background areas — ColorWheel is a small, self-contained disc used as a focal accent or hub element.

​
Animation

ColorWheel uses the .animate-spin-slow keyframe defined in assets/main.css: 
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}
The rotation is perfectly linear with no easing, completing one full revolution every 20 seconds. A linear timing function is used deliberately: ease-in or ease-out variants would cause the conic gradient to appear to accelerate and decelerate, which would draw the eye. The constant speed keeps the element animated but unobtrusive.

​
Relationship to DyeCursor

ColorWheel uses the same eight-colour palette as the DyeCursor trail effect: 
#06b6d4  — cyan
#8b5cf6  — violet
#d946ef  — magenta
#fb7185  — rose
#fb923c  — orange
#fde047  — yellow
#a3e635  — lime
#2dd4bf  — teal
This is not coincidental. The conic gradient sweeps these colours in the same order in both the .tie-dye-bg background utility and the DyeCursor’s per-dot colour cycling. When a visitor moves their mouse across the page, the cursor trail echoes the same colour sequence that the spinning wheel in the background is already expressing. This creates a subtle visual coherence between the passive background decoration and the interactive cursor effect, reinforcing the idea that the entire page is part of the same colour system.

​
Usage context

ColorWheel appears in two locations in the theme: ColorWheel projects hub — in the ColorWheel component (which also implements the full interactive project wheel), a small w-8 h-8 rounded-full tie-dye-bg animate-spin-slow disc sits at the exact centre of the radial project selector, acting as the axle hub around which the project spokes rotate. It is layered at z-20 above the spokes so it always reads as the centre point. Section hero accents — smaller instances of the spinning disc are used as accent decorations in section headers, providing a splash of motion without the complexity of a full background layer. In both contexts the element is styled with rounded-full to produce a perfect circle and relies entirely on .tie-dye-bg for its fill — no additional colour props are needed.
.animate-spin-slow runs at 20 seconds per revolution. This pace is intentionally slow enough that the rotation is perceptible as gentle movement rather than active spinning, ensuring the element adds life to the page without becoming a distraction during reading.

Build docs developers (and LLMs) love

Get started for freeTalk to us