Skip to main content

Documentation Index

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

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

Color Melt ships 13 components inside the components/ folder. Each one is compiled as a standalone ES module and loaded by the HTML pages that need it via <link rel="modulepreload"> and import statements. The division between decorative effects and portfolio content is intentional — animated blobs, cursor drops, and spiral patterns are kept in separate files so that updating your biography, project descriptions, or contact details never requires touching the visual layer.

​
CursorDrops

File: components/CursorDrops.js CursorDrops renders a stream of soft, blurred color circles that follow the visitor’s cursor across every page. Each drop is a 20×20px circle with a 4px blur, blended using mix-blend-multiply to interact with whatever surface sits beneath it. Color cycle — drops rotate through six dye palette colors in order: 
const colors = ["#FF595E", "#FFCA3A", "#8AC926", "#1982C4", "#6A4C93", "#40E0D0"];
Behavior details:
  • Throttled to fire at most once every 50ms to keep performance stable during fast mouse movement.
  • Maintains a rolling buffer of the last 15 drops in React state. Older drops are removed as new ones are added.
  • Each drop animates from opacity: 0.8, scale: 0.5 to opacity: 0, scale: 2, y: 20 over one second with an easeOut curve, creating a rising-and-fading bubble effect.
  • Rendered inside a fixed inset-0 z-50 overflow-hidden container with pointer-events-none, so drops are never clickable and never block navigation.
Used on: All pages (global mount).

​
LavaBlob

File: components/LavaBlob.js LavaBlob is an animated decorative element that produces the liquid, slowly-morphing shape that anchors the home page’s atmosphere. It uses the .melt-border keyframe animation defined in assets/main.css — a continuous alternating transformation of border-radius values that gives the shape its organic, melting quality. Used on: Home page (index.html).

​
LiquidForm

File: components/LiquidForm.js LiquidForm is the themed contact form used on the Contact page. Input fields use a floating-label pattern: the label sits inside the input at rest and floats above it when the field receives focus or contains a value, driven by peer-focus and peer-valid CSS states. Focus color assignments from assets/main.css: 
.peer:focus ~ .peer-focus\:text-dye-yellow { color: #FFCA3A; }
.peer:focus ~ .peer-focus\:text-dye-blue   { color: #1982C4; }
.peer:focus ~ .peer-focus\:text-dye-pink   { color: #FF99C8; }
Each form field is assigned a different dye accent for its focus state, keeping the form visually connected to the broader palette. Used on: Contact page (pages/Contact.html).

​
MagazineSpread

File: components/MagazineSpread.js MagazineSpread implements a two-column editorial layout that echoes the visual language of a print magazine. It is used for presenting featured work or articles with large imagery on one side and structured text on the other — giving high-priority content a presentation that stands apart from the standard card grid layout. Used on: Projects or Articles pages.

​
Navigation

File: components/Navigation.js Navigation renders the fixed top bar with nine color-coded pill tabs. It is the primary wayfinding element across the entire site. Key behavior:
  • Fixed to top-0 left-0 right-0 z-40 so it stays visible during page scroll and transitions.
  • The active route’s pill is highlighted in its assigned dye background color.
  • Tab changes animate with a spring (stiffness: 300, damping: 30) via Framer Motion, giving tab switches a physical, bouncy quality.
  • On hover, each pill lifts with hover:-translate-y-1 and gains a deeper Ink drop shadow — the same tactile effect used on cards and sticker elements throughout the theme.
  • The tab row is horizontally scrollable on mobile using overflow-x-auto with .no-scrollbar applied to hide the scrollbar track.
Route and color map: 
const navRoutes = [
  { path: "/",             label: "The Studio",       color: "bg-dye-red"    },
  { path: "/about",        label: "Who Dyed This?",   color: "bg-dye-orange" },
  { path: "/projects",     label: "Far-Out Work",     color: "bg-dye-yellow" },
  { path: "/skills",       label: "Bag of Tricks",    color: "bg-dye-green"  },
  { path: "/work",         label: "The Journey",      color: "bg-dye-blue"   },
  { path: "/case-studies", label: "Behind The Swirl", color: "bg-dye-purple" },
  { path: "/articles",     label: "Long Reads",       color: "bg-dye-pink"   },
  { path: "/testimonials", label: "Good Vibes",       color: "bg-turquoise"  },
  { path: "/contact",      label: "Holler At Me",     color: "bg-teal"       },
];
Used on: All pages (global mount).

​
PageTransition

File: components/PageTransition.js PageTransition wraps each page’s main content in an animated entry and exit sequence. When the visitor navigates between routes, the outgoing content transitions out while the incoming content eases in, keeping the liquid-color identity consistent between pages rather than cutting abruptly from one layout to the next. Because PageTransition only wraps the content layer, the fixed navigation bar remains stable and fully visible throughout every transition. Used on: All pages.

​
PatchworkQuilt

File: components/PatchworkQuilt.js PatchworkQuilt renders a decorative grid pattern built from colored blocks in various dye palette combinations, evoking the look of a fabric quilt. It is used as a visual section divider or textured background accent within pages that benefit from extra decorative layering. Used on: Skills or About pages.

​
RainbowArch

File: components/RainbowArch.js RainbowArch is a decorative SVG or canvas arc that renders a rainbow sweep using the dye palette colors. It reinforces the rainbow color identity of the theme and is used as a purely ornamental element — placed above or below content sections to frame them visually. Used on: Home page or section breaks.

​
ShirtRack

File: components/ShirtRack.js ShirtRack is an illustrated decorative element styled to resemble a clothing rack with colored shirts — a playful nod to the tie-dye and textile visual language of the theme. It is used in the skills or work sections to add themed visual character alongside the text content. Used on: Skills or Work pages.

​
SmileyFlower

File: components/SmileyFlower.js SmileyFlower is a sticker-style graphic combining a smiley face with a flower shape, rendered in dye palette colors. It belongs to the broader sticker-sheet visual language used throughout Color Melt and is placed as a decorative accent to add warmth and personality to page layouts. Used on: Various pages as a decorative accent.

​
SpiralTimeline

File: components/SpiralTimeline.js SpiralTimeline presents sequential content — work history, career milestones, or experience entries — along a spiral or curved path rather than a straight vertical list. The curved layout turns what would otherwise be a plain chronological list into a visual journey that matches the theme’s energetic, non-linear aesthetic. Used on: Work page (pages/Work.html).

​
StickerSheet

File: components/StickerSheet.js StickerSheet is a collection of sticker-style graphic elements rendered together as a visual set. The individual stickers use dye palette colors and playful shapes — flowers, stars, blobs, and labels — to reinforce the collage-like, handcrafted quality of Color Melt pages. The component can be placed as a decorative cluster in sidebars, hero areas, or section margins. Used on: Home page or About page.

​
TieDyeSpiral

File: components/TieDyeSpiral.js TieDyeSpiral is one of the most visually central animations in the theme. It renders a rotating, concentric spiral pattern that cycles through all six dye accent colors, simulating the circular dye patterns of tie-dye fabric. The animation runs continuously in the background as an identity-reinforcing decorative layer. Used on: Home page (index.html).
Components are pre-compiled ES modules. Rename them only if you also update every <link rel="modulepreload"> and import statement that references them.
Decorative components use pointer-events-none so they never block clicks on navigation links or content.

Build docs developers (and LLMs) love

Get started for freeTalk to us