### Install and Run Examples

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer/README.md

Instructions for cloning the repository and running the examples locally using yarn. This is useful for development and testing.

```bash
yarn && yarn examples
```

--------------------------------

### Managing Multiple Examples

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

Illustrates how to structure multiple examples using the `Example` component, including setting a default example with `makeDefault` and providing titles.

```tsx
import { Application, Example, Description } from "r3f-stage"

function App() {
  return (
    <Application>
      <Example path="one" title="Example 1" makeDefault>
        <Description>This is a very simple example.</Description>

        <mesh>
          <boxGeometry />
          <meshStandardMaterial color="green" />
        </mesh>
      </Example>

      <Example path="two" title="Example 2: The Exampling">
        <Description>This is also a very simple example.</Description>

        <mesh>
          <sphereGeometry />
          <meshStandardMaterial color="white" />
        </mesh>
      </Example>
    </Application>
  )
}
```

--------------------------------

### Development Environment Setup and Execution

Source: https://github.com/hmans/composer-suite/blob/main/README.md

Instructions for setting up and running the development environment for the Composer Suite monorepo using Preconstruct and Turborepo. It covers linking packages and running individual or all example applications.

```sh
# Link all apps and packages for development
pnpm dev:link

# Start all apps in development mode
pnpm dev

# Start individual apps
pnpm dev --filter spacerage
pnpm dev --filter vfx-composer-examples
pnpm dev --filter shader-composer-examples
```

--------------------------------

### Structuring Navigation with Headings

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

Explains how to use the `Heading` component to organize examples within the navigation UI, creating distinct sections for different groups of examples.

```tsx
import { Application, Example, Heading } from "r3f-stage"

function App() {
  return (
    <Application>
      <Heading>Main Examples</Heading>
      <Example />
      <Example />

      <Heading>Extra Examples</Heading>
      <Example />
      <Example />
      <Example />
    </Application>
  )
}
```

--------------------------------

### Install R3F Stage

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

Installs the R3F Stage library and its optional TypeScript types using Yarn.

```sh
# Mandatory
yarn install r3f-stage

# Types (optional, but very useful)
yarn install -D @types/three
```

--------------------------------

### Adding Descriptions to Examples

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

Shows how to use the `Description` component within the `Application` to display text descriptions for your Three.js examples.

```tsx
import { Application, Description } from "r3f-stage"

function App() {
  return (
    <Application>
      <mesh>
        <dodecahedronGeometry />
        <meshStandardMaterial />
      </mesh>

      <Description>
        This is a really simple example. Let's move on to more interesting
        things!
      </Description>
    </Application>
  )
}
```

--------------------------------

### Development Setup Commands

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Commands to set up the development environment for Timeline Composer using the PNPM package manager.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Basic Application Setup

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

Demonstrates the basic usage of the `Application` component from `r3f-stage` to render a simple Three.js mesh. It also shows how to import the global stylesheet.

```tsx
import { Application } from "r3f-stage"

/* r3f-stage provides a global stylesheet. Please import it in your application and remove any other global styles you may have defined. */
import "r3f-stage/styles.css"

function App() {
  return (
    <Application>
      <mesh>
        <dodecahedronGeometry />
        <meshStandardMaterial />
      </mesh>
    </Application>
  )
}
```

--------------------------------

### Using Uniforms in Shader Composition

Source: https://github.com/hmans/composer-suite/blob/main/apps/shader-composer-examples/index.html

Illustrates how to incorporate uniform variables into shader compositions, allowing for dynamic control of shader properties at runtime. This example shows passing a color uniform.

```javascript
import { ShaderComposer } from 'shader-composer';
import { UniformNode, Vec3Node, AddNode, OutputNode } from 'shader-composer/nodes';

const composer = new ShaderComposer();

const colorUniform = new UniformNode('u_color', new Vec3Node(1.0, 0.0, 0.0)); // Red color
const baseColor = new Vec3Node(0.1, 0.1, 0.1);

const mixedColor = new AddNode(baseColor, colorUniform);

const output = new OutputNode(mixedColor);

composer.addNode(output);

const shader = composer.compile({
  uniforms: {
    u_color: { value: [0.2, 0.8, 0.3] } // Pass a green color
  }
});

console.log(shader.fragmentShader);
```

--------------------------------

### Conditional Logic with IfNode

Source: https://github.com/hmans/composer-suite/blob/main/apps/shader-composer-examples/index.html

