SilkAurora

backgroundauroragradientherocanvasanimated

Flowing silk ribbons of gradient light — a living aurora for your hero.

Flowing silk ribbons of gradient light — a living aurora for your hero. Pure canvas 2D: parametric ribbon sheets that breathe, swing and drift behind your copy, with palettes for sunset silk, chrome glass and midnight nebula. Zero dependencies, deterministic seed, reduced-motion safe.

Playground

retro soul, modern vision.

Flowing silk, painted by code — your palette, your hero.

Tweak the props in the toolbox — the preview updates in realtime. “Copy code” gives you the exact JSX for the current tweaks.

Installation

Requires the shadcn CLI. Run this from your project root — it writes the component source, then you import and go.

bash

npx shadcn@latest add "https://webcules.com/r/silk-aurora.json"

The command installs the component source (plus its engine / type files when the component ships one). No other dependencies — everything is dependency-free canvas, SVG and CSS.

Usage

Import the component and drop it in — every prop in the toolbox is a regular React prop:

hero.tsx

import { SilkAurora } from "@webcules/ui/components/ui/silk-aurora";

export function Hero() {
  return (
    <section className="relative h-screen overflow-hidden">
      <SilkAurora className="absolute inset-0" />
      <div className="relative z-10 flex h-full flex-col items-center justify-center">
        <h1>retro soul, modern vision.</h1>
      </div>
    </section>
  );
}

Highlights

Flowing silk ribbons of gradient light — a living aurora that breathes, swings and leans behind your hero copy
One prop surface covers light silk, chrome glass and midnight-nebula moods: colors, blend, sheen, softness
Pure canvas 2D on a low-res upscaled buffer: the blur is free, single-digit ms per frame even at 6 ribbons
Zero dependencies, deterministic seed, aria-hidden, and one settled frame under prefers-reduced-motion

Example — Recolor — your brand ramp

colors maps along each ribbon, tip to tip. Odd ribbons run the ramp reversed, keeping the composition balanced.

example.tsx

<SilkAurora
  colors={["#34d399", "#0ea5e9", "#6366f1"]}
  background="#fafaf9"
/>

Example — Chrome glass

Multiply on paper, low softness, high sheen: the silk becomes stylized glass with a bright fold and a dark counter-edge.

example.tsx

<SilkAurora
  colors={["#0e2a38", "#2b6777", "#9fc4d0", "#e8f1f4"]}
  background="#f4f5f7"
  blend="multiply"
  softness={0.45}
  sheen={0.85}
  count={3}
/>

Example — Midnight nebula

Screen blending on near-black turns the same ribbons into a glowing dark-mode aurora; a touch of grain finishes it.

example.tsx

<SilkAurora
  colors={["#7c3aed", "#4f46e5", "#c4b5fd", "#f59e0b"]}
  background="#050508"
  blend="screen"
  intensity={0.9}
  count={3}
  grain={0.15}
/>

Props

Prop	Type	Default	Description
colors	string[] \| string	"#ff8a3d,#e2314d,#9333ea,#818cf8"	Gradient stops along each ribbon, tip to tip — 2–4 picks (in code also accepts an array).
count	number	2	Number of ribbon sheets crossing the field.
background	string	"#ffffff"	Backdrop the silk blends against. Use "transparent" to let the page show through.
orientation	number	-35	Base tilt of the ribbon field, in degrees.
scale	number	1	Global zoom of the composition.
curvature	number	0.55	How much the ribbons bow around the center (0–1).
amplitude	number	0.5	Band-width breathing and flutter strength (0–1).
width	number	0.5	Band thickness relative to the viewport (0–1).
length	number	1.25	Ribbon length relative to the viewport diagonal.
speed	number	1	Time multiplier; 0 = frozen. 1 ≈ the reference's ~14 s cycle.
drift	number	0.7	How far the crossing point wanders vs pure rotation (0–1).
interactive	boolean	false	The field leans subtly toward the pointer.
intensity	number	0.85	Ribbon opacity / color strength (0–1).
softness	number	0.55	Edge feathering (0–1): low = glassy, high = misty.
blend	"normal" \| "multiply" \| "screen" \| "overlay"	"normal"	Ribbon compositing — multiply = ink on light, screen = glow on dark.
sheen	number	0.5	Glass finish: broad reflection, specular streak and dark rim (0–1).
grain	number	0	Film-grain overlay (0–1); needs a background color to sit on.
seed	number	1	Deterministic variation — same seed, same silk.

Notes

origin is an object — set it in code; every other prop, including the ribbon colors, is tunable in the toolbox.
colors takes a comma-separated string (as the toolbox emits) or a real array — same result.
Blend modes blend against the backdrop painted into the canvas — with background="transparent" they fall back to plain alpha layering.
Renders through a low-resolution offscreen buffer upscaled with smoothing; per-frame cost stays flat as the component scales.
Under prefers-reduced-motion it renders one settled static frame; the loop pauses on hidden tabs.