Sparks

A background of 1–2px sparks that rise from the bottom edge, cooling from hot to deep as they climb and dying out partway up.

$149 once · every Pro piece

Customize

Density (per 100px/s)

Gusts

Pointer wind

Burst size

The pointer is wind: sparks bend away from it and are carried along when it moves, and a click throws a small fan of hotter ones. Sparse and calm; particles come from a fixed pool and the loop stops off screen.

Install

npx shadcn@latest add @obsyde/sparks

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Sparks } from '@/components/obsyde/ember/sparks/Sparks';

export function Example() {
  return (
    <Sparks />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/sparks/Sparks.tsxcomponent
ember/sparks/sparks-demo.cssstyles
ember/sparks/sparks.cssstyles
ember/sparks/SparksDemo.tsxdemo
ember/effects-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`density`Density (per 100px/s)	`number`	`1.6`
`gusts`Gusts	`number`	`0.15`
`wind`Pointer wind	`number`	`1`
`burst`Burst size	`number`	`12`