Brand Orbs
ThreeUI · UI Elements · 免费
在云境TS 中打开并复制 →
内容预览
# Brand Orbs Twenty-three animated brand marks rebuilt as small and medium dimensional dot orbs for AI status, product activity, and compact loading states. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/brand-orbs · 预览动画：https://threeui.com/previews/brand-orbs.webm > 分类：UI Elements > 包含变体（23）：claude、openai、codex、cursor、gemini、figma、framer、react、swift、designcode、aura、dreamcut、ui、ux、css、ios、neuform、github、x、instagram、threads、linkedin、email /* ===== src/shaders/brand-orbs/BrandOrbs.tsx (tsx) ===== */ import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; import brandOrbsSource from "./sources/brand-orbs-v2.html?raw"; export const BRAND_ORB_VARIANTS = [ "claude", "openai", "codex", "cursor", "gemini", "figma", "framer", "react", "swift", "designcode", "aura", "dreamcut", "ui", "ux", "css", "ios", "neuform", "github", "x", "instagram", "threads", "linkedin", "email", ] as const; export const BRAND_ORB_SIZES = ["small", "medium"] as const; export type BrandOrbVariant = (typeof BRAND_ORB_VARIANTS)[number]; export type BrandOrbSize = (typeof BRAND_ORB_SIZES)[number]; export type BrandOrbMode = "auto" | "dark" | "light"; export type BrandOrbsProps = { variant?: BrandOrbVariant; size?: BrandOrbSize; mode?: BrandOrbMode; speed?: number; paused?: boolean; "aria-label"?: string; className?: string; style?: CSSProperties; }; export const BRAND_ORBS_DEFAULTS = { variant: "claude"
……（完整源码请在站内查看）