Rainbow Button

From faxas-portfolio-app · src/components/exploration/rainbow-button/RainbowButton.tsx

Live

Controls

Colour set

vibrant is the six-stop portfolio rainbow; mono is the same mechanic in greys for a serious surface.

Border width

Pixels of conic gradient left visible around the interior. 0.5 is a hairline; 2 is a frame.

Glow intensity

Only visible on hover — the glow is the hover state, not the resting state.

Spin the border

Off freezes the conic gradient at 0deg. Worth toggling to see how much of the effect is motion.

Variant

ghost drops the dark interior and flips the label to dark — for use on a light ground.

Size

Interior background

Any CSS background. Defaults to #0f0f1e. Ignored by the ghost variant.

Interior blur—

Backdrop blur behind the interior. Only reads as glass when the ground behind it has texture.

1 prop with no control

children — content is set by the demo

Preview runs the converted copy this catalog installs (v2.0.0), mounted with authored demo content.

Install

npx shadcn@latest add https://praxis.faxas.net/r/rainbow-button.json

Adds the registered component, its registry metadata, and declared package dependencies. shadcn CLI required.

Variants

Props

NameTypeDefault

children

required

ReactNode

none

colorSet

'warm' | 'cool' | 'vibrant' | 'mono'

warm

borderWidth

0.5 | 1 | 1.5 | 2

1.5

glowIntensity

'none' | 'soft' | 'medium' | 'strong'

soft

animate

boolean

true

variant

'solid' | 'ghost'

solid

size

'sm' | 'default' | 'lg'

default

string

—

bgBlur

number

—

onClick

() => void

—