Liquid Metal Button
ThreeUI · Buttons · 免费
在云境TS 中打开并复制 →
内容预览
# Liquid Metal Button A prismatic liquid-metal control in Sign up pill, Liquid Orb, and configurable Play Circle variants, with pointer-following bloom and press ripples. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/liquid-metal-button · 预览动画：https://threeui.com/previews/liquid-metal-button.webm > 分类：Buttons > 包含变体（3）：play-circle、pill、circle /* ===== src/shaders/liquid-metal-button/LiquidMetalButton.tsx (tsx) ===== */ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import liquidMetalButtonSource from "./liquid-metal-button.html?raw"; export type LiquidMetalButtonVariant = "pill" | "circle" | "play"; export type LiquidMetalButtonProps = { variant?: LiquidMetalButtonVariant; className?: string; rendering?: "colored" | "monotone"; diameter?: number; strokeWidth?: number; text?: string; embedded?: boolean; onClick?: () => void; }; const LIQUID_METAL_BUTTON_BRIDGE = ` window.addEventListener('message', event => { if(event.source !== parent) return; const config = event.data && event.data.liquidMetalButton; if(!config) return; const text = typeof config.text === 'string' ? config.text.slice(0, 24) : ''; const label = btn.querySelector('.lbl'); if(label) label.textContent = text; btn.setAttribute('aria-label', text || 'Button'); if(Number.isFinite(config.pillWidthUnits)) { stage.style.setProperty('--bw', 'calc(' + config.pillWidthUnits + ' * var(--u))'); } document.body.style.backgrou
……（完整源码请在站内查看）