Sparkle

Twinkling star glints over the bright parts of the layer inside

Props

  • size

    Spacing between glints, in CSS pixels (smaller means more glints)

    Type
    number
    Default
    100

  • intensity

    Brightness of the glints

    Type
    number
    Default
    10

  • threshold

    How bright the layer must be before glints appear: 0 allows all but black, 0.5 is mid-grey and up, 1 only pure white

    Type
    number
    Default
    0.2

  • expand

    Lets glints appear up to this many CSS pixels outside the bright areas

    Type
    number
    Default
    0

  • rayLength

    Length of the four rays around each glint (they fade out by half the spacing)

    Type
    number
    Default
    5

  • colorize

    How much each glint takes on the colour beneath it (0 is pure white)

    Type
    number
    Default
    0.45

  • speed

    How fast the glints twinkle

    Type
    number
    Default
    1

  • seed

    Re-rolls where the glints sit and when they blink

    Type
    number
    Default
    0

Usage

<Shader>
  <Sparkle
    intensity={10}
  >
    <Circle />
  </Sparkle>
</Shader>