Aurora Text

The RzAuroraText component adds an animated aurora-style gradient to inline text. It is a single SSR-friendly presentational wrapper with configurable gradient colors and speed, and it does not require Alpine.js or Blazor interactivity.

Basic Usage

Wrap a short word or phrase inside surrounding typography.

Source

<span class="font-bold text-4xl md:text-7xl">
    Ship <RzAuroraText>beautiful</RzAuroraText>
</span>

Custom Colors

Provide CSS colors in order to tune the gradient palette.

Source

<RzAuroraText Colors="new[] { ""#F97316"", ""#FACC15"", ""#10B981"", ""#06B6D4"" }">
    energy
</RzAuroraText>

Speed Tuning

Use Speed to control how quickly the aurora animation moves.

Source

<RzAuroraText Speed="0.5">Slow Aurora</RzAuroraText>
<RzAuroraText>Default Aurora</RzAuroraText>
<RzAuroraText Speed="2">Fast Aurora</RzAuroraText>

Typography Integration

Because it renders an inline element by default, it composes naturally inside headings and paragraphs.

Source

<RzHeading Level="HeadingLevel.H3">Build <RzAuroraText>delightful</RzAuroraText> interfaces</RzHeading>
<RzParagraph>The team shipped <RzAuroraText>remarkable polish</RzAuroraText> in this release.</RzParagraph>

Accessibility / Decorative Mode

By default, the component renders a screen-reader-only text copy and hides the visual animated node from assistive technologies. Use Decorative only when nearby content already communicates the same meaning.

Source

<RzAuroraText>Accessible Highlight</RzAuroraText>
<RzAuroraText Decorative="true">✨</RzAuroraText>

Component Parameters

Property	Description	Type	Default
`ChildContent`	Inline text or markup to render with the aurora effect.	`RenderFragment?`	`null`
`Colors`	Ordered CSS color values used to build the gradient.	`string[]?`	`["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]`
`Speed`	Relative animation speed multiplier. Non-positive values normalize to `1`.	`double`	`1`
`AriaLabel`	Optional explicit accessible name for non-text content.	`string?`	`null`
`Decorative`	Hides the component from assistive technologies when true.	`bool`	`false`
`class`	Additional root classes merged through `AdditionalAttributes`.	`string?`	`null`

This component has no Alpine API because the aurora effect is CSS-only.