Shaders
header.lightDarkMode D
Gallery

A dramatic atmospheric shader effect featuring a dark near-black background (#040414) with a prominent smoke simulation layer. The smoke effect creates billowing, cloud-like formations that transition from light gray (#e1e2e8) to pure white (#ffffff), with soft, diffused edges that fade to transparency. The smoke appears to emit from the center-left area and flows upward with a gentle rightward drift, creating a sense of movement and turbulence. The effect has high detail (detail level 7) resulting in intricate, organic smoke patterns with natural-looking dissipation at the edges. The overall mood is ethereal and moody, with strong contrast between the dark background and the luminous white smoke formations. The smoke has a realistic volumetric quality with color decay creating subtle gray tones within the white plumes. The composition suggests upward motion with a spread angle of 60 degrees, creating a natural, organic dispersal pattern typical of rising smoke or steam.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#040414" />
    <Smoke color-a="#e1e2e8" color-b="#ffffff" :color-decay="1.4" color-space="oklab" :detail="7" :direction="36" :emit-from="{ type: 'mouse-position', originX: 0, originY: 0 }" :mouse-influence="0.8" :mouse-radius="0.07" :speed="6.2" />
  </Shader>
</template>