# Interference

> An evolving sculpture of interwoven silver filaments.

Two silk membranes of fine filaments turn through a slow 96-second cycle, drawn on the graphics card. The pointer bends the field and pressing pulls it. The camera follows the form, so it always sits whole and centred, and where the silk crosses itself it blends like fabric instead of cutting. On light themes the silk becomes ink on paper.

- Family: Backgrounds
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/interference-background/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add interference-background
```

It installs to `components/galactrex/interference-background.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { InterferenceBackground } from "@/components/galactrex/interference-background";

<section className="relative overflow-hidden">
  <InterferenceBackground tint="silver" />
  <h1 className="relative">Interference</h1>
</section>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tint` | `string` | `"silver"` | Colour cast of the silk: "silver", "amber", "jade", or any CSS colour or --gxui-* name. |
| `speed` | `number` | `1` | 1 is one cycle every 96 seconds; 0 holds still. |
| `intensity` | `number` | `1` | Filament brightness, 0.2 to 1.6. |
| `interactive` | `boolean` | `true` | The pointer bends the field; pressing pulls it. |
| `seed` | `number` | `2.7` | Which form grows: any number gives a different one. |
| `density` | `"auto" \| "low" \| "high"` | `"auto"` | Filament count; auto lightens small surfaces and slow devices. |
| `background` | `string` | `"--gxui-bg"` | Behind the silk: CSS colour or --gxui-* name. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Silver, amber, jade.** `tint` sets the cast of the filaments.
- **Another form.** `seed` grows a different mathematical shape.
- **Ink on paper.** On a light theme the silk darkens instead of glowing.

## Accessibility

- Decorative only and aria-hidden; never takes pointer events itself (it listens on its parent).

## Motion

- WebGL 2 with additive silk; no depth cuts.
- Pauses offscreen.
- Reduced motion: one still frame.
- No WebGL 2 or hardware graphics: a still gradient, the shader never runs.
- Slow devices drop to lighter geometry in the first seconds.