@fxshelf/glyph-rain 0.1.1 → 0.1.2
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
CHANGED
|
@@ -11,7 +11,7 @@ Part of the [fxshelf](https://github.com/Luzhaotian/fxshelf) effect shelf — in
|
|
|
11
11
|
| | |
|
|
12
12
|
|--|--|
|
|
13
13
|
| **Docs / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/glyph-rain) |
|
|
14
|
-
| **npm** | [`@fxshelf/glyph-rain@0.1.
|
|
14
|
+
| **npm** | [`@fxshelf/glyph-rain@0.1.2`](https://www.npmjs.com/package/@fxshelf/glyph-rain) |
|
|
15
15
|
| **CDN** | [unpkg](https://unpkg.com/@fxshelf/glyph-rain/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/glyph-rain/) |
|
|
16
16
|
|
|
17
17
|
Supports **npm**, **CDN `<script>`**, and **copy-as-source**. Details: site docs or [docs/使用说明.md](./docs/使用说明.md).
|
|
@@ -65,6 +65,38 @@ import { GlyphRain } from '@fxshelf/glyph-rain/vue'
|
|
|
65
65
|
| Content lighting / dim | Chrome experimental `drawElementImage` + `layoutsubtree` (html-in-canvas) |
|
|
66
66
|
| Cursor stir | Pointer events on the wrapper |
|
|
67
67
|
|
|
68
|
+
## Common props
|
|
69
|
+
|
|
70
|
+
| Prop | Default | Description |
|
|
71
|
+
|------|---------|-------------|
|
|
72
|
+
| `cell` | `15` | Glyph cell size (CSS px) |
|
|
73
|
+
| `speed` | `0.2` | Fall speed |
|
|
74
|
+
| `density` | `0.15` | Drop density |
|
|
75
|
+
| `trail` | `0.65` | Trail length |
|
|
76
|
+
| `glow` | `1.75` | Head brightness |
|
|
77
|
+
| `stir` | `0.7` | Cursor stir strength |
|
|
78
|
+
| `dim` / `light` | `0.5` / `2.8` | Page dim / drop lighting (html-in-canvas) |
|
|
79
|
+
|
|
80
|
+
## Usage — CDN (React 18 UMD)
|
|
81
|
+
|
|
82
|
+
Self-contained build `dist/glyph-rain.iife.js`, global `GlyphRain`. Full example: [docs/CDN示例.html](./docs/CDN示例.html).
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
86
|
+
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
87
|
+
<script src="https://unpkg.com/@fxshelf/glyph-rain/dist/glyph-rain.iife.js"></script>
|
|
88
|
+
|
|
89
|
+
<div id="app" style="height:420px"></div>
|
|
90
|
+
<script>
|
|
91
|
+
ReactDOM.createRoot(document.getElementById('app')).render(
|
|
92
|
+
React.createElement(GlyphRain.GlyphRain, { style: { height: 420 }, density: 0.18 }),
|
|
93
|
+
)
|
|
94
|
+
</script>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Pin the version in production, e.g. `https://unpkg.com/@fxshelf/glyph-rain@0.1.2/dist/glyph-rain.iife.js`.
|
|
98
|
+
Do not use jsDelivr GitHub `gh/.../dist` links.
|
|
99
|
+
|
|
68
100
|
## Copy as source
|
|
69
101
|
|
|
70
102
|
Skip npm and copy from this package’s `src/` (or `node_modules/@fxshelf/glyph-rain/`):
|
package/README.zh-CN.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
| | |
|
|
12
12
|
|--|--|
|
|
13
13
|
| **文档 / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/glyph-rain) |
|
|
14
|
-
| **npm** | [`@fxshelf/glyph-rain@0.1.
|
|
14
|
+
| **npm** | [`@fxshelf/glyph-rain@0.1.2`](https://www.npmjs.com/package/@fxshelf/glyph-rain) |
|
|
15
15
|
| **CDN** | [unpkg](https://unpkg.com/@fxshelf/glyph-rain/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/glyph-rain/) |
|
|
16
16
|
|
|
17
17
|
支持 **npm**、**CDN `<script>`**、**复制源码**。详细用法见站点文档或 [docs/使用说明.md](./docs/使用说明.md)。
|
|
@@ -65,6 +65,38 @@ import { GlyphRain } from '@fxshelf/glyph-rain/vue'
|
|
|
65
65
|
| 内容照明 / 压暗 | Chrome 实验性 `drawElementImage` + `layoutsubtree`（html-in-canvas） |
|
|
66
66
|
| 光标搅动 | 容器上的指针事件 |
|
|
67
67
|
|
|
68
|
+
## 常用 props
|
|
69
|
+
|
|
70
|
+
| prop | 默认 | 说明 |
|
|
71
|
+
|------|------|------|
|
|
72
|
+
| `cell` | `15` | 字元格子大小（CSS px） |
|
|
73
|
+
| `speed` | `0.2` | 下落速度 |
|
|
74
|
+
| `density` | `0.15` | 雨滴密度 |
|
|
75
|
+
| `trail` | `0.65` | 拖尾长度 |
|
|
76
|
+
| `glow` | `1.75` | 头部亮度 |
|
|
77
|
+
| `stir` | `0.7` | 光标搅动强度 |
|
|
78
|
+
| `dim` / `light` | `0.5` / `2.8` | 页面压暗与雨滴照明（需 html-in-canvas） |
|
|
79
|
+
|
|
80
|
+
## 用法 — CDN（React 18 UMD）
|
|
81
|
+
|
|
82
|
+
自包含产物 `dist/glyph-rain.iife.js`，全局 `GlyphRain`。完整示例：[docs/CDN示例.html](./docs/CDN示例.html)。
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
86
|
+
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
87
|
+
<script src="https://unpkg.com/@fxshelf/glyph-rain/dist/glyph-rain.iife.js"></script>
|
|
88
|
+
|
|
89
|
+
<div id="app" style="height:420px"></div>
|
|
90
|
+
<script>
|
|
91
|
+
ReactDOM.createRoot(document.getElementById('app')).render(
|
|
92
|
+
React.createElement(GlyphRain.GlyphRain, { style: { height: 420 }, density: 0.18 }),
|
|
93
|
+
)
|
|
94
|
+
</script>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
生产环境建议锁定版本，例如 `https://unpkg.com/@fxshelf/glyph-rain@0.1.2/dist/glyph-rain.iife.js`。
|
|
98
|
+
不要用 jsDelivr GitHub `gh/.../dist` 直链。
|
|
99
|
+
|
|
68
100
|
## 复制源码
|
|
69
101
|
|
|
70
102
|
不经过 npm 时，从本包 `src/`（或 `node_modules/@fxshelf/glyph-rain/`）拷贝：
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>@fxshelf/glyph-rain · script 直引示例</title>
|
|
7
|
+
<!--
|
|
8
|
+
@fxshelf/glyph-rain 浏览器直引示例:零构建工具,React UMD + glyph-rain 浏览器产物。
|
|
9
|
+
|
|
10
|
+
资源走 npm CDN(需联网):
|
|
11
|
+
JS: https://unpkg.com/@fxshelf/glyph-rain/dist/glyph-rain.iife.js
|
|
12
|
+
|
|
13
|
+
本地已 build 时可改成 ../dist/glyph-rain.iife.js
|
|
14
|
+
注意:不要用 jsDelivr 的 gh/.../dist 直链 —— dist/ 不进 Git。
|
|
15
|
+
注意:React 需用 18.x UMD。
|
|
16
|
+
注意:内容照明需 Chrome 实验性 html-in-canvas；无该 API 时仍渲染 WebGL2 雨层。
|
|
17
|
+
-->
|
|
18
|
+
<style>
|
|
19
|
+
* { box-sizing: border-box; }
|
|
20
|
+
html, body { margin: 0; height: 100%; }
|
|
21
|
+
body {
|
|
22
|
+
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
23
|
+
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
24
|
+
background: #050508;
|
|
25
|
+
color: #fff;
|
|
26
|
+
}
|
|
27
|
+
#app { height: 100%; }
|
|
28
|
+
.panel {
|
|
29
|
+
padding: 2rem;
|
|
30
|
+
max-width: 28rem;
|
|
31
|
+
}
|
|
32
|
+
.panel h1 { margin: 0 0 0.75rem; font-size: 1.75rem; }
|
|
33
|
+
.panel p { margin: 0; line-height: 1.6; opacity: 0.85; }
|
|
34
|
+
</style>
|
|
35
|
+
</head>
|
|
36
|
+
<body>
|
|
37
|
+
<div id="app"></div>
|
|
38
|
+
|
|
39
|
+
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
40
|
+
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
41
|
+
<script src="https://unpkg.com/@fxshelf/glyph-rain/dist/glyph-rain.iife.js"></script>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
var GlyphRainView = GlyphRain.GlyphRain
|
|
45
|
+
|
|
46
|
+
ReactDOM.createRoot(document.getElementById('app')).render(
|
|
47
|
+
React.createElement(
|
|
48
|
+
GlyphRainView,
|
|
49
|
+
{ style: { height: '100%' }, density: 0.18, stir: 0.8 },
|
|
50
|
+
React.createElement(
|
|
51
|
+
'div',
|
|
52
|
+
{ className: 'panel' },
|
|
53
|
+
React.createElement('h1', null, 'Glyph Rain'),
|
|
54
|
+
React.createElement('p', null, '移动鼠标搅动雨滴。内容照明依赖 Chrome 实验性 html-in-canvas。'),
|
|
55
|
+
),
|
|
56
|
+
),
|
|
57
|
+
)
|
|
58
|
+
</script>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
@@ -30,6 +30,27 @@ import { GlyphRain } from '@fxshelf/glyph-rain/vue'
|
|
|
30
30
|
</template>
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
+
## CDN（React 18 UMD）
|
|
34
|
+
|
|
35
|
+
需先加载 React 18 UMD，再加载 IIFE。完整页面见 [CDN示例.html](./CDN示例.html)。
|
|
36
|
+
|
|
37
|
+
生产环境建议锁定版本：`https://unpkg.com/@fxshelf/glyph-rain@0.1.2/dist/glyph-rain.iife.js`。
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
41
|
+
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
42
|
+
<script src="https://unpkg.com/@fxshelf/glyph-rain/dist/glyph-rain.iife.js"></script>
|
|
43
|
+
<script>
|
|
44
|
+
ReactDOM.createRoot(document.getElementById('app')).render(
|
|
45
|
+
React.createElement(GlyphRain.GlyphRain, { style: { height: 420 }, density: 0.18 }),
|
|
46
|
+
)
|
|
47
|
+
</script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## 复制源码
|
|
51
|
+
|
|
52
|
+
拷贝 `src/core` 与 `src/react` 或 `src/vue`，保持同级目录即可。
|
|
53
|
+
|
|
33
54
|
## 常用 props
|
|
34
55
|
|
|
35
56
|
| prop | 默认 | 说明 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fxshelf/glyph-rain",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Matrix-style glyph rain with cursor stir and drop-head lighting for React and Vue. WebGL2, zero animation-lib deps. Copy-as-source friendly.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Lu Zhaotian",
|
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
"LICENSE",
|
|
35
35
|
"docs/使用说明.md",
|
|
36
36
|
"docs/动效说明-专业.md",
|
|
37
|
-
"docs/动效说明-大白话.md"
|
|
37
|
+
"docs/动效说明-大白话.md",
|
|
38
|
+
"docs/CDN示例.html"
|
|
38
39
|
],
|
|
39
40
|
"publishConfig": {
|
|
40
41
|
"access": "public"
|