LIGHT. MATH. YOUR NEXT BUILD.

WebGL shader backgrounds in Next.js

Keep the shader runtime on the client. Start with the Hero.jsx, ShaderBackground.jsx, and shader-background.js files from the same exported kit.

App Router client boundary

Create this client component next to the exported Hero.jsx:

'use client';
import dynamic from 'next/dynamic';

const ExportedHero = dynamic(() => import('./Hero.jsx'), {
  ssr: false,
  loading: () => <div style={{ minHeight: '100svh', background: '#08060e' }} />,
});

export default function ClientShaderHero() {
  return <ExportedHero />;
}

Then render it from a page or layout:

import ClientShaderHero from './ClientShaderHero.jsx';

export default function Page() {
  return <main><ClientShaderHero /></main>;
}

This loads the exported browser module after the client boundary mounts. Keep important text, links, and forms as ordinary HTML or React content rather than drawing them inside the canvas.

Images and deployment

Preserve embedded image data from your configured export. If you use image URLs instead, ensure those assets remain available and permit the browser to fetch them. A remote image failing CORS or disappearing can change the result.

Never ship a Supabase service key, Stripe key, or Striktly MCP token in a Next.js client component. The downloaded renderer runs locally; it does not need your Striktly account credentials in production.

Runtime budgets

Use the kit's configuration to set pixel and frame-rate budgets appropriate for your layout. Test the final page on actual target devices. A desktop preview or device-size emulation does not establish phone frame rates. See performance and accessibility.