Text Path Studies

在云境TS 中打开并复制 →

内容预览

# Text Path Studies Six interactive Canvas 2D typography studies spanning a globe, flowing outlines, morphing glyphs, cloth physics, ripples, and a particle sphere. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/globe-study · 预览动画：https://threeui.com/previews/globe-study.webm > 分类：Text Animation > 包含变体（5）：outline-typeflow、morphing-glyph-cloud、cloth-study、ripple-study、ball-study /* ===== src/shaders/text-path-studies/TextPathStudies.tsx (tsx) ===== */ import { useMemo, type CSSProperties } from "react"; import firstStudiesSource from "./sources/text-on-a-path.html?raw"; import secondStudiesSource from "./sources/text-on-a-path-ii.html?raw"; type StudyDefinition = { source: string; index: number; title: string; layout: "cards" | "figures"; presentation?: "dark-frameless"; renderDensity?: { minimum: number; maximum: number; }; }; export type TextPathStudyProps = { mode?: "dark" | "light"; scale?: number; opacity?: number; hue?: number; saturation?: number; brightness?: number; className?: string; style?: CSSProperties; }; export type TextPathStudiesVariant = | "globe-study" | "outline-typeflow" | "morphing-glyph-cloud" | "cloth-study" | "ripple-study" | "ball-study"; export type TextPathStudiesProps = TextPathStudyProps & { variant?: TextPathStudiesVariant; }; export const TEXT_PATH_STUDY_DEFAULTS = { mode: "dark", scale: 1, opacity: 1, hue: 0, saturation: 1, brightness: 1, } as const; const STUDIES = { globe

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