Docs·Silk Aurora

Silk Aurora

A premium WebGL hero background with satin-dark aurora ribbons, pearlescent highlights, subtle grain, and optional cursor depth.

Installation

pnpm dlx shadcn@latest add @componentry/silk-aurora

Usage

API Reference

PropertyTypeDefault
title

Primary hero headline rendered above the background.

string"Silk Aurora"
subtitle

Small uppercase label rendered above the title.

string"Premium Atmosphere"
description

Supporting copy rendered below the title.

string—
baseColor

Deepest background color.

string"#050507"
midColor

Secondary base color for atmospheric depth.

string"#14151d"
sheenColor

Pearlescent highlight color.

string"#f4dfb8"
accentColor

Aurora ribbon accent color.

string"#6ed6c9"
speed

Global animation speed multiplier.

number1
intensity

Strength of aurora ribbons, glints, and sheen.

number1
grain

Amount of fine shader grain.

number0.85
vignette

Edge darkening strength.

number1
mouseInfluence

Cursor-driven distortion strength.

number1
interactive

Enables pointer movement response.

booleantrue
children

Custom content rendered above the background.

ReactNode—
className

Additional CSS classes for the root container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Premium Atmosphere

Silk Aurora

Polished motion for luxury product heroes, editorial launches, and high-end SaaS moments.

import { SilkAurora } from "@/components/ui/silk-aurora"
<SilkAurora
  title="Silk Aurora"
  subtitle="Premium Atmosphere"
  description="A satin-dark WebGL background with aurora ribbons, pearlescent highlights, fine grain, and cursor-driven depth."
/>