Metallic Blob React Component

This is a small open-source React component that renders a chrome/metallic blob scene using WebGL (Three.js).

Installation

Install from npm:

npm install metallic-blob

https://www.npmjs.com/package/metallic-blob

Usage

import React from "react";
import { MetallicBlob } from "metallic-blob/react";

export default function Page() {
  return (
    <div style={{ width: 420, height: 420 }}>
      <MetallicBlob
        draggable={true}
        appearance={{
          blobScale: 0.5,
          textureOctaves: 1,
          textureAmountTop: 0.18,
          textureAmountBottom: 0.15,
        }}
        style={{ width: "100%", height: "100%" }}
      />
    </div>
  );
}

Props

MetallicBlob props

• className?: string
• style?: React.CSSProperties
• draggable?: boolean (default true)
• appearance?: BlobAppearanceOptions

appearance (BlobAppearanceOptions)

• blobScale?: number
• blobColor?: string
• metalness?: number
• roughness?: number
• envMapIntensity?: number
• backgroundColor?: string
• backgroundAlpha?: number (set 0 = transparent)
• ambientLightIntensity?: number
• keyLightIntensity?: number
• rimLightIntensity?: number
• cameraZ?: number
• cameraFov?: number
• spinSpeedY?: number
• wobbleSpeedX?: number
• wobbleAmountX?: number
• bobSpeedY?: number
• bobAmountY?: number
• textureAmountTop?: number
• textureAmountBottom?: number
• textureFrequencyTop?: number
• textureFrequencyBottom?: number
• textureOctaves?: number

License

MIT