Border Chrome Ring
- from @ns-ui
Wraps any element in a thick tube of molten chrome: a WebGL shader fakes a 3D torus cross-section across the band width (not a flat gradient), lights it with a rotating banded environment reflection so bright/dark stripes sweep around the collar, and perturbs the band's own boundary with noise so it wobbles like liquid metal instead of holding a fixed shape. Hovering biases a specular hit toward the cursor; pressing bulges the metal outward and pools it toward the pointer; releasing sends a ripple once around the ring.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @ns-ui/border-chrome-ringLive preview
No live preview has been built for this component yet.
Registry dependencies0
The CLI adds no other registry items with this one.
Packages0
No npm packages are installed with it.
