Spark Badge

在云境TS 中打开并复制 →

内容预览

# Spark Badge A luminous credential badge held together by curl-noise embers, carved typography, rain occlusion, waterline sparks, and an adaptive particle field. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/spark-badge · 预览动画：https://threeui.com/previews/spark-badge.webm > 分类：Backgrounds > 包含变体（1）：badge /* ===== src/shaders/spark-badge/SparkBadge.tsx (tsx) ===== */ import { useEffect, useRef, useState } from "react"; export type SparkBadgeVariant = "badge"; export type SparkBadgeProps = { className?: string; sourceUrl?: string; variant?: SparkBadgeVariant }; export function SparkBadge({ className = "", sourceUrl = "/spark-badge.html" }: SparkBadgeProps) { const hostRef = useRef(null); const intersectsRef = useRef(true); const [mounted, setMounted] = useState(true); const [ready, setReady] = useState(false); useEffect(() => { const host = hostRef.current; if (!host) return; const sync = () => setMounted(intersectsRef.current && document.visibilityState !== "hidden"); const observer = new IntersectionObserver(([entry]) => { intersectsRef.current = entry.isIntersecting; sync(); }, { rootMargin: "80px" }); observer.observe(host); document.addEventListener("visibilitychange", sync); return () => { observer.disconnect(); document.removeEventListener("visibilitychange", sync); }; }, []); useEffect(() => { if (!mounted) setReady(false); }, [mounted]); return {mounted ? setReady(true)} /> : null}; } /* ===== src

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