@riverflowpkg/riverflow 1.0.2 → 1.0.5
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/README.md +1 -1
- package/bar/bar.js +90 -90
- package/bar/theCodes.html +144 -144
- package/editor/editor.js +1 -1
- package/editor/highlight.min.js +1 -1
- package/editor/terminal.js +309 -309
- package/effects/sunshine.js +160 -0
- package/effects/typing.js +105 -105
- package/effects/underwater.js +117 -117
- package/package.json +1 -1
- package/scroll/scroll.css +91 -91
- package/scroll/scroll.js +244 -244
package/README.md
CHANGED
package/bar/bar.js
CHANGED
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
(function () {
|
|
2
|
-
|
|
3
|
-
/* ── Config ─────────────────────────────────────────────────── */
|
|
4
|
-
/* Developer sets window.BarConfig before loading this script.
|
|
5
|
-
Example:
|
|
6
|
-
window.BarConfig = { color: '#ff6b6b' }
|
|
7
|
-
window.BarConfig = { gradient: 'linear-gradient(to right, #f093fb, #f5576c)' }
|
|
8
|
-
window.BarConfig = { height: 3, color: '#00c9ff' }
|
|
9
|
-
*/
|
|
10
|
-
const cfg = window.BarConfig || {};
|
|
11
|
-
const HEIGHT = cfg.height || 3;
|
|
12
|
-
const COLOR = cfg.color || '#3b82f6';
|
|
13
|
-
const GRADIENT = cfg.gradient || null;
|
|
14
|
-
const DURATION = cfg.duration || 600; /* ms for the finish animation */
|
|
15
|
-
|
|
16
|
-
/* ── Create bar element ─────────────────────────────────────── */
|
|
17
|
-
const bar = document.createElement('div');
|
|
18
|
-
bar.id = 'bar-top';
|
|
19
|
-
bar.style.cssText = `
|
|
20
|
-
position: fixed;
|
|
21
|
-
top: 0;
|
|
22
|
-
left: 0;
|
|
23
|
-
width: 0%;
|
|
24
|
-
height: ${HEIGHT}px;
|
|
25
|
-
background: ${GRADIENT || COLOR};
|
|
26
|
-
z-index: 99999;
|
|
27
|
-
transition: width 0.1s linear;
|
|
28
|
-
pointer-events: none;
|
|
29
|
-
border-radius: 0 ${HEIGHT}px ${HEIGHT}px 0;
|
|
30
|
-
`;
|
|
31
|
-
|
|
32
|
-
/* subtle glow under the bar */
|
|
33
|
-
bar.style.boxShadow = GRADIENT
|
|
34
|
-
? `0 0 8px 1px rgba(255,255,255,0.25)`
|
|
35
|
-
: `0 0 8px 1px ${COLOR}88`;
|
|
36
|
-
|
|
37
|
-
document.documentElement.appendChild(bar);
|
|
38
|
-
|
|
39
|
-
/* ── Animation ──────────────────────────────────────────────── */
|
|
40
|
-
let current = 0;
|
|
41
|
-
let rafId = null;
|
|
42
|
-
let finished = false;
|
|
43
|
-
|
|
44
|
-
/* Eased trickle — moves fast at first, then slows as it
|
|
45
|
-
approaches 90%, never quite reaching it until finish() */
|
|
46
|
-
function trickle() {
|
|
47
|
-
if (finished) return;
|
|
48
|
-
const remaining = 90 - current;
|
|
49
|
-
const step = remaining * 0.08 + 0.4;
|
|
50
|
-
current = Math.min(current + step, 90);
|
|
51
|
-
bar.style.width = current + '%';
|
|
52
|
-
rafId = setTimeout(trickle, 120 + Math.random() * 80);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function start() {
|
|
56
|
-
current = 0;
|
|
57
|
-
finished = false;
|
|
58
|
-
bar.style.transition = 'width 0.1s linear';
|
|
59
|
-
bar.style.opacity = '1';
|
|
60
|
-
bar.style.width = '0%';
|
|
61
|
-
trickle();
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function finish() {
|
|
65
|
-
finished = true;
|
|
66
|
-
clearTimeout(rafId);
|
|
67
|
-
/* snap to 100% */
|
|
68
|
-
bar.style.transition = `width ${DURATION * 0.4}ms ease`;
|
|
69
|
-
bar.style.width = '100%';
|
|
70
|
-
/* then fade out */
|
|
71
|
-
setTimeout(() => {
|
|
72
|
-
bar.style.transition = `opacity ${DURATION * 0.6}ms ease`;
|
|
73
|
-
bar.style.opacity = '0';
|
|
74
|
-
setTimeout(() => {
|
|
75
|
-
bar.style.width = '0%';
|
|
76
|
-
bar.style.opacity = '1';
|
|
77
|
-
}, DURATION * 0.7);
|
|
78
|
-
}, DURATION * 0.4);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/* ── Hook into page load ────────────────────────────────────── */
|
|
82
|
-
start();
|
|
83
|
-
|
|
84
|
-
if (document.readyState === 'complete') {
|
|
85
|
-
finish();
|
|
86
|
-
} else {
|
|
87
|
-
window.addEventListener('load', finish, { once: true });
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
})();
|
|
1
|
+
(function () {
|
|
2
|
+
|
|
3
|
+
/* ── Config ─────────────────────────────────────────────────── */
|
|
4
|
+
/* Developer sets window.BarConfig before loading this script.
|
|
5
|
+
Example:
|
|
6
|
+
window.BarConfig = { color: '#ff6b6b' }
|
|
7
|
+
window.BarConfig = { gradient: 'linear-gradient(to right, #f093fb, #f5576c)' }
|
|
8
|
+
window.BarConfig = { height: 3, color: '#00c9ff' }
|
|
9
|
+
*/
|
|
10
|
+
const cfg = window.BarConfig || {};
|
|
11
|
+
const HEIGHT = cfg.height || 3;
|
|
12
|
+
const COLOR = cfg.color || '#3b82f6';
|
|
13
|
+
const GRADIENT = cfg.gradient || null;
|
|
14
|
+
const DURATION = cfg.duration || 600; /* ms for the finish animation */
|
|
15
|
+
|
|
16
|
+
/* ── Create bar element ─────────────────────────────────────── */
|
|
17
|
+
const bar = document.createElement('div');
|
|
18
|
+
bar.id = 'bar-top';
|
|
19
|
+
bar.style.cssText = `
|
|
20
|
+
position: fixed;
|
|
21
|
+
top: 0;
|
|
22
|
+
left: 0;
|
|
23
|
+
width: 0%;
|
|
24
|
+
height: ${HEIGHT}px;
|
|
25
|
+
background: ${GRADIENT || COLOR};
|
|
26
|
+
z-index: 99999;
|
|
27
|
+
transition: width 0.1s linear;
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
border-radius: 0 ${HEIGHT}px ${HEIGHT}px 0;
|
|
30
|
+
`;
|
|
31
|
+
|
|
32
|
+
/* subtle glow under the bar */
|
|
33
|
+
bar.style.boxShadow = GRADIENT
|
|
34
|
+
? `0 0 8px 1px rgba(255,255,255,0.25)`
|
|
35
|
+
: `0 0 8px 1px ${COLOR}88`;
|
|
36
|
+
|
|
37
|
+
document.documentElement.appendChild(bar);
|
|
38
|
+
|
|
39
|
+
/* ── Animation ──────────────────────────────────────────────── */
|
|
40
|
+
let current = 0;
|
|
41
|
+
let rafId = null;
|
|
42
|
+
let finished = false;
|
|
43
|
+
|
|
44
|
+
/* Eased trickle — moves fast at first, then slows as it
|
|
45
|
+
approaches 90%, never quite reaching it until finish() */
|
|
46
|
+
function trickle() {
|
|
47
|
+
if (finished) return;
|
|
48
|
+
const remaining = 90 - current;
|
|
49
|
+
const step = remaining * 0.08 + 0.4;
|
|
50
|
+
current = Math.min(current + step, 90);
|
|
51
|
+
bar.style.width = current + '%';
|
|
52
|
+
rafId = setTimeout(trickle, 120 + Math.random() * 80);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function start() {
|
|
56
|
+
current = 0;
|
|
57
|
+
finished = false;
|
|
58
|
+
bar.style.transition = 'width 0.1s linear';
|
|
59
|
+
bar.style.opacity = '1';
|
|
60
|
+
bar.style.width = '0%';
|
|
61
|
+
trickle();
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function finish() {
|
|
65
|
+
finished = true;
|
|
66
|
+
clearTimeout(rafId);
|
|
67
|
+
/* snap to 100% */
|
|
68
|
+
bar.style.transition = `width ${DURATION * 0.4}ms ease`;
|
|
69
|
+
bar.style.width = '100%';
|
|
70
|
+
/* then fade out */
|
|
71
|
+
setTimeout(() => {
|
|
72
|
+
bar.style.transition = `opacity ${DURATION * 0.6}ms ease`;
|
|
73
|
+
bar.style.opacity = '0';
|
|
74
|
+
setTimeout(() => {
|
|
75
|
+
bar.style.width = '0%';
|
|
76
|
+
bar.style.opacity = '1';
|
|
77
|
+
}, DURATION * 0.7);
|
|
78
|
+
}, DURATION * 0.4);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* ── Hook into page load ────────────────────────────────────── */
|
|
82
|
+
start();
|
|
83
|
+
|
|
84
|
+
if (document.readyState === 'complete') {
|
|
85
|
+
finish();
|
|
86
|
+
} else {
|
|
87
|
+
window.addEventListener('load', finish, { once: true });
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
})();
|
package/bar/theCodes.html
CHANGED
|
@@ -1,144 +1,144 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
-
<title>theCodes</title>
|
|
7
|
-
<style>
|
|
8
|
-
body{
|
|
9
|
-
background: #000;
|
|
10
|
-
color: #fff;
|
|
11
|
-
font-family: 'consolas', 'monospace';
|
|
12
|
-
margin: 0;
|
|
13
|
-
padding: 20px;
|
|
14
|
-
}
|
|
15
|
-
</style>
|
|
16
|
-
</head>
|
|
17
|
-
<body>
|
|
18
|
-
|
|
19
|
-
<div class="editor-wrap">
|
|
20
|
-
<div class="editor editor-dark editor-motion editor-number editor-read">
|
|
21
|
-
<pre><code><!DOCTYPE html>
|
|
22
|
-
<html lang="en">
|
|
23
|
-
<head>
|
|
24
|
-
<title>Bar Test</title>
|
|
25
|
-
<style>
|
|
26
|
-
* {
|
|
27
|
-
box-sizing: border-box;
|
|
28
|
-
margin: 0;
|
|
29
|
-
padding: 0;
|
|
30
|
-
user-select: none;
|
|
31
|
-
-webkit-tap-highlight-color: transparent;
|
|
32
|
-
-moz-tap-highlight-color: transparent;
|
|
33
|
-
tap-highlight-color: transparent;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
body {
|
|
37
|
-
color: #fff;
|
|
38
|
-
font-family: 'Segoe UI', sans-serif;
|
|
39
|
-
background: #111;
|
|
40
|
-
min-height: 100vh;
|
|
41
|
-
display: flex;
|
|
42
|
-
align-items: center;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
h1{
|
|
47
|
-
font-weight: 400;
|
|
48
|
-
animation: appear 2s forwards;
|
|
49
|
-
position: relative;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
h1::before,
|
|
53
|
-
h1::after{
|
|
54
|
-
opacity: 0;
|
|
55
|
-
animation-duration: 1s;
|
|
56
|
-
animation-fill-mode: forwards;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
h1::before{
|
|
60
|
-
content: "“";
|
|
61
|
-
animation-name: showQuote;
|
|
62
|
-
animation-delay: 2s;
|
|
63
|
-
margin-right: 6px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
h1::after{
|
|
67
|
-
content: "”";
|
|
68
|
-
animation-name: showQuote;
|
|
69
|
-
animation-delay: 2s;
|
|
70
|
-
margin-left: 6px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
@keyframes showQuote{
|
|
74
|
-
from { opacity: 0; }
|
|
75
|
-
to { opacity: 1; }
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
@keyframes appear{
|
|
79
|
-
0%{
|
|
80
|
-
font-weight: bolder;
|
|
81
|
-
margin-top: -30px;
|
|
82
|
-
opacity: 0;
|
|
83
|
-
color: transparent;
|
|
84
|
-
-webkit-text-stroke: 0.1px #ffffff;
|
|
85
|
-
}
|
|
86
|
-
100%{
|
|
87
|
-
font-weight: 400;
|
|
88
|
-
margin-top: 0;
|
|
89
|
-
opacity: 1;
|
|
90
|
-
color: #ffffff;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
</style>
|
|
95
|
-
</head>
|
|
96
|
-
|
|
97
|
-
<body>
|
|
98
|
-
|
|
99
|
-
<h1>Bar Test (See the codes to learn more,<br> or see the Docs)</h1>
|
|
100
|
-
|
|
101
|
-
<!-- This Loading Bar Applies when you link the bar.js, for customization of loading bar, do this -->
|
|
102
|
-
<!-- an example of customized loading bar (solid color):<br>
|
|
103
|
-
<script>
|
|
104
|
-
window.BarConfig = { color: '#f43f5e' }
|
|
105
|
-
</script>
|
|
106
|
-
|
|
107
|
-
it changes the loading bar color to pink, or that #f43f5e hex color
|
|
108
|
-
|
|
109
|
-
but what if you wanted to use gradient? -->
|
|
110
|
-
<!-- an example of customized loading bar (linear gradient color):<br>
|
|
111
|
-
<script>
|
|
112
|
-
window.BarConfig = {
|
|
113
|
-
gradient: 'linear-gradient(to right, #f093fb, #f5576c, #4facfe)'
|
|
114
|
-
}
|
|
115
|
-
</script>
|
|
116
|
-
|
|
117
|
-
this script will changes the loading bar combined with magenta, pink, blue or we can say #f093fb, #f5576c, #4facfe
|
|
118
|
-
|
|
119
|
-
the end of the description... -->
|
|
120
|
-
|
|
121
|
-
<button onclick="theCodes()">See the Codes</button>
|
|
122
|
-
<button onclick="seeDocs()">See Docs</button>
|
|
123
|
-
|
|
124
|
-
<script>
|
|
125
|
-
function theCodes(){
|
|
126
|
-
window.location.href = "bar/theCodes.html";
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function seeDocs(){
|
|
130
|
-
window.location.href = "docs/index.html";
|
|
131
|
-
}
|
|
132
|
-
</script>
|
|
133
|
-
|
|
134
|
-
<script src="bar/bar.js"></script>
|
|
135
|
-
</body>
|
|
136
|
-
</html></code></pre>
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
|
|
140
|
-
<script src="bar.js"></script>
|
|
141
|
-
<script src="../editor/highlight.min.js"></script>
|
|
142
|
-
<script src="../editor/editor.js"></script>
|
|
143
|
-
</body>
|
|
144
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
+
<title>theCodes</title>
|
|
7
|
+
<style>
|
|
8
|
+
body{
|
|
9
|
+
background: #000;
|
|
10
|
+
color: #fff;
|
|
11
|
+
font-family: 'consolas', 'monospace';
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 20px;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
|
|
19
|
+
<div class="editor-wrap">
|
|
20
|
+
<div class="editor editor-dark editor-motion editor-number editor-read">
|
|
21
|
+
<pre><code><!DOCTYPE html>
|
|
22
|
+
<html lang="en">
|
|
23
|
+
<head>
|
|
24
|
+
<title>Bar Test</title>
|
|
25
|
+
<style>
|
|
26
|
+
* {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
margin: 0;
|
|
29
|
+
padding: 0;
|
|
30
|
+
user-select: none;
|
|
31
|
+
-webkit-tap-highlight-color: transparent;
|
|
32
|
+
-moz-tap-highlight-color: transparent;
|
|
33
|
+
tap-highlight-color: transparent;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
body {
|
|
37
|
+
color: #fff;
|
|
38
|
+
font-family: 'Segoe UI', sans-serif;
|
|
39
|
+
background: #111;
|
|
40
|
+
min-height: 100vh;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h1{
|
|
47
|
+
font-weight: 400;
|
|
48
|
+
animation: appear 2s forwards;
|
|
49
|
+
position: relative;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
h1::before,
|
|
53
|
+
h1::after{
|
|
54
|
+
opacity: 0;
|
|
55
|
+
animation-duration: 1s;
|
|
56
|
+
animation-fill-mode: forwards;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
h1::before{
|
|
60
|
+
content: "“";
|
|
61
|
+
animation-name: showQuote;
|
|
62
|
+
animation-delay: 2s;
|
|
63
|
+
margin-right: 6px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
h1::after{
|
|
67
|
+
content: "”";
|
|
68
|
+
animation-name: showQuote;
|
|
69
|
+
animation-delay: 2s;
|
|
70
|
+
margin-left: 6px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes showQuote{
|
|
74
|
+
from { opacity: 0; }
|
|
75
|
+
to { opacity: 1; }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes appear{
|
|
79
|
+
0%{
|
|
80
|
+
font-weight: bolder;
|
|
81
|
+
margin-top: -30px;
|
|
82
|
+
opacity: 0;
|
|
83
|
+
color: transparent;
|
|
84
|
+
-webkit-text-stroke: 0.1px #ffffff;
|
|
85
|
+
}
|
|
86
|
+
100%{
|
|
87
|
+
font-weight: 400;
|
|
88
|
+
margin-top: 0;
|
|
89
|
+
opacity: 1;
|
|
90
|
+
color: #ffffff;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
</style>
|
|
95
|
+
</head>
|
|
96
|
+
|
|
97
|
+
<body>
|
|
98
|
+
|
|
99
|
+
<h1>Bar Test (See the codes to learn more,<br> or see the Docs)</h1>
|
|
100
|
+
|
|
101
|
+
<!-- This Loading Bar Applies when you link the bar.js, for customization of loading bar, do this -->
|
|
102
|
+
<!-- an example of customized loading bar (solid color):<br>
|
|
103
|
+
<script>
|
|
104
|
+
window.BarConfig = { color: '#f43f5e' }
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
it changes the loading bar color to pink, or that #f43f5e hex color
|
|
108
|
+
|
|
109
|
+
but what if you wanted to use gradient? -->
|
|
110
|
+
<!-- an example of customized loading bar (linear gradient color):<br>
|
|
111
|
+
<script>
|
|
112
|
+
window.BarConfig = {
|
|
113
|
+
gradient: 'linear-gradient(to right, #f093fb, #f5576c, #4facfe)'
|
|
114
|
+
}
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
this script will changes the loading bar combined with magenta, pink, blue or we can say #f093fb, #f5576c, #4facfe
|
|
118
|
+
|
|
119
|
+
the end of the description... -->
|
|
120
|
+
|
|
121
|
+
<button onclick="theCodes()">See the Codes</button>
|
|
122
|
+
<button onclick="seeDocs()">See Docs</button>
|
|
123
|
+
|
|
124
|
+
<script>
|
|
125
|
+
function theCodes(){
|
|
126
|
+
window.location.href = "bar/theCodes.html";
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function seeDocs(){
|
|
130
|
+
window.location.href = "docs/index.html";
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<script src="bar/bar.js"></script>
|
|
135
|
+
</body>
|
|
136
|
+
</html></code></pre>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<script src="bar.js"></script>
|
|
141
|
+
<script src="../editor/highlight.min.js"></script>
|
|
142
|
+
<script src="../editor/editor.js"></script>
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
package/editor/editor.js
CHANGED
package/editor/highlight.min.js
CHANGED