Demonstrates how to implement conditional logic within shaders using the IfNode. This example changes output based on a uniform value.

```javascript
import { ShaderComposer } from 'shader-composer';
import { IfNode, FloatNode, Vec3Node, OutputNode } from 'shader-composer/nodes';

const composer = new ShaderComposer();

const condition = new FloatNode(0.5);
const valueIfTrue = new Vec3Node(1.0, 0.0, 0.0); // Red
const valueIfFalse = new Vec3Node(0.0, 0.0, 1.0); // Blue

const conditionalOutput = new IfNode(condition, valueIfTrue, valueIfFalse);

const output = new OutputNode(conditionalOutput);

composer.addNode(output);

const shader = composer.compile({
  uniforms: {
    condition: { value: 0.7 } // This will make the output blue
  }
});

console.log(shader.fragmentShader);
```

--------------------------------

### Basic Shader Composition

Source: https://github.com/hmans/composer-suite/blob/main/apps/shader-composer-examples/index.html

Demonstrates the fundamental process of creating a simple shader using shader-composer nodes. This includes setting up input nodes, processing nodes, and an output node.

```javascript
import { ShaderComposer } from 'shader-composer';
import { Vec3Node, AddNode, MultiplyNode, OutputNode } from 'shader-composer/nodes';

const composer = new ShaderComposer();

const inputA = new Vec3Node(1.0, 0.5, 0.2);
const inputB = new Vec3Node(0.2, 0.3, 0.8);

const added = new AddNode(inputA, inputB);
const multiplied = new MultiplyNode(added, new Vec3Node(0.5, 0.5, 0.5));

const output = new OutputNode(multiplied);

composer.addNode(output);

const shader = composer.compile();
console.log(shader.vertexShader);
console.log(shader.fragmentShader);
```

--------------------------------

### Install Timeline Composer

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Instructions for adding the timeline-composer package to your project using popular package managers.

```sh
yarn add timeline-composer
npm add timeline-composer
pnpm add timeline-composer
```

--------------------------------

### Basic Render Pipeline Setup

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

Demonstrates the basic usage of Render Composer by setting up a render pipeline within a React Three Fiber canvas. It includes a directional light and a mesh.

```tsx
import * as RC from "render-composer"

function App() {
  return (
    <RC.Canvas>
      <RC.RenderPipeline>
        {/* Just do normal R3F stuff inside. */}
        <directionalLight position={[30, 10, 10]} intensity={1.5} />
        <mesh>
          <icosahedronGeometry />
          <meshStandardMaterial color="hotpink" />
        </mesh>
      </RC.RenderPipeline>
    </RC.Canvas>
  )
}
```

--------------------------------

### Lazy-loading Components in Examples

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

Demonstrates how to use `React.lazy` to load components asynchronously within an R3F Stage example. R3F Stage will display a loading indicator during the component's load time.

```tsx
import { Application, Example, Description } from "r3f-stage"
import { lazy } from "react"

const HugeExample = lazy(() => import("./HugeExample"))

function App() {
  return (
    <Application>
      <Example path="huge" title="Huge Example">
        <Description>
          This is an example that uses a lot of resources and uses a long time
          to load, which is why we're loading it lazily.
        </Description>

        <HugeExample />
      </Example>

      {/* ... */}
    </Application>
  )
}
```

--------------------------------

### Functional Composition Example

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Demonstrates functional composition for creating shader effects, including a nested approach and a more readable version using fp-ts pipe.

```js
ShaderMaterialMaster({
  color: Mul(new Color("hotpink"), NormalizePlusMinusOne(Sin(Time())))
})
```

--------------------------------

### createLoader Usage Example

Source: https://github.com/hmans/composer-suite/blob/main/packages/hmans-r3f-create-loader/README.md

Demonstrates how to use the createLoader hook to define and use preloaded assets. It shows defining loaders in a central module and consuming them in a component.

