@fxshelf/glyph-rain 0.1.0 → 0.1.1

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.
Files changed (3) hide show
  1. package/README.md +33 -4
  2. package/README.zh-CN.md +80 -0
  3. package/package.json +2 -1
package/README.md CHANGED
@@ -1,8 +1,20 @@
1
1
  # @fxshelf/glyph-rain
2
2
 
3
- Matrix-style glyph rain with cursor stir. 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.
3
+ [English](./README.md) · [中文](./README.zh-CN.md)
4
4
 
5
- Inspired by [Canvas UI Glyph Rain](https://canvasui.dev/docs/components/glyph-rain).
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.1`](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
- ## React
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,16 @@ 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
+ ## Copy as source
69
+
70
+ Skip npm and copy from this package’s `src/` (or `node_modules/@fxshelf/glyph-rain/`):
71
+
72
+ ```
73
+ core/ # required
74
+ react/ # React projects
75
+ vue/ # Vue projects
76
+ ```
77
+
49
78
  ## License
50
79
 
51
80
  MIT
package/README.zh-CN.md ADDED
@@ -0,0 +1,80 @@
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.1`](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
+ ## 复制源码
69
+
70
+ 不经过 npm 时，从本包 `src/`（或 `node_modules/@fxshelf/glyph-rain/`）拷贝：
71
+
72
+ ```
73
+ core/ # 必拷
74
+ react/ # React 项目
75
+ vue/ # Vue 项目
76
+ ```
77
+
78
+ ## License
79
+
80
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fxshelf/glyph-rain",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
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,6 +30,7 @@
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",