此为抽离效果的组件项目

使用方法

1. 安装依赖

此组件依赖以下 peer dependencies：

• react
• react-dom
• three

2. 导入组件

import { RadiataCanvas } from 'rachel-core';

3. 基础使用

import { RadiataCanvas } from 'rachel-core';

export default function Demo() {
  return (
    <div style={{ width: '100%', height: '100vh', background: '#000' }}>
      <RadiataCanvas
        orb={0.35}
        petalCount={1}
        redShift={0.003}
        audioJitter={true}
        idleAnimation={true}
      />
    </div>
  );
}

4. Props

• orb: 控制球体可见度和体量感，范围建议 0-1
• petalCount: 控制球体瓣数密度，建议范围 0.25-4
• redShift: 控制 gl_FragColor.r 的减值强度，建议范围 0-0.02
• audioJitter: 是否启用轻微抖动
• idleAnimation: 是否启用待机动画
• className: 传给 canvas 的类名
• style: 传给 canvas 的样式

5. 尺寸说明

组件本身渲染为一个 canvas，默认样式是 width: 100%、height: 100%。需要由外层容器提供明确尺寸。