{"_id":"@believablecreations/clouds","name":"@believablecreations/clouds","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@believablecreations/clouds","version":"1.0.0","author":{"name":"Believable Creations Authors"},"license":"MIT","homepage":"https://believablecreations.com","description":"Layered, animated, and scroll-reactive cloud canvases for Angular applications.","dependencies":{"tslib":"^2.8.1"},"peerDependencies":{"@angular/common":">=20.0.0 <24.0.0","@angular/core":">=20.0.0 <24.0.0"},"sideEffects":false,"keywords":["angular","canvas","clouds","parallax","animation","creative coding"],"module":"fesm2022/believablecreations-clouds.mjs","typings":"types/believablecreations-clouds.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/believablecreations-clouds.d.ts","default":"./fesm2022/believablecreations-clouds.mjs"}},"type":"module","gitHead":"1c4de21a42a51875b214064735063f1c45f963c8","_id":"@believablecreations/clouds@1.0.0","_nodeVersion":"25.8.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-ZiUc5ee/SoGi10nIuuErBk4G5MgZjp5RvWsUWrozDyrNfehpnlPRsf22Xy0ABbSMK31Q0MKyvRGbOnaAMjZhUA==","shasum":"68181a9fea251d0261296f3ce91f40979b3e323f","tarball":"https://registry.npmjs.org/@believablecreations/clouds/-/clouds-1.0.0.tgz","fileCount":7,"unpackedSize":629990,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEsqYVhhAQ+jSKDBIytG9/ZevyAcm/ppMvV/bQHgS9cEAiEAyu0twtvI5duLFnDGHwhVofnTImH8AB+37DHIV2bdLbo="}]},"_npmUser":{"name":"leocreer","email":"leo.creer@gmail.com"},"directories":{},"maintainers":[{"name":"leocreer","email":"leo.creer@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/clouds_1.0.0_1787857086467_0.17212608665771367"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-27T18:58:06.270Z","1.0.0":"2026-08-27T18:58:06.720Z","modified":"2026-08-27T18:58:07.475Z"},"maintainers":[{"name":"leocreer","email":"leo.creer@gmail.com"}],"description":"Layered, animated, and scroll-reactive cloud canvases for Angular applications.","homepage":"https://believablecreations.com","keywords":["angular","canvas","clouds","parallax","animation","creative coding"],"author":{"name":"Believable Creations Authors"},"license":"MIT","readme":"# @believablecreations/clouds\n\nLayered, deterministic cloud canvases for Angular 20–23. The package migrates the Cloud Canvas rendering and configuration system from Believe with animation, responsive density, tinting, synchronized parallax, responsive presets, persistence, and JSON import/export.\n\n## Install\n\n```bash\nnpm install @believablecreations/clouds\n```\n\n## Use\n\n```ts\nimport {Component, signal} from '@angular/core';\nimport {\n  CloudCanvasComponent,\n  DEFAULT_CLOUD_LAYERS,\n} from '@believablecreations/clouds';\n\n@Component({\n  selector: 'app-hero',\n  imports: [CloudCanvasComponent],\n  template: `\n    <bc-clouds\n      [layers]=\"layers\"\n      [scrollProgress]=\"scrollProgress()\" />\n  `,\n})\nexport class HeroComponent {\n  readonly layers = DEFAULT_CLOUD_LAYERS;\n  readonly scrollProgress = signal(0);\n}\n```\n\n`scrollProgress` is measured in viewport-height units. A value of `1` means the scene has moved through one viewport. Place the component in a sized container; it fills the container.\n\nThe original Believe `cloud-soft.png` sprite is embedded as a base64 data URL and loaded into the canvas by default. Consumers do not need to copy or serve it. The package also exports `BELIEVE_CLOUD_SPRITE_DATA_URL` and ships the physical PNG for tooling that prefers a file URL. Set `spriteUrl` to replace it with another PNG. If that image fails to load, the component emits `cloudError` and uses a procedural fallback.\n\n## Inputs\n\n- `layers`: ordered cloud layer configurations.\n- `spriteUrl`: optional custom cloud sprite.\n- `scrollProgress`: external scroll position in viewport units.\n- `sync`: shared sync point and post-sync movement configuration.\n- `paused`: freezes drift and rotation while retaining parallax updates.\n- `maxFps`: animation frame cap, from 1 to 120.\n- `pixelRatio`: canvas render scale, from 0.5 to 2.\n- `blendMode`: canvas composite operation. The Believe-compatible default is `screen`.\n- `useWorker`: generates cloud layouts in the packaged Web Worker by default; disable it to use the synchronous fallback.\n\n`BELIEVE_CLOUD_PRESET` and `BELIEVE_MOBILE_CLOUD_PRESET` expose the original high-density responsive settings. `BELIEVE_CLOUD_CONFIG` includes those presets with the original responsive breakpoints and cloud sync values. `DEFAULT_CLOUD_LAYERS` is a lighter preset intended for production landing pages.\n\n## Configuration panel\n\n`CloudConfiguratorComponent` migrates the Believe cloud controls: layer selection, mobile/desktop presets, count, spread, height, constrained width, vertical position, responsive density, parallax, rotation, offset, opacity, tint, color, sync, responsive breakpoints, save/load, and JSON import/export.\n\n```html\n<section class=\"cloud-scene\">\n  <bc-clouds\n    [layers]=\"liveLayers()\"\n    [sync]=\"liveSync()\"\n    [scrollProgress]=\"scrollProgress()\" />\n\n  <bc-cloud-configurator\n    [config]=\"config\"\n    [viewportWidth]=\"viewportWidth()\"\n    (layersChange)=\"liveLayers.set($event)\"\n    (syncChange)=\"liveSync.set($event)\" />\n</section>\n```\n\nFor headless configuration, inject a component-scoped `CloudSettingsService`. It exposes signals for the mobile and desktop presets, interpolated live layers, active layer, sync values, status, and imported/exported JSON.\n","readmeFilename":"README.md","_rev":"1-db549b40d6c84b1b4c76252eddb9fefa"}