Dynamic props

동적 props

Props can update each frame from animation, pointer position, or values sampled from another layer.

Also known as: Reactive propsDriven props

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React

// Renders only in browsers with WebGPU.
import { Shader, Circle, LinearGradient } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <LinearGradient
        id="radius-map"
        colorA="#081b3a"
        colorB="#f472b6" />
      <Circle
        center={{
          x: 0.25,
          y: 0.5
        }}
        color="#22d3ee"
        radius={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0.08,
          outputMax: 0.2,
          speed: 1
        }} />
      <Circle
        center={{
          type: "mouse-position",
          smoothing: 0.12,
          momentum: 0.2
        }}
        radius={0.08} />
      <Circle
        center={{
          x: 0.74,
          y: 0.5
        }}
        color="#fbbf24"
        radius={{
          type: "map",
          source: "radius-map",
          channel: "luminance",
          inputMin: 0,
          inputMax: 1,
          outputMin: 0.06,
          outputMax: 0.22
        }} />
    </Shader>
  )
}

Vue

<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Circle, LinearGradient } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <LinearGradient
      id="radius-map"
      color-a="#081b3a"
      color-b="#f472b6"/>
    <Circle
      :center="{
        x: 0.25,
        y: 0.5
      }"
      color="#22d3ee"
      :radius="{
        type: 'auto-animate',
        mode: 'ping-pong',
        outputMin: 0.08,
        outputMax: 0.2,
        speed: 1
      }"/>
    <Circle
      :center="{
        type: 'mouse-position',
        smoothing: 0.12,
        momentum: 0.2
      }"
      :radius="0.08"/>
    <Circle
      :center="{
        x: 0.74,
        y: 0.5
      }"
      color="#fbbf24"
      :radius="{
        type: 'map',
        source: 'radius-map',
        channel: 'luminance',
        inputMin: 0,
        inputMax: 1,
        outputMin: 0.06,
        outputMax: 0.22
      }"/>
  </Shader>
</template>

Svelte

<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Circle, LinearGradient } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <LinearGradient
    id="radius-map"
    colorA="#081b3a"
    colorB="#f472b6" />
  <Circle
    center={{
      x: 0.25,
      y: 0.5
    }}
    color="#22d3ee"
    radius={{
      type: "auto-animate",
      mode: "ping-pong",
      outputMin: 0.08,
      outputMax: 0.2,
      speed: 1
    }} />
  <Circle
    center={{
      type: "mouse-position",
      smoothing: 0.12,
      momentum: 0.2
    }}
    radius={0.08} />
  <Circle
    center={{
      x: 0.74,
      y: 0.5
    }}
    color="#fbbf24"
    radius={{
      type: "map",
      source: "radius-map",
      channel: "luminance",
      inputMin: 0,
      inputMax: 1,
      outputMin: 0.06,
      outputMax: 0.22
    }} />
</Shader>

Solid

// Renders only in browsers with WebGPU.
import { Shader, Circle, LinearGradient } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <LinearGradient
        id="radius-map"
        colorA="#081b3a"
        colorB="#f472b6" />
      <Circle
        center={{
          x: 0.25,
          y: 0.5
        }}
        color="#22d3ee"
        radius={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0.08,
          outputMax: 0.2,
          speed: 1
        }} />
      <Circle
        center={{
          type: "mouse-position",
          smoothing: 0.12,
          momentum: 0.2
        }}
        radius={0.08} />
      <Circle
        center={{
          x: 0.74,
          y: 0.5
        }}
        color="#fbbf24"
        radius={{
          type: "map",
          source: "radius-map",
          channel: "luminance",
          inputMin: 0,
          inputMax: 1,
          outputMin: 0.06,
          outputMax: 0.22
        }} />
    </Shader>
  )
}

JavaScript

// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'LinearGradient',
      id: 'radius-map',
      props: {
        colorA: '#081b3a',
        colorB: '#f472b6',
      },
    },
    {
      type: 'Circle',
      props: {
        center: {
          x: 0.25,
          y: 0.5
        },
        color: '#22d3ee',
        radius: {
          type: 'auto-animate',
          mode: 'ping-pong',
          outputMin: 0.08,
          outputMax: 0.2,
          speed: 1
        },
      },
    },
    {
      type: 'Circle',
      props: {
        center: {
          type: 'mouse-position',
          smoothing: 0.12,
          momentum: 0.2
        },
        radius: 0.08,
      },
    },
    {
      type: 'Circle',
      props: {
        center: {
          x: 0.74,
          y: 0.5
        },
        color: '#fbbf24',
        radius: {
          type: 'map',
          source: 'radius-map',
          channel: 'luminance',
          inputMin: 0,
          inputMax: 1,
          outputMin: 0.06,
          outputMax: 0.22
        },
      },
    }
  ]
}, { disableTelemetry: true })

Props · `Circle`

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

Name	Value	Default	Range / options	Description
`origin`Origin	Set in code	center	—	Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
`color`Color	#22d3ee	#ffffff	—	The color of the circle
`radius`Radius	1Auto-animated in the demo — moving it pins the value	1	0 – 2 (step 0.01)	The radius of the circle. A value of one (1) is sets the circle to fit the canvas.
`softness`Softness	0	0	0 – 1 (step 0.01)	Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.
`center`Center Position	x0.25y0.5	{"x":0.5,"y":0.5}	x, y: 0 – 1	The center point of the circle
`strokeThickness`Stroke Thickness	0	0	0 – 0.5 (step 0.01)	The thickness of the stroke outline. Zero (0) means no stroke.
`strokeColor`Stroke Color	#000000	#000000	—	The color of the stroke outline
`strokePosition`Stroke Position		center	outside · center · inside	Position of the stroke relative to the circle edge
`colorSpace`Color Blending		linear	linear · oklch · oklab · hsl · hsv · lch	Color space for blending fill and stroke colors in soft edges

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Dynamic props connect a number or position to a changing input instead of a fixed value. Think of replacing a hand-adjusted dial with a small motor: the value keeps moving with time or with the pointer.

`auto-animate` moves between `outputMin` and `outputMax` according to `mode` and `speed`. `mouse-position` connects a coordinate such as `center` to the pointer. `map` reads a `channel` from a `source` layer and maps `inputMin`–`inputMax` onto `outputMin`–`outputMax`.

A `mouse-position` value changes only when someone moves the pointer, so pair it with `auto-animate` when the initial preview should move on its own. Give a mapped source layer an `id`, and avoid tying every decorative value to the pointer or the scene may feel restless.

When to use

Use it for cursor-following glass, a background shape that pulses on its own, or an object whose size follows a gradient's brightness. Use it sparingly in product UI that needs stable values or interfaces where every change should not track pointer movement.

Props · Circle

Related

Circle원

Linear Gradient선형 그라디언트

Cursor Trail커서 트레일

Custom shader커스텀 셰이더

When to use

Props · `Circle`