Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dyed-in-the-wool/llms.txt

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

​
Overview

TieDyeBackground is a decorative, full-page background component that renders SVG concentric or turbulence-displaced color rings behind each page. Because it is position: absolute (absolute inset-0) and pointer-events-none, it sits entirely behind page content and never intercepts clicks, taps, or keyboard navigation. It is also pulled behind the stacking context with -z-10 so it cannot overlap the navigation header or cursor. Each instance generates a unique filter ID using useMemo so that multiple instances (e.g. nested routes or modals) never clash.

​
Props

PropTypeDefaultDescription
variant'spiral' | 'bullseye' | 'crumple''spiral'Selects the SVG pattern style
opacitynumber0.4Overall opacity of the pattern layer
colorsstring[]["#0d9488","#2dd4bf","#99f6e4","#1e3a8a","#db2777"]Array of five hex colors mapped to radial gradient stops
All three props are optional — the component renders with sensible defaults if omitted.

​
Usage

Each page in the portfolio uses a different variant and opacity tuned to its content density. The colors prop is only overridden when a page needs a palette that differs from the global dye-* defaults. 
// pages/Home.jsx
<TieDyeBackground variant="spiral" opacity={0.6} />

​
SVG Technique

All three variants share the same SVG <defs> block containing a <radialGradient> and a <filter>. The filter chains feTurbulence → feDisplacementMap → feGaussianBlur → feComponentTransfer to organically warp the gradient fills.

​
bullseye

Three concentric SVG <circle> elements are drawn at radii of 80%, 40%, and 15% of the SVG viewport, each filled from the shared radialGradient or a specific palette color. The outermost circle carries the full gradient; the inner rings use colors[2] and colors[4] at reduced opacity to create a target-ring effect.

​
crumple

A full-viewport <rect> is filled with the radial gradient and then passed through the displacement filter at a higher scale (150 vs 80 for other variants) with a higher feTurbulence base frequency (0.015 vs 0.008). This produces a tight, crumpled-fabric distortion rather than a gentle swirl.

​
spiral

A large <circle> filled with the radial gradient is wrapped in a motion.g that rotates continuously at 1 revolution per 100 seconds (duration: 100, repeat: Infinity, ease: 'linear'). Combined with the displacement filter, the slow rotation creates the illusion of a lazily drifting spiral.

​
Customization

Swap the color palette — pass any five hex colors as the colors prop. The array maps directly to the radial gradient stops at 0%, 30%, 60%, 85%, and 100%: 
<TieDyeBackground
  variant="bullseye"
  opacity={0.4}
  colors={["#fff7ed", "#fed7aa", "#fb923c", "#ea580c", "#7c2d12"]}
/>
Control boldness with opacity — the prop is applied to the wrapping div, so it scales the entire pattern layer uniformly without affecting the colours of page content above it.
Set opacity below 0.2 on pages with a lot of text content. At higher values the pattern can compete with body copy and reduce readability, especially on the lighter palette colors. The Projects page uses opacity={0.15} as a good baseline for content-heavy layouts.

Build docs developers (and LLMs) love

Get started for freeTalk to us