Shaders
header.lightDarkMode D
Gallery

Illuminated Clouds 7

Illuminated Clouds

A deeply atmospheric shader effect dominated by flowing, organic gradients in purple and magenta tones. The composition features a dark base layer of nearly black color (#0a0219) that establishes the foundation. Overlaid on this is a FlowingGradient component that creates smooth, undulating waves of color transitioning from deep purple (#0d0024) through violet (#2a0845) to vibrant magenta (#e040fb) and bright purple (#aa00ff). The gradient flows with a speed of 4, creating a sense of dynamic movement and fluidity across the canvas. The colors blend seamlessly using the oklch color space, producing natural color transitions. A subtle film grain texture with 0.075 strength is applied across the entire surface, adding a cinematic quality and slight visual noise that prevents the effect from appearing too smooth or artificial. The overall mood is ethereal and cosmic, with soft, blurred edges that create a dreamy, nebula-like atmosphere. The effect has no sharp boundaries or defined shapes, instead presenting as an abstract, flowing field of color with gentle luminosity variations. The spatial composition suggests depth through color intensity, with darker purples receding and brighter magentas appearing to advance. The atmosphere is moody, mysterious, and evokes a sense of otherworldly energy or digital aurora.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0219" />
    <Fog id="idmo78g2qa8dpr72ig3" :blending="0.9" color-b="#000000" :detail="3" :mouse-influence="0.4" :seed="266" :visible="false" />
    <FlowingGradient color-a="#0d0024" color-b="#2a0845" color-c="#e040fb" color-d="#aa00ff" :distortion="0" mask-source="idmo78g2qa8dpr72ig3" mask-type="luminance" :seed="52" :speed="4" />
    <FilmGrain :strength="0.075" />
  </Shader>
</template>