Utilities to kickstart your creative coding projects.

boilerplate⁴

• Boilerplate Project

  Boilerplate project for creating a new creative project with React Three Fiber.

• WebGPU Scene

  A WebGPU scene for creating a new creative project with React Three Fiber.

• Sketch Component

  Template component for creating sketches utilising Three.JS and TSL.

• Color Space Correction

  A composable component that sets the renderer's outputColorSpace to LinearSRGBColorSpace and disables tone mapping.

color²

• Cosine Palette

  A palette of colors using a cosine-based function.

• Tonemapping Functions

  A collection of tonemapping functions to enhance your visuals.

noise¹

• Noise Functions

  Perlin, Simplex, Fractional Brownian, and others to introduce randomness and variation.

postprocessing⁶

• Grain Texture Effect

  A grainy textural effect to add to your visuals.

• Speckled Noise Effect

  Randomised, speckled textural effect to add to your visuals.

• Vignette Effect

  A vignette effect to add to your visuals.

• Canvas Weave Effect

  A canvas weave textural effect to add to your visuals.

• Postprocessing Component

  A component that applies postprocessing effects to your scene.

• LCD Effect

  A futuristic LCD effect to add to your visuals.

sdf²

• SDF Shape Functions

  Fundamental Signed Distance Functions (SDF) for 2D and 3D shapes.

• SDF Operations

  Operations on SDFs to create more complex shapes.

function⁶

• screenAspectUV

  TSL function that returns uv coordinates with adjusted aspect ratio.

• Repeating Pattern

  TSL function that returns a repeating pattern.

• bloom

  TSL function that returns a bloom effect.

• bloomEdgePattern

  TSL function that returns a bloomed edge pattern.

• domainIndex

  TSL function that returns a domain index based on a number of repetitions.

• Coordinate Functions

  TSL functions for converting between Cartesian and Polar coordinates.