Shaders
header.lightDarkMode D
Gallery

Illuminated Clouds 8

Illuminated Clouds

A deeply atmospheric shader effect dominated by dark, moody tones with prominent red and magenta gradients flowing across the composition. The base layer is an extremely dark near-black color (#0a0002) that establishes a low-key foundation. Overlaid on this is a FlowingGradient component that creates smooth, undulating waves of color transitioning from deep burgundy (#1a0004) through darker red tones (#3d0010) to vibrant hot pink (#ff1744) and lighter rose (#ff6b8a). The gradient flows with organic, fluid motion creating a sense of dynamic energy despite the static nature of the image. The colors blend smoothly using the oklab color space, producing natural transitions without harsh banding. A subtle film grain texture is applied across the entire surface with low opacity (0.075 strength), adding a cinematic quality and slight visual noise that breaks up the smoothness. The overall effect creates a dramatic, intimate atmosphere with warm red-pink hues emerging from darkness, suggesting heat, passion, or an ethereal glow. The edges fade to transparency, creating a soft vignette effect that draws focus toward the center where the brightest pink tones concentrate. The composition has a dreamlike, slightly blurred quality with soft focus throughout, emphasizing mood over sharp detail.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0002" />
    <Fog id="idmo78g2qa8dpr72ig3" :blending="0.9" color-b="#000000" :detail="3" :mouse-influence="0.4" :seed="817" :visible="false" />
    <FlowingGradient color-a="#1a0004" color-b="#3d0010" color-c="#ff1744" color-d="#ff6b8a" color-space="oklab" :distortion="0" mask-source="idmo78g2qa8dpr72ig3" mask-type="luminance" :seed="82" :speed="4.1" />
    <FilmGrain :strength="0.075" />
  </Shader>
</template>