scroll-arrows 0.1.0
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/LICENSE +21 -0
- package/README.md +155 -0
- package/dist/chunk-HLZXSGP5.js +557 -0
- package/dist/index.cjs +572 -0
- package/dist/index.d.cts +57 -0
- package/dist/index.d.ts +57 -0
- package/dist/index.js +11 -0
- package/dist/react.cjs +593 -0
- package/dist/react.d.cts +21 -0
- package/dist/react.d.ts +21 -0
- package/dist/react.js +31 -0
- package/dist/types-DehQP2Hx.d.cts +104 -0
- package/dist/types-DehQP2Hx.d.ts +104 -0
- package/package.json +84 -0
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
type Point = {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
};
|
|
5
|
+
/** Which edge of an element the arrow attaches to. `auto` picks the best side. */
|
|
6
|
+
type Socket = "auto" | "top" | "bottom" | "left" | "right" | "center";
|
|
7
|
+
type ArrowHead = "start" | "end" | "both" | "none";
|
|
8
|
+
/** Anything we can resolve to a live DOM element. */
|
|
9
|
+
type ElementRef = Element | string;
|
|
10
|
+
interface ScrollOptions {
|
|
11
|
+
/**
|
|
12
|
+
* The element whose travel through the viewport drives the draw.
|
|
13
|
+
* Defaults to the midpoint between `start` and `end`.
|
|
14
|
+
*/
|
|
15
|
+
target?: ElementRef;
|
|
16
|
+
/**
|
|
17
|
+
* Draw window expressed as fractions of viewport height for the target's
|
|
18
|
+
* top edge. `[0.85, 0.35]` means: empty at 85% down the viewport, fully
|
|
19
|
+
* drawn by 35% down. First value should be larger than the second.
|
|
20
|
+
*/
|
|
21
|
+
range?: [number, number];
|
|
22
|
+
}
|
|
23
|
+
interface ScrollArrowOptions {
|
|
24
|
+
/** Element the arrow starts from. */
|
|
25
|
+
start: ElementRef;
|
|
26
|
+
/** Element the arrow points to. */
|
|
27
|
+
end: ElementRef;
|
|
28
|
+
/**
|
|
29
|
+
* Where the overlay <svg> mounts. Defaults to document.body. Arrows are
|
|
30
|
+
* positioned in document coordinates so they stay glued while scrolling.
|
|
31
|
+
*/
|
|
32
|
+
container?: Element;
|
|
33
|
+
/**
|
|
34
|
+
* The headline knob. 0 = clean straight line, 1 = maximally scratchy and
|
|
35
|
+
* curvy. Maps onto roughjs roughness/bowing plus path curvature.
|
|
36
|
+
*/
|
|
37
|
+
roughness?: number;
|
|
38
|
+
/** Stroke color. CSS color string. Default: currentColor of container. */
|
|
39
|
+
stroke?: string;
|
|
40
|
+
/** Stroke width in px. Default 2. */
|
|
41
|
+
strokeWidth?: number;
|
|
42
|
+
/**
|
|
43
|
+
* Deterministic seed so a given arrow keeps the same scribble between
|
|
44
|
+
* renders. Default: derived from start/end so it's stable but unique.
|
|
45
|
+
*/
|
|
46
|
+
seed?: number;
|
|
47
|
+
/** Force a start edge. Default "auto". */
|
|
48
|
+
startSocket?: Socket;
|
|
49
|
+
/** Force an end edge. Default "auto". */
|
|
50
|
+
endSocket?: Socket;
|
|
51
|
+
/** Extra bow of the underlying curve, 0..1. Folded into roughness if unset. */
|
|
52
|
+
curvature?: number;
|
|
53
|
+
/**
|
|
54
|
+
* Pin the stroke's endpoints to the anchor sockets so the arrow always lands
|
|
55
|
+
* on its targets, even at high roughness. Set false to let the scratchy ends
|
|
56
|
+
* wander off the anchors. Default true.
|
|
57
|
+
*/
|
|
58
|
+
anchorEnds?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Element(s) the arrow should bend around instead of crossing. Single-bend
|
|
61
|
+
* routing — picks the worst blocker and bows the curve clear of it.
|
|
62
|
+
*/
|
|
63
|
+
avoid?: ElementRef | ElementRef[];
|
|
64
|
+
/** Gap to keep between the curve and avoided boxes, px. Default 14. */
|
|
65
|
+
avoidPadding?: number;
|
|
66
|
+
/** Which ends get an arrowhead. Default "end". */
|
|
67
|
+
head?: ArrowHead;
|
|
68
|
+
/** Arrowhead length in px. Default 14. */
|
|
69
|
+
headSize?: number;
|
|
70
|
+
/** Text to place along the line. Omit for no label. */
|
|
71
|
+
label?: string;
|
|
72
|
+
/** Position of the label along the line, 0 (start) .. 1 (end). Default 0.5. */
|
|
73
|
+
labelAt?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Perpendicular offset from the line in px. Positive sits to the left of the
|
|
76
|
+
* draw direction, negative to the right; 0 sits on the line. Default 0.
|
|
77
|
+
*/
|
|
78
|
+
labelOffset?: number;
|
|
79
|
+
/** Label text color. Default: stroke color. */
|
|
80
|
+
labelColor?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Color painted behind the label to mask the line (the excalidraw "gap"
|
|
83
|
+
* look). Default: the container's background-color. Pass "none" to disable.
|
|
84
|
+
*/
|
|
85
|
+
labelBackground?: string;
|
|
86
|
+
/** CSS `font` shorthand for the label. Default "600 16px sans-serif". */
|
|
87
|
+
font?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Scroll behavior. Pass `false` to drive progress manually via
|
|
90
|
+
* `setProgress()`. Default: auto scroll window.
|
|
91
|
+
*/
|
|
92
|
+
scroll?: ScrollOptions | false;
|
|
93
|
+
/**
|
|
94
|
+
* Multiplier on draw rate. >1 finishes the stroke earlier in the scroll
|
|
95
|
+
* window, <1 lingers. Default 1.
|
|
96
|
+
*/
|
|
97
|
+
speed?: number;
|
|
98
|
+
/** Easing applied to scroll progress before drawing. Default easeInOutCubic. */
|
|
99
|
+
easing?: (t: number) => number;
|
|
100
|
+
/** Start fully drawn instead of empty. Useful with `scroll:false`. Default 0. */
|
|
101
|
+
progress?: number;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollOptions as a, Socket as b };
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
type Point = {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
};
|
|
5
|
+
/** Which edge of an element the arrow attaches to. `auto` picks the best side. */
|
|
6
|
+
type Socket = "auto" | "top" | "bottom" | "left" | "right" | "center";
|
|
7
|
+
type ArrowHead = "start" | "end" | "both" | "none";
|
|
8
|
+
/** Anything we can resolve to a live DOM element. */
|
|
9
|
+
type ElementRef = Element | string;
|
|
10
|
+
interface ScrollOptions {
|
|
11
|
+
/**
|
|
12
|
+
* The element whose travel through the viewport drives the draw.
|
|
13
|
+
* Defaults to the midpoint between `start` and `end`.
|
|
14
|
+
*/
|
|
15
|
+
target?: ElementRef;
|
|
16
|
+
/**
|
|
17
|
+
* Draw window expressed as fractions of viewport height for the target's
|
|
18
|
+
* top edge. `[0.85, 0.35]` means: empty at 85% down the viewport, fully
|
|
19
|
+
* drawn by 35% down. First value should be larger than the second.
|
|
20
|
+
*/
|
|
21
|
+
range?: [number, number];
|
|
22
|
+
}
|
|
23
|
+
interface ScrollArrowOptions {
|
|
24
|
+
/** Element the arrow starts from. */
|
|
25
|
+
start: ElementRef;
|
|
26
|
+
/** Element the arrow points to. */
|
|
27
|
+
end: ElementRef;
|
|
28
|
+
/**
|
|
29
|
+
* Where the overlay <svg> mounts. Defaults to document.body. Arrows are
|
|
30
|
+
* positioned in document coordinates so they stay glued while scrolling.
|
|
31
|
+
*/
|
|
32
|
+
container?: Element;
|
|
33
|
+
/**
|
|
34
|
+
* The headline knob. 0 = clean straight line, 1 = maximally scratchy and
|
|
35
|
+
* curvy. Maps onto roughjs roughness/bowing plus path curvature.
|
|
36
|
+
*/
|
|
37
|
+
roughness?: number;
|
|
38
|
+
/** Stroke color. CSS color string. Default: currentColor of container. */
|
|
39
|
+
stroke?: string;
|
|
40
|
+
/** Stroke width in px. Default 2. */
|
|
41
|
+
strokeWidth?: number;
|
|
42
|
+
/**
|
|
43
|
+
* Deterministic seed so a given arrow keeps the same scribble between
|
|
44
|
+
* renders. Default: derived from start/end so it's stable but unique.
|
|
45
|
+
*/
|
|
46
|
+
seed?: number;
|
|
47
|
+
/** Force a start edge. Default "auto". */
|
|
48
|
+
startSocket?: Socket;
|
|
49
|
+
/** Force an end edge. Default "auto". */
|
|
50
|
+
endSocket?: Socket;
|
|
51
|
+
/** Extra bow of the underlying curve, 0..1. Folded into roughness if unset. */
|
|
52
|
+
curvature?: number;
|
|
53
|
+
/**
|
|
54
|
+
* Pin the stroke's endpoints to the anchor sockets so the arrow always lands
|
|
55
|
+
* on its targets, even at high roughness. Set false to let the scratchy ends
|
|
56
|
+
* wander off the anchors. Default true.
|
|
57
|
+
*/
|
|
58
|
+
anchorEnds?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Element(s) the arrow should bend around instead of crossing. Single-bend
|
|
61
|
+
* routing — picks the worst blocker and bows the curve clear of it.
|
|
62
|
+
*/
|
|
63
|
+
avoid?: ElementRef | ElementRef[];
|
|
64
|
+
/** Gap to keep between the curve and avoided boxes, px. Default 14. */
|
|
65
|
+
avoidPadding?: number;
|
|
66
|
+
/** Which ends get an arrowhead. Default "end". */
|
|
67
|
+
head?: ArrowHead;
|
|
68
|
+
/** Arrowhead length in px. Default 14. */
|
|
69
|
+
headSize?: number;
|
|
70
|
+
/** Text to place along the line. Omit for no label. */
|
|
71
|
+
label?: string;
|
|
72
|
+
/** Position of the label along the line, 0 (start) .. 1 (end). Default 0.5. */
|
|
73
|
+
labelAt?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Perpendicular offset from the line in px. Positive sits to the left of the
|
|
76
|
+
* draw direction, negative to the right; 0 sits on the line. Default 0.
|
|
77
|
+
*/
|
|
78
|
+
labelOffset?: number;
|
|
79
|
+
/** Label text color. Default: stroke color. */
|
|
80
|
+
labelColor?: string;
|
|
81
|
+
/**
|
|
82
|
+
* Color painted behind the label to mask the line (the excalidraw "gap"
|
|
83
|
+
* look). Default: the container's background-color. Pass "none" to disable.
|
|
84
|
+
*/
|
|
85
|
+
labelBackground?: string;
|
|
86
|
+
/** CSS `font` shorthand for the label. Default "600 16px sans-serif". */
|
|
87
|
+
font?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Scroll behavior. Pass `false` to drive progress manually via
|
|
90
|
+
* `setProgress()`. Default: auto scroll window.
|
|
91
|
+
*/
|
|
92
|
+
scroll?: ScrollOptions | false;
|
|
93
|
+
/**
|
|
94
|
+
* Multiplier on draw rate. >1 finishes the stroke earlier in the scroll
|
|
95
|
+
* window, <1 lingers. Default 1.
|
|
96
|
+
*/
|
|
97
|
+
speed?: number;
|
|
98
|
+
/** Easing applied to scroll progress before drawing. Default easeInOutCubic. */
|
|
99
|
+
easing?: (t: number) => number;
|
|
100
|
+
/** Start fully drawn instead of empty. Useful with `scroll:false`. Default 0. */
|
|
101
|
+
progress?: number;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export type { ArrowHead as A, ElementRef as E, Point as P, ScrollArrowOptions as S, ScrollOptions as a, Socket as b };
|
package/package.json
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "scroll-arrows",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Hand-drawn arrows that draw themselves between two elements as you scroll. Roughness goes from clean straight lines to scratchy and curvy.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"author": "Dan <dan@dorvie.com>",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/dancj/scroll-arrows.git"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/dancj/scroll-arrows#readme",
|
|
14
|
+
"bugs": "https://github.com/dancj/scroll-arrows/issues",
|
|
15
|
+
"engines": {
|
|
16
|
+
"node": ">=18"
|
|
17
|
+
},
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"keywords": [
|
|
22
|
+
"arrows",
|
|
23
|
+
"hand-drawn",
|
|
24
|
+
"sketchy",
|
|
25
|
+
"rough",
|
|
26
|
+
"scroll",
|
|
27
|
+
"scrollytelling",
|
|
28
|
+
"svg",
|
|
29
|
+
"animation",
|
|
30
|
+
"excalidraw"
|
|
31
|
+
],
|
|
32
|
+
"files": [
|
|
33
|
+
"dist/**/*.js",
|
|
34
|
+
"dist/**/*.cjs",
|
|
35
|
+
"dist/**/*.d.ts",
|
|
36
|
+
"dist/**/*.d.cts"
|
|
37
|
+
],
|
|
38
|
+
"main": "./dist/index.cjs",
|
|
39
|
+
"module": "./dist/index.js",
|
|
40
|
+
"types": "./dist/index.d.ts",
|
|
41
|
+
"exports": {
|
|
42
|
+
".": {
|
|
43
|
+
"types": "./dist/index.d.ts",
|
|
44
|
+
"import": "./dist/index.js",
|
|
45
|
+
"require": "./dist/index.cjs"
|
|
46
|
+
},
|
|
47
|
+
"./react": {
|
|
48
|
+
"types": "./dist/react.d.ts",
|
|
49
|
+
"import": "./dist/react.js",
|
|
50
|
+
"require": "./dist/react.cjs"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"build": "tsup",
|
|
55
|
+
"dev": "tsup --watch",
|
|
56
|
+
"demo": "vite demo",
|
|
57
|
+
"typecheck": "tsc --noEmit",
|
|
58
|
+
"test": "vitest run",
|
|
59
|
+
"test:watch": "vitest",
|
|
60
|
+
"coverage": "vitest run --coverage",
|
|
61
|
+
"prepublishOnly": "npm run typecheck && npm run coverage && npm run build"
|
|
62
|
+
},
|
|
63
|
+
"dependencies": {
|
|
64
|
+
"roughjs": "^4.6.6"
|
|
65
|
+
},
|
|
66
|
+
"peerDependencies": {
|
|
67
|
+
"react": ">=17"
|
|
68
|
+
},
|
|
69
|
+
"peerDependenciesMeta": {
|
|
70
|
+
"react": {
|
|
71
|
+
"optional": true
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"devDependencies": {
|
|
75
|
+
"@types/react": "^18.3.0",
|
|
76
|
+
"@vitest/coverage-v8": "^2.1.0",
|
|
77
|
+
"jsdom": "^25.0.0",
|
|
78
|
+
"react": "^18.3.0",
|
|
79
|
+
"tsup": "^8.0.0",
|
|
80
|
+
"typescript": "^5.4.0",
|
|
81
|
+
"vite": "^5.0.0",
|
|
82
|
+
"vitest": "^2.1.0"
|
|
83
|
+
}
|
|
84
|
+
}
|