@basementstudio/shader-lab 0.1.0 → 1.0.2

package/next.config.ts

@@ -1,131 +0,0 @@
-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/packages/shader-lab-react/CHANGELOG.md

@@ -1,9 +0,0 @@
-# @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

@@ -1,119 +0,0 @@
-# @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/package.json

@@ -1,36 +0,0 @@
-{
-  "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

@@ -1,57 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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
-}

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

@@ -1,51 +0,0 @@
-declare module "three/webgpu" {
-  export * from "three"
-
-  import type {
-    Camera,
-    ColorRepresentation,
-    Material,
-    Scene,
-    TypedArray,
-    WebGLRendererParameters,
-    WebGLRenderTarget,
-  } from "three"
-  import type { TSLNode } from "three/tsl"
-
-  export class MeshBasicNodeMaterial extends Material {
-    colorNode: TSLNode | null
-    opacityNode: TSLNode | null
-    positionNode: TSLNode | null
-  }
-
-  export class PointsNodeMaterial extends Material {
-    colorNode: TSLNode | null
-    opacityNode: TSLNode | null
-    positionNode: TSLNode | null
-    sizeNode: TSLNode | null
-    alphaTest: number
-    transparent: boolean
-    depthWrite: boolean
-    sizeAttenuation: boolean
-  }
-
-  export class WebGPURenderer {
-    constructor(options?: WebGLRendererParameters & { canvas?: HTMLCanvasElement })
-
-    dispose(): void
-    init(): Promise<void>
-    readRenderTargetPixelsAsync(
-      target: WebGLRenderTarget,
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-    ): Promise<TypedArray>
-    render(scene: Scene, camera: Camera): void
-    setAnimationLoop(callback: ((time: number) => void) | null): void
-    setClearColor(color: ColorRepresentation, alpha?: number): void
-    setPixelRatio(pixelRatio: number): void
-    setRenderTarget(target: WebGLRenderTarget | null): void
-    setSize(width: number, height: number, updateStyle?: boolean): void
-  }
-}

package/packages/shader-lab-react/src/easings.ts

@@ -1,4 +0,0 @@
-export const easings = {
-  easeInOutCubic: (x: number): number =>
-    x < 0.5 ? 4 * x * x * x : 1 - ((-2 * x + 2) ** 3) / 2,
-}

package/packages/shader-lab-react/src/index.ts

@@ -1,35 +0,0 @@
-export {
-  ShaderLabComposition,
-  type ShaderLabCompositionProps,
-} from "./shader-lab-composition"
-export {
-  advanceRuntimeClock,
-  createRuntimeClock,
-  type ShaderLabRuntimeClock,
-} from "./runtime-clock"
-export { buildRuntimeFrame, type ShaderLabRuntimeFrame } from "./runtime-frame"
-export {
-  evaluateTimelineForLayers,
-  resolveEvaluatedLayers,
-  type EvaluatedLayerState,
-} from "./timeline"
-export type {
-  ShaderLabBlendMode,
-  ShaderLabAnimatedPropertyBinding,
-  ShaderLabAssetSource,
-  ShaderLabCompositeMode,
-  ShaderLabConfig,
-  ShaderLabEffectLayerType,
-  ShaderLabInlineSketchSource,
-  ShaderLabLayerKind,
-  ShaderLabLayerConfig,
-  ShaderLabLayerType,
-  ShaderLabModuleSketchSource,
-  ShaderLabParameterValue,
-  ShaderLabSketchSource,
-  ShaderLabSourceLayerType,
-  ShaderLabTimelineConfig,
-  ShaderLabTimelineInterpolation,
-  ShaderLabTimelineKeyframe,
-  ShaderLabTimelineTrack,
-} from "./types"

package/packages/shader-lab-react/src/lib/editor/custom-shader/shared.ts

@@ -1,2 +0,0 @@
-export const CUSTOM_SHADER_ENTRY_EXPORT = "sketch"
-

package/packages/shader-lab-react/src/renderer/ascii-atlas.ts

@@ -1,83 +0,0 @@
-import * as THREE from "three/webgpu"
-
-export const ASCII_CHARSETS: Record<string, string> = {
-  binary: "01",
-  blocks: " ░▒▓█",
-  dense: " .',:;!|({#@",
-  hatching: " ╱╲╳░▒",
-  light: " .:-=+*#%@",
-}
-
-export type AsciiFontWeight = "thin" | "regular" | "bold"
-export const DEFAULT_ASCII_CHARS = " .:-=+*#%@"
-
-function normalizeChars(chars: string): string {
-  return chars.length > 0 ? chars : " "
-}
-
-export function buildAsciiAtlas(
-  chars: string,
-  fontWeight: AsciiFontWeight = "regular",
-  cellPx = 16,
-): THREE.CanvasTexture {
-  const normalizedChars = normalizeChars(chars)
-  const cellSize = Math.max(4, Math.round(cellPx))
-  const fontSize = Math.max(4, Math.floor(cellSize * 0.9))
-  const canvas = document.createElement("canvas")
-  canvas.width = normalizedChars.length * cellSize
-  canvas.height = cellSize
-
-  const context = canvas.getContext("2d")
-
-  if (!context) {
-    throw new Error("Unable to create 2D context for ASCII atlas")
-  }
-
-  context.imageSmoothingEnabled = false
-  context.fillStyle = "#000"
-  context.fillRect(0, 0, canvas.width, canvas.height)
-
-  const weightMap: Record<AsciiFontWeight, string> = {
-    bold: "700",
-    regular: "400",
-    thin: "100",
-  }
-
-  context.fillStyle = "#fff"
-  context.font = `${weightMap[fontWeight]} ${fontSize}px "Geist Mono", monospace`
-  context.textAlign = "center"
-  context.textBaseline = "alphabetic"
-
-  for (const [index, char] of [...normalizedChars].entries()) {
-    const metrics = context.measureText(char)
-    const x = Math.round((index + 0.5) * cellSize)
-    const y = Math.round(
-      (cellSize + metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) * 0.5,
-    )
-    context.fillText(char, x, y)
-  }
-
-  const image = context.getImageData(0, 0, canvas.width, canvas.height)
-  const { data } = image
-
-  for (let index = 0; index < data.length; index += 4) {
-    const mask = (data[index] ?? 0) > 96 ? 255 : 0
-    data[index] = mask
-    data[index + 1] = mask
-    data[index + 2] = mask
-    data[index + 3] = 255
-  }
-
-  context.putImageData(image, 0, 0)
-
-  const texture = new THREE.CanvasTexture(canvas)
-  texture.flipY = false
-  texture.generateMipmaps = false
-  texture.magFilter = THREE.NearestFilter
-  texture.minFilter = THREE.NearestFilter
-  texture.wrapS = THREE.ClampToEdgeWrapping
-  texture.wrapT = THREE.ClampToEdgeWrapping
-  texture.needsUpdate = true
-
-  return texture
-}