Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/colorful/llms.txt

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

FluidBackground produces the signature visual layer of the Colorful theme: a living, slowly shifting gradient that sits behind all page content. The component combines two techniques — four large blurred Framer Motion blobs that drift independently around the viewport, and a CSS keyframe animation that continuously scrolls the same color palette across the .bg-fluid-gradient and .text-fluid-clip utility classes — giving every page a sense of soft, organic movement without drawing attention away from the content in front of it.

​
How it works

The component renders a single <div> with the classes fixed inset-0 z-[-1] overflow-hidden pointer-events-none bg-[#fafaf9]. The fixed inset-0 pairing stretches it to fill the entire viewport at all times, and z-[-1] pushes it behind every other element in the stacking context. pointer-events-none ensures the background never intercepts clicks, scroll events, or keyboard focus. Inside that root container, four motion.div blobs are placed with absolute positioning at different corners and regions of the canvas. Each blob is a large rounded circle with a theme color background and a heavy CSS blur applied:
Blob positionColor tokenBlurAnimation duration
Top-leftbg-teal-lightblur-[100px]20 s
Bottom-rightbg-rainbow-pinkblur-[120px]25 s
Centerbg-rainbow-amberblur-[90px]22 s
Bottom-leftbg-rainbow-indigoblur-[110px]18 s
Each blob animates its x, y, and scale properties on an infinite easeInOut loop, with each duration set to a different prime-adjacent number so the blobs drift out of phase and never repeat the exact same visual pattern. An SVG <filter> with three primitives — feTurbulence, feColorMatrix, and feDisplacementMap — is embedded in the component and applied to the blob layer via filter: url(#fluid). feTurbulence generates fractal noise, feColorMatrix sharpens its contrast, and feDisplacementMap uses the result to warp the blob layer, breaking up hard circular edges and contributing to the fluid, painterly appearance. The blob layer is rendered at opacity-30 using mix-blend-multiply to let the warm off-white page background show through.

​
The @keyframes fluid-gradient animation

The fluid-gradient keyframe animation is defined in assets/main.css and drives both the .bg-fluid-gradient and .text-fluid-clip utility classes. It works by cycling the background-position of an oversized gradient (background-size: 400% 400%) back and forth: 
@keyframes fluid-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
Because the gradient is four times wider than the element, scrolling through its position creates the illusion of continuously flowing color rather than a simple fade between two values.

​
Color tokens used

Both utility classes reference the same set of CSS custom properties defined in :root within assets/main.css:
TokenHex valueRole in gradient
--color-teal-main#14b8a6Gradient start
--color-rainbow-indigo#6366f1First mid-stop
--color-rainbow-pink#ec4899Second mid-stop
--color-rainbow-amber#f59e0bThird mid-stop
--color-teal-light#2dd4bfGradient end

​
The .bg-fluid-gradient and .text-fluid-clip utility classes

Both classes share the same color stops and animation but are applied to different elements and serve different purposes. .bg-fluid-gradient applies the animated gradient as a standard background fill. It is used on the Navigation toggle button hover layer and anywhere a solid gradient background is needed: 
.bg-fluid-gradient {
  background: linear-gradient(
    -45deg,
    var(--color-teal-main),
    var(--color-rainbow-indigo),
    var(--color-rainbow-pink),
    var(--color-rainbow-amber),
    var(--color-teal-light)
  );
  background-size: 400% 400%;
  animation: fluid-gradient 15s ease infinite;
}
.text-fluid-clip clips the same animated gradient to the text shape, producing the vivid rainbow fill used on large display headings across the theme: 
.text-fluid-clip {
  background: linear-gradient(
    45deg,
    var(--color-teal-main),
    var(--color-rainbow-indigo),
    var(--color-rainbow-pink),
    var(--color-rainbow-amber),
    var(--color-teal-light)
  );
  background-size: 400% 400%;
  animation: fluid-gradient 15s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
Note that .bg-fluid-gradient uses a -45deg angle while .text-fluid-clip uses 45deg, giving the heading text a slightly different flow direction from background elements.

​
Customizing the animation

Speed — Change the animation duration by editing the 15s value in both utility class declarations inside assets/main.css. A higher value produces a slower, more subtle drift; a lower value makes the color shift more noticeable. 
/* Slower — more meditative */
animation: fluid-gradient 30s ease infinite;

/* Faster — more energetic */
animation: fluid-gradient 8s ease infinite;
Colors — Update any of the --color-* custom properties in the :root block at the top of assets/main.css. Every element using either utility class will pick up the new values automatically, including the Navigation hover gradient and all .text-fluid-clip headings. 
:root {
  --color-teal-main: #0d9488;      /* swap to a deeper teal */
  --color-rainbow-pink: #f43f5e;   /* swap to rose */
}

​
Performance

FluidBackground uses two animation mechanisms. The CSS fluid-gradient keyframe animation drives the .bg-fluid-gradient and .text-fluid-clip classes: the background-size: 400% 400% technique shifts a CSS property that is composited on the GPU in all modern browsers, so those animations run on the compositor thread without triggering layout recalculations. The four Framer Motion blob animations run on the JavaScript side, but they animate only x, y, and scale — transform-based properties — which keeps them off the layout thread and avoids costly repaints.
To respect users who prefer reduced motion, add a prefers-reduced-motion media query in assets/main.css that either pauses the animation or removes the keyframe entirely:
@media (prefers-reduced-motion: reduce) {
  .bg-fluid-gradient,
  .text-fluid-clip {
    animation: none;
    background-position: 0% 50%;
  }
}
This preserves the gradient colors while eliminating all motion for users who have enabled the system-level reduced-motion preference. See the accessibility guide for more context.

Build docs developers (and LLMs) love

Get started for freeTalk to us