Perlin Smoke

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/perlin-smoke

Usage

import { PerlinSmoke } from "@reactbytes/perlin-smoke";

export default function Example() {
  return (
    <PerlinSmoke />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | baseColor | color | #1e1e1e | Base color of the smoke effect (hex format). | | speed | number | 0.08 | Speed at which the smoke evolves over time. | | turbulence | number | 0.5 | Amount of noise and distortion applied to the smoke. | | milk | number | 0.4 | How 'milky' or white the brighter parts of the smoke should be. | | eco | boolean | true | Enables eco mode which dynamically changes resolution to save power. | | maxFPS | number | 50 | Maximum frames per second cap. | | mouseInteraction | number | 0.5 | Strength of the mouse pushing effect on the smoke. |

Presets

This component includes the following design presets:

• Balanced (balanced)
• High Performance (high)
• Eco Friendly (eco)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Technologies

• WebGL 2 - Graphics API

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Perlin Smoke.