@fxshelf/glyph-rain 0.1.0

package/src/core/supports.ts

@@ -0,0 +1,13 @@
+import type { ElementImageContext, PaintableCanvas } from './types'
+
+/** True when Chrome's experimental html-in-canvas APIs are available. */
+export function supportsHtmlInCanvas(): boolean {
+  if (typeof document === 'undefined') return false
+  const probe = document.createElement('canvas') as PaintableCanvas
+  const ctx = probe.getContext('2d') as ElementImageContext | null
+  return Boolean(
+    ctx &&
+      typeof ctx.drawElementImage === 'function' &&
+      typeof probe.requestPaint === 'function',
+  )
+}

package/src/core/types.ts

@@ -0,0 +1,95 @@
+export type GlyphRainOptions = {
+  /** Characters used for the falling glyphs. Deduplicated into a glyph atlas. */
+  charset?: string
+  /** Size of one glyph cell in CSS pixels (8 to 64). */
+  cell?: number
+  /** Rain color as [r, g, b] in 0-1 range. */
+  color?: [number, number, number]
+  /** Color of the bright head glyph as [r, g, b] in 0-1 range. */
+  headColor?: [number, number, number]
+  /** Fall speed in screen heights per second (0.05 to 3). */
+  speed?: number
+  /** Per-column speed variation (0 to 1). */
+  speedVariance?: number
+  /** Fraction of drops that spawn each cycle (0 to 1). */
+  density?: number
+  /** Length multiplier for the fading trails (0.2 to 3). */
+  trail?: number
+  /** Brightness of the drop heads and the light they cast (0 to 3). */
+  glow?: number
+  /** How fast glyphs mutate into other characters (0 to 4). */
+  mutate?: number
+  /** Random brightness flicker of the streaks (0 to 1). */
+  flicker?: number
+  /** Parallax rain layers behind the front one (1 to 3). */
+  layers?: number
+  /** How much the unlit page dims (0 to 1). 0 keeps it fully readable. */
+  dim?: number
+  /** Strength of the light the drops shine onto the page (0 to 3). */
+  light?: number
+  /** Radius of each drop's light pool in CSS pixels (20 to 600). */
+  lightRadius?: number
+  /** How high above the page the lights float, in CSS pixels. Higher is softer. */
+  lightHeight?: number
+  /** Embossed 3D shading of the page under the lights (0 to 2). */
+  relief?: number
+  /** How strongly the cursor stirs the rain as it passes (0 to 1). 0 disables it. */
+  stir?: number
+  /** How far the stirring reaches to either side of the cursor, in CSS pixels. */
+  stirRadius?: number
+  /** Seconds the stirred wake takes to settle back to its own rhythm. */
+  settle?: number
+}
+
+export type GlyphRainElements = {
+  /** Canvas with layoutsubtree that hosts the HTML content. */
+  source: HTMLCanvasElement
+  /** The element inside the source canvas that gets captured. */
+  content: HTMLElement
+  /** Canvas the WebGL effect renders to. */
+  output: HTMLCanvasElement
+}
+
+export type GlyphRainInstance = {
+  /** Update effect options live. */
+  setOptions: (options: GlyphRainOptions) => void
+  /** Re-read canvas size. Call when the element is resized. */
+  resize: () => void
+  /** Stop the loop and release all GPU resources. */
+  destroy: () => void
+}
+
+export const DEFAULT_CHARSET =
+  'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ0123456789Z*+-<>¦=:.'
+
+export const DEFAULTS: Required<GlyphRainOptions> = {
+  charset: DEFAULT_CHARSET,
+  cell: 15,
+  color: [0.267, 0.455, 1],
+  headColor: [0.169, 0.416, 1],
+  speed: 0.2,
+  speedVariance: 0.5,
+  density: 0.15,
+  trail: 0.65,
+  glow: 1.75,
+  mutate: 0,
+  flicker: 0,
+  layers: 2,
+  dim: 0.5,
+  light: 2.8,
+  lightRadius: 240,
+  lightHeight: 172,
+  relief: 0.05,
+  stir: 0.7,
+  stirRadius: 260,
+  settle: 0.9,
+}
+
+export type PaintableCanvas = HTMLCanvasElement & {
+  onpaint?: (() => void) | null
+  requestPaint?: () => void
+}
+
+export type ElementImageContext = CanvasRenderingContext2D & {
+  drawElementImage?: (element: Element, x: number, y: number) => void
+}

package/src/react/GlyphRain.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type CSSProperties,
+  type ReactNode,
+} from 'react'
+import {
+  createGlyphRain,
+  supportsHtmlInCanvas,
+  type GlyphRainInstance,
+  type GlyphRainOptions,
+} from '../core/createGlyphRain'
+
+export type GlyphRainProps = GlyphRainOptions & {
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+}
+
+const emptySubscribe = () => () => {}
+
+export function GlyphRain({
+  children,
+  className,
+  style,
+  ...options
+}: GlyphRainProps) {
+  const sourceRef = useRef<HTMLCanvasElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const outputRef = useRef<HTMLCanvasElement>(null)
+  const instanceRef = useRef<GlyphRainInstance | null>(null)
+  const [initialOptions] = useState(options)
+  const [failed, setFailed] = useState(false)
+
+  const supported = useSyncExternalStore(
+    emptySubscribe,
+    supportsHtmlInCanvas,
+    () => false,
+  )
+  const native = supported && !failed
+
+  useEffect(() => {
+    const source = sourceRef.current
+    const content = contentRef.current
+    const output = outputRef.current
+    if (!source || !content || !output) return
+    instanceRef.current = createGlyphRain(
+      { source, content, output },
+      initialOptions,
+    )
+    if (native && !instanceRef.current) setFailed(true)
+    return () => {
+      instanceRef.current?.destroy()
+      instanceRef.current = null
+    }
+  }, [initialOptions, native])
+
+  useEffect(() => {
+    instanceRef.current?.setOptions(options)
+  })
+
+  return (
+    <div className={className} style={{ position: 'relative', ...style }}>
+      <canvas
+        ref={sourceRef}
+        // @ts-expect-error experimental html-in-canvas attribute
+        layoutsubtree="true"
+        suppressHydrationWarning
+        style={
+          native
+            ? {
+                position: 'absolute',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+              }
+            : { display: 'none' }
+        }
+      >
+        {native ? (
+          <div
+            ref={contentRef}
+            style={{
+              position: 'relative',
+              width: '100%',
+              height: '100%',
+              overflow: 'auto',
+            }}
+          >
+            {children}
+          </div>
+        ) : null}
+      </canvas>
+      {!native ? (
+        <div
+          ref={contentRef}
+          style={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            overflow: 'auto',
+          }}
+        >
+          {children}
+        </div>
+      ) : null}
+      <canvas
+        ref={outputRef}
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+        }}
+      />
+    </div>
+  )
+}
+
+export default GlyphRain

