@basementstudio/shader-lab 0.1.0

package/next.config.ts

@@ -0,0 +1,131 @@
+import withBundleAnalyzer from "@next/bundle-analyzer"
+import type { NextConfig } from "next"
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  reactCompiler: true,
+  typedRoutes: true,
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: [
+          {
+            loader: "@svgr/webpack",
+            options: {
+              memo: true,
+              dimensions: false,
+              svgoConfig: {
+                multipass: true,
+                plugins: [
+                  "removeDimensions",
+                  "removeOffCanvasPaths",
+                  "reusePaths",
+                  "removeElementsByAttr",
+                  "removeStyleElement",
+                  "removeScriptElement",
+                  "prefixIds",
+                  "cleanupIds",
+                  {
+                    name: "cleanupNumericValues",
+                    params: {
+                      floatPrecision: 1,
+                    },
+                  },
+                  {
+                    name: "convertPathData",
+                    params: {
+                      floatPrecision: 1,
+                    },
+                  },
+                  {
+                    name: "convertTransform",
+                    params: {
+                      floatPrecision: 1,
+                    },
+                  },
+                  {
+                    name: "cleanupListOfValues",
+                    params: {
+                      floatPrecision: 1,
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+        as: "*.js",
+      },
+    },
+  },
+  cacheComponents: true,
+  experimental: {
+    browserDebugInfoInTerminal: true,
+    optimizePackageImports: [
+      "@react-three/drei",
+      "@react-three/fiber",
+      "gsap",
+      "three",
+      "postprocessing",
+      "lenis",
+      "zustand",
+    ],
+  },
+  images: {
+    dangerouslyAllowSVG: true,
+    remotePatterns: [],
+    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
+    qualities: [90],
+    formats: ["image/avif", "image/webp"],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+  headers: async () => [
+    {
+      source: "/(.*)",
+      headers: [
+        {
+          key: "X-Content-Type-Options",
+          value: "nosniff",
+        },
+        {
+          key: "Content-Security-Policy",
+          value: "frame-ancestors 'self';",
+        },
+        {
+          key: "X-Frame-Options",
+          value: "SAMEORIGIN",
+        },
+        {
+          key: "X-XSS-Protection",
+          value: "1; mode=block",
+        },
+        {
+          key: "X-DNS-Prefetch-Control",
+          value: "on",
+        },
+        {
+          key: "Strict-Transport-Security",
+          value: "max-age=63072000; includeSubDomains; preload",
+        },
+        {
+          key: "Permissions-Policy",
+          value: "camera=(self), microphone=(), geolocation=()",
+        },
+      ],
+    },
+  ],
+  redirects: async () => [],
+  rewrites: async () => [],
+}
+
+const bundleAnalyzerPlugin = withBundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
+})
+
+const NextApp = () => {
+  const plugins = [bundleAnalyzerPlugin]
+  return plugins.reduce((config, plugin) => plugin(config), nextConfig)
+}
+
+export default NextApp

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@basementstudio/shader-lab",
+  "description": "Shader Lab starter template",
+  "version": "0.1.0",
+  "packageManager": "bun@1.3.5",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "analyze": "cross-env ANALYZE=true bun run build",
+    "analyze:experimental": "next experimental-analyze",
+    "build": "bun run build:runtime && next build",
+    "build:runtime": "bun run --cwd packages/shader-lab-react build",
+    "changeset": "changeset",
+    "check": "bun run build:runtime && bun run lint && bun run typecheck:compare",
+    "dev": "next dev",
+    "dev:https": "next dev --experimental-https",
+    "format": "biome format --write .",
+    "lighthouse": "bunx @unlighthouse/cli --site http://localhost:3000",
+    "lint": "biome lint --max-diagnostics=200",
+    "lint:fix": "biome lint --write --unsafe --max-diagnostics=200",
+    "release": "changeset publish",
+    "release-canary": "changeset publish --tag canary --no-git-tag",
+    "version-canary": "changeset version --snapshot canary",
+    "version-packages": "changeset version",
+    "start": "next start",
+    "test": "bun test",
+    "typecheck": "tsgo --noEmit",
+    "typecheck:runtime": "bun run --cwd packages/shader-lab-react typecheck",
+    "typecheck:compare": "bun run typecheck:tsc && bun run typecheck",
+    "typecheck:tsc": "tsc --noEmit --incremental false"
+  },
+  "dependencies": {
+    "@basementstudio/shader-lab": "workspace:*",
+    "@base-ui/react": "^1.3.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "class-variance-authority": "^0.7.1",
+    "motion": "^12.38.0",
+    "next": "16.1.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-use": "^17.6.0",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.183.2",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.11",
+    "@changesets/changelog-github": "^0.6.0",
+    "@changesets/cli": "^2.30.0",
+    "@next/bundle-analyzer": "16.1.1",
+    "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/bun": "^1.3.6",
+    "@types/node": "^20.19.30",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.183.1",
+    "@typescript/native-preview": "^7.0.0-dev.20260122.3",
+    "babel-plugin-react-compiler": "1.0.0",
+    "cross-env": "^10.1.0",
+    "postcss-preset-env": "^10.6.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "trustedDependencies": [
+    "@biomejs/biome",
+    "@tailwindcss/oxide",
+    "esbuild",
+    "sharp"
+  ]
+}

