@fxshelf/glyph-rain 0.1.0 → 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
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
# @fxshelf/glyph-rain
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[English](./README.md) · [中文](./README.zh-CN.md)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Matrix-style glyph rain with cursor stir for **React** and **Vue**.
|
|
6
|
+
Drop heads cast light onto page content when Chrome’s experimental **html-in-canvas** APIs are available; otherwise the rain still renders as a WebGL2 overlay. Zero animation-lib deps.
|
|
7
|
+
|
|
8
|
+
Inspired by [Canvas UI Glyph Rain](https://canvasui.dev/docs/components/glyph-rain).
|
|
9
|
+
Part of the [fxshelf](https://github.com/Luzhaotian/fxshelf) effect shelf — install independently.
|
|
10
|
+
|
|
11
|
+
| | |
|
|
12
|
+
|--|--|
|
|
13
|
+
| **Docs / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/glyph-rain) |
|
|
14
|
+
| **npm** | [`@fxshelf/glyph-rain@0.1.2`](https://www.npmjs.com/package/@fxshelf/glyph-rain) |
|
|
15
|
+
| **CDN** | [unpkg](https://unpkg.com/@fxshelf/glyph-rain/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/glyph-rain/) |
|
|
16
|
+
|
|
17
|
+
Supports **npm**, **CDN `<script>`**, and **copy-as-source**. Details: site docs or [docs/使用说明.md](./docs/使用说明.md).
|
|
6
18
|
|
|
7
19
|
## Install
|
|
8
20
|
|
|
@@ -10,7 +22,12 @@ Inspired by [Canvas UI Glyph Rain](https://canvasui.dev/docs/components/glyph-ra
|
|
|
10
22
|
npm install @fxshelf/glyph-rain
|
|
11
23
|
```
|
|
12
24
|
|
|
13
|
-
|
|
25
|
+
| Consumer | Peer |
|
|
26
|
+
|----------|------|
|
|
27
|
+
| React | `react` / `react-dom` ≥ 18 |
|
|
28
|
+
| Vue | `vue` ≥ 3.3, with `.vue` compilation (e.g. Vite) |
|
|
29
|
+
|
|
30
|
+
## Usage — React
|
|
14
31
|
|
|
15
32
|
```tsx
|
|
16
33
|
import { GlyphRain } from '@fxshelf/glyph-rain'
|
|
@@ -24,7 +41,9 @@ export function Demo() {
|
|
|
24
41
|
}
|
|
25
42
|
```
|
|
26
43
|
|
|
27
|
-
## Vue
|
|
44
|
+
## Usage — Vue
|
|
45
|
+
|
|
46
|
+
Entry is source SFC: `@fxshelf/glyph-rain/vue`.
|
|
28
47
|
|
|
29
48
|
```vue
|
|
30
49
|
<script setup lang="ts">
|
|
@@ -46,6 +65,48 @@ import { GlyphRain } from '@fxshelf/glyph-rain/vue'
|
|
|
46
65
|
| Content lighting / dim | Chrome experimental `drawElementImage` + `layoutsubtree` (html-in-canvas) |
|
|
47
66
|
| Cursor stir | Pointer events on the wrapper |
|
|
48
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
|
+
|
|
100
|
+
## Copy as source
|
|
101
|
+
|
|
102
|
+
Skip npm and copy from this package’s `src/` (or `node_modules/@fxshelf/glyph-rain/`):
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
core/ # required
|
|
106
|
+
react/ # React projects
|
|
107
|
+
vue/ # Vue projects
|
|
108
|
+
```
|
|
109
|
+
|
|
49
110
|
## License
|
|
50
111
|
|
|
51
112
|
MIT
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# @fxshelf/glyph-rain
|
|
2
|
+
|
|
3
|
+
[English](./README.md) · [中文](./README.zh-CN.md)
|
|
4
|
+
|
|
5
|
+
面向 **React** / **Vue** 的 Matrix 风格字符雨，支持光标搅动。
|
|
6
|
+
在 Chrome 实验性 **html-in-canvas** API 可用时，雨滴头部可照亮页面内容；否则仍以 WebGL2 叠加层渲染。零动画库依赖。
|
|
7
|
+
|
|
8
|
+
灵感来自 [Canvas UI Glyph Rain](https://canvasui.dev/docs/components/glyph-rain)。
|
|
9
|
+
属于 [fxshelf](https://github.com/Luzhaotian/fxshelf) 动效书架中的一个可独立安装包。
|
|
10
|
+
|
|
11
|
+
| | |
|
|
12
|
+
|--|--|
|
|
13
|
+
| **文档 / Demo** | [luzhaotian.github.io/fxshelf](https://luzhaotian.github.io/fxshelf/docs/effects/glyph-rain) |
|
|
14
|
+
| **npm** | [`@fxshelf/glyph-rain@0.1.2`](https://www.npmjs.com/package/@fxshelf/glyph-rain) |
|
|
15
|
+
| **CDN** | [unpkg](https://unpkg.com/@fxshelf/glyph-rain/) · [jsDelivr](https://cdn.jsdelivr.net/npm/@fxshelf/glyph-rain/) |
|
|
16
|
+
|
|
17
|
+
支持 **npm**、**CDN `<script>`**、**复制源码**。详细用法见站点文档或 [docs/使用说明.md](./docs/使用说明.md)。
|
|
18
|
+
|
|
19
|
+
## 安装
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @fxshelf/glyph-rain
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
| 使用方 | Peer |
|
|
26
|
+
|--------|------|
|
|
27
|
+
| React | `react` / `react-dom` ≥ 18 |
|
|
28
|
+
| Vue | `vue` ≥ 3.3，且能编译 `.vue`（如 Vite） |
|
|
29
|
+
|
|
30
|
+
## 用法 — React
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { GlyphRain } from '@fxshelf/glyph-rain'
|
|
34
|
+
|
|
35
|
+
export function Demo() {
|
|
36
|
+
return (
|
|
37
|
+
<GlyphRain style={{ height: 420 }} density={0.18} stir={0.8}>
|
|
38
|
+
<img src="/photo.jpg" alt="" style={{ width: '100%', display: 'block' }} />
|
|
39
|
+
</GlyphRain>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## 用法 — Vue
|
|
45
|
+
|
|
46
|
+
入口为源码 SFC：`@fxshelf/glyph-rain/vue`。
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<script setup lang="ts">
|
|
50
|
+
import { GlyphRain } from '@fxshelf/glyph-rain/vue'
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<template>
|
|
54
|
+
<GlyphRain :style="{ height: '420px' }" :density="0.18" :stir="0.8">
|
|
55
|
+
<img src="/photo.jpg" alt="" style="width: 100%; display: block" />
|
|
56
|
+
</GlyphRain>
|
|
57
|
+
</template>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## 浏览器说明
|
|
61
|
+
|
|
62
|
+
| 能力 | 要求 |
|
|
63
|
+
|------|------|
|
|
64
|
+
| 字符雨叠加层 | WebGL2 |
|
|
65
|
+
| 内容照明 / 压暗 | Chrome 实验性 `drawElementImage` + `layoutsubtree`（html-in-canvas） |
|
|
66
|
+
| 光标搅动 | 容器上的指针事件 |
|
|
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
|
+
|
|
100
|
+
## 复制源码
|
|
101
|
+
|
|
102
|
+
不经过 npm 时，从本包 `src/`（或 `node_modules/@fxshelf/glyph-rain/`）拷贝：
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
core/ # 必拷
|
|
106
|
+
react/ # React 项目
|
|
107
|
+
vue/ # Vue 项目
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
MIT
|
|
@@ -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",
|
|
@@ -30,10 +30,12 @@
|
|
|
30
30
|
"src/vue",
|
|
31
31
|
"src/vue-shim.d.ts",
|
|
32
32
|
"README.md",
|
|
33
|
+
"README.zh-CN.md",
|
|
33
34
|
"LICENSE",
|
|
34
35
|
"docs/使用说明.md",
|
|
35
36
|
"docs/动效说明-专业.md",
|
|
36
|
-
"docs/动效说明-大白话.md"
|
|
37
|
+
"docs/动效说明-大白话.md",
|
|
38
|
+
"docs/CDN示例.html"
|
|
37
39
|
],
|
|
38
40
|
"publishConfig": {
|
|
39
41
|
"access": "public"
|