Documentation

Documentation

Background

Full-bleed section backdrop with a solid or gradient fill and an optional animated aurora mesh.

The <dsgn-background> component wraps a group of components in a full-bleed backdrop. variant sets the base fill — flat or gradient — and aurora layers an animated mesh on top of it, so a solid backdrop and the drift can be combined.

Usage

<dsgn-background variant="gradient" aurora intensity="subtle">
  <dsgn-container size="2xl" padding-y="xl">
    <dsgn-heading heading-size="h2" surface="dark"
      >A section on a backdrop</dsgn-heading
    >
  </dsgn-container>
</dsgn-background>

Import the component module in your application entrypoint:

import '@ds-gn/ui/background';

Props

Prop Type Default Description
variant 'solid' | 'gradient' 'solid' Base fill: a flat surface or a gradient.
aurora boolean false Layers the animated aurora mesh on top of the base fill.
intensity 'subtle' | 'normal' | 'vivid' 'normal' Brightness of the drifting aurora blobs. Only applies when aurora is set.
surface 'light' | 'dark' 'dark' Semantic token surface to use. Defaults to dark.

Slots

Slot Description
(default) Section content, rendered above the background.

The aurora mesh

The animated mesh only runs when aurora is set and the element is in the viewport — a solid or gradient background, the default, does no animation work at all. Scrolling the section off-screen suspends the animation and scrolling back resumes it.

intensity scales the opacity of every blob: subtle dims them, vivid brightens them.

Under prefers-reduced-motion: reduce the blobs hold their initial positions instead of drifting, so the backdrop still renders but nothing moves.

The mesh engine itself is internal. It has no element tag, no package subpath, and no React wrapper — <dsgn-background> is the only supported way to use it.

Examples

Solid backdrop

<dsgn-background>
  <dsgn-container size="2xl" padding-y="xl">Section content</dsgn-container>
</dsgn-background>

Gradient with a vivid aurora

<dsgn-background variant="gradient" aurora intensity="vivid">
  <dsgn-container size="2xl" padding-y="xl">Section content</dsgn-container>
</dsgn-background>

On a light surface

<dsgn-background surface="light" variant="gradient">
  <dsgn-container size="2xl" padding-y="xl">
    <dsgn-heading heading-size="h2">Light section</dsgn-heading>
  </dsgn-container>
</dsgn-background>

Usage patterns

  • The background paints the section; it does not constrain width. Put an <dsgn-container> inside it for the content’s measure and padding.
  • It defaults to surface="dark". Set surface="dark" on the components you place inside as well — slotted content is themed by its own element.
  • layout="asset-background" supplies a hero backdrop through its asset slot. Centered and side-by-side heroes are transparent; wrap those in <dsgn-background> when the section needs its own fill or aurora.

Accessibility

The mesh is decorative and is not exposed to assistive technology. Keep enough contrast between the backdrop and the content on top of it — intensity="vivid" brightens the blobs considerably behind text.

Esc