FilmGrain

Analog film grain texture overlay, weighted toward darker areas

Props

strengthnumber

Default:0.5

Intensity of the film grain noise

strength

numberDefault: 0.5

Intensity of the film grain noise

biasnumber

Default:2

Concentrates grain in darker areas. Higher values focus grain more heavily on shadows; 0 applies grain uniformly.

bias

numberDefault: 2

Concentrates grain in darker areas. Higher values focus grain more heavily on shadows; 0 applies grain uniformly.

animatedboolean

Default:false

When enabled, the grain pattern changes each frame for a dynamic film effect

animated

booleanDefault: false

When enabled, the grain pattern changes each frame for a dynamic film effect

Usage

<Shader>
  <FilmGrain>
    <Circle />
  </FilmGrain>
</Shader>

<Shader>
  <FilmGrain>
    <Circle />
  </FilmGrain>
</Shader>

<Shader>
  <FilmGrain>
    <Circle />
  </FilmGrain>
</Shader>

<Shader>
  <FilmGrain>
    <Circle />
  </FilmGrain>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'FilmGrain', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

FallingLines

FloatingParticles

Documentation

FilmGrain

Props

Usage