@basementstudio/shader-lab 0.1.0

package/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/biome.json

@@ -0,0 +1,249 @@
+{
+  "$schema": "node_modules/@biomejs/biome/configuration_schema.json",
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true
+    },
+    "linter": {
+      "enabled": true
+    },
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true
+    }
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": [
+      "**",
+      "!node_modules",
+      "!**/.next",
+      "!**/dist",
+      "!**/public",
+      "!.github",
+      "!.vercel",
+      "!pnpm-lock.yaml",
+      "!bun.lock",
+      "!**/*.md",
+      "!**/*.mdx",
+      "!**/tailwind.css",
+      "!**/root.css",
+      "!**/*.grit"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "double",
+      "semicolons": "asNeeded",
+      "trailingCommas": "es5"
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true
+    }
+  },
+  "linter": {
+    "domains": {
+      "next": "recommended",
+      "react": "recommended"
+    },
+    "enabled": true,
+    "rules": {
+      "a11y": {
+        "noAriaUnsupportedElements": "error",
+        "noAutofocus": "warn",
+        "noDistractingElements": "error",
+        "noRedundantAlt": "error",
+        "useAltText": "error",
+        "useButtonType": "error",
+        "useKeyWithClickEvents": "warn",
+        "useSemanticElements": "warn",
+        "useValidAnchor": "warn",
+        "useValidAriaProps": "error",
+        "useValidAriaRole": "error",
+        "useValidAriaValues": "error"
+      },
+      "complexity": {
+        "noForEach": "off",
+        "useFlatMap": "warn",
+        "useSimplifiedLogicExpression": "warn"
+      },
+      "correctness": {
+        "noInvalidUseBeforeDeclaration": "error",
+        "noUnknownMediaFeatureName": "off",
+        "noUnusedFunctionParameters": "warn",
+        "noUnusedImports": "error",
+        "noUnusedVariables": "error",
+        "useExhaustiveDependencies": "warn"
+      },
+      "nursery": {
+        "useSortedClasses": {
+          "level": "warn",
+          "options": {
+            "attributes": ["class", "className"],
+            "functions": ["cn", "cva"]
+          }
+        }
+      },
+      "performance": {
+        "noImgElement": "error"
+      },
+      "recommended": true,
+      "security": {
+        "noDangerouslySetInnerHtml": "warn",
+        "noDangerouslySetInnerHtmlWithChildren": "error",
+        "noGlobalEval": "error"
+      },
+      "style": {
+        "noInferrableTypes": "error",
+        "noNestedTernary": "error",
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "error",
+        "noUnusedTemplateLiteral": "off",
+        "noUselessElse": "error",
+        "useAsConstAssertion": "error",
+        "useCollapsedElseIf": "warn",
+        "useConsistentArrayType": "error",
+        "useConsistentBuiltinInstantiation": "error",
+        "useDefaultParameterLast": "error",
+        "useEnumInitializers": "error",
+        "useExponentiationOperator": "error",
+        "useFilenamingConvention": {
+          "level": "warn",
+          "options": {
+            "filenameCases": ["kebab-case", "camelCase"],
+            "strictCase": false
+          }
+        },
+        "useForOf": "warn",
+        "useNumberNamespace": "error",
+        "useSelfClosingElements": "error",
+        "useShorthandAssign": "error",
+        "useSingleVarDeclarator": "error",
+        "useTemplate": "warn"
+      },
+      "suspicious": {
+        "noDebugger": "warn",
+        "noDoubleEquals": "error",
+        "noEmptyBlockStatements": "warn",
+        "noExplicitAny": "error",
+        "noGlobalIsFinite": "error",
+        "noGlobalIsNan": "error",
+        "noMisleadingCharacterClass": "error",
+        "noPrototypeBuiltins": "warn",
+        "noSelfCompare": "error",
+        "noSparseArray": "error",
+        "useAwait": "off"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.css"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnknownFunction": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["**/*.tsx", "**/*.jsx"],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "useKeyWithClickEvents": "error",
+            "useKeyWithMouseEvents": "error",
+            "useValidAnchor": "error"
+          },
+          "correctness": {
+            "useJsxKeyInIterable": "error"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["**/*.ts", "**/*.tsx"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUndeclaredVariables": "off"
+          },
+          "style": {
+            "useConsistentArrayType": "error",
+            "useExportType": "error",
+            "useImportType": "error"
+          }
+        }
+      }
+    },
+    {
+      "includes": [
+        "src/app/**/*.tsx",
+        "src/app/**/*.ts",
+        "src/app/**/*.jsx",
+        "src/app/**/*.js"
+      ],
+      "linter": {
+        "rules": {
+          "style": {
+            "noDefaultExport": "off"
+          },
+          "suspicious": {
+            "useAwait": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["**/*.module.css"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnknownProperty": "off"
+          },
+          "style": {
+            "noDescendingSpecificity": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["src/shared/styles/css/root.css"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noDuplicateCustomProperties": "off"
+          }
+        }
+      }
+    }
+  ],
+  "plugins": [
+    "./.biome/plugins/no-anchor-element.grit",
+    "./.biome/plugins/no-unnecessary-forwardref.grit",
+    "./.biome/plugins/no-relative-parent-imports.grit"
+  ],
+  "vcs": {
+    "clientKind": "git",
+    "enabled": true,
+    "useIgnoreFile": true
+  }
+}