Aurora Curtain

Renders an animated aurora background with ribbons of color. It moves smoothly and adjusts to screen size. Use it to create a dynamic, visually engaging backdrop for any UI element.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/aurora-curtain

npx layro-cli add @educlopez/aurora-curtain

npx layro-cli add @educlopez/aurora-curtain

bunx layro-cli add @educlopez/aurora-curtain

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useRef, useState } from "react";

export type AuroraDirection = "up" | "down";

export interface AuroraCurtainProps {
  /** Number of aurora ribbons rendered behind the content. Clamped to 1-8. */
  bands?: number;
  /** Softness of every ribbon edge, from 0 (crisp) to 1 (very diffuse). */
  blur?: number;
  /** Foreground content, always painted above the decorative curtain. */