Aurora Ribbons
Silky aurora ribbons drifting in slow sine waves, shaded with a custom gradient from --primary to --accent. Additive glow in dark mode.
Silky aurora ribbons drifting in slow sine waves, shaded with a custom gradient from --primary to --accent. Additive glow in dark mode, ideal as a full-bleed hero background.
Customize
Ribbons5
Speed1
Amplitude0.9
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ribbons | number | 5 | Number of ribbons. |
speed | number | 1 | Wave animation speed multiplier. |
amplitude | number | 0.9 | Wave height. |
className | string | — | Classes for the wrapper element (set its height here). |
theme | "auto" | "light" | "dark" | "auto" | Color source. auto reads the live shadcn theme. |
ribbonsnumberNumber of ribbons.
Default
5speednumberWave animation speed multiplier.
Default
1amplitudenumberWave height.
Default
0.9classNamestringClasses for the wrapper element (set its height here).
Default
—theme"auto" | "light" | "dark"Color source. auto reads the live shadcn theme.
Default
"auto"