Future UI

Ember Rain

◆ Backgrounds

WebGL2 falling embers through volumetric smoke with mouse-driven updrafts.

backgroundwebglshaderparticlesfireemberssmokeinteractivemouse

No preview available

WebGL2 Shader ~ Move cursor to create updrafts

Controls

View Demo
Demo Hero Content
#f97316
#dc2626
0.4
0.3
1
1

Backgrounds / React Component

About Ember Rain

WebGL2 falling embers through volumetric smoke with mouse-driven updrafts.

Category Backgrounds
Framework React + TypeScript
Tags background, webgl, shader, particles, fire, embers, smoke, interactive, mouse

Install Ember Rain in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/ember-rain.json?key=YOUR_LICENSE_KEY"

Usage example

import { EmberRain } from './EmberRain';

export default function Example() {
  return (
    <div style={{ width: '100%', height: 400, position: 'relative' }}>
      <EmberRain accentColor="#f97316" secondaryColor="#dc2626" />
    </div>
  );
}