Any SVG mark as a domed chrome badge, drawn in WebGPU. It leans toward the cursor with the light following, and a click flips it. Falls back to a flat chrome face where WebGPU is missing. Part of ssych ui: https://ssych.com/effects/metal-badge
import { useEffect } from "react"
import MetalBadge from "@/components/ui/metal-badge"
/** the ssych logo, from the Figma master's 114.714 × 99.0732 box */
const SS_LOGO = {
vb: "0 0 114.714 99.0732",
d: "M82.127 31.2383H114.191L113.996 35.5039C113.536 45.5259 105.398 53.4488 95.4229 53.6943L94.9463 53.7002H94.4238C94.247 53.7002 94.0831 53.794 93.9932 53.9463C93.9034 54.0985 93.901 54.2866 93.9863 54.4414L101.956 68.8994C103.378 71.4786 103.451 74.5893 102.154 77.2334L98.2148 85.2627V85.2637C94.2191 93.4083 85.9381 98.5708 76.8662 98.5713L27.5137 98.5723L43.2529 73.502H69.1719C70.7295 73.5017 71.7093 71.8241 70.9463 70.4668L61.8154 54.2227L73.7998 35.7607C75.5733 33.0287 78.5701 31.3456 81.8125 31.2432L82.127 31.2383ZM71.457 25.5713H45.5381L45.3936 25.5762C43.9207 25.6762 43.0245 27.2916 43.7637 28.6064L52.8955 44.8525L40.915 63.3125C39.0844 66.1327 35.9493 67.835 32.5869 67.835H0.523438L0.71875 63.5684C1.17862 53.5463 9.31627 45.6241 19.292 45.3789L19.7686 45.373H20.2861C20.463 45.373 20.6269 45.2792 20.7168 45.127C20.8065 44.9747 20.809 44.7866 20.7236 44.6318L12.7539 30.1738C11.3322 27.5947 11.2588 24.484 12.5557 21.8398L16.4951 13.8105V13.8096C20.4908 5.66496 28.7718 0.502404 37.8438 0.501953L87.1953 0.5L71.457 25.5713Z",
}
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex w-full items-center justify-center">
{/* the badge's root is its stage: the cursor anywhere over it tilts the badge */}
<MetalBadge path={SS_LOGO.d} viewBox={SS_LOGO.vb} size={200} label="ssych logo" className="min-h-[460px] w-full" />
</div>
)
}