LIGHT. MATH. YOUR NEXT BUILD.

Striktly shadcn registry

Install a shader integration component or a complete hero layout into your React project. The registry distributes public MIT scaffolding: layout, lifecycle, pause controls and recorded preview media. It does not distribute member-only shader runtimes or change download access.

The installed component works with a poster/video preview immediately. To make it interactive, add the matching shader kit downloaded through the normal Striktly member flow. Complete access is free during the current launch offer.

Install a component

In an existing React/Next.js project configured for shadcn, run one of these commands. Run it in a branch and review the generated files before accepting overwrites.

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

Each block installs its shared ShaderSurface dependency and license under your configured components directory. It uses React and ordinary styles, with no additional UI or icon dependencies. You can also install just the surface:

npx shadcn@latest add https://striktly.com/r/shader-surface.json

Add the live shader

Open Prism, configure it, sign in and select Take the code. Extract the kit, keep its license, and copy shader-background.js and config.json into your project. For ChromePortfolio use Liquid Chrome; for KineticProduct use Kinetic.

Keep the loader outside your component so rerenders do not recreate the renderer. Example file paths below assume the kit is under components/striktly/kits/prism/. JavaScript kits in a TypeScript project may need allowJs or a local declaration matching ShaderModule.

"use client";
import { PrismHero } from "@/components/striktly/prism-hero";
import config from "@/components/striktly/kits/prism/config.json";

const loadPrism = () => import("@/components/striktly/kits/prism/shader-background.js");

export default function Page() {
  return <PrismHero loadShader={loadPrism} config={config} />;
}

ShaderSurface supports config, loadShader, poster, video, children, className, style and prismStage. Customizing a preview video's configuration does not change the recording; palette and motion settings apply once the local live kit is connected. A shader-specific runtime cannot load a different shader by changing only the effect ID.

The surface pauses on reduced motion, hidden tabs and when offscreen. Manual Pause remains respected after returning to the page. Pointer interaction is disabled while paused. Import failures leave the poster/video fallback usable, and unmount destroys the renderer. The example limits of 700000 pixels and 30 FPS are rendering budgets, not measured performance guarantees.

Connect a coding assistant

Add the namespace to your project's existing components.json:

{
  "registries": {
    "@striktly": "https://striktly.com/r/{name}.json"
  }
}

Merge this field into your existing file rather than replacing its aliases, style or framework settings. With shadcn's MCP server configured for your assistant, try: Find a Striktly hero background and install the Prism hero. The assistant can browse this configured registry; a registry listing is not a guarantee that unrelated searches will recommend it.

The public registry index includes four items and their complete source payloads. This registry is hosted by Striktly; it is not a claim of endorsement or inclusion in shadcn's community directory.

Start from a complete website

Use the three standalone starter projects if you prefer HTML/CSS/JavaScript with no npm install. See the landing page, portfolio and product page examples for layout guidance.