Forge ambient backgrounds — Forge Design System

Overview

Forge ambient is a small narrative library for section backgrounds — parallel to component motion (pulse, breathe) and living background (global scene + archetypes). For a broad SVG asset gallery see SVG ambient backgrounds.

.forge-ambient — positioning, overflow, token scope
.forge-ambient-bg — full-bleed SVG host (fetched via data-ks-bg-src)
.forge-ambient-scrim — optional readability tint (--forge-ambient-scrim)
.forge-ambient-content — foreground above the stack

Intensity samples

Same style, three opacities:

Subtle

Medium

Hero

Aurora flow

Curved layered paths, dash drift, rare spark — ambiguity to direction.

Best for: Hero · Orchestration

Dark

Dark surface

Sample copy band — ambient stays behind scrim and content.

Light

Light surface

Sample copy band — ambient stays behind scrim and content.

Markup

Load forge-ambient-themes.css, forge-ambient.css, ks-animated-backgrounds.css, then ks-animated-backgrounds.js and forge-ambient.js. The background layer can use .forge-ambient-bg alone — fetch runs on [data-ks-bg-src].

<section class="forge-section forge-ambient forge-ambient--aurora-flow forge-ambient--subtle forge-ambient--on-dark">
  <div class="forge-ambient-bg" data-ks-bg-src="assets/svg/ambient/aurora-flow.svg" aria-hidden="true"></div>
  <div class="forge-ambient-scrim" aria-hidden="true"></div>
  <div class="forge-ambient-content">
    <!-- foreground -->
  </div>
</section>

Signal river

Horizontal wave bands — calm flow of information or process.

Best for: Section · Product · Features

Dark

Dark surface

Sample copy band — ambient stays behind scrim and content.

Light

Light surface

Sample copy band — ambient stays behind scrim and content.

Markup

Load forge-ambient-themes.css, forge-ambient.css, ks-animated-backgrounds.css, then ks-animated-backgrounds.js and forge-ambient.js. The background layer can use .forge-ambient-bg alone — fetch runs on [data-ks-bg-src].

<section class="forge-section forge-ambient forge-ambient--signal-river forge-ambient--subtle forge-ambient--on-dark">
  <div class="forge-ambient-bg" data-ks-bg-src="assets/svg/ambient/signal-river.svg" aria-hidden="true"></div>
  <div class="forge-ambient-scrim" aria-hidden="true"></div>
  <div class="forge-ambient-content">
    <!-- foreground -->
  </div>
</section>

Mesh bloom

Nodes and soft links — coordination and connected systems.

Best for: Methodology · System maps

Dark

Dark surface

Sample copy band — ambient stays behind scrim and content.

Light

Light surface

Sample copy band — ambient stays behind scrim and content.

Markup

Load forge-ambient-themes.css, forge-ambient.css, ks-animated-backgrounds.css, then ks-animated-backgrounds.js and forge-ambient.js. The background layer can use .forge-ambient-bg alone — fetch runs on [data-ks-bg-src].

<section class="forge-section forge-ambient forge-ambient--mesh-bloom forge-ambient--subtle forge-ambient--on-dark">
  <div class="forge-ambient-bg" data-ks-bg-src="assets/svg/ambient/mesh-bloom.svg" aria-hidden="true"></div>
  <div class="forge-ambient-scrim" aria-hidden="true"></div>
  <div class="forge-ambient-content">
    <!-- foreground -->
  </div>
</section>

Orbit field

Arcs and hub — governance, platforms, operating model.

Best for: Platform · Governance

Dark

Dark surface

Sample copy band — ambient stays behind scrim and content.

Light

Light surface

Sample copy band — ambient stays behind scrim and content.

Markup

Load forge-ambient-themes.css, forge-ambient.css, ks-animated-backgrounds.css, then ks-animated-backgrounds.js and forge-ambient.js. The background layer can use .forge-ambient-bg alone — fetch runs on [data-ks-bg-src].

<section class="forge-section forge-ambient forge-ambient--orbit-field forge-ambient--subtle forge-ambient--on-dark">
  <div class="forge-ambient-bg" data-ks-bg-src="assets/svg/ambient/orbit-field.svg" aria-hidden="true"></div>
  <div class="forge-ambient-scrim" aria-hidden="true"></div>
  <div class="forge-ambient-content">
    <!-- foreground -->
  </div>
</section>

Contour drift

Topographic contours — structure emerging; light-theme friendly.

Best for: Explanatory · Light sections

Dark

Dark surface

Sample copy band — ambient stays behind scrim and content.

Light

Light surface

Sample copy band — ambient stays behind scrim and content.

Markup

Load forge-ambient-themes.css, forge-ambient.css, ks-animated-backgrounds.css, then ks-animated-backgrounds.js and forge-ambient.js. The background layer can use .forge-ambient-bg alone — fetch runs on [data-ks-bg-src].

<section class="forge-section forge-ambient forge-ambient--contour-drift forge-ambient--subtle forge-ambient--on-dark">
  <div class="forge-ambient-bg" data-ks-bg-src="assets/svg/ambient/contour-drift.svg" aria-hidden="true"></div>
  <div class="forge-ambient-scrim" aria-hidden="true"></div>
  <div class="forge-ambient-content">
    <!-- foreground -->
  </div>
</section>

Constellation sweep

Sparse network with gentle shimmer — proofs, pathways, cases.

Best for: Proof · Case study · Process walkthrough

Dark

Dark surface

Sample copy band — ambient stays behind scrim and content.

Light

Light surface

Sample copy band — ambient stays behind scrim and content.

Markup

Load forge-ambient-themes.css, forge-ambient.css, ks-animated-backgrounds.css, then ks-animated-backgrounds.js and forge-ambient.js. The background layer can use .forge-ambient-bg alone — fetch runs on [data-ks-bg-src].

<section class="forge-section forge-ambient forge-ambient--constellation-sweep forge-ambient--subtle forge-ambient--on-dark">
  <div class="forge-ambient-bg" data-ks-bg-src="assets/svg/ambient/constellation-sweep.svg" aria-hidden="true"></div>
  <div class="forge-ambient-scrim" aria-hidden="true"></div>
  <div class="forge-ambient-content">
    <!-- foreground -->
  </div>
</section>

Modifiers

Compose classes on the same element as .forge-ambient:

Class	Role
`forge-ambient--subtle` · `--medium` · `--hero`	Opacity, spark strength, scrim
`forge-ambient--cool` · `--warm` · `--neutral`	Accent mix (cyan / amber / muted)
`forge-ambient--on-dark` · `--on-light`	Line contrast for surface type
`forge-ambient--slow` · `--expressive` · `--still`	CSS shimmer timing; `--still` pauses SMIL after load

Reduced motion & performance

When the user enables prefers-reduced-motion: reduce, ks-animated-backgrounds.js pauses SMIL after inline injection. CSS shimmer helpers (.fa-css-shimmer) are disabled in forge-ambient.css under the same media query.

Assets keep node counts low, avoid stacked blurs, and use long loop periods. Section height comes from layout — SVGs use preserveAspectRatio="xMidYMid slice" to fill wide or tall areas.