Nature Kit is a modern library for nature animated backgrounds. It's written in ES6 / Typescript, based on WebGL, and has no external dependencies. The library contains six nature phenomena: clouds, rain, snow, sparkles, fire, and water.
On behalf of our team, we would like to thank you for purchasing this library. Your support encourages us to build better plugins and continuously bring value to our products. This documentation file covers all the information needed to install and use this library.
This tutorial will demonstrate how to add the Nature Kit library to a page.
Get started with a minimal HTML layout:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Page</title>
</head>
<body>
</body>
</html>
Add the following section to your page:
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="sparkles"
data-rotation-direction="left"
data-rotation-speed="3"
data-bg-color="#000000"
data-sparkles-color-1="#236cff"
data-sparkles-color-2="#fff"
data-density="20"
data-elongation="5"
data-lightness="1">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
You can change the look and feel of the background using data attributes.
Please note that all HTML content should be placed inside <div data-content>...</div>.
Copy nature-kit-webgl.min.js file from the lib folder to your project.
In the lib folder, you can find minified and non-minified versions of the library.
Place the <script> near the end of your pages, right before the closing </body> tag:
<script src="nature-kit-webgl.min.js"></script>
Add library initialization inside the script tags:
<script>
nature();
</script>
If you need debug information, you may call the script as follows:
<script>
nature({
debug: true
});
</script>
The final version:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Page</title>
</head>
<body>
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="sparkles"
data-rotation-direction="left"
data-rotation-speed="3"
data-bg-color="#000000"
data-sparkles-color-1="#236cff"
data-sparkles-color-2="#fff"
data-density="20"
data-elongation="5"
data-lightness="1">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
<!-- library initialization -->
<script src="nature-kit-webgl.min.js"></script>
<script>
nature();
</script>
</body>
</html>
If the width and height are not defined, the background will match the dimensions of the section content.
| Data Attribute | Value | Min | Max | Default | API Property | Description |
|---|---|---|---|---|---|---|
| data-nature | text | - | - | clouds | - | It defines the cloud's data type. |
| data-bg-color-1 | HEX color | - | - | #006eb2 | cloudsBGColor1 | It defines the first color in the background gradient. |
| data-bg-color-2 | HEX color | - | - | #89ccff | cloudsBGColor2 | It defines the second color in the background gradient. |
| data-clouds-color | HEX color | - | - | #ffffff | cloudsColor | It defines the color of the clouds. |
| data-clouds-speed | number | 0 | 10 | 0.5 | cloudsSpeed | It defines the speed of the clouds. |
| data-clouds-direction | 'left', 'right', 'top', 'bottom', 'left-top', 'right-top', 'left-bottom', 'right-bottom' | - | - | 'left' | cloudsDirection | It defines the direction of the clouds. |
| data-clouds-brightness | number | 0 | 10 | 0.7 | cloudsBrightness | It defines the brightness of the clouds. |
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="clouds"
data-bg-color-1="#003fff"
data-bg-color-2="#ccc"
data-clouds-color="#ffffff"
data-clouds-speed="0.5"
data-clouds-direction="right-bottom"
data-clouds-brightness="0.7">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
| Data Attribute | Value | Min | Max | Default | API Property | Description |
|---|---|---|---|---|---|---|
| data-nature | text | - | - | water | - | It defines the water data type. |
| data-bg-color-1 | HEX color | - | - | #2193b0 | waterBGColor1 | It defines the first color in the background gradient. |
| data-bg-color-2 | HEX color | - | - | #6dd5ed | waterBGColor2 | It defines the second color in the background gradient. |
| data-water-speed | number | 0 | 50 | 1.0 | waterSpeed | It defines the speed of the water. |
| data-water-direction | 'left', 'right', 'top', 'bottom', 'left-top', 'right-top', 'left-bottom', 'right-bottom' | - | - | 'left' | waterDirection | It defines the direction of the water. |
| data-water-relief | number | 0 | 20 | 1.0 | waterRelief | It defines the relief of the water. |
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="water"
data-bg-color-1="#2193b0"
data-bg-color-2="#6dd5ed"
data-water-direction="right-bottom"
data-water-speed="10.0"
data-water-relief="2.5">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
| Data Attribute | Value | Min | Max | Default | API Property | Description |
|---|---|---|---|---|---|---|
| data-nature | text | - | - | sparkles | - | It defines the sparkles data type. |
| data-bg-color | HEX color | - | - | #000000 | sparklesBGColor | It defines the background color of the sparkles. |
| data-sparkles-color-1 | HEX color | - | - | #236cff | sparklesColor1 | It defines the first sparkles color. |
| data-sparkles-color-2 | HEX color | - | - | #fbff89 | sparklesColor2 | It defines the second sparkles color. |
| data-rotation-speed | number | 0 | 100 | 3.0 | sparklesRotationSpeed | It defines the rotation speed. |
| data-rotation-direction | 'left', 'right' | - | - | 'left' | sparklesRotationDirection | It defines the rotation direction. |
| data-density | number | 0 | 200 | 20 | sparklesDensity | It defines the density of the sparkles. |
| data-elongation | number | 0 | 100 | 5.0 | sparklesElongation | It defines the elongation of the sparkles. |
| data-lightness | number | 0 | 10 | 1.0 | sparklesLightness | It defines the lightness of the sparkles. |
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="sparkles"
data-rotation-direction="left"
data-rotation-speed="3"
data-bg-color="#000000"
data-sparkles-color-1="#019d76"
data-sparkles-color-2="#fff"
data-density="15"
data-elongation="20"
data-lightness="1">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
| Data Attribute | Value | Min | Max | Default | API Property | Description |
|---|---|---|---|---|---|---|
| data-nature | text | - | - | snow | - | It defines the snow data type. |
| data-bg-color | HEX color | - | - | #000000 | snowBGColor | It defines the snow background color. |
| data-snow-color | HEX color | - | - | #ffffff | snowColor | It defines the snow color. |
| data-snow-speed | number | 0 | 10 | 0.5 | snowSpeed | It defines the speed of the snow. |
| data-snow-angle | degrees | -360 | 360 | 10 | snowAngle | It defines the direction of the snow. |
| data-density | number | 0 | 100 | 55 | snowDensity | It defines the density of the snow. |
| data-flake-size | number | 0 | 0.7 | 0.1 | flakeSize | It defines the size of the flakes. |
| data-snow-lightness | number | 0 | 3 | 0.7 | snowLightness | It defines the lightness of the snow. |
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="snow"
data-snow-speed="0.5"
data-snow-angle="10"
data-bg-color="#d8adff"
data-snow-color="#ffffff"
data-density="35"
data-flake-size="0.12"
data-snow-lightness="1.1">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
| Data Attribute | Value | Min | Max | Default | API Property | Description |
|---|---|---|---|---|---|---|
| data-nature | text | - | - | fire | - | It defines the fire data type. |
| data-base-color-1 | HEX color | - | - | #bc4c18 | fireBaseColor1 | It defines the first fire color. |
| data-base-color-2 | HEX color | - | - | #fff200 | fireBaseColor2 | It defines the second fire color. |
| data-fire-shape | number | 0 | 20 | 7.0 | fireShape | It defines the shape of the fire. |
| data-fire-speed | number | 0 | 10 | 1.0 | fireSpeed | It defines the speed of the fire. |
| data-fire-strength | number | 0 | 500 | 175 | fireStrength | It defines the strength of the fire. |
| data-fire-detalization | number | 1 | 10 | 2.0 | fireDetalization | It defines the detalization of the fire. |
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="fire"
data-base-color-1="#bc4c18"
data-base-color-2="#fff200"
data-fire-shape="7"
data-fire-speed="0.5"
data-fire-strength="175"
data-fire-detalization="2">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
| Data Attribute | Value | Min | Max | Default | API Property | Description |
|---|---|---|---|---|---|---|
| data-nature | text | - | - | rain | - | It defines the rain data type. |
| data-rain-color | HEX color | - | - | #ffffff | rainColor | It defines the rain color. |
| data-rain-speed | number | 0 | 10 | 4.0 | rainSpeed | It defines the speed of the rain. |
| data-rain-angle | degrees | -360 | 360 | 10 | rainAngle | It defines the direction of the rain. |
| data-drop-length | number | 0 | 10 | 1.0 | dropLength | It defines the length of the rain drops. |
| data-drop-width | number | 0 | 5 | 0.005 | dropWidth | It defines the width of the rain drops. |
<!-- example -->
<section
style="width: 100%; height: 500px;"
data-nature="rain"
data-rain-color="#aaa"
data-rain-speed="1.5"
data-rain-angle="10"
data-drop-length="2.0"
data-drop-width="1">
<div data-content>
<!-- any HTML content here -->
</div>
</section>
In case of errors and problems, it's possible to enable the debug option as follows:
<script>
nature({
debug: true
});
</script>
It's possible to change every background property via API. For example, if we have a sparkles section with ID my-section and need to change the sparkles density, we can do it as follows:
<script>
const $section = document.getElementById('my-section');
if($section && $section.jso && $section.jso.nature){
// update a property
$section.jso.nature.set('sparklesDensity', 150);
}
</script>
It's also possible to stop all event listeners. It can be helpful, for example, if you need to initiate a new instance of the library.
<script>
const $section = document.getElementById('my-section');
if($section && $section.jso && $section.jso.nature){
// stop all events listeners
$section.jso.nature.removeListeners();
}
</script>