package/packages/shader-lab-react/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @basementstudio/shader-lab
+
+## 1.0.0
+
+### Major Changes
+
+- b878ba0: Publish the first release of `@basementstudio/shader-lab`.
+
+  This package provides the Shader Lab runtime for rendering exported Shader Lab compositions in React apps.

package/packages/shader-lab-react/README.md

@@ -0,0 +1,119 @@
+# @basementstudio/shader-lab
+
+<a href="https://basement.studio"><img alt="basement.studio logo" src="https://img.shields.io/badge/MADE%20BY%20basement.studio-000000.svg?style=for-the-badge&labelColor=000"></a>
+<a href="https://www.npmjs.com/package/@basementstudio/shader-lab"><img alt="NPM version" src="https://img.shields.io/npm/v/%40basementstudio%2Fshader-lab.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://basement.studio"><img alt="Website" src="https://img.shields.io/badge/WEBSITE-basement.studio-a6d600.svg?style=for-the-badge&labelColor=000000"></a>
+
+`@basementstudio/shader-lab` is a portable React runtime for rendering Shader Lab compositions exported from the editor.
+
+## Overview
+
+- Render exported Shader Lab configs inside React apps
+- Play Shader Lab timelines at runtime
+- Support Shader Lab source and effect layers in a standalone runtime
+- Use exported compositions without shipping the full editor
+
+## Install
+
+```bash
+npm install @basementstudio/shader-lab three
+```
+
+```bash
+bun add @basementstudio/shader-lab three
+```
+
+## Peer Dependencies
+
+- `react`
+- `react-dom`
+- `three`
+
+## Usage
+
+```tsx
+"use client"
+
+import { ShaderLabComposition, type ShaderLabConfig } from "@basementstudio/shader-lab"
+
+const config: ShaderLabConfig = {
+  composition: {
+    width: 1512,
+    height: 909,
+  },
+  layers: [],
+  timeline: {
+    duration: 6,
+    loop: true,
+    tracks: [],
+  },
+}
+
+export default function Example() {
+  return (
+    <div style={{ width: "100%", maxWidth: 1200 }}>
+      <ShaderLabComposition config={config} />
+    </div>
+  )
+}
+```
+
+Listen for runtime errors:
+
+```tsx
+<ShaderLabComposition
+  config={config}
+  onRuntimeError={(message) => {
+    console.error(message)
+  }}
+/>
+```
+
+## Component API
+
+### `ShaderLabComposition`
+
+| Prop | Description |
+| --- | --- |
+| `config` | Exported `ShaderLabConfig` object |
+| `className` | Optional wrapper class name |
+| `style` | Optional wrapper styles |
+| `onRuntimeError` | Optional callback for initialization or asset-loading errors |
+
+## Exports
+
+- `ShaderLabComposition`
+- `createRuntimeClock`
+- `advanceRuntimeClock`
+- `buildRuntimeFrame`
+- `evaluateTimelineForLayers`
+- `resolveEvaluatedLayers`
+- runtime config and timeline types
+
+## Notes
+
+- `ShaderLabComposition` is a client component and should be used from a `"use client"` module
+- The component fills the width of its container and preserves the exported composition aspect ratio
+- WebGPU support is required in the browser
+- Media source layers expect accessible asset URLs in `layer.asset.src`
+
+## Included Runtime Support
+
+- Gradient
+- Text
+- Custom shader
+- Image and video sources
+- Live camera input
+- ASCII
+- Pattern
+- Ink
+- Halftone
+- Dithering
+- CRT
+- Particle grid
+- Pixel sorting
+
+## Links
+
+- Website: [basement.studio](https://basement.studio/)
+- npm: [@basementstudio/shader-lab](https://www.npmjs.com/package/@basementstudio/shader-lab)

package/packages/shader-lab-react/assets/patterns/bars/1.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="28" width="8" height="64" transform="rotate(90 64 28)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/bars/2.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="20" width="24" height="64" transform="rotate(90 64 20)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/bars/3.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="12" width="40" height="64" transform="rotate(90 64 12)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/bars/4.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="4" width="56" height="64" transform="rotate(90 64 4)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/bars/5.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="12" width="40" height="64" transform="rotate(90 64 12)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/bars/6.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="20" width="24" height="64" transform="rotate(90 64 20)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/candles/1.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7" width="2" height="16" fill="#696969"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/candles/2.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" width="6" height="16" fill="#696969"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/candles/3.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="10" height="16" fill="#696969"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/candles/4.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" width="14" height="16" fill="#696969"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/shapes/1.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="31.5" y="31.5" width="1" height="1" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/shapes/2.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="28" width="8" height="8" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/shapes/3.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="16" width="8" height="32" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/shapes/4.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="16" width="8" height="32" fill="#D9D9D9"/>
+<rect x="48" y="28" width="8" height="32" transform="rotate(90 48 28)" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/shapes/5.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="16" y="16" width="32" height="32" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/assets/patterns/shapes/6.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" fill="#D9D9D9"/>
+<rect x="32.373" y="32.3726" width="32" height="32" fill="#D9D9D9"/>
+</svg>

package/packages/shader-lab-react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@basementstudio/shader-lab",
+  "version": "1.0.0",
+  "description": "Portable React runtime for Shader Lab exports.",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "dist",
+    "assets"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.183.0"
+  },
+  "scripts": {
+    "build": "node ./scripts/prepare-dist.mjs && bun x tsc -p tsconfig.build.json && node ./scripts/fix-esm-specifiers.mjs",
+    "lint": "biome lint src --max-diagnostics=200",
+    "prepack": "bun run build",
+    "typecheck": "bun x tsc -p tsconfig.json --noEmit"
+  }
+}

