Atmospheric Drift

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

Installation

npm install @reactbytes/atmospheric-drift

Usage

import { AtmosphericDrift } from "@reactbytes/atmospheric-drift";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | preset | select | mistral | Active wind preset determining flow configurations. | | palette | select | midnight | Active color spectrum mapping for the particles velocity. | | showGrid | boolean | true | Renders a background mathematical alignment grid overlay. | | audioEnabled | boolean | false | Triggers pink noise ambient wind sound synthesis mapped to flow speed. | | particleCount | number | 15000 | Total count of WebGL animated wind vector particles. | | flowSpeed | number | 3.1 | Multiplier controlling velocity and drift speed. | | trailPersistence | number | 0.94 | Retention rate of line drawing trails on FBO texture. | | windWobble | number | 0.024 | Frictional cell vibration/noise amplitude. |

Presets

This component includes the following design presets:

• Mistral Surge (Default) (default)
• Sirocco Dust (sirocco)
• Boreal Flow (aurora)
• Winter Gale (storm)
• Zenith Drift (zen)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Physics & Web Audio

• WebGL 2D Flow - FBO Vector Simulation
• Web Audio API - Pink Noise Synthesizer

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