Brand Background

Sets the Infinity Band behind a marketing section or card: a vector band, blurred or sharp, or a line shape, sharp at any size.

When to use

A large panel behind cards, a closing call to action, a newsletter strip or a dark section on a marketing page: use BandBackground.
A card that needs the line language behind its copy: use LineBackground.
A hero with no Rive scene: a blurred BandBackground (blur 40 and up), cropped on the side away from the copy. The hero then drops its line accent, since a line keeps clear of other graphics.

When not to use

A hero with a Rive scene: the scene is its background. See Rive scenes.
A product (base-luma) surface: product apps don't use the Infinity Band as a background.
A photo: use an image. See Imagery.

Install

npx shadcn@latest add @clinia/brand-background

Health data, turned into a patient story

Focus on the Vitals

The principle of essentialism.

Usage

tsx

import { BandBackground, LineBackground } from "@/components/ui/brand-background";

<BandBackground band="twist" ground="remedy" glow blur={0} x={48} y={-30} scale={62} rotate={-20} className="rounded-lg p-10">
  <h2>Health data, turned into a patient story</h2>
</BandBackground>

<LineBackground line={10} ground="noble" color="beige-3" x={-3} y={49} scale={160} className="rounded-lg p-5">
  <p>Focus on the Vitals</p>
</LineBackground>

Clinia rules

Place the art so the container crops it on at least two sides, with the copy on the flat part of the ground. Copy never runs across the band.
blur sets the look: 0 for a sharp band with its glow, 6 for the background field, 40 and up for a blurred sweep.
Use glow on light grounds only: on Infinite the spheres turn to haze.
One band per section. A card below can carry a line.
The art comes from @clinia/infinity-band, so the band and line geometry is never redrawn.

Do and don't

Health data, turned into a patient story

Do crop the band at the edges and keep the copy on the flat ground.

Health data, turned into a patient story

Don't run the copy across the band.

Accessibility

Built in

The art is decorative: it renders with alt="" and aria-hidden, so a screen reader reads only the content on top.
The ground sets the theme of its content: a light ground pins it to the light theme and Infinite to the dark one, so text-foreground keeps its contrast in both site themes.

Your responsibility

Check the copy against the ground, and against the band where they come close. Keep body text off the band entirely.

How to test

With a screen reader, move through the section: only its content is announced, never the art.
Switch the site theme: the content on a light ground stays dark, and on Infinite it stays light.

API

BandBackground

Prop	Values	Default	Description
x	`number`	`-20`	Left edge of the art, in percent of the container's width. Values past 0 to 100 push it off the edge, where the container crops it.
y	`number`	`0`	Top edge of the art, in percent of the container's height.
scale	`number`	`140`	Width of the art, in percent of the container's width.
band	`twistring`	`twist`	The shape-language form: the tapered `twist` or the closed `ring`.
ground	`sereneremedybeige-3remedy-darkaurathistlemendnobleinfinite`	–	The brand surface under the band in the light theme. In the dark theme it turns Infinite `#1a1a1e`; `infinite` is always dark.
rotate	`number`	`0`	Turns the band, in degrees.
blur	`number`	`6`	Softens the band, in pixels: 0 keeps it sharp, 6 is the background field, 40 and up a blurred sweep. The dark theme raises it to at least 3px.
glow	`boolean`	`false`	Adds the brand compositions' glow spheres behind the band, in Mend `#ffccaf` and Aura `#f8f1ff`. In the dark theme they dim to a faint haze.

LineBackground

Prop	Values	Default	Description
color	`serenebeige-3mendnoblevitaltrustpurple-5`	`vital`	The line's brand colour. A `vital` line keeps its card light in the dark theme; other lines darken with their ground.
x	`number`	`-30`	Left edge of the art, in percent of the container's width. Values past 0 to 100 push it off the edge, where the container crops it.
y	`number`	`30`	Top edge of the art, in percent of the container's height.
scale	`number`	`160`	Width of the art, in percent of the container's width.
line	`number`	`1`	Which of the twelve line-language shapes, 1 to 12, as in `public/bands/line-{n}.svg`.
ground	`sereneremedybeige-3remedy-darkaurathistlemendnobleinfinite`	–	The brand surface under the line. In the dark theme `remedy`, `remedy-dark` and `aura` turn to a dark tint, other light grounds stay light, and `infinite` is always dark.
keepAspect	`boolean`	`false`	Keeps the line's own proportions: `scale` sets the width and the height follows. Off, `scale` sets both, so on a wide, short card the line shrinks to the card's height.