own-the-canvas 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -1
  2. package/README.md +30 -11
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,9 +2,18 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## [2.0.1] - 2026-11-01
6
+
7
+ Docs-only release so the npm page shows the 2.0 README.
8
+
9
+ ### Changed
10
+
11
+ - README: new cover image (the old one showed the 1.x monochrome look and advertised removed components), a Living Scenes table describing each Living Scene and which react to `data-otc-solid`, updated descriptions for the rebuilt DragonCursor, Rain, and BubbleUniverse, and corrected defaults for `FluidSimulation.resolution` (80) and `FireEffect.spread` (0).
12
+ - `package.json`: normalized `repository.url` (npm warned on publish).
13
+
5
14
  ## [2.0.0] - 2026-11-01
6
15
 
7
- The big one: 18 new Living Scenes, effects that react to your page's elements, a production-safe runtime, color by default, and a redrawn catalog. 11 components are removed; see the README's "Upgrading from 1.x" for replacements.
16
+ The big one: new Living Scenes, effects that react to your page's elements, a production-safe runtime, color by default, and a redrawn catalog. 11 components are removed; see the README's "Upgrading from 1.x" for replacements.
8
17
 
9
18
  ### Added
10
19
 
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  # own-the-canvas
6
6
 
7
- **60 canvas-based React visual components. Zero dependencies. TypeScript.**
7
+ **50+ canvas-based React visual components. Zero dependencies. TypeScript.**
8
8
 
