CoreAnimated Backgrounds and Visual Effectsno dependencies

NoiseAurora

Atmospheric aurora backdrop combining slow-drifting spectral ribbons with an inline procedural SVG fractal-noise film grain layer and zero external image assets.

Preview

Procedural Film-Grain Aurora

Customize

4 props
0.16
16
0.34

Installation

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

npx motionfoundry add noise-aurora

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

Usage

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

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

Props

PropTypeDefault
label

Foreground caption.

string'Procedural Film-Grain Aurora'
grainOpacity

Opacity of the procedural SVG fractal noise overlay.

number0.16
auroraSpeed

Duration in seconds of the aurora ribbon drift.

number16
ribbonOpacity

Luminance opacity of the aurora curtains.

number0.34

Accessibility

Uses an inline SVG feTurbulence noise filter marked aria-hidden='true' with zero network requests and pauses ribbon drift 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/noise-aurora.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/noise-aurora.module.css";5 6export interface NoiseAuroraProps {7  /** Foreground label */8  label?: string;9  /** SVG noise grain opacity */10  grainOpacity?: number;11  /** Ribbon drift cycle speed in seconds */12  auroraSpeed?: number;13  /** Aurora ribbon opacity */14  ribbonOpacity?: number;15  /** Optional children */16  children?: React.ReactNode;17  /** Optional className */18  className?: string;19}20 21export function NoiseAurora({22  label = "Procedural Film-Grain Aurora",23  grainOpacity = 0.16,24  auroraSpeed = 16,25  ribbonOpacity = 0.34,26  children,27  className = "",28}: NoiseAuroraProps) {29  const filterId = React.useId();30 31  return (32    <div33      style={34        {35          "--mf-na-speed": `${auroraSpeed}s`,36          "--mf-na-ribbon": ribbonOpacity,37          "--mf-na-grain": grainOpacity,38        } as React.CSSProperties39      }40      className={`${styles.container} ${className}`.trim()}41    >42      <div aria-hidden="true" className={styles.ribbonLayer} />43      <svg aria-hidden="true" className={styles.noiseSvg}>44        <filter id={filterId}>45          <feTurbulence46            type="fractalNoise"47            baseFrequency="0.8"48            numOctaves={3}49            stitchTiles="stitch"50          />51        </filter>52        <rect width="100%" height="100%" filter={`url(#${filterId})`} />53      </svg>54      <div className={styles.foreground}>55        {children ?? <span className={styles.badge}>{label}</span>}56      </div>57    </div>58  );59}