CoreAnimated Backgrounds and Visual Effectsno dependencies

FluidMeshBackground

GPU-composited multi-field mesh gradient backdrop with configurable color pools, orbital speed, contrast, and low-CPU static fallback.

Preview

Fluid Multi-Field Mesh Backdrop

Customize

6 props
14
0.28

Installation

Copies the component source and its CSS Module into your project.

npx motionfoundry add fluid-mesh-background

Writes components/ui/fluid-mesh-background.tsx and components/styles/fluid-mesh-background.module.css.

Usage

Updates live as you change the controls — only props that differ from the defaults are included.

example.tsx
1import { FluidMeshBackground } from "@motionfoundry/ui";2 3export function Example() {4  return (5    <FluidMeshBackground />6  );7}

Props

PropTypeDefault
headline

Optional foreground heading.

string'Fluid Multi-Field Mesh Backdrop'
colorA

Primary mesh field color.

string'#38bdf8'
colorB

Secondary mesh field color.

string'#818cf8'
colorC

Tertiary mesh field color.

string'#e4e4e7'
speed

Cycle duration in seconds.

number14
intensity

Opacity of the moving color fields.

number0.28

Accessibility

Marks background mesh orbs aria-hidden='true' and halts orbital keyframe transforms when prefers-reduced-motion is enabled.

Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.

Source

components/ui/fluid-mesh-background.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/fluid-mesh-background.module.css";5 6export interface FluidMeshBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {7  /** Optional foreground headline */8  headline?: string;9  /** Primary mesh color */10  colorA?: string;11  /** Secondary mesh color */12  colorB?: string;13  /** Tertiary mesh color */14  colorC?: string;15  /** Orbit cycle duration in seconds */16  speed?: number;17  /** Field opacity (0.1 to 0.6) */18  intensity?: number;19}20 21export function FluidMeshBackground({22  headline = "Fluid Multi-Field Mesh Backdrop",23  colorA = "#38bdf8",24  colorB = "#818cf8",25  colorC = "#e4e4e7",26  speed = 14,27  intensity = 0.28,28  children,29  className = "",30  ...rest31}: FluidMeshBackgroundProps) {32  const customVars = {33    "--mf-fm-a": colorA,34    "--mf-fm-b": colorB,35    "--mf-fm-c": colorC,36    "--mf-fm-speed": `${speed}s`,37    "--mf-fm-opacity": intensity,38  } as React.CSSProperties;39 40  return (41    <div style={customVars} className={`${styles.stage} ${className}`.trim()} {...rest}>42      <div aria-hidden="true" className={styles.meshLayer}>43        <div className={`${styles.field} ${styles.fieldA}`} />44        <div className={`${styles.field} ${styles.fieldB}`} />45        <div className={`${styles.field} ${styles.fieldC}`} />46      </div>47      <div className={styles.foreground}>48        {children ?? <h3 className={styles.headline}>{headline}</h3>}49      </div>50    </div>51  );52}