FilmStock

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

Props

stock

"portrait400" | "vivid100" | "chrome64" | "slide100" | "velvet50" | "everyday400" | "pastel400" | "warm200" | "instant" | "mono400"

Default:portrait400

Film stock — each look is a real measured film-emulation color LUT

stock

"portrait400" | "vivid100" | "chrome64" | "slide100" | "velvet50" | "everyday400" | "pastel400" | "warm200" | "instant" | "mono400"

Default: portrait400

Film stock — each look is a real measured film-emulation color LUT

strengthnumber

Default:1

How strongly the stock's color grade is applied

strength

numberDefault: 1

How strongly the stock's color grade is applied

halationnumber

Default:0.4

Strength of the red-orange highlight glow (film emulsion backscatter)

halation

numberDefault: 0.4

Strength of the red-orange highlight glow (film emulsion backscatter)

halationRadiusnumber

Default:28

Spread of the halation glow in pixels

halationRadius

numberDefault: 28

Spread of the halation glow in pixels

weavenumber

Default:0

Gate weave — subtle projector-like frame jitter and rotation

weave

numberDefault: 0

Gate weave — subtle projector-like frame jitter and rotation

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: {} }
    ]}
  ]
})

FilmGrain

Flip