```js
import { createLoader } from "@hmans/r3f-create-loader"
/* ...import loaders... */

export const useAsset = {
  asteroid: createLoader(GLTFLoader, "/models/asteroid.gltf"),
  music: createLoader(AudioLoader, "/sounds/music.mp3"),
  fog: createLoader(TextureLoader, "/textures/fog.png")
}

import { useAsset } from "./assets"

function Asteroid() {
  /* Equivalent to `useTexture(\"/textures/fog.png\")`, but you can't get the URL
  wrong and the preloading is triggered at time of importing `assets.ts`. */
  const fog = useAsset.fog()

  return /* ... */
}
```

--------------------------------

### Transitioning to Gameplay State

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

Provides an example of a function that transitions the state machine from the 'menu' state to the 'gameplay' state. It includes a guard to check the current state and executes initialization logic before the transition.

```typescript
export const enterGameplay = () => {
  /* Check if we're currently in an expected state */
  if (!GameState.is("menu")) return

  /* Execute some code that should run at the transition */
  initializeGameplay()

  /* Transition to the next state */
  GameState.enter("gameplay")
}
```

--------------------------------

### Basic Animation Timeline Example

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Demonstrates orchestrating a staggered animation using Delay and Lifetime components within a React project.

```jsx
<Lifetime seconds={5}>
  <SmokeRing />
  <Fireball />

  <Delay seconds={0.3}>
    <CameraShake decay />
    <Fireball />

    <Delay seconds={0.2}>
      <Rocks />
      <SmokeCloud />
    </Delay>
  </Delay>
</Lifetime>
```

--------------------------------

### Shader Composer Example

Source: https://github.com/hmans/composer-suite/blob/main/README.md

Demonstrates how to use Shader Composer to create a dynamic shader material in React. It utilizes hooks like `useShader` and functions like `pipe`, `Vec3`, `Mix`, `NormalizePlusMinusOne`, `Sin`, `Add`, and `Fresnel` to define shader logic.

```jsx
const ShaderComposerExample = () => {
  const shader = useShader(() =>
    ShaderMaterialMaster({
      color: pipe(
        Vec3(new Color("red")),
        (v) => Mix(v, new Color("white"), NormalizePlusMinusOne(Sin(Time()))),
        (v) => Add(v, Fresnel())
      )
    })
  )

  return (
    <mesh>
      <sphereGeometry />
      <shaderMaterial {...shader} />
    </mesh>
  )
}
```

--------------------------------

### Combining Timeline Components

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

An example showcasing the combination of Lifetime, Repeat, and Delay components to create complex animation sequences.

```jsx
<Lifetime seconds={10}>
  <Repeat seconds={0.5}>
    <Lifetime seconds={0.25}>
      <p>I miss the blink tag!</p>
    </Lifetime>
  </Repeat>
</Lifetime>
```

--------------------------------

### Toggling Between States with Repeat

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

An example of repeatedly toggling between two states using Repeat, Lifetime, and Delay components.

```jsx
<Repeat seconds={1}>
  <Lifetime seconds={0.5}>
    <p>See</p>
  </Lifetime>

  <Delay seconds={0.5}>
    <p>Saw</p>
  </Delay>
</Repeat>
```

--------------------------------

### Configure Three.js Bindings

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer-three/README.md

Imports and configures the Shader Composer Three.js bindings. This setup is necessary to use Shader Composer with Three.js materials and shaders.

```js
import { compileShader } from "@shader-composer/core"
import configureThree from "@shader-composer/three"

configureThree()
```

--------------------------------

### Material Composer Example

Source: https://github.com/hmans/composer-suite/blob/main/README.md

Illustrates the usage of Material Composer to customize Three.js materials within a React application. It shows how to layer modules like `Modules.Color` and `Modules.Fresnel`, and control their properties using functions like `NormalizePlusMinusOne`, `Sin`, and `Time`.

```jsx
const MaterialComposerExample = () => (
  <mesh position-y={1.5} castShadow>
    <sphereGeometry />

    <Composable.MeshStandardMaterial>
      <Modules.Color color="#d62828" />

      <Layer opacity={NormalizePlusMinusOne(Sin(Time()))}>
        <Modules.Color color="#003049" />
      </Layer>

      <Modules.Fresnel intensity={0.2} />
    </Composable.MeshStandardMaterial>
  </mesh>
)
```

--------------------------------

### Emitter with Timeline Composer Integration

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Provides an example of integrating the Emitter component with Timeline Composer's Repeat and Lifetime components for timed and repeated emission bursts.

```jsx
<Repeat seconds={2} times={5}>
  <Lifetime seconds={1}>
    <Emitter rate={50} />
  </Lifetime>
</Repeat>
```

--------------------------------

### Adding Full-Screen Post-Processing Effects

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

Shows how to integrate post-processing effects from the 'postprocessing' library using Render Composer's effect wrappers. This example includes SMAA, Selective Bloom, and Vignette effects.

```tsx
import * as RC from "render-composer"

