Semantic Bloom
ThreeUI · Text Animation · 免费
在云境TS 中打开并复制 →
内容预览
# Semantic Bloom A customizable Codex wordmark that draws a viscous particle organism toward its letters, illuminating the text as the network searches and reconnects. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/semantic-bloom · 预览动画：https://threeui.com/previews/semantic-bloom.webm > 分类：Text Animation /* ===== src/shaders/semantic-bloom/SemanticBloom.tsx (tsx) ===== */ import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; import semanticExplorerSource from "./sources/design-f0ebbe02-7d8a-41fd-9041-a1124185c27b.html?raw"; export type SemanticBloomProps = { text?: string; mode?: "dark" | "light"; size?: number; opacity?: number; className?: string; style?: CSSProperties; }; export const SEMANTIC_BLOOM_DEFAULTS = { text: "Codex", mode: "dark" as const, size: 1, opacity: 1, }; function clamp(value: number, minimum: number, maximum: number) { return Math.min(maximum, Math.max(minimum, value)); } function buildFocusedDocument(mode: "dark" | "light") { const light = mode === "light"; const surface = light ? "#f4f4f2" : "#030303"; const restingText = light ? "#989894" : "#555555"; const activeText = light ? "#151515" : "#e0e0e0"; const particle = light ? "rgba(28, 28, 28, 0.78)" : "rgba(200, 200, 200, 0.8)"; const connection = light ? "rgba(48, 48, 46, 0.14)" : "rgba(120, 120, 120, 0.15)"; const focusStyles = ` :root { --bg-color: ${surface}; --text-color: ${restingText}
……（完整源码请在站内查看）