Utilities to kickstart your creative coding projects.

boilerplate⁴

• Boilerplate Project

  Full project boilerplate for creative coding with React Three Fiber and WebGPU. Everything you need to start building.

• WebGPU Scene

  WebGPU scene boilerplate for React Three Fiber creative coding projects. Jump straight into building with TSL shaders.

• Sketch Component

  Template React component for building creative coding sketches with Three.js and TSL. Copy, paste, start creating.

• Color Space Correction

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

color²

• Cosine Palette

  Generate procedural color palettes with cosine functions. Create smooth, vibrant gradients mathematically.

• Tonemapping Functions

  Tonemapping and color grading functions for shaders. Enhance contrast, mood, and visual quality in your compositions.

noise¹

• Noise Functions

  Procedural noise functions: Perlin, Simplex, FBM, and more. Add organic randomness and variation to your shaders.

postprocessing¹²

• Postprocessing Component

  A component that applies postprocessing effects to your scene.

• Chromatic Aberration Post Processing Effect

  RGB channel separation effect simulating lens distortion. Create colorful fringing for stylistic glitch and camera aesthetics.

• CRT Scanline Post Processing Effect

  CRT monitor scanlines with barrel distortion for retro aesthetics. Recreate classic cathode ray tube screen effects.

• Dither Post Processing Effect

  Ordered dithering with Bayer matrix for retro print aesthetics. Classic technique for limited color palettes and vintage graphics.

• Halftone Post Processing Effect

  CMYK-style halftone dot patterns for print and comic book aesthetics. Classic printing technique for retro and pop art visuals.

• Grain Texture Post Processing Effect

  Film grain post-processing effect for analog texture. Apply cinematic grain to your rendered scenes.

• Pixellation Post Processing Effect

  Pixelation post-processing with aspect correction. Create retro pixel art aesthetics from rendered scenes.

• Vignette Post Processing Effect

  Classic vignette post-processing darkening edges to focus center. Essential effect for cinematic compositions.

• LED Post Processing Effect

  LED display post-processing simulating digital screens. Cyberpunk electronic aesthetics for rendered scenes.

• Bulge Distortion Post Processing Effect

  Radial bulge or pinch distortion post-processing. Create lens-like magnification effects for artistic compositions.

• Swirl Distortion Post Processing Effect

  Rotational swirl distortion post-processing for artistic transformations. Create vortex and twirl effects with customizable center points.

• Wave Distortion Post Processing Effect

  Sinusoidal wave distortion post-processing for rippling effects. Add flowing distortion patterns with controllable frequency and amplitude.

effects⁶

• Grain Texture Effect

  Film grain shader effect for analog texture and vintage aesthetics. Add cinematic character to digital compositions.

• Pixellation Effect

  Pixelation post-processing effect for retro visuals. Adjustable resolution for mosaic-like appearance.

• Speckled Noise Effect

  Speckled noise texture for film grain and dust effects. Add organic imperfections to your shader compositions.

• Vignette Effect

  Classic vignette effect that darkens edges and draws focus to center. Essential post-processing for compositions.

• Canvas Weave Effect

  Canvas weave texture shader simulating fabric patterns. Add painterly, textile surfaces to your visuals.

• LED Effect

  LED display effect simulating digital screens and light matrices. Cyberpunk electronic aesthetics for your shaders.

distortion³

• Bulge Distortion

  UV distortion function for bulge and pinch effects. Create magnifying glass or fisheye transformations with customizable falloff.

• Swirl Distortion

  UV distortion function for rotational swirl effects. Create vortex transformations with distance-based rotation falloff.

• Wave Distortion

  UV distortion function for sinusoidal wave effects. Add rippling distortion patterns with configurable frequency and direction.

sdf²

• SDF Shape Functions

  Signed Distance Functions (SDFs) for 2D and 3D shapes. Essential primitives for shader programming and raymarching.

• SDF Operations

  SDF operations for complex shapes: boolean ops, smooth blending, and transformations. Combine primitives into intricate forms.

function⁶

• screenAspectUV

  TSL function that adjusts UV coordinates for screen aspect ratio. Fixes distortion in shaders with one function call.

• Repeating Pattern

  Create seamless, infinitely repeating patterns with domain repetition. TSL function for tiling textures in shaders.

• bloom

  Bloom effect creating glowing halos around bright areas. Post-processing function for luminous highlights in shaders.

• bloomEdgePattern

  TSL function for glowing edge patterns and bloomed outlines. Add luminous effects to your shaders instantly.

• domainIndex

  Calculate domain indices for pattern repetition. Create unique variations across repeated instances in shaders.

• Coordinate Functions

  Convert between Cartesian and polar coordinates in TSL. Essential for radial patterns and circular effects.