ShaderSurface

core

ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원.

100%

Signature

Felix Metallic

liquid-silk

iridescent-pearl

molten-gold

liquid-glass

aurora-veil

mesh-flow

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

ShaderSurface 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Prop	타입	기본값	설명
`preset`*	`ShaderPresetId`	—	렌더할 셰이더 프리셋 id
`colors`	`string[]`	—	hex 색상 배열 (미지정 시 프리셋 기본 색)
`scale`	`number`	—	패턴 스케일
`speed`	`number`	—	애니메이션 속도
`distortion`	`number`	—	왜곡 강도
`grain`	`number`	—	필름 그레인 양
`contrast`	`number`	—	하이라이트 대비
`angle`	`number`	—	회전 각도(도)
`paused`	`boolean`	—	true면 단일 프레임만 렌더 (카드 배경 등)
`dpr`	`number`	—	device pixel ratio 상한 (기본 min(dpr, 2))

tsx

import { ShaderSurface } from "@reopt-ai/opt-ui";