Account

Backgrounds

Creative

Interference

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.

Install

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

Terminal
npx @galactrex/ui add interference-background

Usage

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

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

Source

Installs to components/galactrex/interference-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

PropTypeDefaultDescription
tintstring"silver"Colour cast of the silk: "silver", "amber", "jade", or any CSS colour or --gxui-* name.
speednumber11 is one cycle every 96 seconds; 0 holds still.
intensitynumber1Filament brightness, 0.2 to 1.6.
interactivebooleantrueThe pointer bends the field; pressing pulls it.
seednumber2.7Which form grows: any number gives a different one.
density"auto" | "low" | "high""auto"Filament count; auto lightens small surfaces and slow devices.
backgroundstring"--gxui-bg"Behind the silk: CSS colour or --gxui-* name.
classNamestring—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 and reduced 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.