FilmStock

Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave

Props

stock
Film stock — each look is a real measured film-emulation color LUT
Type
"portrait400" | "vivid100" | "chrome64" | "slide100" | "velvet50" | "everyday400" | "pastel400" | "warm200" | "instant" | "mono400"
Default
portrait400
strength
How strongly the stock's color grade is applied
Type
number
Default
1
halation
Strength of the red-orange highlight glow (film emulsion backscatter)
Type
number
Default
0.4
halationRadius
Spread of the halation glow in pixels
Type
number
Default
28
weave
Gate weave — subtle projector-like frame jitter and rotation
Type
number
Default
0

Usage

<Shader>
  <FilmStock>
    <Circle />
  </FilmStock>
</Shader>

<Shader>
  <FilmStock>
    <Circle />
  </FilmStock>
</Shader>

<Shader>
  <FilmStock>
    <Circle />
  </FilmStock>
</Shader>

<Shader>
  <FilmStock>
    <Circle />
  </FilmStock>
</Shader>

import { createShader } from 'shaders/js'

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