package/src/react/index.ts

@@ -0,0 +1,10 @@
+export { GlyphRain, type GlyphRainProps } from './GlyphRain'
+export {
+  createGlyphRain,
+  supportsHtmlInCanvas,
+  DEFAULT_CHARSET,
+  DEFAULTS,
+  type GlyphRainElements,
+  type GlyphRainInstance,
+  type GlyphRainOptions,
+} from '../core/createGlyphRain'

package/src/vue/GlyphRain.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type CSSProperties,
+  type StyleValue,
+} from 'vue'
+import {
+  createGlyphRain,
+  supportsHtmlInCanvas,
+  type GlyphRainInstance,
+  type GlyphRainOptions,
+} from '../core/createGlyphRain'
+
+const props = defineProps<{
+  charset?: string
+  cell?: number
+  color?: [number, number, number]
+  headColor?: [number, number, number]
+  speed?: number
+  speedVariance?: number
+  density?: number
+  trail?: number
+  glow?: number
+  mutate?: number
+  flicker?: number
+  layers?: number
+  dim?: number
+  light?: number
+  lightRadius?: number
+  lightHeight?: number
+  relief?: number
+  stir?: number
+  stirRadius?: number
+  settle?: number
+  className?: string
+  style?: CSSProperties
+}>()
+
+const sourceRef = ref<HTMLCanvasElement | null>(null)
+const contentRef = ref<HTMLDivElement | null>(null)
+const outputRef = ref<HTMLCanvasElement | null>(null)
+const failed = ref(false)
+const supported = ref(false)
+
+let instance: GlyphRainInstance | null = null
+
+const native = computed(() => supported.value && !failed.value)
+
+const rootClass = computed(() => props.className ?? '')
+const rootStyle = computed(
+  (): StyleValue => ({
+    position: 'relative',
+    ...props.style,
+  }),
+)
+
+function optionPayload(): GlyphRainOptions {
+  return {
+    charset: props.charset,
+    cell: props.cell,
+    color: props.color,
+    headColor: props.headColor,
+    speed: props.speed,
+    speedVariance: props.speedVariance,
+    density: props.density,
+    trail: props.trail,
+    glow: props.glow,
+    mutate: props.mutate,
+    flicker: props.flicker,
+    layers: props.layers,
+    dim: props.dim,
+    light: props.light,
+    lightRadius: props.lightRadius,
+    lightHeight: props.lightHeight,
+    relief: props.relief,
+    stir: props.stir,
+    stirRadius: props.stirRadius,
+    settle: props.settle,
+  }
+}
+
+function mountEffect() {
+  instance?.destroy()
+  instance = null
+  const source = sourceRef.value
+  const content = contentRef.value
+  const output = outputRef.value
+  if (!source || !content || !output) return
+  instance = createGlyphRain({ source, content, output }, optionPayload())
+  if (native.value && !instance) failed.value = true
+}
+
+onMounted(async () => {
+  supported.value = supportsHtmlInCanvas()
+  await nextTick()
+  mountEffect()
+})
+
+watch(
+  () => [
+    props.charset,
+    props.cell,
+    props.color,
+    props.headColor,
+    props.speed,
+    props.speedVariance,
+    props.density,
+    props.trail,
+    props.glow,
+    props.mutate,
+    props.flicker,
+    props.layers,
+    props.dim,
+    props.light,
+    props.lightRadius,
+    props.lightHeight,
+    props.relief,
+    props.stir,
+    props.stirRadius,
+    props.settle,
+  ],
+  () => {
+    instance?.setOptions(optionPayload())
+  },
+)
+
+onBeforeUnmount(() => {
+  instance?.destroy()
+  instance = null
+})
+</script>
+
+<template>
+  <div :class="rootClass" :style="rootStyle">
+    <canvas
+      ref="sourceRef"
+      layoutsubtree="true"
+      :style="
+        native
+          ? {
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+            }
+          : { display: 'none' }
+      "
+    >
+      <div
+        v-if="native"
+        ref="contentRef"
+        style="position: relative; width: 100%; height: 100%; overflow: auto"
+      >
+        <slot />
+      </div>
+    </canvas>
+    <div
+      v-if="!native"
+      ref="contentRef"
+      style="position: relative; width: 100%; height: 100%; overflow: auto"
+    >
+      <slot />
+    </div>
+    <canvas
+      ref="outputRef"
+      aria-hidden="true"
+      style="
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      "
+    />
+  </div>
+</template>

package/src/vue/index.ts

@@ -0,0 +1 @@
+export { default as GlyphRain } from './GlyphRain.vue'

package/src/vue-shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}