package/packages/shader-lab-react/scripts/fix-esm-specifiers.mjs

@@ -0,0 +1,57 @@
+import { readdir, readFile, writeFile } from "node:fs/promises"
+
+const DIST_DIR = new URL("../dist/", import.meta.url)
+
+const JS_IMPORT_PATTERN =
+  /(from\s+["'])(\.\.?\/[^"']+)(["'])|(import\s*\(\s*["'])(\.\.?\/[^"']+)(["']\s*\))/g
+
+async function collectJsFiles(directoryUrl) {
+  const entries = await readdir(directoryUrl, { withFileTypes: true })
+  const files = await Promise.all(
+    entries.map(async (entry) => {
+      const nextUrl = new URL(`${entry.name}${entry.isDirectory() ? "/" : ""}`, directoryUrl)
+
+      if (entry.isDirectory()) {
+        return collectJsFiles(nextUrl)
+      }
+
+      return entry.name.endsWith(".js") ? [nextUrl] : []
+    }),
+  )
+
+  return files.flat()
+}
+
+function withJsExtension(specifier) {
+  return /\.[cm]?js$|\.json$|\.node$/.test(specifier) ? specifier : `${specifier}.js`
+}
+
+function rewriteSpecifiers(source) {
+  return source.replace(
+    JS_IMPORT_PATTERN,
+    (match, fromPrefix, fromSpecifier, fromSuffix, importPrefix, importSpecifier, importSuffix) => {
+      if (fromSpecifier) {
+        return `${fromPrefix}${withJsExtension(fromSpecifier)}${fromSuffix}`
+      }
+
+      if (importSpecifier) {
+        return `${importPrefix}${withJsExtension(importSpecifier)}${importSuffix}`
+      }
+
+      return match
+    },
+  )
+}
+
+const files = await collectJsFiles(DIST_DIR)
+
+await Promise.all(
+  files.map(async (fileUrl) => {
+    const source = await readFile(fileUrl, "utf8")
+    const rewritten = rewriteSpecifiers(source)
+
+    if (rewritten !== source) {
+      await writeFile(fileUrl, rewritten)
+    }
+  }),
+)

package/packages/shader-lab-react/scripts/prepare-dist.mjs

@@ -0,0 +1,4 @@
+import { rm } from "node:fs/promises"
+
+await rm(new URL("../dist", import.meta.url), { force: true, recursive: true })
+await rm(new URL("../tsconfig.build.tsbuildinfo", import.meta.url), { force: true })

package/packages/shader-lab-react/src/ambient/three-tsl.d.ts

