Smokey Logo 6

A dark, atmospheric shader effect dominated by deep burgundy and crimson smoke particles emanating from the bottom-right corner and lower-center area of the frame. The background is an extremely dark near-black color (#0d0817) that creates a void-like atmosphere. Two primary smoke plumes rise and drift across the composition: one originates from the bottom-center with darker maroon tones (#2e0c11), while another emerges from the bottom-right corner with brighter red accents (#8a0e1f). A third layer of bright red smoke (#ff3a3a to #b80020) fills a silhouetted shape in the center, creating a glowing red focal point that contrasts sharply against the dark surroundings. The smoke particles have high detail and spread, creating a turbulent, organic motion with visible dissipation and color decay as they rise. The overall effect suggests fire, heat, or supernatural energy with a moody, ominous atmosphere. The smoke interacts with gravity and directional forces, creating natural-looking fluid dynamics with soft edges that fade into transparency.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Smoke,
  SmokeFill,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0d0817" />
    <Smoke color-a="#2e0c11" color-b="#0b132e" :direction="49" :dissipation="0.7" :emit-from="{ x: 0, y: 0.99 }" :emit-radius="0.13" :intensity="0.75" :speed="8.3" :spread="65" />
    <Smoke color-a="#8a0e1f" color-b="#0b132e" :direction="277" :dissipation="0.7" :emit-from="{ x: 1, y: 1 }" :emit-radius="0.13" :intensity="0.75" :speed="8.3" :spread="65" />
    <SmokeFill color-a="#ff3a3a" color-b="#b80020" :color-decay="3" :detail="16" :emit-from="{ type: 'mouse-position', originX: 0, originY: 0, momentum: 0, smoothing: 0 }" :emit-radius="0.05" :gravity="0" :intensity="0.95" :mouse-influence="0.35" :scale="1.1" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/5T7CT5qxxArz_sdf.bin" :speed="1.4" :spread="141" />
  </Shader>
</template>