Theme

Silk Ribbon

Pro

A flowing silk-ribbon background with smooth motion, soft sheen, and controls for ribbon spread, scale, glow, and palette.

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage

<ShaderSilkRibbon
  primaryRibbonColor="#fa6b45"
  secondaryRibbonColor="#30d1b8"
  sheenColor="#edd1ad"
  ribbonAngle={0}
  ribbonScale={2}
  ribbonWidth={1.2}
  sheenStrength={0.86}
  sheenWidth={1.05}
  ribbonPosition={0}
  silkDrift={0.84}
  opacity={0.92}
/>

Props

prop	type	default	description
`ribbonPosition`	`number`	`0`	Vertical offset in percent of canvas height. Positive values raise the ribbons.
`ribbonAngle`	`number`	`0`	Adjusts the ribbon slope from its default angle, in degrees.
`silkDrift`	`number`	`0.84`	Silk drift multiplier.
`ribbonScale`	`number`	`2`	Ribbon field scale.
`ribbonWidth`	`number`	`1.2`	Controls how far the ribbon color and soft edges spread.
`sheenWidth`	`number`	`1.05`	Controls how far the sheen highlight spreads.
`sheenStrength`	`number`	`0.86`	Ribbon sheen strength.
`opacity`	`number`	`0.92`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.5`	Caps device pixel ratio for sharper output without runaway GPU cost.
`maxFps`	`30 \| 45 \| 60`	`60`	Caps the animation frame rate for performance-sensitive pages.
`primaryRibbonColor`	`string`	`"#fa6b45"`	Primary ribbon color as a CSS color or normalized RGB.
`secondaryRibbonColor`	`string`	`"#30d1b8"`	Secondary ribbon color as a CSS color or normalized RGB.
`sheenColor`	`string`	`"#edd1ad"`	Sheen highlight color as a CSS color or normalized RGB.