@bg-effects/silk

English | 简体中文

A high-performance silk background effect built with OGL and Vue.

Live Demo

---

Features

• 🚀 High Performance: Built with OGL (a lightweight WebGL library) for smooth rendering.
• 🎨 Elegant Silk Effect: Procedural silk-like animation with customizable noise and flow.
• 🛠️ Debug Mode: Built-in visual debug panel for real-time adjustments.
• 📦 Ready to Use: Easy-to-use Vue component with simple configuration.

Installation

pnpm add @bg-effects/silk ogl

Note: ogl is a peer dependency and needs to be installed manually.

Usage

<script setup>
import { Silk } from '@bg-effects/silk'
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <Silk 
      :speed="1.2"
      color="#ffffff"
      :noise-intensity="0.8"
    />
  </div>
</template>

Props

Prop	Type	Default	Description
color	string	'#ffffff'	Color of the silk
speed	number	1.0	Animation speed
scale	number	1.0	Effect scale
rotation	number	0	Rotation angle
noiseIntensity	number	1.0	Intensity of the noise flow
brightness	number	1.0	Overall brightness
chromaticAmount	number	0.01	Chromatic aberration amount
specularIntensity	number	1.0	Specular highlight intensity
sheen	number	1.0	Silk sheen intensity
debug	boolean	false	Enable debug panel
lang	'zh-CN' | 'en'	'zh-CN'	UI language

Local Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

License

MIT