@fxshelf/glyph-rain

Matrix-style glyph rain with cursor stir and drop-head lighting for React and Vue. WebGL2, zero animation-lib deps. Copy-as-source friendly.
295
vue react webgl animation canvas effect glyph matrix fxshelf rain
Install
npm install @fxshelf/glyph-rain
Latest Version:0.1.1
Vue:3
License:MIT
Last Updated:Sep 13, 2026
Links: GitHub  ·  npm
Maintainer: zhaotianlu

@fxshelf/glyph-rain

English · 中文

面向 React / Vue 的 Matrix 风格字符雨，支持光标搅动。
在 Chrome 实验性 html-in-canvas API 可用时，雨滴头部可照亮页面内容；否则仍以 WebGL2 叠加层渲染。零动画库依赖。

灵感来自 Canvas UI Glyph Rain。
属于 fxshelf 动效书架中的一个可独立安装包。
文档 / Demo luzhaotian.github.io/fxshelf
npm @fxshelf/glyph-rain@0.1.1
CDN unpkg · jsDelivr

支持 npm、CDN <script>、复制源码。详细用法见站点文档或 docs/使用说明.md。

安装

npm install @fxshelf/glyph-rain
使用方 Peer
React react / react-dom ≥ 18
Vue vue ≥ 3.3，且能编译 .vue（如 Vite）

用法 — React

import { GlyphRain } from '@fxshelf/glyph-rain'

export function Demo() {
  return (
    <GlyphRain style={{ height: 420 }} density={0.18} stir={0.8}>
      <img src="https://raw.githubusercontent.com/Luzhaotian/fxshelf/HEAD/photo.jpg" alt="" style={{ width: '100%', display: 'block' }} />
    </GlyphRain>
  )
}

用法 — Vue

入口为源码 SFC：@fxshelf/glyph-rain/vue。

<script setup lang="ts">
import { GlyphRain } from '@fxshelf/glyph-rain/vue'
</script>

<template>
  <GlyphRain :style="{ height: '420px' }" :density="0.18" :stir="0.8">
    <img src="https://raw.githubusercontent.com/Luzhaotian/fxshelf/HEAD/photo.jpg" alt="" style="width: 100%; display: block" />
  </GlyphRain>
</template>

浏览器说明

能力 要求
字符雨叠加层 WebGL2
内容照明 / 压暗 Chrome 实验性 drawElementImage + layoutsubtree（html-in-canvas）
光标搅动 容器上的指针事件

复制源码

不经过 npm 时，从本包 src/（或 node_modules/@fxshelf/glyph-rain/）拷贝：

core/     # 必拷
react/    # React 项目
vue/      # Vue 项目

License

MIT

Related Packages

@fxshelf/starfield

Canvas 2D starfield tunnel for React and Vue — perspective fly-through, glitter...

302 0
animation canvas effect fxshelf react vue background starfield stars tunnel
@fxshelf/button-kit

Animated button shelf for React and Vue — switch styles by variant string. Zero...

503 0
animation effect fxshelf react vue button button-kit ui
@fxshelf/word-tunnel

3D keyword tunnel word-cloud for React and Vue — perspective fly-through text. Z...

360 0
animation effect fxshelf react vue background keyword word-cloud word-tunnel
glyphcast

Video as colored glyphs: a complete WebGL2 player with controls and PiP, and a g...

4,980 0
canvas glyph react vue webgl ascii ascii-art player streaming terminal +2
alpha-video-player-js

Web 视频动画特效播放 sdk

2,116 2
canvas react vue webgl alpha player video

Version History

Version Released Vue License
0.1.1 >=3.3 MIT
0.1.0 >=3.3 MIT