9
9
  [![npm version](https://img.shields.io/npm/v/own-the-canvas?style=flat-square&color=555555)](https://www.npmjs.com/package/own-the-canvas)
10
10
  [![license](https://img.shields.io/npm/l/own-the-canvas?style=flat-square&color=555555)](LICENSE)
@@ -18,7 +18,7 @@
18
18
 
19
19
  ## What's New in 2.0
20
20
 
21
- - **18 Living Scenes:** nature effects with real models underneath, from ivy that grows along your headline to fireflies that flash in sync and a moonlit sea that glitters where the waves catch the moon.
21
+ - **Living Scenes:** nature effects with real models underneath, from ivy that grows along your headline to fireflies that flash in sync and a moonlit sea that glitters where the waves catch the moon.
22
22
  - **Effects that know your page:** mark any element with `data-otc-solid` and petals, snow, seeds, leaves, fireflies, and paper cranes land on it, and ivy climbs it.
23
23
  - **Color by default:** every component opens in its signature palette. Pass `preset="monochrome"` for the 1.x look.
24
24
  - **Production-safe runtime:** effects pause offscreen and in background tabs, respect `prefers-reduced-motion`, and run at the same speed on 60Hz and 120Hz screens.
@@ -104,7 +104,7 @@ Rain and Confetti are next.
104
104
 
105
105
  ## Production-Safe by Default
106
106
 
107
- Runtime-based components (SakuraBlossom, the 18 Living Scenes below, and the rebuilt TornadoVortex, SolarFlare, BlackHole, NoiseGradient, Boids, and WatercolorBloom) get these behaviors with no setup:
107
+ Runtime-based components (SakuraBlossom, the Living Scenes below, and the rebuilt TornadoVortex, SolarFlare, BlackHole, NoiseGradient, Boids, and WatercolorBloom) get these behaviors with no setup:
108
108
 
109
109
  - **Pause offscreen:** zero work while scrolled out of view.
110
110
  - **Pause in background tabs:** resumes without a burst of catch-up motion.
@@ -120,7 +120,7 @@ Runtime-based components (SakuraBlossom, the 18 Living Scenes below, and the reb
120
120
 
121
121
  ### DragonCursor
122
122
 
123
- A sinuous dragon body that trails your cursor in real time. Segments, wings, optional fire breath, and a background star field with optional per-star glow halos — all configurable.
123
+ A glowing dragon that follows your cursor: a tapered, scaled body with dorsal spines, membrane wings, a horned head with glowing eyes, and fire breath. When the cursor leaves the canvas it wanders on its own over a star field.
124
124
 
125
125
  **Presets:** `default · emerald · inferno · void · ice · monochrome`
126
126
 
@@ -206,7 +206,7 @@ import { FluidSimulation } from "own-the-canvas";
206
206
 
207
207
  | Prop | Type | Default | Description |
208
208
  | --- | --- | --- | --- |
209
- | `resolution` | `number` | `128` | Grid resolution 32–128 |
209
+ | `resolution` | `number` | `80` | Grid resolution 32–128 |
210
210
  | `inkColors` | `string[]` | `["#0c4a6e", "#0891B2", "#06b6d4", "#67e8f9"]` | Ink colors |
211
211
  | `viscosity` | `number` | `0.0001` | Fluid viscosity |
212
212
  | `autoInk` | `boolean` | `true` | Auto-inject ink bursts |
@@ -243,7 +243,7 @@ import { FlowField } from "own-the-canvas";
243
243
 
244
244
  ### BubbleUniverse
245
245
 
246
- Physics-based soap bubbles that float, collide, merge on contact, and pop on click. Iridescent shimmer and glow included.
246
+ Soap bubbles with real thin-film color: clear centers, swirling rainbow rims, and window reflections. They drift upward over soft bokeh, merge on contact, and pop on click.
247
247
 
248
248
  **Presets:** `default · soap · neon · deep · minimal · monochrome`
249
249
 
@@ -265,7 +265,7 @@ import { BubbleUniverse } from "own-the-canvas";
265
265
 
266
266
  ### Rain
267
267
 
268
- Falling rain streaks with sinusoidal wind drift, splash particles on ground impact, and a background star field with optional glow halos. Great as a layered overlay.
268
+ A rainy night street: three depth layers of rain in a gusting wind, mist, street lamps mirrored on wet asphalt, ripples and spray, and lightning flashes when the rain is heavy.
269
269
 
270
270
  **Presets:** `default · storm · drizzle · neon · golden · monochrome`
271
271
 
@@ -308,7 +308,7 @@ import { FireEffect } from "own-the-canvas";
308
308
  | `intensity` | `number` | `0.95` | Flame intensity 0–1 |
309
309
  | `windStrength` | `number` | `0.3` | Horizontal wind -1 to 1 |
310
310
  | `cooling` | `number` | `0.3` | Cooling rate — higher = shorter flames |
311
- | `spread` | `number` | `0.7` | Flame spread 0–1 |
311
+ | `spread` | `number` | `0` | Flame spread 0–1 |
312
312
 
313
313
  ---
314
314
 
@@ -330,13 +330,32 @@ All components use `forwardRef` — the ref is forwarded to the underlying `<can
330
330
 
331
331
  ## Living Scenes
332
332
 
333
- Nature effects with real models underneath, built for hero sections:
333
+ Nature effects with real models underneath, built for hero sections. Each one runs on the shared runtime, and the ones marked ✦ react to `data-otc-solid` elements.
334
334
 
335
- > IvyGrowth (space colonization) · Fireflies (pulse-coupled sync) · Dandelion (pappus drag) · GrassField (spring blades) · Moths (transverse orientation) · SunbeamDust (Tyndall-lit dust) · PaperLanterns (buoyancy and depth) · KelpForest (anchored rope dynamics) · SnowDrift (angle-of-repose drifts) · FrostGlass (60° ice dendrites) · OrigamiCranes (faceted 3D paper) · SeasonsTree (kinematic tree, four seasons) · InkMountains (sumi-e ridgelines) · WindowRain (refracting drops on fogged glass) · IncenseSmoke (laminar-to-turbulent plume) · MoonlitSea (moon-path glitter) · CloudSea (sunlit cloud deck) · Ferrofluid (Rosensweig spikes)
335
+ | Component | What you see |
336
+ | --- | --- |
337
+ | `IvyGrowth` ✦ | Ivy that grows in real time and climbs the edges of your elements (space colonization) |
338
+ | `Fireflies` ✦ | Fireflies whose flashing slowly falls into sync, perching on your elements |
339
+ | `Dandelion` ✦ | Dandelion clocks you blow apart with the cursor; seeds parachute down on the wind |
340
+ | `GrassField` | Grass on springs that sways in rolling gusts and parts around the cursor |
341
+ | `Moths` | Moths spiraling a lamp by transverse orientation; your cursor is the light |
342
+ | `SunbeamDust` | Window light shafts where dust only glitters inside the beams |
343
+ | `PaperLanterns` ✦ | Sky lanterns rising with depth and flicker; click a button to release one from it |
344
+ | `KelpForest` | Swaying kelp, schooling fish, and surface light; the cursor pushes the water |
345
+ | `SnowDrift` ✦ | Snow that piles up on your headline and buttons, then slides off the edges |
346
+ | `FrostGlass` ✦ | Frost crystals creep across the glass; the cursor is warm breath that melts them |
347
+ | `OrigamiCranes` ✦ | Faceted paper cranes in 3D that bank, flap, and land on your elements |
348
+ | `SeasonsTree` ✦ | A swaying tree living through spring, summer, autumn, and winter |
349
+ | `InkMountains` | Ink-wash ridgelines dissolving into drifting mist, with parallax |
350
+ | `WindowRain` | Rain running down a fogged window over blurred city lights; drag to wipe |
351
+ | `IncenseSmoke` | A thread of incense smoke that breaks into curls as it rises |
352
+ | `MoonlitSea` | Night swells with a glittering moon path and cursor ripples |
353
+ | `CloudSea` | A sunset cloud deck seen from above that parts under the cursor |
354
+ | `Ferrofluid` | Glossy ferrofluid that spikes toward the cursor like a magnet |
336
355
 
337
356
  ---
338
357
 
339
- ## 34 More Components
358
+ ## More Components
340
359
 
341
360
  > AntColony · AuroraBorealis · BlackHole · Boids · ButterflySwarm · Confetti · CrystalGrowth · DeepSeaBioluminescence · DiffusionAggregation · Fireworks · GalaxySpiral · GameOfLife · Kaleidoscope · LSystem · Lightning · MagneticField · Mandala · Metaballs · NeuralWeb · NoiseGradient · ParticleField · PendulaWave · ReactionDiffusion · SakuraBlossom · SandSimulation · SlimeMold · SolarFlare · SpiderWeb · Spirograph · Starfield · TornadoVortex · VoronoiCells · WatercolorBloom · WaveInterference
342
361
 
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "own-the-canvas",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "Beautiful, responsive, fully customizable HTML canvas-based React visual components",
5
5
  "author": "Jabid Hasan",
6
6
  "homepage": "https://own-the-canvas.vercel.app",
7
7
  "repository": {
8
8
  "type": "git",
9
- "url": "https://github.com/jabid-19/own-the-canvas"
9
+ "url": "git+https://github.com/jabid-19/own-the-canvas.git"
10
10
  },
11
11
  "bugs": {
12
12
  "url": "https://github.com/jabid-19/own-the-canvas/issues"