react-voodoo 2.6.1 → 2.6.3

package/README.md

@@ -1,274 +1,370 @@
-# react-voodoo
+<h1 align="center">react-voodoo</h1>
+<p align="center"><b>Additive · Swipeable · SSR-ready · Physics-based</b><br/>A delta-driven tween composition engine for React</p>
 
-Additive, swipeable, SSR-ready animation engine for React.
+<p align="center"><img width="192" src="https://github.com/react-voodoo/react-voodoo/raw/master/doc/assets/logo-v0.png?sanitize=true" /></p>
 
-[![npm](https://img.shields.io/npm/v/react-voodoo)](https://www.npmjs.com/package/react-voodoo)
-[![license](https://img.shields.io/badge/license-CC--BY--ND--4.0%20OR%20AGPL--3.0-blue)](#license)
+<p align="center">
+<a href="https://www.npmjs.com/package/react-voodoo"><img src="https://img.shields.io/npm/v/react-voodoo.svg" alt="npm version" /></a>
+<a href="https://travis-ci.org/react-voodoo/react-voodoo"><img src="https://travis-ci.org/react-voodoo/react-voodoo.svg?branch=master" alt="Build Status" /></a>
+<img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat" />
+<br/>
+<a href="http://creativecommons.org/licenses/by-nd/4.0"><img src="https://img.shields.io/badge/License-CC%20BY--ND%204.0-lightgrey.svg" alt="License: CC BY-ND 4.0" /></a>
+<a href="http://www.gnu.org/licenses/agpl-3.0"><img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3" /></a>
+</p>
 
-## Overview
+<p align="center">
+  <a href="doc/readme.md"><b>Full documentation</b></a> &nbsp;·&nbsp;
+  <a href="https://react-voodoo.github.io/react-voodoo-samples/"><b>Live demos & CodeSandbox</b></a> &nbsp;·&nbsp;
+  <a href="https://github.com/react-voodoo/react-voodoo-samples"><b>Sample sources</b></a>
+</p>
 
-react-voodoo drives animations by writing CSS **directly to the DOM**, bypassing React's render loop entirely. Scroll positions, drag gestures, and programmatic tweens all feed into the same additive accumulator, so multiple concurrent animations compose without conflict.
-
-The engine is built on [tween-axis](../tween-axis/README.md) and uses its WebAssembly backend for hot-path property accumulation with zero JS-boundary crossings per frame.
+<p align="center"><img src="https://github.com/react-voodoo/react-voodoo/raw/master/doc/assets/demo.gif?sanitize=true" /></p>
 
 ---
 
-## Installation
+## Why react-voodoo?
 
-```bash
-npm install react-voodoo
-```
-
-Requires React 16, 17, or 18.
-
----
+Most animation libraries output **absolute values** — they own a CSS property and write a number to it each frame. That works fine for isolated transitions, but breaks down the moment you need to combine sources: a scroll position driving `translateY`, a drag gesture adding to the same `translateY`, and a parallax offset stacking on top. The libraries fight each other and you end up writing glue code.
 
-## Core concepts
+React-voodoo takes a different approach: its engine computes **deltas** — the *change* from the previous frame — and accumulates them additively across any number of axes. Multiple animations on the same property simply add together. No ownership, no conflicts.
 
-### Delta-based accumulation
-
-Every animation operates on **deltas** — the change from the previous timeline position — rather than absolute target values. On each scroll or animation frame, `goTo(newPos, tweenRefMaps)` emits deltas that are added into a numeric accumulator (`tweenRefMaps`). A separate mux pass then converts those numbers into CSS strings and writes them to `node.style` directly.
-
-This architecture enables:
-- Multiple axes and one-shot animations to animate the same property simultaneously (additive composition).
-- Direct DOM writes that skip React's reconciler entirely.
-- Predictive inertia and physics-based scrolling with no render overhead.
-
-### CSS demux / mux
-
-Tween descriptors specify CSS properties in their `apply` object. Before registering with `TweenAxis`, the `deMuxLine` pass converts each CSS value into a set of flat numeric keys (e.g. `transform_0_translateX_9`). On every frame the inverse `muxToCss` pass reconstructs the CSS strings (including `calc()` for multi-unit values) and writes them to the DOM.
-
-### WASM acceleration
+The engine is built on [tween-axis](../tween-axis/README.md) and uses its WebAssembly backend for hot-path property accumulation with zero JS-boundary crossings per frame.
 
-For tween descriptors without event callbacks and with a standard easing function, `CssTweenAxis` (the internal axis class) automatically switches the process to `PROC_WASM` mode. The WebAssembly engine accumulates the property deltas directly inside WASM — no JS function call per property per frame. Results are flushed back into `tweenRefMaps` in a tight loop after `goTo()` returns.
+This unlocks a set of features that are unique to the delta model:
 
-Descriptors that use custom easing functions or event callbacks (`entering`/`moving`/`leaving`) are transparently handled by the JS path (`PROC_RESULT`), so there is no behavioural change — WASM acceleration applies automatically where possible.
+| Feature | How |
+|---|---|
+| **Additive multi-axis composition** | Each axis contributes a delta; they stack without coordination code. |
+| **Swipeable / draggable animations** | Drag gestures are mapped directly to axis positions with realistic momentum. |
+| **Predictive inertia** | The engine computes the final snap target *at the moment of release*, before the animation plays out — useful for preloading the next slide. |
+| **SSR with correct initial styles** | Axes have a `defaultPosition`; styles are computed server-side and rendered inline — no flash on first paint. |
+| **DOM writes bypass React** | Style updates go straight to `node.style` via direct DOM writes, never triggering a re-render. |
+| **Multi-unit CSS via `calc()`** | Mix `%`, `px`, `vw`, `bw`/`bh` (box-relative units) in a single value — compiled to `calc()` automatically. |
 
 ---
 
-## Components
-
-### `<Component>` / `asTweener`
-
-The root animation engine. Wrap your animated tree with it to create a `Tweener` context.
+## Comparison
+
+### Feature matrix
+
+| | **react-voodoo** | Framer Motion v12 | GSAP + ScrollTrigger | react-spring v10 | Motion v5 | anime.js v4 |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|
+| Scroll-linked animation | ✅ | ✅ `useScroll` | ✅ | ⚠️ manual | ✅ | ✅ `ScrollObserver` |
+| Drag-linked animation | ✅ native | ✅ `drag` | ⚠️ manual | ✅ `@use-gesture` | ✅ gestures | ✅ `Draggable` |
+| **Additive multi-axis composition** | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| Physics / momentum inertia | ✅ predictive | ✅ spring | ❌ | ✅ spring | ⚠️ limited | ✅ spring |
+| **Predictive snap target** | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| **SSR — correct initial styles** | ✅ | ⚠️ flash | ⚠️ flash | ⚠️ flash | ⚠️ flash | ❌ |
+| Bypasses React render loop | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| Transform layer composition | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| SVG geometry attributes | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ |
+| Multitouch (drag multiple axes) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
+| Bundle size (approx. gzip) | ~18 kB | ~32 kB | ~35 kB | ~25 kB | ~4 kB | ~10 kB |
+| React dependency | ≥ 16 | ≥ 18 | none | ≥ 16 | none | none |
 
-```jsx
-import { Component } from "react-voodoo";
-// or with the HOC:
-import { tweener as asTweener } from "react-voodoo";
+---
 
-@asTweener
-class MyScene extends React.Component { ... }
-```
+## Performance
 
-### `<Node>`
+The delta model isn't just an architectural choice — the numbers back it up.
+In the scenarios that define react-voodoo's use-case — **compositing multiple animation
+sources on the same element** — the engine runs **3–7× faster than GSAP** and handles
+far more properties per frame without degrading.
 
-An animatable React element. Registers its CSS tween descriptors with the parent `Tweener`.
+<p align="center">
+  <img src="./doc/assets/perf-chart.svg" alt="Performance comparison chart" width="960"/>
+</p>
 
-```jsx
-import { Node } from "react-voodoo";
+<details>
+<summary><b>What each scenario measures</b></summary>
 
-<Node
-  id="card"
-  style={{ position: "absolute" }}
-  tweenLines={[
-    {
-      from: 0, duration: 500,
-      apply: { opacity: 1, transform: [{ translateY: "100px" }] },
-      easeFn: "easeQuadInOut",
-    }
-  ]}
-/>
-```
+| Scenario | Description |
+|---|---|
+| **sequential · 5 props** | Frame-by-frame advance, 5 CSS properties — the baseline everyone tests |
+| **property scale · 20 props** | Same advance with 20 properties — reveals engine scaling cost per property |
+| **additive ×3** | Three independent animation axes all writing to the same 5 properties simultaneously. This is react-voodoo's **native model**. Competitors must run 3 separate timelines and manually sum results. |
+| **spring layers** | Same 3 axes at different speeds (×1, ×0.7, ×0.3) — the signature scroll + drag + push composition pattern react-voodoo is built for |
+| **long timeline · 20 segs** | A timeline with 20 sequential animation segments — models a full-page scroll sequence or complex keyframe chain |
 
-### `<Axis>`
+</details>
 
-A scrollable animation timeline. Attach it to a scroll axis by `id`.
+<details>
+<summary><b>Why voodoo wins at scale</b></summary>
 
-```jsx
-import { Axis } from "react-voodoo";
-
-<Axis
-  id="scrollY"
-  size={1000}
-  defaultPosition={0}
-  inertia={{ snapToBounds: true, wayPoints: [{ at: 0 }, { at: 500 }] }}
-/>
-```
+- **Compiled-per-property processors** — at mount time each tween compiles a dedicated function (via `new Function`) that contains only the branches it needs. There is no per-property dispatch loop at runtime; property count scales at near O(1).
+- **WASM state machine** — the marker-scan loop (the part that decides which tweens are active as the cursor moves) runs entirely in WebAssembly. Zero JS-boundary crossings per frame in the hot path.
+- **Additive is free** — `goTo(pos, scope)` accumulates deltas into the same plain object regardless of how many axes call it. Competitors must maintain N separate target objects and merge them manually.
 
-### `<Draggable>`
+The one scenario where a stateless interpolator (Framer Motion / Popmotion) wins is
+a **single small axis with easing**: pure math functions with no timeline state beat even
+WASM for trivially short timelines. That overhead is the fair cost of additive composability —
+and it disappears entirely once you have more than one axis compositing on the same element.
 
-Maps touch/mouse drag gestures to an axis position.
+</details>
 
-```jsx
-import { Draggable } from "react-voodoo";
-
-<Draggable axisId="scrollY" />
-```
+> Full benchmark source: [`perf-compare/bench.js`](../perf-compare/bench.js)
+> Detailed analysis: [`doc/Alternatives libs perf comparaison.md`](doc/Alternatives%20libs%20perf%20comparaison.md)
 
 ---
 
-## Hooks
-
-### `useVoodoo(opts?)`
-
-Primary hook. Creates or inherits a `Tweener` instance and returns `[tweener, ViewBox]`.
-
-```jsx
-import { useVoodoo } from "react-voodoo";
+## Installation
 
-function Scene() {
-  const [tweener, ViewBox] = useVoodoo();
-  return <ViewBox>{...}</ViewBox>;
-}
+```bash
+npm install react-voodoo
 ```
 
-### `useTweener()`
-
-Read-only access to the nearest parent `Tweener`.
-
-```jsx
-import { useTweener } from "react-voodoo";
-
-function Inner() {
-  const tweener = useTweener();
-  // tweener.scrollTo("scrollY", 500, 300);
-}
-```
+**Peer dependencies:** `react >= 16`, `react-dom >= 16`
 
 ---
 
-## Tween descriptor
-
-```js
-{
-  from:     0,           // Start position on the axis (omit for sequential chaining)
-  duration: 500,         // Length of this segment
-  target:   "nodeId",    // ID of the Node to animate
-  apply: {
-    opacity:   1,
-    transform: [{ translateX: "100px", translateY: "-50%" }],
-    // Multi-unit values use CSS calc():
-    width:     ["50%", "10vw", "-50px"],
-  },
-  easeFn:   "easeQuadInOut",   // String key into TweenAxis.EasingFunctions (d3-ease)
-  entering: (delta) => {},     // Called when the process activates
-  moving:   (pos, prev, delta) => {},
-  leaving:  (delta) => {},
+## All-in-one example
+
+Every major feature in a single component, with comments explaining each part.
+
+```jsx harmony
+import React                                  from "react";
+import Voodoo                                 from "react-voodoo";
+import {itemTweenAxis, tweenArrayWithTargets} from "./somewhere";
+
+const styleSample = {
+	/**
+	 * Voodoo.Node style property and the tween descriptors use classic CSS-in-JS declaration
+	 * exept we can specify values using the "box" unit which is a [0-1] ratio of the parent ViewBox height / width
+	 */
+
+	height: "50%",
+
+	// the tweener deal with multiple units
+	// it will use css calc fn to add them if there's more than 1 unit used
+	width: ["50%", "10vw", "-50px", ".2box"],
+
+	// transform can use multiple "layers"
+	transform: [
+		{
+			// use rotate(X|Y|Z) & translate(X|Y|Z)
+			rotateX: "25deg"
+		},
+		{
+			translateZ: "-.2box"
+		}
+	],
+
+	filter:
+		{
+			blur: "5px"
+		}
+};
+const axisSample  = [// Examples of tween descriptors
+	{
+		target  : "someTweenRefId",   // target Voodoo.Node id ( optional if used as parameter on a Voodoo.Node as it will target it )
+		from    : 0,                // tween start position
+		duration: 100,              // tween duration
+		easeFn  : "easeCircleIn",   // function or easing fn id from [d3-ease](https://github.com/d3/d3-ease)
+
+		apply: {// relative css values to be applied
+			// Same syntax as the styles
+			transform: [{}, {
+				translateZ: "-.2box"
+			}]
+		}
+	},
+	{
+		from    : 40,
+		duration: 20,
+
+		// triggered when axis has scrolled in the Event period
+		// delta : a float value between [-1,1] is the update inside the Event period
+		entering: ( delta ) => false,
+
+		// triggered when axis has scrolled in the Event period
+		// newPos, precPos : float values between [0,1] position inside the Event period
+		// delta : a float value between  [-1,1] is the update inside the Event period
+		moving: ( newPos, precPos, delta ) => false,
+
+		// triggered when axis has scrolled out the Event period
+		// delta : a float value between  [-1,1] is the update inside the Event period
+		leaving: ( delta ) => false
+	}
+];
+
+const Sample = ( {} ) => {
+
+	/**
+	 * Voodoo tweener instanciation
+	 */
+		// Classic minimal method
+	const [tweener, ViewBox]                   = Voodoo.hook();
+	// get the first tweener in parents
+	const [parentTweener]                      = Voodoo.hook(true);
+	// Create a tweener with options
+	const [twenerWithNameAndOptions, ViewBox2] = Voodoo.hook(
+		{
+			// Give an id to this tweener so we can access it's axes in the childs components
+			name: "root",
+			// max click tm in ms before a click become a drag
+			maxClickTm: 200,
+			// max drag offset in px before a click become a drag
+			maxClickOffset: 100,
+			// lock to only 1 drag direction
+			dragDirectionLock: false,
+			// allow dragging with mouse
+			enableMouseDrag: false
+		}
+	);
+	// get a named parent tweener
+	const [nammedParentTweener]                = Voodoo.hook("root")
+
+	/**
+	 * once first render done, axes expose the following values & functions :
+	 */
+	// Theirs actual position in :
+	// tweener.axes.(axisId).scrollPos
+
+	// The "scrollTo" function allowing to manually move the axes positions :
+	// tweener.axes.(axisId).scrollTo(targetPos, duration, easeFn)
+	// tweener.scrollTo(targetPos, duration, axisId, easeFn)
+
+	// They can also be watched using the "watchAxis" function;
+	// When called, the returned function will disable the listener if executed :
+	React.useEffect(
+		e => tweener?.watchAxis("scrollY", ( pos ) => doSomething()),
+		[tweener]
+	)
+
+	return <ViewBox className={"container"}>
+		<Voodoo.Axis
+
+			id={"scrollY"}          // Tween axis Id
+			defaultPosition={100}   // optional initial position ( default : 0 )
+
+			// optional Array of tween descriptors with theirs Voodoo.Node target ids ( see axisSample )
+			items={tweenArrayWithTargets}
+
+			// optional size of the scrollable window for drag synchronisation
+			scrollableWindow={200}
+
+			// optional length of this scrollable axis (default to last tween desciptor position+duration)
+			size={1000}
+
+			// optional bounds ( inertia will target them if target pos is out )
+			bounds={{ min: 100, max: 900 }}
+
+			// optional inertia cfg ( false to disable it )
+			inertia={
+				{
+					// called when inertia is updated
+					// should return instantaneous move to do if wanted
+					shouldLoop: ( currentPos ) => (currentPos > 500 ? -500 : null),
+
+					// called when inertia know where it will end ( when the user stop dragging )
+					willEnd: ( targetPos, targetDelta, duration ) => {
+					},
+
+					// called when inertia know where it will snap ( when the user stop dragging )
+					willSnap: ( currentSnapIndex, targetWayPointObj ) => {
+					},
+
+					// called when inertia end
+					onStop: ( pos, targetWayPointObj ) => {
+					},
+
+					// called when inertia end on a snap
+					onSnap: ( snapIndex, targetWayPointObj ) => {
+					},
+
+					// list of waypoints object ( only support auto snap 50/50 for now )
+					wayPoints: [{ at: 100 }, { at: 200 }]
+				}
+			}
+		/>
+
+		<Voodoo.Node
+			id={"testItem"} // optional id
+
+			style={styleSample}// optional styles applied before any style coming from axes : css syntax + voodoo tweener units & transform management
+
+			axes={{ scrollY: axisSample }} // optional Array of tween by axis Id with no target node id required ( it will be ignored )
+
+			onClick={// all unknow props are passed to the child node
+				( e ) => {
+					// start playing an anim ( prefer scrolling Axes )
+					tweener.pushAnim(
+						// make all tween target "testItem"
+						Voodoo.tools.target(pushIn, "testItem")
+					).then(
+						( tweenAxis ) => {
+							// doSomething next
+						}
+					);
+				}
+			}
+		>
+			<Voodoo.Draggable
+				// make drag y move the scrollAnAxis axis
+				// xAxis={ "scrollAnAxis" }
+
+				// scale / inverse dispatched delta
+				// xHook={(delta)=>modify(delta)}
+
+				// React ref to the box, default to the parent ViewBox
+				// scale is as follow : (delta / ((xBoxRef||ViewBox).offsetWidth)) * ( axis.scrollableWindow || axis.duration )
+				// xBoxRef={ref}
+
+				yAxis={"scrollY"}// make drag y move the scrollY axis
+				// yHook={(delta)=>modify(delta)}
+				// yBoxRef={ref}
+
+				// mouseDrag={true} // listen for mouse drag ( default to false )
+				// touchDrag={false} // listen for touch drag ( default to true )
+
+				// button={1-3} // limit mouse drag to the specified event.button === ( default to 1; the left btn )
+
+				// * actually Draggable create it's own div node
+			>
+				<div>
+					Some content to tween
+				</div>
+			</Voodoo.Draggable>
+		</Voodoo.Node>
+	</ViewBox>;
 }
 ```
 
-### Supported CSS properties
-
-All standard animatable CSS properties are supported. Complex properties have dedicated demuxers:
-
-| Property | Notes |
-|----------|-------|
-| `transform` | Array of layer objects; each key is a transform function (`translateX`, `rotate`, etc.) |
-| `boxShadow` | Full multi-shadow support |
-| `filter` | CSS filter functions |
-| `backgroundColor` | RGBA component interpolation |
-| `textShadow` | Multi-shadow support |
-| `opacity`, `zIndex` | Numeric |
-| `width`, `height`, `top`, `left`, `right`, `bottom`, margins, paddings, borders | Length with unit |
-| SVG attributes (`cx`, `cy`, `r`, `x`, `y`, …) | Applied via `setAttribute` |
-
-### Multi-unit values
-
-Arrays of CSS values are resolved with `calc()`:
-
-```js
-width: ["50%", "10vw", "-50px"]
-// → calc(50% + 10vw - 50px)
-```
+For a more complete annotated example with inertia callbacks, `watchAxis`, and programmatic scrolling, see the [full documentation](doc/readme.md).
 
 ---
 
-## Axis configuration
-
-```js
-{
-  id:              "scrollY",
-  defaultPosition: 0,
-  size:            1000,          // Timeline length (matches tween descriptor positions)
-  bounds:          { min: 0, max: 1000 },
-  inertia: {
-    snapToBounds: true,
-    wayPoints:    [{ at: 0 }, { at: 500 }, { at: 1000 }],
-    willSnap:     (index, wp) => {},
-    onSnap:       (index, wp) => {},
-  },
-}
-```
-
----
-
-## Tweener API (imperative)
-
-The `Tweener` instance is accessible via `useVoodoo`, `useTweener`, or `tweenerOptions.ref`.
-
-### `tweener.scrollTo(axisId, position, durationMs?, easing?, noEvents?, tick?, cb?)`
-
-Animate an axis to a position over time.
-
-### `tweener.addScrollableAnim(anim, axisId?)`
+## Core concepts in 30 seconds
 
-Register a tween line (array of descriptors) on a scroll axis at runtime. Returns the `CssTweenAxis` instance.
+**Axis** — a virtual number line. Move its position (by drag, scroll, or code) and it drives CSS animations on any number of nodes.
 
-### `tweener.rmScrollableAnim(sl, axisId?)`
+**Node** — a React element whose styles are controlled by one or more axes. Style updates go straight to `node.style`, no re-renders.
 
-Remove a previously registered tween line.
+**Delta composition** — each axis contributes a *change* per frame. Stack a horizontal drag axis and a parallax axis on the same `translateX` and they simply add together. No ownership, no conflicts.
 
-### `tweener.pushAnim(descriptors, durationMs, cb?, keepResults?)`
-
-Run a one-shot animation that plays to completion and then optionally releases its CSS values.
-
-### `tweener.watchAxis(axisId, listener)`
-
-Subscribe to scroll position changes on an axis. Returns an unsubscribe function.
-
-### `tweener.getScrollPos(axisId)`
-
-Return the current scroll position of an axis.
+```
+axis position ──► tween engine ──► Δ per property ──► node.style (direct DOM write)
+                                         ▲
+                              other axes add their Δ here
+```
 
 ---
 
-## WASM acceleration in CssTweenAxis
-
-`CssTweenAxis` (the internal class used by every axis) automatically activates PROC_WASM for eligible tween descriptors:
-
-**Eligible** (WASM path):
-- No event callbacks (`entering` / `moving` / `leaving`).
-- `easeFn` is `undefined`/`null` (linear) **or** one of the 10 mapped d3-ease functions.
-
-**Not eligible** (JS path, no change in behaviour):
-- Descriptors with event callbacks.
-- Descriptors using custom easing functions not in the built-in set.
-
-The 10 d3-ease functions that map to WASM built-ins:
+## License
 
-| d3-ease name | WASM easing |
-|--------------|-------------|
-| *(none / linear)* | `EASE_LINEAR` |
-| `easeQuadIn` / `easeQuadOut` / `easeQuadInOut` | `EASE_IN/OUT/INOUT_QUAD` |
-| `easeCubicIn` / `easeCubicOut` / `easeCubicInOut` | `EASE_IN/OUT/INOUT_CUBIC` |
-| `easeExpIn` / `easeExpOut` / `easeExpInOut` | `EASE_IN/OUT/INOUT_EXPO` |
+React-voodoo is dual-licensed:
 
-No configuration is required — the selection happens automatically during axis construction.
+- **[CC BY-ND 4.0](http://creativecommons.org/licenses/by-nd/4.0)** — use freely in commercial projects; distribution of modified versions is not permitted.
+- **[AGPL v3](http://www.gnu.org/licenses/agpl-3.0)** — distribute modified versions under the same open-source license.
 
 ---
 
-## Building
+## Support the project
 
-```bash
-cd react-voodoo
-npm run build        # production build via lpack
-npm run devLib       # watch mode
-npm run setupLayers  # initialise lpack layer config
-```
+If react-voodoo saved you a day of work, consider supporting it:
 
----
+[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#)
 
-## License
+**BTC** — `bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a`
 
-Dual-licensed: **CC-BY-ND-4.0** or **AGPL-3.0-only**. See [LICENSE](./LICENSE) for details.
+**PayPal** — <a href="https://www.paypal.com/donate/?hosted_button_id=ECHYGKY3GR7CN"><img src="https://img.shields.io/badge/paypal-donate-yellow.svg" alt="PayPal donate" /></a>