guizang-social-card-skill/references/background-systems.md

Background Systems

The original Guizang PPT electronic-magazine mode uses WebGL fluid, contour, ink, and chromatic atmosphere. Static Rednote/WeChat images should preserve that feeling when the style mode is Editorial Magazine x E-ink.

Do not reduce this mode to a flat beige page with a faint grid. Do not add visible grid, dot-matrix, or drafting-paper patterns to the background.

Layer Model

Use 3-5 layers:

1. Paper base from theme-presets.md.
2. Procedural paper grain.
3. Ink wash, contour field, or WebGL fluid canvas.
4. Optional hairline structure as content dividers only, not as a page-wide background grid.
5. Content layer.

Recommended CSS order:

<section class="poster magazine hero">
  <canvas class="mag-bg" data-bg="ink-flow"></canvas>
  <div class="grain"></div>
  <div class="ink-vignette"></div>
  <div class="content">...</div>
</section>

.poster { position: relative; overflow: hidden; background: var(--paper); }
.mag-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.34; }
.poster.hero .mag-bg { opacity:.62; }
.grain {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.12; mix-blend-mode:multiply;
  background:
    linear-gradient(112deg, rgba(0,0,0,.035), transparent 26%, rgba(255,255,255,.16) 52%, transparent 82%),
    radial-gradient(circle at 18% 22%, rgba(var(--ink-rgb),.05), transparent 38%),
    radial-gradient(circle at 78% 84%, rgba(var(--accent-rgb),.045), transparent 42%);
}
.ink-vignette {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--ink-rgb),.10), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(var(--accent-rgb),.10), transparent 38%);
}
.content { position:relative; z-index:3; }

When To Show WebGL

Use stronger visible atmosphere for:

• Cover.
• Chapter/divider.
• Pull quote.
• Sparse thesis page.
• Closing page.

Use subtle atmosphere for:

• Screenshot pages.
• Dense ledgers.
• Checklists.
• Product evidence pages.

If screenshots are the main evidence, the background should support them rather than compete with them.

WebGL Helper

The skill includes assets/magazine-bg-webgl.js, a small helper for a deterministic ink-flow background:

<canvas class="mag-bg" data-seed="workbuddy"></canvas>
<script src="assets/magazine-bg-webgl.js"></script>
<script>
  document.querySelectorAll(".mag-bg").forEach((canvas, i) => {
    MagazineBg.mount(canvas, {
      ink: [26, 46, 31],
      paper: [245, 241, 232],
      accent: [46, 107, 79],
      strength: canvas.closest(".hero") ? 0.62 : 0.28,
      frozenTime: 2.4 + i * 0.37
    });
  });
</script>

For screenshot exports, prefer frozenTime so repeated renders look stable.

2D Fallback

If WebGL fails, create a 2D canvas with:

• Large radial ink wash.
• Several translucent contour arcs.
• Soft paper noise or uneven ink wash.
• Theme color at very low opacity.

The output should still feel like an editorial background, not a plain fill.

Do Not

• Do not use bright gradients.
• Do not use page-wide grid, dot-matrix, graph-paper, or drafting-paper backgrounds.
• Do not use decorative blobs or circles with no relationship to the layout.
• Do not place strong background marks behind body text.
• Do not let WebGL obscure screenshots or small captions.
• Do not animate the final image sequence unless the task is video.