Soft Prism 4
Soft PrismA dynamic, fluid shader composition featuring a vibrant gradient background that transitions from deep dark-blue and black in the lower left to bright cyan and turquoise in the upper right, with intermediate purple and magenta tones creating a diagonal sweep across the canvas. The primary Swirl component generates organic, flowing patterns that blend deep purple (#250436) with bright cyan (#02dbc4) using smooth, curved distortions. A Blob element positioned in the upper-center-right area creates a luminous, soft-edged form with yellow-to-purple gradient coloring, featuring a bright white highlight that suggests 3D depth and glossiness. The WaveDistortion effect at 161 degrees introduces subtle undulating patterns across the entire composition with a sine wave at moderate frequency (3.4), creating a sense of movement and fluidity. A SineWave element adds fine linear details with dark coloring positioned in the lower-left area. The Glass component in the upper-right features circular/geometric shapes with refraction and chromatic aberration effects, creating a translucent, lens-like appearance with subtle light bending. The overall atmosphere is modern, energetic, and ethereal, with soft focus areas blending into sharp details. Film grain at low opacity (0.1) adds subtle texture throughout. The composition uses normal blend modes with full opacity, creating a cohesive, layered effect that suggests depth and movement. The color space transitions smoothly through the visible spectrum with emphasis on cool tones (cyan, purple, blue) contrasted against warm accents (yellow, orange).
Code
<script setup lang="ts">
import {
Shader,
Blob,
CursorRipples,
FilmGrain,
Glass,
SineWave,
Swirl,
WaveDistortion
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl color-a="#250436" color-b="#02dbc4" color-space="lch" :detail="2.5" :speed="0.8" />
<Blob :center="{ x: 0.62, y: 0.57 }" color-a="#ffff00" color-b="#6e00ff" color-space="oklch" :deformation="1" highlight-color="#ffffff" :highlight-intensity="0.8" :highlight-x="0.5" :highlight-y="-0.5" :highlight-z="0.8" :opacity="0.9" :seed="42" :size="0.85" :softness="3" :speed="1.2" :visible="true" />
<WaveDistortion :angle="161" edges="mirror" :frequency="3.4" :speed="2.5" :strength="0.2" :visible="true" />
<SineWave :amplitude="0.1" :angle="122" color="#0f121f" :frequency="0.2" :position="{ x: 0.16, y: 0.94 }" :softness="1" :speed="-0.6" :thickness="1.6" :visible="true" />
<CursorRipples :intensity="5" :radius="2" :visible="true" />
<Glass :aberration="1" :center="{ x: 0.8, y: 0.23 }" :fresnel="0" :fresnel-softness="0.31" :highlight="0.1" highlight-color="#dbe6ff" :highlight-softness="0.27" :inner-zoom="1.15" :light-angle="289" :refraction="0.74" :scale="0.45" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/ELSMA8FfCFXr_sdf.bin" :thickness="1" :visible="true" />
<FilmGrain :strength="0.1" :visible="true" />
</Shader>
</template>