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.

TieDyeSwirl is a decorative background element that renders the theme’s signature tie-dye conic gradient. It provides the Artisan Developer portfolio with its most recognisable visual identity mark — a richly coloured, hand-applied-looking swirl of cyan, violet, magenta, rose, orange, yellow, lime, and teal — without affecting page layout or interactivity. Because the component is absolutely positioned with overflow-hidden and carries pointer-events-none, it sits silently beneath all interactive content.

​
CSS utility

The visual effect is driven entirely by the .tie-dye-bg utility class defined in assets/main.css: 
.tie-dye-bg {
  background: conic-gradient(
    from 0deg at 50% 50%,
    #06b6d4, #8b5cf6, #d946ef, #fb7185,
    #fb923c, #fde047, #a3e635, #2dd4bf, #06b6d4
  );
  filter: url(#tie-dye-filter);
}
The conic gradient sweeps all eight theme accent colours in order around a central origin point. The final stop repeats the first colour (#06b6d4) so the hue circle closes seamlessly without a hard edge.

​
SVG filter

The filter: url(#tie-dye-filter) property references an inline SVG <filter> element that TieDyeSwirl renders into the DOM inside a visually hidden <svg> tag. The filter pipeline consists of three stages:
  1. feTurbulence — generates fractal noise at baseFrequency: 0.015 with 3 octaves, producing a coarse organic warp map.
  2. feDisplacementMap — displaces the source graphic by up to 50 pixels using the red channel for x and the green channel for y, bending the gradient edges so they appear hand-applied rather than digitally perfect.
  3. feGaussianBlur + feComposite — softens the displaced result by stdDeviation: 4, then masks the blur back to the original shape using operator: in, keeping the edges tidy while preserving the interior softness.
The same <defs> block also defines #paper-texture, used by .marbled-paper elsewhere in the theme, so TieDyeSwirl serves as the single source of all custom SVG filters on the page.

​
Usage context

TieDyeSwirl appears in four locations across the theme:
LocationTailwind modifiers applied
Homepage hero background layeropacity-40, mix-blend-multiply, animate-spin-slow
SwirlNav desktop backgroundopacity-20
Mobile menu backgroundopacity-10
FabricStripTimeline strip backgroundopacity-80
In every location the component occupies a absolute -inset-[50%] w-[200%] h-[200%] container — deliberately oversized at 200 % of its parent — so that the .animate-spin-slow rotation never reveals a corner gap as the gradient wheel turns.
TieDyeSwirl is fully decorative. All placement, opacity, blend mode, and animation behaviour are controlled by Tailwind utility classes applied to the component in each page context. The component itself accepts only an optional className prop and passes it directly to its outermost wrapper <div>.

Build docs developers (and LLMs) love

Get started for freeTalk to us