Aurora Text

Text filled with a slow, drifting aurora gradient. Falls back to plain text colour for reduced motion and high contrast.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

Northern lights

import { AuroraText } from "@rdloom/react";

export default function AuroraTextBasicExample() {
  return (
    <div className="flex w-full justify-center py-6">
      <AuroraText className="text-5xl font-bold">Northern lights</AuroraText>
    </div>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add aurora-text

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

It also adds rdloom-motion.css next to your tokens and imports it from the tokens file, once: no setup, and no inline styles. The plain components you already use are untouched.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/aurora-text.json

Works, but without upgrade tracking, and you import the motion CSS yourself.

Usage

import { AuroraText } from "@rdloom/react";

<div className="flex w-full justify-center py-6">
  <AuroraText className="text-5xl font-bold">Northern lights</AuroraText>
</div>

Custom colors

Deep colours, slow drift

import { AuroraText } from "@rdloom/react";

export default function AuroraTextCustomColorsExample() {
  return (
    <div className="flex w-full justify-center py-6">
      <AuroraText colors={["#1d4ed8", "#7c3aed", "#be185d"]} speed={0.6} className="text-5xl font-bold">
        Deep colours, slow drift
      </AuroraText>
    </div>
  );
}

Paused

Held in place

import { AuroraText } from "@rdloom/react";

export default function AuroraTextPausedExample() {
  return (
    <div className="flex w-full justify-center py-6">
      <AuroraText isPaused className="text-5xl font-bold">
        Held in place
      </AuroraText>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`children`required The text.	`string`	none
`colors` Gradient colours, any CSS colours. Defaults to three theme colours.	`readonly string[]`	none
`speed` Speed multiplier. 1 takes about ten seconds for one pass.	`number`	`1`
`isPaused` Stops the animation and shows the text plainly. Moving content that lasts more than five seconds should be stoppable.	`boolean`	`false`

Accessibility

Role text, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

Read as ordinary text: the effect is purely visual

What your code must do

The text is ordinary text in the page from the server render, readable with no JavaScript, and read once by screen readers
Decoration only: the animated layers are hidden from assistive technology and never take focus
Stands still for visitors who ask for less motion (prefers-reduced-motion), and can also be shown still with the rdm-still class or isPaused
In forced-colors (high contrast) mode the text is drawn in the system colours with no effect
Does not flash: nothing changes more than three times in a second (WCAG 2.3.1)
Optional: it is a separate component, so projects that do not add it carry none of its code
The gradient fill is only used where the colours you give keep at least 4.5:1 contrast (3:1 for large text); otherwise the text falls back to the default text colour in reduced motion, high contrast and browsers without background-clip

Guidelines

Use it when

A large heading that carries a brand colour

Avoid it when

Small text
Colours with low contrast against the surface

Don't

Fast speeds
Pale colours on a light surface

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-text-default
--rd-color-action-primary
--rd-color-feedback-info
--rd-color-feedback-success