template @community/template-animated-mesh-background

Animated Mesh Background

Pure-CSS animated mesh gradient background using @property custom properties for <percentage> interpolation and four radial-gradient layers drifting on a 12s ease-in-out infinite alternate cycle — zero JS, zero canvas.

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 4.0
Edges: 6 out · 3 in
Tokens: 72/1139/1139

$ prime install @community/template-animated-mesh-background

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

AnimatedMeshBackground [template] v1.0.0

Pure-CSS animated mesh gradient background using @property custom properties for interpolation and four radial-gradient layers drifting on a 12s ease-in-out infinite alternate cycle — zero JS, zero canvas.

Loaded when retrieval picks the atom as adjacent / supporting.

AnimatedMeshBackground [template] v1.0.0

Language

css

Body

    <style>
      /* ── 1. Declare interpolable @property nodes ───────────────────────── */
      @property --mesh-x1 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
      @property --mesh-y1 { syntax: "<percentage>"; inherits: false; initial-value: 15%; }
      @property --mesh-x2 { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
      @property --mesh-y2 { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
      @property --mesh-x3 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
      @property --mesh-y3 { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
      @property --mesh-x4 { syntax: "<percentage>"; inherits: false; initial-value: 10%; }
      @property --mesh-y4 { syntax: "<percentage>"; inherits: false; initial-value: 60%; }

      /* ── 2. Mesh container ─────────────────────────────────────────────── */
      .mesh-bg {
        position: relative;
        width: 100%;
        min-height: 100vh;
        background-color: oklch(12% 0.02 260);
        background-image:
          radial-gradient(ellipse 55% 45% at var(--mesh-x1) var(--mesh-y1),
            oklch(55% 0.22 290 / 0.7) 0%, transparent 65%),
          radial-gradient(ellipse 50% 60% at var(--mesh-x2) var(--mesh-y2),
            oklch(60% 0.18 250 / 0.6) 0%, transparent 60%),
          radial-gradient(ellipse 65% 40% at var(--mesh-x3) var(--mesh-y3),
            oklch(62% 0.20 350 / 0.5) 0%, transparent 70%),
          radial-gradient(ellipse 40% 55% at var(--mesh-x4) var(--mesh-y4),
            oklch(65% 0.16 185 / 0.45) 0%, transparent 65%);
        animation: mesh-drift 12s ease-in-out infinite alternate;
      }

      /* ── 3. Keyframes: drift mesh nodes ───────────────────────────────── */
      @keyframes mesh-drift {
        0%   { --mesh-x1: 20%; --mesh-y1: 15%; --mesh-x2: 75%; --mesh-y2: 30%;
                --mesh-x3: 50%; --mesh-y3: 80%; --mesh-x4: 10%; --mesh-y4: 60%; }
        33%  { --mesh-x1: 35%; --mesh-y1: 40%; --mesh-x2: 60%; --mesh-y2: 15%;
                --mesh-x3: 70%; --mesh-y3: 65%; --mesh-x4: 25%; --mesh-y4: 45%; }
        66%  { --mesh-x1: 15%; --mesh-y1: 55%; --mesh-x2: 85%; --mesh-y2: 50%;
                --mesh-x3: 40%; --mesh-y3: 90%; --mesh-x4: 50%; --mesh-y4: 30%; }
        100% { --mesh-x1: 30%; --mesh-y1: 25%; --mesh-x2: 65%; --mesh-y2: 70%;
                --mesh-x3: 55%; --mesh-y3: 55%; --mesh-x4:  5%; --mesh-y4: 75%; }
      }

      /* ── 4. Reduced motion: freeze nodes at initial position ─────────── */
      @media (prefers-reduced-motion: reduce) {
        .mesh-bg { animation: none; }
      }

      /* ── Light variant ─────────────────────────────────────────────────── */
      .mesh-bg--light {
        background-color: oklch(97% 0.01 260);
        background-image:
          radial-gradient(ellipse 55% 45% at var(--mesh-x1) var(--mesh-y1),
            oklch(80% 0.14 290 / 0.5) 0%, transparent 65%),
          radial-gradient(ellipse 50% 60% at var(--mesh-x2) var(--mesh-y2),
            oklch(82% 0.12 250 / 0.4) 0%, transparent 60%),
          radial-gradient(ellipse 65% 40% at var(--mesh-x3) var(--mesh-y3),
            oklch(84% 0.13 350 / 0.35) 0%, transparent 70%),
          radial-gradient(ellipse 40% 55% at var(--mesh-x4) var(--mesh-y4),
            oklch(85% 0.10 185 / 0.3) 0%, transparent 65%);
        animation: mesh-drift 14s ease-in-out infinite alternate;
      }
    </style>

    <!-- Usage:
      <div class="mesh-bg">
        <div class="content">page content here</div>
      </div>
      Light theme: <div class="mesh-bg mesh-bg--light">
    -->

Usage Notes

@property requires Chrome 85+, Firefox 128+, Safari 16.4+ (Baseline Newly Available July 2024).
Background-image gradient animation runs on the compositor — no layout or paint cost.
Reduce to 2 layers on performance-sensitive pages to cut composite area.
Swiss Modernist persona: avoid — mesh breaks clean grid structure.
Tokyo Minimal: use at most 1 node with very low opacity.

Accessibility

prefers-reduced-motion freezes nodes at initial position — static gradient remains; no content hidden.
Background is decoration; always layer actual page content above with sufficient contrast.

Loaded when retrieval picks the atom as a focal / direct hit.

AnimatedMeshBackground [template] v1.0.0

Language

css

Body

    <style>
      /* ── 1. Declare interpolable @property nodes ───────────────────────── */
      @property --mesh-x1 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
      @property --mesh-y1 { syntax: "<percentage>"; inherits: false; initial-value: 15%; }
      @property --mesh-x2 { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
      @property --mesh-y2 { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
      @property --mesh-x3 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
      @property --mesh-y3 { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
      @property --mesh-x4 { syntax: "<percentage>"; inherits: false; initial-value: 10%; }
      @property --mesh-y4 { syntax: "<percentage>"; inherits: false; initial-value: 60%; }

      /* ── 2. Mesh container ─────────────────────────────────────────────── */
      .mesh-bg {
        position: relative;
        width: 100%;
        min-height: 100vh;
        background-color: oklch(12% 0.02 260);
        background-image:
          radial-gradient(ellipse 55% 45% at var(--mesh-x1) var(--mesh-y1),
            oklch(55% 0.22 290 / 0.7) 0%, transparent 65%),
          radial-gradient(ellipse 50% 60% at var(--mesh-x2) var(--mesh-y2),
            oklch(60% 0.18 250 / 0.6) 0%, transparent 60%),
          radial-gradient(ellipse 65% 40% at var(--mesh-x3) var(--mesh-y3),
            oklch(62% 0.20 350 / 0.5) 0%, transparent 70%),
          radial-gradient(ellipse 40% 55% at var(--mesh-x4) var(--mesh-y4),
            oklch(65% 0.16 185 / 0.45) 0%, transparent 65%);
        animation: mesh-drift 12s ease-in-out infinite alternate;
      }

      /* ── 3. Keyframes: drift mesh nodes ───────────────────────────────── */
      @keyframes mesh-drift {
        0%   { --mesh-x1: 20%; --mesh-y1: 15%; --mesh-x2: 75%; --mesh-y2: 30%;
                --mesh-x3: 50%; --mesh-y3: 80%; --mesh-x4: 10%; --mesh-y4: 60%; }
        33%  { --mesh-x1: 35%; --mesh-y1: 40%; --mesh-x2: 60%; --mesh-y2: 15%;
                --mesh-x3: 70%; --mesh-y3: 65%; --mesh-x4: 25%; --mesh-y4: 45%; }
        66%  { --mesh-x1: 15%; --mesh-y1: 55%; --mesh-x2: 85%; --mesh-y2: 50%;
                --mesh-x3: 40%; --mesh-y3: 90%; --mesh-x4: 50%; --mesh-y4: 30%; }
        100% { --mesh-x1: 30%; --mesh-y1: 25%; --mesh-x2: 65%; --mesh-y2: 70%;
                --mesh-x3: 55%; --mesh-y3: 55%; --mesh-x4:  5%; --mesh-y4: 75%; }
      }

      /* ── 4. Reduced motion: freeze nodes at initial position ─────────── */
      @media (prefers-reduced-motion: reduce) {
        .mesh-bg { animation: none; }
      }

      /* ── Light variant ─────────────────────────────────────────────────── */
      .mesh-bg--light {
        background-color: oklch(97% 0.01 260);
        background-image:
          radial-gradient(ellipse 55% 45% at var(--mesh-x1) var(--mesh-y1),
            oklch(80% 0.14 290 / 0.5) 0%, transparent 65%),
          radial-gradient(ellipse 50% 60% at var(--mesh-x2) var(--mesh-y2),
            oklch(82% 0.12 250 / 0.4) 0%, transparent 60%),
          radial-gradient(ellipse 65% 40% at var(--mesh-x3) var(--mesh-y3),
            oklch(84% 0.13 350 / 0.35) 0%, transparent 70%),
          radial-gradient(ellipse 40% 55% at var(--mesh-x4) var(--mesh-y4),
            oklch(85% 0.10 185 / 0.3) 0%, transparent 65%);
        animation: mesh-drift 14s ease-in-out infinite alternate;
      }
    </style>

    <!-- Usage:
      <div class="mesh-bg">
        <div class="content">page content here</div>
      </div>
      Light theme: <div class="mesh-bg mesh-bg--light">
    -->

Usage Notes

@property requires Chrome 85+, Firefox 128+, Safari 16.4+ (Baseline Newly Available July 2024).
Background-image gradient animation runs on the compositor — no layout or paint cost.
Reduce to 2 layers on performance-sensitive pages to cut composite area.
Swiss Modernist persona: avoid — mesh breaks clean grid structure.
Tokyo Minimal: use at most 1 node with very low opacity.

Accessibility

prefers-reduced-motion freezes nodes at initial position — static gradient remains; no content hidden.
Background is decoration; always layer actual page content above with sufficient contrast.

Source

where the compiled artifact came from

prime-system/examples/frontend-design/primes/compiled/@community/template-animated-mesh-background/atom.yaml

Compiled at 2026-05-07