LIGHT. MATH. YOUR NEXT BUILD.

Interactive shader backgrounds for landing pages

A landing-page background should establish a feeling while leaving the headline and next step easy to understand. Prism works well as a broad field of moving light behind a short introduction. The example below combines it with real HTML text, a visible action, and a stable details section.

This is a reusable starter design, not a customer case study. Its embedded example uses a recorded preview. Download the starter and add a member-downloaded Prism kit to enable real cursor interaction locally.

Build the hero

Give the section an explicit height, keep overflow contained and place its shader host absolutely behind the content. Use the exported Prism stage CSS when mounting a kit directly; the registry component handles that stage for you.

import { PrismHero } from "@/components/striktly/prism-hero";

// Shows the recorded preview before you connect your local kit.
export default function LandingPage() {
  return <PrismHero />;
}

Install it with:

npx shadcn@latest add https://striktly.com/r/prism-hero.json

Then follow the live kit setup to pass a stable loader and your exported config. Use the standalone Prism starter for plain HTML/CSS/JavaScript, or open the full example.

Make the content do the work

• Use a short headline and a single primary next step.
• Test the text against multiple animation frames and palettes. A readable surface or different foreground color can be more appropriate than full transparency.
• Keep buttons, links and text separate from the canvas so they remain keyboard-accessible and selectable.
• Let the next content section settle into a stable background rather than adding another simultaneous WebGL canvas.

Set a motion budget

The starter uses one renderer, capped at 700000 pixels and 30 FPS, with a video/poster fallback. It pauses for reduced motion, hidden tabs, offscreen sections and the visitor's pause choice. Those settings limit work; they are not a 30 FPS guarantee. Measure your completed page on the phones and browsers your audience uses.

If motion does not add value to your message, use the poster alone. See performance and accessibility for sizing, pause state and cleanup.

Choose and customize

Open Prism to change the palette, motion and framing before downloading. Spectral Glass is another option for more structured panels. A kit supports one shader; choose the matching registry component or adapt the generic ShaderSurface rather than swapping effect IDs in a specialized runtime.