Skip to content
Get Pro
Effects

Smoke

Soft smoke on a 2D canvas: pooled sprites drifting on curl noise, laminar at the source and curling as they rise.

$149 once · every Pro piece

Customize

It climbs from the top of any element in a thin plume, or trails the pointer like breath on cold air. Dark grey on black, with the faintest warm tint where it starts; a passing pointer stirs it.

Install

npx shadcn@latest add @obsyde/smoke

Needs your licence key · Get Pro

Usage

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

import { Smoke } from '@/components/obsyde/ember/smoke/Smoke';

export function Example() {
  return (
    <Smoke source="element" />
  );
}

Files

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

  • ember/smoke/Smoke.tsxcomponent
  • ember/smoke/smoke-demo.cssstyles
  • ember/smoke/smoke.cssstyles
  • ember/smoke/SmokeDemo.tsxdemo
  • ember/fire-kit/gl.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
sourceSource'element' | 'pointer''element'
densityDensitynumber0.5