learning_ai_common_plat/packages/motion/src/MeshBackground.tsx

import type { CSSProperties, ReactNode } from 'react';
import { prefersReducedMotion } from './utils.js';

export interface MeshBackgroundProps {
  /** Optional content rendered on top of the mesh. */
  children?: ReactNode;
  /**
   * Mood tier — controls the overall saturation + animation cadence.
   *  - `calm`      — slow drift, low saturation. Default.
   *  - `focus`     — slightly faster + a touch more saturation.
   *  - `celebrate` — vibrant, faster oscillation. Use sparingly.
   */
  mood?: 'calm' | 'focus' | 'celebrate';
  /** Override the gradient stop colour palette (CSS colours). */
  colors?: [string, string, string, string];
  /** Bypass animation (static mesh) — respects prefers-reduced-motion. */
  disableMotion?: boolean;
  className?: string;
  style?: CSSProperties;
}

/**
 * `<MeshBackground>` — ambient OKLCH-flavoured gradient wash with two
 * blurred conic "blobs" drifting slowly. Pure CSS, zero JS once mounted.
 *
 * Designed as a background layer behind landing-page heroes. Subtle by
 * default (calm mood); never use for content surfaces (kills contrast).
 *
 * Honours `prefers-reduced-motion`: the blobs render static when the
 * user opts out.
 */
export function MeshBackground({
  children,
  mood = 'calm',
  colors,
  disableMotion,
  className,
  style,
}: MeshBackgroundProps) {
  const reduced = disableMotion ?? prefersReducedMotion();
  const palette =
    colors ??
    ([
      // Default palette uses tokens with sensible sRGB fallbacks.
      'color-mix(in srgb, var(--bl-accent, #6366f1) 60%, transparent)',
      'color-mix(in srgb, var(--bl-success, #34d399) 50%, transparent)',
      'color-mix(in srgb, var(--bl-warning, #fbbf24) 50%, transparent)',
      'color-mix(in srgb, var(--bl-danger,  #f472b6) 50%, transparent)',
    ] as const);

  const speed: Record<NonNullable<MeshBackgroundProps['mood']>, string> = {
    calm: '24s',
    focus: '16s',
    celebrate: '10s',
  };

  return (
    <div
      data-testid="bl-mesh-background"
      data-mood={mood}
      data-reduced={reduced ? 'true' : 'false'}
      className={className}
      style={{
        position: 'relative',
        overflow: 'hidden',
        isolation: 'isolate',
        ...style,
      }}
    >
      {/* Two blurred blobs drifting on independent paths. */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: '-20%',
          backgroundImage: [
            `radial-gradient(40% 35% at 20% 25%, ${palette[0]}, transparent 70%)`,
            `radial-gradient(35% 30% at 80% 30%, ${palette[1]}, transparent 70%)`,
            `radial-gradient(45% 40% at 30% 80%, ${palette[2]}, transparent 70%)`,
            `radial-gradient(40% 35% at 75% 75%, ${palette[3]}, transparent 70%)`,
          ].join(', '),
          filter: 'blur(48px)',
          opacity: 0.85,
          animation: reduced ? undefined : `bl-mesh-drift ${speed[mood]} ease-in-out infinite alternate`,
          zIndex: -1,
        }}
      />
      {/* Keyframes are global because we don't want a styled-components
          dependency. Authoring them via a <style> tag keeps the package
          framework-agnostic. */}
      {!reduced && (
        <style>{`@keyframes bl-mesh-drift {
          0%   { transform: translate3d(0, 0, 0)        scale(1); }
          50%  { transform: translate3d(2%, -2%, 0)     scale(1.05); }
          100% { transform: translate3d(-2%, 2%, 0)     scale(0.98); }
        }`}</style>
      )}
      {children}
    </div>
  );
}