react-clouds v1.0.0

React Clouds

A customizable React component for creating beautiful, layered clouds. Perfect for creating atmospheric backgrounds and decorative elements in your React applications.

Installation

npm install react-clouds
# or
yarn add react-clouds

Features

• Fully customizable cloud appearance (size, color, position)
• Support for single or multiple cloud layers
• Responsive design - automatically adjusts to container width
• TypeScript support
• Lightweight with minimal dependencies
• Smooth shadow-based rendering

Basic Usage

import { Clouds } from 'react-clouds';

const SimpleExample = () => (
  <div style={{ position: 'relative', height: '200px', background: '#ffa6b9' }}>
    <Clouds size={100} color="#ffffff" />
  </div>
);

Advanced Usage - Cloud Layers

import { CloudLayers } from 'react-clouds';

const LayeredExample = () => (
  <CloudLayers
    height="24rem"
    backgroundColor="#ffa6b9"
    shadowOpacity={0.1}
    layers={[
      {
        size: 120,
        color: '#ffdbde',
        bottomOffset: 160,
        randomization: {
          xMin: 0.5,
          xMax: 0.7,
          yMin: 0.1,
          yMax: 0.3,
          initialX: 0.4,
        },
      },
      {
        size: 100,
        color: '#ffffff',
        bottomOffset: 0,
        randomization: {
          xMin: 0.4,
          xMax: 0.6,
          yMin: 0.03,
          yMax: 0.2,
          initialX: 0.5,
        },
      },
    ]}
  />
);

API Reference

Clouds Component Props

CloudLayers Component Props

Layer Configuration

Each layer in the layers array accepts the following properties:

interface Layer {
  size: number;
  color: string;
  bottomOffset: number;
  randomization?: {
    xMin?: number;
    xMax?: number;
    yMin?: number;
    yMax?: number;
    initialX?: number;
  };
}

License

MIT © Sahil Tandon