LIGHT. MATH. YOUR NEXT BUILD.

Shader background starter projects

Three small, runnable projects show how a shader can support a website. Each includes HTML, CSS, JavaScript, an MIT license, a README, a manifest and a loopback-only local Node server. No npm install or application credentials are required for the recorded preview.

These are sample designs, not customer case studies. The starter downloads contain public scaffolding and links to versioned preview media. They contain no private export runtimes. Use the normal member download flow to add a real shader kit.

Choose a starter

• Prism landing page starter ZIP: a spacious, atmospheric hero with a readable details section. See the example and guide.
• Liquid Chrome portfolio starter ZIP: a metallic introduction followed by a quiet, three-column project grid. See the example and guide.
• Kinetic product page starter ZIP: a grid background above stable product details and clear calls to action. See the example and guide.

Run locally

Extract a ZIP, open a terminal in its folder, and run:

node server.mjs

Use a current patched Node.js release, version 22 or later. Open http://127.0.0.1:4350/. If that port is busy, set STRIKTLY_STARTER_PORT to a free port. The included server binds only to your computer and serves only declared project files. It is a local development tool, not production server software.

Enable live interaction

• Step 1: Open the matching shader on Striktly and customize it.
• Step 2: Sign in and use Take the code to download a kit.
• Step 3: Extract the kit and put shader-background.js, config.json and its LICENSE in the starter's shader-kit/ folder. Preserve applicable third-party notices too.
• Step 4: Restart the local server. It checks the kit's effect ID and enables live rendering with your downloaded configuration.

The kit does not need a Supabase, Stripe, Resend or Striktly access token in your project. Keep all account credentials outside public files. Existing membership and billing rules remain the source of authority for downloads.

Make it your own

Replace the sample copy, links and project cards. Keep the decorative layer behind meaningful HTML, retain a pause control, and test the actual project on target devices. The bundled examples use a 700000-pixel cap and 30 FPS limit; neither guarantees a device's frame rate.

The README explains static deployment and preview limitations. For a React or Next.js app, use the shadcn registry instead. Preserve the licenses and notices from both the scaffolding and your shader kit.