Skip to content
Effects / Glass / Shaders

GradientBorder

client25 kB
@stellaria/nebula-webGradientBorderProps

Preview

Props

9
PropTypeDefault

beam

Sends an arc travelling around the ring. It needs the theme's `motion.tier` above `minimal` and at least one edge left in `edges`; failing either, the static gradient ring is what you get.

booleanfalse

children

ReactNode

className

Composes with the classes `Box` computes instead of replacing them.

string

component

The element it paints.

(ElementType & C)"div"

edges

Which sides the beam lights, clockwise from the top. Read only while `beam` runs — on a static ring the gradient always goes all the way round.

readonly GradientBorderEdge[][1, 2, 3, 4]

gradient

A theme gradient role, or a literal `{ from, to }` pair. With `beam` running it stops painting the ring — the ring drops to the plain border colour and the gradient moves into the travelling arc, which is the only way the arc is visible against it.

{ from: ColorExtended; to: ColorExtended; deg?: number; animate?: boolean; } | GradientRole"brand"

sequence

How the arcs are spaced in time. `"continuous"` chains them back to back over the edges that are lit, so the beam never breaks; `"spaced"` keeps every edge in its own quarter of the cycle, so dropping one leaves a gap rather than closing it up.

GradientBorderSequence"continuous"

surface

What fills the inside of the ring. `"none"` leaves it transparent, which is what keeps this a ring drawn around existing content rather than a card with a gradient edge.

GradientBorderSurface"none"

width

Thickness of the ring, as a raw length.

number1

Also accepts

On top of its own props, this component forwards these groups.

Style props · 128