Smokey Logo 4

A dramatic shader effect depicting a glowing archway or tunnel opening against a deep dark background. The composition features a symmetrical arched structure with warm golden-orange illumination emanating from within the opening. The arch itself appears as a dark silhouette, creating strong contrast against the luminous interior. Billowing smoke effects in warm amber and orange tones (#ffb347, #ff6a00) flow from the center of the arch, creating a sense of heat and movement. Secondary darker smoke layers in brown (#3d2219) and deep blue (#0b132e) add depth and atmospheric complexity. The smoke dissipates outward with a soft, organic quality, suggesting turbulent air currents. The overall mood is mysterious and ominous, with the warm glow suggesting either fire or otherworldly light. The background is nearly black (#0d0817), making the glowing arch the clear focal point. The effect combines volumetric smoke simulation with directional particle emission, creating a three-dimensional sense of depth and atmospheric perspective.

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="#3d2219" 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="#a8520a" 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="#ffb347" color-b="#ff6a00" :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>