Shaders
header.lightDarkMode D
Gallery

Afternoon Sunlight 2

Afternoon Sunlight

A soft, minimalist shader effect featuring a predominantly light gray background (#c4c4c4) with subtle organic texture overlay. The composition includes diagonal light streaks and soft directional blur running from upper-left to lower-right at 135 degrees, creating a sense of motion and depth. A Worley noise pattern with f2-f1 mode generates delicate cellular-like structures in muted taupe (#a69f9f) and off-white (#fcf8f0) tones, providing fine granular detail across the canvas. The effect is enhanced by chromatic aberration with subtle color fringing (red offset -1, blue offset +1) that creates a slight iridescent quality at edges. The overall atmosphere is ethereal and atmospheric, with soft focus and gentle color separation suggesting depth and movement. A hidden blob component (marked invisible) would have provided additional highlight structure, but its absence keeps the effect clean and minimalist. The linear blur at 300 intensity creates strong directional motion blur, while the chromatic aberration at 0.15 strength adds a barely perceptible color separation that enhances the dreamy quality.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  ChromaticAberration,
  LinearBlur,
  SolidColor,
  WorleyNoise
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Blob id="idmozyext3ts4o5d9ra" :center="{ x: 0.85, y: 0.16 }" color-a="#000000" color-b="#000000" :size="0.85" :softness="1.5" :speed="0.8" :visible="false" />
    <SolidColor color="#c4c4c4" />
    <WorleyNoise color-a="#a69f9f" color-b="#fcf8f0" :contrast="0.55" :lacunarity="2.3" mask-source="idmozyext3ts4o5d9ra" mode="f2MinusF1" :octaves="2" :persistence="1" :scale="4" :seed="33" :speed="3.3" />
    <LinearBlur :angle="135" :intensity="300" :visible="true" />
    <ChromaticAberration :strength="0.15" :visible="true" />
  </Shader>
</template>