CoreAdvanced Text Animationsmotion/react

AuroraHeadline

High-contrast display headline combining masked word entrances, flowing spectral gradient illumination, and graceful static fallback.

Preview

Customize

6 props
6
0.06

Installation

Copies the component source and its CSS Module into your project.

npx motionfoundry add aurora-headline

Writes components/ui/aurora-headline.tsx and components/styles/aurora-headline.module.css.

Usage

Updates live as you change the controls — only props that differ from the defaults are included.

example.tsx
1import { AuroraHeadline } from "@motionfoundry/ui";2 3export function Example() {4  return (5    <AuroraHeadline />6  );7}

Props

PropTypeDefault
text

Headline string to reveal and illuminate.

string'Restrained spectral...'
accentFrom

Leading gradient stop color.

string'#f4f4f6'
accentVia

Midpoint aurora illumination color.

string'#93c5fd'
accentTo

Trailing aurora illumination color.

string'#c4b5fd'
shimmerSpeed

Duration in seconds for one gradient sweep.

number6
stagger

Delay in seconds between sequential word reveals.

number0.06

Accessibility

Maintains WCAG AAA foreground contrast with solid silver fallback text and disables gradient sweep and vertical motion under prefers-reduced-motion.

Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.

Source

components/ui/aurora-headline.tsx
1"use client";2 3import * as React from "react";4import { motion, useReducedMotion } from "motion/react";5import styles from "../styles/aurora-headline.module.css";6 7export interface AuroraHeadlineProps {8  /** Headline copy */9  text: string;10  /** Primary color stop */11  accentFrom?: string;12  /** Midpoint color stop */13  accentVia?: string;14  /** Terminal color stop */15  accentTo?: string;16  /** Gradient sweep speed in seconds */17  shimmerSpeed?: number;18  /** Stagger interval between words */19  stagger?: number;20  /** Optional className */21  className?: string;22}23 24export function AuroraHeadline({25  text,26  accentFrom = "#f4f4f6",27  accentVia = "#93c5fd",28  accentTo = "#c4b5fd",29  shimmerSpeed = 6,30  stagger = 0.06,31  className = "",32}: AuroraHeadlineProps) {33  const prefersReducedMotion = useReducedMotion();34  const words = React.useMemo(() => text.split(" "), [text]);35 36  const customVars = {37    "--mf-ah-from": accentFrom,38    "--mf-ah-via": accentVia,39    "--mf-ah-to": accentTo,40    "--mf-ah-speed": `${shimmerSpeed}s`,41  } as React.CSSProperties;42 43  return (44    <h145      aria-label={text}46      style={customVars}47      className={`${styles.headline} ${className}`.trim()}48    >49      <span aria-hidden="true" className={styles.wordWrap}>50        {words.map((word, idx) => (51          <span key={`${word}-${idx}`} className={styles.mask}>52            <motion.span53              initial={prefersReducedMotion ? false : { y: "105%", opacity: 0 }}54              animate={{ y: "0%", opacity: 1 }}55              transition={{56                duration: 0.6,57                delay: prefersReducedMotion ? 0 : idx * stagger,58                ease: [0.16, 1, 0.3, 1],59              }}60              className={styles.word}61            >62              {word}&nbsp;63            </motion.span>64          </span>65        ))}66      </span>67    </h1>68  );69}