function App() {
  return (
    <RC.Canvas>
      <RC.RenderPipeline>
        <RC.EffectPass>
          <RC.SMAAEffect />
          <RC.SelectiveBloomEffect intensity={5} />
          <RC.VignetteEffect />
        </RC.EffectPass>

        {/* ...normal R3F stuff here. */}
      </RC.RenderPipeline>
    </RC.Canvas>
  )
}
```

--------------------------------

### Timeline Composer Animation Sequence

Source: https://github.com/hmans/composer-suite/blob/main/README.md

Provides an example of using Timeline Composer's React components to orchestrate an animation sequence. It demonstrates the use of `Lifetime`, `Delay`, `SmokeRing`, `Fireball`, `CameraShake`, `Rocks`, and `SmokeCloud` to define timed events and visual elements.

```jsx
<Lifetime seconds={5}>
  <SmokeRing />
  <Fireball />

  <Delay seconds={0.3}>
    <CameraShake decay />
    <Fireball />

    <Delay seconds={0.2}>
      <Rocks />
      <SmokeCloud />
    </Delay>
  </Delay>
</Lifetime>
```

--------------------------------

### Example Usage of useNullableState

Source: https://github.com/hmans/composer-suite/blob/main/packages/hmans-use-nullable-state/README.md

Demonstrates how to use the useNullableState hook in a React component to manage a piece of state that can be null. It includes buttons to set the state to a value and to clear it (set to null).

```javascript
import React from 'react';
import useNullableState from './useNullableState'; // Assuming the hook is in this file

function MyComponent() {
  const [data, setData] = useNullableState(null);

  const handleSetData = () => {
    setData('Some data value');
  };

  const handleClearData = () => {
    setData(null);
  };

  return (
    <div>
      <p>Current state: {data === null ? 'null' : data}</p>
      <button onClick={handleSetData}>Set Data</button>
      <button onClick={handleClearData}>Clear Data</button>
    </div>
  );
}

export default MyComponent;
```

--------------------------------

### Composer Suite Core Tenets

Source: https://github.com/hmans/composer-suite/blob/main/README.md

This section details the fundamental principles guiding the development of the Composer Suite libraries. It highlights the commitment to TypeScript for enhanced type safety, seamless Hot Module Reloading (HMR) for an improved developer experience, a preference for declarative programming paradigms (like JSX) over imperative ones, and the design goal of creating libraries that are both independently usable and interoperable.

```text
Authored in and for TypeScript.
All libraries are authored in TypeScript, with first-class type support. This means that you can use these libraries in JavaScript, but you will get the best experience when using TypeScript. If you're using them from within JavaScript, please be aware that these libraries will not make any significant effort to provide runtime type checking or similar.
Flawless HMR.
The libraries should provide a fun and flawless development experience with the best support for hot-module reloading possible. The user should be able to hot-reload their code and see the changes immediately in the browser. Where possible, state should be retained; there must never be errors when hot-reloading.
Prefer Declarative over Imperative.
Where possible, allow the user to declare logic and data using JSX, instead of forcing them out of the declarative JSX layer and towards hooks (or even further into the imperative world.)
Usable Individually, and Together.
Where possible, libraries should be designed so they can be used individually, but also together.
```

--------------------------------

### Unit Initialization with Expressions

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Demonstrates initializing shader units with plain JavaScript values, references to other units, or GLSL expressions using tagged template literals.

```ts
const number = Unit("float", 1.5)
const number = Unit("float", Add(1, 0.5))
const number = Unit("float", $`1 + 0.5`)
```

--------------------------------

### Create and Use State Machine

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

Demonstrates how to define states for a state machine and create an instance using createStateMachine. This sets up the foundation for managing game states.

```typescript
/* Define a type of possible states */
type State = "menu" | "gameplay" | "pause" | "gameover"

/* Create and export the State Machine */
export const GameState = createStateMachine<State>("menu")
```

--------------------------------

### Basic Shader Material

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Demonstrates the creation of a basic shader graph for use with THREE.ShaderMaterial, setting a fixed color.

```javascript
const root = ShaderMaterialMaster({
  color: new Color("hotpink")
})
```

--------------------------------

### Creating Custom Shader Units

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Illustrates how to create custom shader units using the `Unit` function, specifying the GLSL type, value, and configuration options.

```ts
const color = Unit("vec3", new Color("hotpink"), {
  name: "My favorite color"
})
```

--------------------------------

### Readable Shader Composition with fp-ts

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Shows how to use the `pipe` function from fp-ts for more readable shader graph construction, composing Time, Sin, NormalizePlusMinusOne, and Mul operations.

```ts
import { pipe } from "fp-ts/function"

