Soft Prism 2

A sophisticated shader composition featuring three translucent spherical glass orbs arranged horizontally against a dynamic, blurred background. The leftmost sphere displays deep purple and magenta tones (#250436 transitioning to vibrant cyan #02dbc4), the middle sphere shows a gradient from purple to cyan with soft white highlights, and the rightmost sphere is predominantly cyan with turquoise reflections. Each sphere exhibits realistic glass refraction and fresnel effects with bright white specular highlights positioned at approximately the upper-left quadrant, creating a 3D depth perception. The background features a swirling gradient of purple, magenta, cyan, and turquoise with organic wave distortions and soft focus blur, creating an ethereal, fluid atmosphere. A subtle sine wave pattern runs horizontally through the composition in dark navy (#0f121f). The overall effect is enhanced by chromatic aberration on interactive ripples, film grain texture overlay, and smooth color transitions using LCH and OKLCH color spaces. The composition has a modern, premium aesthetic with soft edges and transparent gradients that blend seamlessly into the dark background.

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