Typography Vortex

在云境TS 中打开并复制 →

内容预览

# Typography Vortex Sable’s complete rotating typography vortex with crisp prerendered rings, drifting glyphs, pointer dissolution, particle dust, and click suction — with dark and light surfaces. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/typography-vortex · 预览动画：https://threeui.com/previews/typography-vortex.webm > 分类：Text Animation /* ===== src/shaders/typography-vortex/TypographyVortexCanvas.tsx (tsx) ===== */ import { useEffect, useRef } from "react"; import { createTypographyVortexRenderer } from "./typographyVortexRenderer"; export type TypographyVortexCanvasProps = { mode?: "dark" | "light"; phrase?: string; speed?: number; ringGrowth?: number; opacity?: number; dissolveRadius?: number; particleAmount?: number; suctionDuration?: number; className?: string; }; export const TYPOGRAPHY_VORTEX_DEFAULTS = { mode: "dark" as const, phrase: "SABLE / SYSTEMS IN MOTION / ", speed: 1, ringGrowth: 1.21, opacity: 1, dissolveRadius: 1, particleAmount: 1, suctionDuration: 920, } as const; export function TypographyVortexCanvas({ className = "", ...props }: TypographyVortexCanvasProps) { const hostRef = useRef(null); const canvasRef = useRef(null); const optionsRef = useRef({ ...TYPOGRAPHY_VORTEX_DEFAULTS, ...props }); optionsRef.current = { ...TYPOGRAPHY_VORTEX_DEFAULTS, ...props }; useEffect(() => { const host = hostRef.current; const canvas = canvasRef.current; if (!host || !canvas) return undefined; return

……（完整源码请在站内查看）