const ModulateOverTime = (color: Input<"vec3">) =>
  pipe(
    Time(),
    (v) => Sin(v),
    (v) => NormalizePlusMinusOne(v),
    (v) => Mul(color, v)
  )

ShaderMaterialMaster({
  color: ModulateOverTime(new Color("hotpink"))
})
```

--------------------------------

### Creating Reusable Shader Unit Functions

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Shows how to create functions that generate shader units, accepting `Input` types for flexibility and using expressions for GLSL code.

```ts
const AddTwoNumbers = (a: Input<"float">, b: Input<"float">
) =>
  Unit("float", $`${a} + ${b}`)
```

--------------------------------

### Three.js Audio Primitive Wrappers

Source: https://github.com/hmans/composer-suite/blob/main/packages/audio-composer/README.md

Wrappers for basic Three.js audio primitives like AudioListener, PositionalAudio, and Audio. These are foundational components for integrating audio into React-Three-Fiber applications.

```jsx
import { AudioListener, PositionalAudio, Audio } from '@react-three/fiber';

// Example usage:
<AudioListener />
<PositionalAudio url="path/to/audio.mp3" />
<Audio url="path/to/sound.wav" />
```

--------------------------------

### Project License

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

This section details the copyright and licensing terms for the Composer Suite project. It grants permissions for use, modification, and distribution under specific conditions, including the inclusion of the copyright notice and disclaimer.

```text
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

--------------------------------

### Chaining State Transitions

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

Demonstrates a concise way to chain state transitions using logical AND operators, allowing for simple conditional transitions.

```typescript
export const returnToTitle = () =>
  GameState.is("gameplay") && GameState.enter("title")
```

--------------------------------

### Project License

Source: https://github.com/hmans/composer-suite/blob/main/packages/r3f-stage/README.md

The license agreement for the hmans/composer-suite project. It grants permissions for use, modification, and distribution under specific conditions.

