Grain Background

Fine noise in the theme ink over a flat colour or a gradient, shifting like projected film. Pure CSS; works over or under content.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add grain-background

Usage

Example

import { GrainBackground } from "@/components/galactrex/grain-background";

<section className="relative overflow-hidden">
  <GrainBackground />
  <h1 className="relative">Shot on film</h1>
</section>

Source

Installs to components/galactrex/grain-background.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`opacity`	`number`	`0.1`	Grain strength, 0 to 1.
`fineness`	`number`	`0.85`	0.5 is coarse, 1.2 is fine.
`animate`	`boolean`	`true`	Shift like projected film.
`color`	`string`	`var(--gxui-ink)`	Grain colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Film. Shifting grain.
Print. `animate={false}` for a still paper texture.

Accessibility

Decorative only and aria-hidden; never takes pointer events.
Keep it below about 0.15 behind body text.

Motion and reduced motion

A stepped CSS transform; no canvas.
Holds still offscreen.
Reduced motion: still grain.