@@ -0,0 +1,146 @@
+declare module "three/tsl" {
+  export interface LoopConfig {
+    condition?: string
+    end: number
+    start: number
+    type: "float" | "int"
+  }
+
+  export type ShaderNodeParams = readonly [
+    TSLNode,
+    TSLNode,
+    TSLNode,
+    TSLNode,
+    TSLNode,
+    TSLNode?,
+    ...TSLNode[],
+  ]
+
+  export type ShaderNodeFn = (
+    params: ShaderNodeParams,
+    ...rest: unknown[]
+  ) => unknown
+
+  export interface TSLNode {
+    a: TSLNode
+    b: TSLNode
+    dot(value: unknown): TSLNode
+    g: TSLNode
+    r: TSLNode
+    rgb: TSLNode
+    value: unknown
+    w: TSLNode
+    x: TSLNode
+    xx: TSLNode
+    xy: TSLNode
+    xyz: TSLNode
+    xxxx: TSLNode
+    xxyy: TSLNode
+    xxx: TSLNode
+    xzx: TSLNode
+    xzyw: TSLNode
+    y: TSLNode
+    yyy: TSLNode
+    yyyy: TSLNode
+    yyz: TSLNode
+    yzx: TSLNode
+    yzw: TSLNode
+    z: TSLNode
+    zw: TSLNode
+    zww: TSLNode
+    zxy: TSLNode
+    zzww: TSLNode
+    www: TSLNode
+    wyz: TSLNode
+
+    add(value: unknown): TSLNode
+    addAssign(value: unknown): TSLNode
+    and(value: unknown): TSLNode
+    or(value: unknown): TSLNode
+    assign(value: unknown): TSLNode
+    clamp(min?: unknown, max?: unknown): TSLNode
+    div(value: unknown): TSLNode
+    equal(value: unknown): TSLNode
+    fract(): TSLNode
+    length(): TSLNode
+    greaterThan(value: unknown): TSLNode
+    greaterThanEqual(value: unknown): TSLNode
+    lessThan(value: unknown): TSLNode
+    lessThanEqual(value: unknown): TSLNode
+    mul(value: unknown): TSLNode
+    mulAssign(value: unknown): TSLNode
+    negate(): TSLNode
+    normalize(): TSLNode
+    sqrt(): TSLNode
+    sub(value: unknown): TSLNode
+    toVar(): TSLNode
+  }
+
+  export function attribute(name: string, type: string): TSLNode
+  export const pointUV: TSLNode
+  export const positionLocal: TSLNode
+
+  export const EPSILON: TSLNode
+  export const PI: TSLNode
+  export function abs(value: unknown): TSLNode
+  export function add(left: unknown, right: unknown): TSLNode
+  export function atan(value: unknown): TSLNode
+  export function clamp(value: unknown, min?: unknown, max?: unknown): TSLNode
+  export function cos(value: unknown): TSLNode
+  export function cross(left: unknown, right: unknown): TSLNode
+  export function div(left: unknown, right: unknown): TSLNode
+  export function dot(left: unknown, right: unknown): TSLNode
+  export function Fn(
+    fn: ShaderNodeFn,
+    layout?: unknown
+  ): (...args: unknown[]) => TSLNode
+  export function Loop(
+    config: LoopConfig,
+    callback: (...args: unknown[]) => unknown
+  ): TSLNode
+  export function exp(value: unknown): TSLNode
+  export function fract(value: unknown): TSLNode
+  export function float(value?: unknown): TSLNode
+  export function floor(value: unknown): TSLNode
+  export function mat2(
+    a?: unknown,
+    b?: unknown,
+    c?: unknown,
+    d?: unknown
+  ): TSLNode
+  export function length(value: unknown): TSLNode
+  export function log(value: unknown): TSLNode
+  export function max(left: unknown, right: unknown): TSLNode
+  export function min(left: unknown, right: unknown): TSLNode
+  export function mix(left: unknown, right: unknown, factor: unknown): TSLNode
+  export function mod(left: unknown, right: unknown): TSLNode
+  export function mul(left: unknown, right: unknown): TSLNode
+  export const screenSize: TSLNode
+  export function select(
+    condition: unknown,
+    whenTrue: unknown,
+    whenFalse: unknown
+  ): TSLNode
+  export function sin(value: unknown): TSLNode
+  export function sign(value: unknown): TSLNode
+  export function smoothstep(
+    edge0: unknown,
+    edge1: unknown,
+    x: unknown
+  ): TSLNode
+  export function sqrt(value: unknown): TSLNode
+  export function pow(base: unknown, exponent: unknown): TSLNode
+  export function step(edge: unknown, value: unknown): TSLNode
+  export function sub(left: unknown, right: unknown): TSLNode
+  export function texture(value: unknown, uv?: unknown): TSLNode
+  export function uniform(value?: unknown): TSLNode
+  export function uv(): TSLNode
+  export function vec2(x?: unknown, y?: unknown): TSLNode
+  export function vec3(x?: unknown, y?: unknown, z?: unknown): TSLNode
+  export function vec4(
+    x?: unknown,
+    y?: unknown,
+    z?: unknown,
+    w?: unknown
+  ): TSLNode
+}