Utilities

  • 04boilerplateFree
  • 02color
  • 01noise
  • 13postprocessingNew
  • 06patterns
  • 03distortion
  • 02sdf
  • 06function
  • 04interactivity

Join waitlist ↵

Utilities to kickstart your creative coding projects.

    boilerplate4

    • Loading...
    • Loading...
    • Loading...
    • Loading...

    color2

    • Loading...
    • Loading...

    noise1

    • Loading...

    postprocessing13

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    patterns6

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    distortion3

    • Loading...
    • Loading...
    • Loading...

    sdf2

    • Loading...
    • Loading...

    function6

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    interactivity4

    • Loading...
    • Loading...
    • Loading...
    • Loading...
Works171
Writing31

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Loading...

2025 Phobon

phobon.ioShadercraft

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.
utilities/code-window.webp

Boilerplate Project

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

Free
r3f
vanilla
utilities/code-window.webp

WebGPU Scene

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

Free
r3f
utilities/code-window.webp

Sketch Component

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

Free
r3f
vanilla
utilities/code-window.webp

Color Space Correction

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

Free
r3f
utilities/cosine-palette.webp

Cosine Palette

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

r3f
vanilla
utilities/tonemapping.webp

Tonemapping Functions

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

r3f
vanilla
utilities/noise.webp

Noise Functions

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

r3f
vanilla
utilities/code-window.webp

Postprocessing Component

A component that applies postprocessing effects to your scene.

r3f
utilities/pixellation-effect.webp

ASCII Effect

Post-process the scene into pixellated ASCII-style tiles using a glyph atlas and luma-driven character selection.

New
r3f
vanilla
utilities/ca-effect.webp

Chromatic Aberration Effect

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

r3f
vanilla
utilities/crt-effect.webp

CRT Scanline Effect

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

r3f
vanilla
utilities/dither-effect.webp

Dither Effect

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

r3f
vanilla
utilities/halftone-effect.webp

Halftone Effect

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

r3f
vanilla
utilities/grain-texture-effect.webp

Grain Texture Effect

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

r3f
vanilla
utilities/pixellation-effect.webp

Pixellation Effect

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

r3f
vanilla
utilities/vignette-effect.webp

Vignette Effect

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

r3f
vanilla
utilities/led-effect.webp

LED Effect

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

r3f
vanilla
utilities/bulge-distortion.webp

Bulge Distortion Effect

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

r3f
vanilla
utilities/swirl-distortion.webp

Swirl Distortion Effect

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

r3f
vanilla
utilities/wave-distortion.webp

Wave Distortion Effect

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

r3f
vanilla
utilities/grain-texture-effect.webp

Grain Texture Pattern

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

r3f
vanilla
utilities/pixellation-effect.webp

Pixellation Pattern

Pixelation shader pattern for retro visuals. Adjustable resolution for mosaic-like appearance.

r3f
vanilla
utilities/noise.webp

Speckled Noise Pattern

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

r3f
vanilla
utilities/vignette-effect.webp

Vignette Pattern

Classic vignette shader pattern that darkens edges and draws focus to center. Essential treatment for compositions.

r3f
vanilla
utilities/canvas-weave-pattern.webp

Canvas Weave Pattern

Canvas weave shader pattern simulating fabric textures. Add painterly, textile surfaces to your visuals.

r3f
vanilla
utilities/led-effect.webp

LED Pattern

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

r3f
vanilla
utilities/bulge-distortion.webp

Bulge Distortion

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

r3f
vanilla
utilities/swirl-distortion.webp

Swirl Distortion

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

r3f
vanilla
utilities/wave-distortion.webp

Wave Distortion

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

r3f
vanilla
utilities/sdf-shapes.webp

SDF Shape Functions

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

r3f
vanilla
utilities/sdf.webp

SDF Operations

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

r3f
vanilla
utilities/screen-aspect-uv.webp

Screen Aspect UV

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

r3f
vanilla
utilities/repeating-pattern.webp

Repeating Pattern

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

r3f
vanilla
utilities/bloom.webp

Bloom

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

r3f
vanilla
utilities/bloom-edge-pattern.webp

Bloom Edge Pattern

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

r3f
vanilla
utilities/tonemapping.webp

Domain Index

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

r3f
vanilla
utilities/code-window.webp

Coordinate Functions

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

r3f
vanilla
utilities/buffer-triggers.webp

Storage Buffers

Provisions paired active/value uniform arrays for trigger-style shader data.

r3f
utilities/buffer-triggers.webp

Buffer Triggers

Animation-aware trigger helper that finds available buffer slots, applies easing, and cleans up automatically.

r3f
utilities/grid-trail-texture.webp

Grid Trail Texture

Pointer-responsive DataTexture generator that accumulates direction and speed for TSL-driven trail effects.

r3f
utilities/pointer-uniform.webp

Pointer Uniform

Hook and helper that keep pointer TSL uniforms synced in [-1, 1] NDC for both React Three Fiber and vanilla scenes.

r3f
vanilla

Be the first to know what's next