BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/ns-ui/border-chrome-ring

Border Chrome Ring

ns-ui/border-chrome-ring
FreeComponent

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.

Live preview

live · rendered by the registry
Rendered by ns-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://design.helpmarq.com/r/border-chrome-ring.json

Files it writes

  • registry/loud/border-chrome-ring/component.tsx

Facts

Registry
ns-ui
Type
registry:ui
Access
Free
Files written
1
Licence
MIT
First indexed
2026-08-02
Last confirmed
yesterday

Go to the source

Docs on ns-ui design.helpmarq.com nikolas-sapa/ns-ui on GitHub Raw registry item This item as JSON

More from ns-ui

All 228 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
Accordion Latchaccordion-latchns-uiComponentsFreeno deps
Approval Inline Diffapproval-inline-diffns-uiComponentsFreeno deps
ASCII Engraving Contourascii-engraving-contourns-uiComponentsFreeno deps
ASCII Globe Spinascii-globe-spinns-uiComponentsFreeno deps
ASCII Torus Donutascii-torus-donutns-uiComponentsFreeno deps
Autosave Ratchetautosave-ratchetns-uiComponentsFreeno deps
Avatar Stack Flockavatar-stack-flockns-uiComponentsFreeno deps
Background ASCII Ditherbackground-ascii-ditherns-uiComponentsFreeno deps
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex