Soft Prism

Open in editor

A sophisticated gradient shader effect featuring three translucent geometric shapes arranged horizontally against a vibrant, blurred background. The leftmost shape is a crescent or curved form with soft pink and magenta tones. The middle shape is a similar crescent with cyan and turquoise gradients. The rightmost shape is a full circle with pale cyan and mint green coloring. All three shapes feature frosted glass-like transparency with subtle refraction and chromatic aberration effects, creating a luminous, ethereal quality. The background displays a dynamic swirl pattern transitioning from deep purple and dark blue on the left through magenta and pink in the center to cyan and turquoise on the right. A dark wave distortion flows across the lower portion, creating depth and movement. The overall composition has a soft, dreamy aesthetic with wave-based distortions creating subtle undulating patterns. Film grain texture adds a subtle noise layer throughout. The lighting suggests a 3D glass material with highlights and fresnel effects, particularly visible on the circular shape. The color space transitions smoothly using LCH and OKLCH color models, creating natural, perceptually uniform gradients.

Code

vue

<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.49, y: 0.28 }" 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="180" color="#0f121f" :frequency="0.2" :position="{ x: 0.5, y: 1 }" :softness="0.6" :speed="-0.6" :thickness="0.7" :visible="true" />
    <CursorRipples :intensity="5" :radius="2" :visible="true" />
    <Glass :aberration="1" :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.7" 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>