Docs
Doodle Background Effect
Doodle Background Effect
Displays a beautiful Doodle Pure CSS Background Effect.
Installation
Copy and paste the Event Calendar code into your project.
API Reference
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| width | string | Container width | "100vw" |
| height | string | Container height | "100vh" |
| shapeCount | number | Number of shapes to generate | 20 |
| blurAmount | number | Blur intensity in pixels | 100 |
| colors | string[] | Array of color hex codes | [Array of 20 colors] |
I've created a React component called ColorfulShapes that recreates the functionality of the original CSS Doodle code using React and Tailwind CSS. The component generates random polygon shapes with vibrant colors that animate when clicked.
Features:
- Random Shape Generation: Creates polygon shapes with random properties including size, position, rotation, and color.
- Interactive: Click anywhere on the component to regenerate all shapes with new random properties.
- Customizable: The component accepts props to customize the width, height, number of shapes, blur amount, and color palette.
- Responsive: Works well on different screen sizes by using viewport units.
- Smooth Animations: Uses CSS keyframes for smooth color transitions and movement.
How It Works:
- The component uses React state to manage the collection of random shapes
- Each shape has properties like position, size, color, and animation timing
- When clicked, the component regenerates all shapes with new random properties
- A blur overlay is applied to create the dreamy effect seen in the original
The documentation page provides detailed information about the component's API, usage examples, and customization options.