GitHub - paradise-runner/background-clouds: an ambient relaxing set of background clouds to float lazily by · GitHub
/" data-turbo-transient="true" />
Skip to content
Search or jump to...
Search code, repositories, users, issues, pull requests...
-->
Search
Clear
Search syntax tips
Provide feedback
--><br>We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted
Cancel
Submit feedback
Saved searches
Use saved searches to filter your results more quickly
-->
Name
Query
To see all available qualifiers, see our documentation.
Cancel
Create saved search
Sign in
/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up
Appearance settings
Resetting focus
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
paradise-runner
background-clouds
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>4 Commits<br>4 Commits
src
src
test
test
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
background-clouds.png
background-clouds.png
package.json
package.json
View all files
Repository files navigation
background-clouds
background-clouds adds a lightweight, animated low-poly cloud bank behind a website. It uses a single canvas, has no runtime dependencies, pauses motion when the user prefers reduced motion, and exposes lifecycle methods for single-page apps.
Install
npm install background-clouds
Use
import { createCloudBackground } from "background-clouds";
const clouds = createCloudBackground({<br>canvas: document.querySelector("#background-clouds"),<br>seed: "my-site",<br>speed: 0.8,<br>opacity: 0.9<br>});
// Later, for example when unmounting a route:<br>clouds.destroy();
">canvas id="background-clouds" aria-hidden="true">canvas>
#background-clouds {<br>position: fixed;<br>inset: 0;<br>width: 100%;<br>height: 100%;<br>pointer-events: none;<br>z-index: -1;
The canvas must be available before calling createCloudBackground. The returned controller has start(), stop(), resize(), setSeed(seed), and destroy() methods. seed may be a string or number; using the same seed produces the same cloud layout. speed and opacity default to 1 and accept non-negative numbers.
Options
Option<br>Default<br>Description
canvas<br>required<br>The element to render into.
seed<br>random<br>A stable string or number for deterministic cloud placement.
speed<br>Drift multiplier. Set to 0 for still clouds.
opacity<br>Overall cloud opacity multiplier.
pixelRatio<br>Maximum device-pixel ratio used for rendering.
reducedMotion<br>media query<br>Set explicitly to override prefers-reduced-motion.
The package owns only the canvas pixels. Set the canvas’s stacking order, background color, and positioning in your site CSS.
About
an ambient relaxing set of background clouds to float lazily by
Topics
javascript
animation
relaxing
ambient
Resources
Readme
License
MIT license
Uh oh!
There was an error while loading. Please reload this page.
Activity
Stars
stars
Watchers
watching
Forks
forks
Report repository
Contributors
Uh oh!
There was an error while loading. Please reload this page.
Languages
JavaScript<br>100.0%
You can’t perform that action at this time.