```text
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

--------------------------------

### Composer Suite License

Source: https://github.com/hmans/composer-suite/blob/main/README.md

This block contains the full legal text of the MIT license granted for the Composer Suite software and associated documentation. It outlines the permissions granted to users, including the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, with the condition that the copyright notice and permission notice are included in all copies or substantial portions of the software. It also includes a disclaimer of warranty.

```license
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (
the "Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

--------------------------------

### Using Depth and Color Buffers

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

Shows how to utilize depth and color buffers provided by the Render Pipeline. Meshes consuming these buffers must be assigned to the `Layers.TransparentFX` layer and accessed via the `useRenderPipeline` hook.

```tsx
import * as RC from "render-composer"

const StylizedWater = () => {
  const { depth, color } = useRenderPipeline()

  return <mesh layers-mask={1 << Layers.TransparentFX}>{/* ... */}</mesh>
}
```

--------------------------------

### Combined Rate and Limit Configuration

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Demonstrates configuring both the emission rate and the total emission limit for the Emitter component.

```jsx
<Emitter rate={20} limit={100} />
```

--------------------------------

### Project License

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

This snippet contains the full license text for the composer-suite project, including copyright and permission details.

```text
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

--------------------------------

### Shader with Time Uniform

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Illustrates how to use built-in shader units like `Mul` and `Time` to create dynamic shader effects, such as multiplying color by time.

```javascript
const root = ShaderMaterialMaster({
  color: Mul(new Color("hotpink"), Time())
})
```

--------------------------------

### Creating Shader Chunks with GLSL Header and Body

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Demonstrates how to create a shader unit that holds GLSL header and body code. This is useful for defining custom shader logic imperatively. The `$`` syntax is used for template literals containing GLSL code.

```ts
const ImperativelyDoSomething = Unit("float", 0, {
  fragment: {
    header: $`vec4 myColor = vec4(1.0, 0.0, 0.0, 1.0);`,
    body: $`gl_FragColor = myColor;`
  }
  /* Also possible for `vertex`, obviously. */
})
```

--------------------------------

### Compiling and Updating Shaders

Source: https://github.com/hmans/composer-suite/blob/main/packages/shader-composer/README.md

Shows the process of compiling a shader graph and obtaining an update function to be called each frame, typically for updating uniforms.

```javascript
const [shader, { update }] = compileShader(root)
const material = new THREE.ShaderMaterial(shader)

function animate() {
  requestAnimationFrame(animate)
  update()
}

animate()
```

--------------------------------

### State Transition with Guard Function

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

Shows how to implement a guard function that checks a specific condition before allowing a state transition, combining the guard with the transition logic.

```typescript
const canStartGame = () => {
  /* Something that returns true or false */
}

export const startGame = () =>
  GameState.is("menu") && canStartGame && GameState.enter("title")
```

--------------------------------

### JSX API for Ramping Values

Source: https://github.com/hmans/composer-suite/blob/main/packages/audio-composer/README.md

A JSX API designed for smoothly ramping audio parameters over time. This allows for dynamic and expressive control over audio properties like volume, pitch, or filter cutoff.

```jsx
<PositionalAudio url="path/to/audio.mp3" volume={0} />
  <Ramp property="volume" to={1} duration={5} />
```

--------------------------------

### VFX Composer Core Concepts

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer/README.md

Explains the main exports of the VFX Composer library: Particles for an optimized particle system and VFXMaterial for creating custom renderable effects by chaining effect modules.

```javascript
// Particles: A highly optimized particle system engine based on THREE.InstancedMesh.
// VFXMaterial: A custom material that can be used to render a visual effect by accepting a list of effect modules.
```

--------------------------------

### Basic Emitter Usage

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Demonstrates the default configuration of the Emitter component, which emits 10 particles per second with no limit.

```jsx
<Emitter />
```

--------------------------------

### Immediate Emission

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Shows how to set the emission rate to Infinity to emit all particles at once, typically used with a limit.

```jsx
<Emitter rate={Infinity} limit={1000} />
```

--------------------------------

### Configuring Emission Rate

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Shows how to set a specific emission rate (particles per second) for the Emitter component.

```jsx
<Emitter rate={20} />
```

--------------------------------

### Connecting Emitter to Specific Particles Instance

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Demonstrates explicitly connecting an Emitter to a specific Particles instance using a ref, allowing the emitter to be positioned outside the Particles component's hierarchy.

```jsx
<Emitter particles={particlesRef} />
```

--------------------------------

### JSX API for Filter Chains

Source: https://github.com/hmans/composer-suite/blob/main/packages/audio-composer/README.md

A JSX-based API for composing audio filter chains and other audio processing effects. This aims to provide a declarative way to manage audio effects within the React-Three-Fiber ecosystem.

```jsx
<Audio src="path/to/audio.mp3">
  <Filter type="lowpass" frequency={1000} />
  <Filter type="reverb" decay={2} />
</Audio>
```

--------------------------------

### Configuring Emission Limit

Source: https://github.com/hmans/composer-suite/blob/main/packages/vfx-composer-r3f/README.md

Illustrates setting a limit on the total number of particles to be emitted by the Emitter component.

```jsx
<Emitter limit={100} />
```

--------------------------------

### Conditional Rendering with State Match

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

Shows how to use the Match component returned by createStateMachine to conditionally render React components based on the current state of the state machine. It supports matching a single state or a list of states.

```tsx
import { GameState } from "./state"

const Game = () => (
  <Canvas>
    <GameState.Match state="menu">
      <Menu />
    </GameState.Match>

    {/* The gameplay tree is rendered no matter if the game is paused or not */}
    <GameState.Match state={["gameplay", "pause"]}>
      <Gameplay />
    </GameState.Match>

    <GameState.Match state="pause">
      <Menu />
    </GameState.Match>

    <GameState.Match state="pause">
      <Menu />
    </GameState.Match>
  </Canvas>
)
```

--------------------------------

### Checking Current State Imperatively

Source: https://github.com/hmans/composer-suite/blob/main/packages/state-composer/README.md

Illustrates how to check the current state of a state machine from imperative code using the `is` function provided by the state machine instance.

```typescript
if (GameState.is("gameplay")) {
  /* ... */
}
```

--------------------------------

### Procedural Sound Effect Generation

Source: https://github.com/hmans/composer-suite/blob/main/packages/audio-composer/README.md

Primitives for procedurally generating sound effects. This functionality allows for dynamic sound creation within the application, potentially reducing the need for pre-recorded audio assets.

```javascript
// Placeholder for procedural sound generation logic
function generateSineWave(frequency, duration) {
  // ... implementation ...
  return audioBuffer;
}
```

--------------------------------

### Waterfall Animations with Nested Delays

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Demonstrates creating waterfall animations by nesting Delay components to create sequential rendering.

```jsx
<Delay seconds={1}>
  <p>One...</p>

  <Delay seconds={0.5}>
    <p>Two...</p>

    <Delay seconds={0.5}>
      <p>...three!</p>
    </Delay>
  </Delay>
</Delay>
```

--------------------------------

### Enabling StrictMode with RC.Canvas

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

Demonstrates two ways to enable React's StrictMode for react-three-fiber canvases when using Render Composer. The first wraps the pipeline in `<StrictMode>`, and the second uses the `strict` prop on `<RC.Canvas>`.

```tsx
import { StrictMode } from "react"
import * as RC from "render-composer"

function App() {
  return (
    <RC.Canvas>
      <StrictMode>
        <RC.RenderPipeline>{/* etc. */}</RC.RenderPipeline>
      </StrictMode>
    </RC.Canvas>
  )
}
```

```tsx
import * as RC from "render-composer"

function App() {
  return (
    <RC.Canvas strict>
      <RC.RenderPipeline>{/* etc. */}</RC.RenderPipeline>
    </RC.Canvas>
  )
}
```

--------------------------------

### Delay Component Usage

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Shows how to use the Delay component to postpone the rendering of its children by a specified duration.

```jsx
<Delay seconds={2.5}>
  <p>I will only render after 2.5 seconds!</p>
</Delay>
```

--------------------------------

### Repeat Component Usage (Limited Times)

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Illustrates the Repeat component's functionality for re-rendering children a specific number of times with a delay between each repetition.

```jsx
<Repeat seconds={2.5} times={3}>
  <p>
    I will automatically unmount and re-mount every 2.5 seconds, and stop after showing 3
    times, because that is clearly enough!
  </p>
</Repeat>
```

--------------------------------

### Repeat Component Usage (Infinite Times)

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Demonstrates the default behavior of the Repeat component, which repeats its children indefinitely.

```jsx
<Repeat seconds={2.5}>
  <p>I will repeat forever.</p>
  <p>Have a random number: {Math.random()}</p>
</Repeat>
```

--------------------------------

### Lifetime Component Usage

Source: https://github.com/hmans/composer-suite/blob/main/packages/timeline-composer/README.md

Shows how to use the Lifetime component to render children for a specified duration before they are automatically removed.

```jsx
<Lifetime seconds={2.5}>
  <p>I'm only here for 2.5 seconds. Cya!</p>
</Lifetime>
```

--------------------------------

### Using Custom Canvas with Render Composer

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

Explains how to use your own `<Canvas>` component from react-three-fiber with Render Composer. It's crucial to set the `flat` prop on the custom Canvas.

```tsx
import { Canvas } from "@react-three/fiber"
import * as RC from "render-composer"

function App() {
  return (
    <Canvas flat>
      <RC.RenderPipeline>{/* etc. */}</RC.RenderPipeline>
    </Canvas>
  )
}
```

--------------------------------

### Customizing Render Composer Canvas

Source: https://github.com/hmans/composer-suite/blob/main/packages/render-composer/README.md

Illustrates how to customize the `<RC.Canvas>` component, which is a wrapper around react-three-fiber's `<Canvas>`. It shows overriding props like `frameloop`.

```tsx
import * as RC from "render-composer"

function App() {
  return (
    <RC.Canvas frameloop="demand">
      <RC.RenderPipeline>{/* etc. */}</RC.RenderPipeline>
    </RC.Canvas>
  )
}
```

--------------------------------

### useNullableState Hook Implementation

Source: https://github.com/hmans/composer-suite/blob/main/packages/hmans-use-nullable-state/README.md

This snippet shows the implementation of the useNullableState hook in React. It utilizes the standard useState hook internally and provides a clear interface for managing nullable state.

```javascript
import { useState, useCallback } from 'react';

function useNullableState(initialValue = null) {
  const [state, setState] = useState(initialValue);

  const setNullableState = useCallback((newValue) => {
    setState(newValue);
  }, []);

  return [state, setNullableState];
}

export default useNullableState;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.