Skip to content
Pinky UI

backgrounds

Soft Mesh Background

A slow themeable three-stop atmospheric background.

  • backgrounds
  • ambient
  • gradient
  • themeable

Live preview

Ambient, not dominant

The content keeps the loudest voice.

Quick usage

usage
import { SoftMeshBackground } from "@pinky-ui/experiences";

<SoftMeshBackground colors={["#fff8f7", "#edf4ff", "#fff"]}>{content}</SoftMeshBackground>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

intensity={0.35}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
intensitynumber0.62Opacity budget for the ambient color fields.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • A fixed three-layer DOM cost.
  • Continuous movement pauses while offscreen.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Warm Hero and section atmosphere

When not to use

  • Surfaces where moving color harms contrast

Skill

Purpose

SoftMeshBackground supplies a slow, themeable multi-stop atmosphere behind real content. Use it for Heroes, section intros and empty states that need warmth without an illustration.

Keep intensity around 0.35–0.7 and colors close enough to preserve foreground contrast. Avoid generic saturated SaaS gradients, stacking it with other ambient fields or placing it behind thin text without checking contrast.

It is pointer-transparent, static under reduced motion and pauses when offscreen. Mobile uses the same small fixed layer count, so never turn it into a particle system. Compose with calm typography and at most one local interactive effect.

Open this skill on its own page