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.
- package/CHANGELOG.md +10 -1
- package/README.md +30 -11
- 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:
|
|
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
|
-
**
|
|
7
|
+
**50+ canvas-based React visual components. Zero dependencies. TypeScript.**
|
|
8
8
|
|
|
9
9
|
[](https://www.npmjs.com/package/own-the-canvas)
|
|
10
10
|
[](LICENSE)
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
## What's New in 2.0
|
|
20
20
|
|
|
21
|
-
- **
|
|
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
|
|
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
|
|
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` | `
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
##
|
|
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.
|
|
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"
|