동적 props

Dynamic props

애니메이션·포인터 위치·다른 레이어 값으로 셰이더 props를 프레임마다 바꿉니다.

다른 이름: Reactive propsDriven props

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// 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

<!-- 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

<!-- 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

// 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

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
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`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`origin`Origin	코드에서 지정	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	1데모에서 자동으로 오가는 값 — 움직이면 그 값에 고정됩니다	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

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

동적 props는 숫자나 좌표를 고정값 대신 움직이는 입력에 연결합니다. 손으로 조절하는 다이얼 대신 작은 모터를 단 것처럼, 한 값이 시간이나 커서 움직임을 따라 계속 바뀝니다.

`auto-animate`는 `outputMin`과 `outputMax` 사이를 `mode`와 `speed`에 따라 오가게 합니다. `mouse-position`은 `center` 같은 좌표를 포인터에 연결하고, `map`은 `source` 레이어의 `channel` 값을 읽어 `inputMin`·`inputMax`를 `outputMin`·`outputMax`로 대응시킵니다.

`mouse-position`은 사용자가 움직여야 변화가 드러나므로 초기 화면에서도 움직임을 보여 주는 `auto-animate`를 함께 둘 수 있습니다. `map`을 쓸 때는 참조할 레이어에 `id`를 지정하고, 정적인 장식까지 모두 포인터에 묶으면 화면이 산만해질 수 있습니다.

언제 쓰나

커서가 움직이는 글래스 효과, 자동으로 맥박치는 배경 도형, 그라디언트 밝기에 따라 크기가 달라지는 오브젝트에 잘 맞습니다. 값이 고정되어야 하는 제품 UI나 모든 변화가 사용자의 위치를 따라야 하는 접근성 민감한 인터페이스에는 신중하게 쓰세요.

속성(props) · Circle

함께 보기

원Circle

선형 그라디언트Linear Gradient

커서 트레일Cursor Trail

커스텀 셰이더Custom shader

언제 쓰나

속성(props) · `Circle`