DocsSilk 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

PropTypeDefault
titlestring

Primary hero headline rendered above the background.

"Silk Aurora"
subtitlestring

Small uppercase label rendered above the title.

"Premium Atmosphere"
descriptionstring

Supporting copy rendered below the title.

—
baseColorstring

Deepest background color.

"#050507"
midColorstring

Secondary base color for atmospheric depth.

"#14151d"
sheenColorstring

Pearlescent highlight color.

"#f4dfb8"
accentColorstring

Aurora ribbon accent color.

"#6ed6c9"
speednumber

Global animation speed multiplier.

1
intensitynumber

Strength of aurora ribbons, glints, and sheen.

1
grainnumber

Amount of fine shader grain.

0.85
vignettenumber

Edge darkening strength.

1
mouseInfluencenumber

Cursor-driven distortion strength.

1
interactiveboolean

Enables pointer movement response.

true
childrenReactNode

Custom content rendered above the background.

—
classNamestring

Additional CSS classes for the root container.

—

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
PreviousPrism GradientNextSpectral Ribbon

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."
/>