Illuminated Clouds 2

A deeply atmospheric shader effect dominated by warm, earthy tones creating a smoky, turbulent environment. The composition features a dark near-black base (#111117) overlaid with flowing gradients that transition from deep brown (#150800) through medium brown (#402410) to vibrant orange (#ff5e19) and lighter orange (#ff9735). The effect creates a sense of swirling heat and motion, with soft, blurred regions suggesting fog or smoke dispersal. The gradient flows organically across the canvas with no sharp edges, creating an impression of molten or burning material with atmospheric distortion. A subtle film grain texture (0.075 strength) adds a cinematic quality and breaks up the smoothness, enhancing the organic, natural feel. The overall mood is warm, intense, and somewhat chaotic-reminiscent of fire, lava, or heat haze. The luminance masking from the fog component creates depth variation, with darker areas receding and brighter orange areas appearing to advance. The color space uses oklab for smooth transitions between the warm spectrum, creating natural-looking color blending without harsh transitions.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#111117" />
    <Fog id="idmo78g2qa8dpr72ig3" :blending="0.9" color-b="#000000" :detail="3" :mouse-influence="0.4" :seed="392" :visible="false" />
    <FlowingGradient color-a="#150800" color-b="#402410" color-c="#ff5e19" color-d="#ff9735" color-space="oklab" :distortion="0" mask-source="idmo78g2qa8dpr72ig3" mask-type="luminance" :seed="24" :speed="4" />
    <FilmGrain :strength="0.075" />
  </Shader>
</template>