Theme

Ember Floor

Pro

Curling flames and rising embers span the bottom edge, with open space above for page content.

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

<ShaderEmberFloor
  backdropColor="#050608"
  flameColor="#ffac43"
  coreColor="#ffe4a3"
  emberAmount={0.6}
  flameHeight={0.6}
  flameScale={1}
  flameTurbulence={0.6}
  glowStrength={1}
  flameDrift={0.65}
  opacity={1}
/>

Props

prop	type	default	description
`backdropColor`	`string`	`"#050608"`	Background color. Supports CSS colors and normalized RGB.
`flameColor`	`string`	`"#ffac43"`	Color of the flame body. Supports CSS colors and normalized RGB.
`coreColor`	`string`	`"#ffe4a3"`	Color of the hottest flame folds and rising embers.
`emberAmount`	`number`	`0.6`	Amount of rising embers. Set to 0 to hide them.
`flameDrift`	`number`	`0.65`	Flame and ember motion speed. Set to 0 to hold the effect still.
`flameHeight`	`number`	`0.6`	Vertical reach of the flame band relative to the container.
`flameScale`	`number`	`1`	Flame detail scale. Higher values create smaller tongues.
`flameTurbulence`	`number`	`0.6`	Curl and breakup of the flame. Clamped between 0.3 and 1.4.
`glowStrength`	`number`	`1`	Strength of the soft glow along the bottom edge.
`opacity`	`number`	`1`	Opacity of the entire background.
`maxDpr`	`number`	`1.25`	Caps device pixel ratio to limit GPU work.
`maxFps`	`30 \| 45 \| 60`	`45`	Caps the animation frame rate.