Skip to content

Shader Background

A slow, living gradient in the brand's colours, drawn by a shader behind your content.

Autumn lot · Huila

Stone fruit, brown sugar, a long finish.

import { Button, ShaderBackground } from '@brand-studio/ui';

export default function ShaderBackgroundDemo() {
  return (
    <ShaderBackground style={{ width: '100%', maxWidth: 640, borderRadius: 16, padding: '56px 32px', border: '1px solid var(--bs-line-soft)' }}>
      <p style={{ margin: '0 0 8px', fontSize: 13, letterSpacing: '.08em', textTransform: 'uppercase' }}>Autumn lot · Huila</p>
      <h3 style={{ margin: '0 0 20px', fontSize: 'clamp(28px, 5vw, 44px)', maxWidth: 420 }}>Stone fruit, brown sugar, a long finish.</h3>
      <Button>Reserve a bag</Button>
    </ShaderBackground>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, ShaderBackground } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { ShaderBackground } from '@brand-studio/ui';

<ShaderBackground style={{ padding: 48 }}>…</ShaderBackground>

It reads --bs-surface, --bs-accent and --bs-ink from the theme. Pass colors to use three other colours.

Accessibility

Decorative only: the canvas is hidden from screen readers and the content sits on top as normal markup.
Check contrast against the lightest and darkest parts of the gradient.
It holds one still frame under reduced motion, pauses off screen and falls back to a static gradient without WebGL.

API Reference

Prop	Type	Default
`colors?`	`[string, string, string]`	–
`speed?`	`number`	`1`

Also accepts every HTMLAttributes<HTMLDivElement> attribute.