Deep Signal 4
Deep SignalA deep, dark abstract shader effect dominated by flowing concentric wave patterns that create a mesmerizing swirl motion. The primary visual element consists of fine, parallel lines that curve and undulate across the composition, creating a sense of depth and movement. The lines radiate from the upper right quadrant, flowing diagonally across the frame with organic, wave-like distortions. The overall atmosphere is cool and technological, with a subtle luminescence along the wave crests that creates a glowing effect. The color palette is extremely dark and moody, with deep navy and near-black tones forming the base, while thin blue highlights trace the wave patterns, creating a subtle contrast. The effect suggests liquid motion, electromagnetic fields, or digital data streams. A very faint film grain texture overlays the entire composition, adding subtle noise and tactile quality. The spatial composition creates a tunnel-like perspective, with the waves appearing to flow toward the viewer from the upper right, establishing a strong sense of directional movement and three-dimensional depth. The overall mood is mysterious, sophisticated, and slightly ominous, with a cyberpunk or sci-fi aesthetic.
Code
<script setup lang="ts">
import {
Shader,
Blob,
FilmGrain,
Swirl,
Twirl,
WaveDistortion
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl color-a="#080f1a" color-b="#0b0b29" color-space="oklch" />
<WaveDistortion :angle="344" blend-mode="linearDodge" edges="wrap" :frequency="2.9" :strength="0.1" :transform="{ scale: 1.3 }">
<WaveDistortion :angle="354" edges="mirror" :frequency="80" :speed="0.3" :strength="1">
<Blob :center="{ x: 0.2, y: 0.98 }" color-a="#020117" color-b="#0b0a2e" :deformation="0.7" highlight-color="#0051ff" :highlight-intensity="0.6" :highlight-x="0.1" :highlight-y="-0.2" :highlight-z="0.1" :size="0.8" :softness="1" />
</WaveDistortion>
</WaveDistortion>
<FilmGrain :strength="0.05" />
<Blob blend-mode="colorDodge" :center="{ x: 0.35, y: 0.63 }" color-a="#3535ff" color-b="#1e47e9" :deformation="2" :opacity="0.08" :softness="2" />
<Twirl :center="{ x: 0.39, y: 1 }" edges="mirror" :intensity="-1.7" />
</Shader>
</template>