Converging Panels 2

A vibrant purple gradient shader effect with dynamic lighting and atmospheric depth. The primary color is a vivid magenta (#ca1cff) that dominates the composition, transitioning smoothly into deeper purple tones toward the edges. The effect features a radial gradient emanating from the lower-center area (originY: 0.8) with a soft, diffused glow that creates a three-dimensional studio lighting atmosphere. The kaleidoscope component with 6 segments creates subtle symmetrical distortions and reflections across the surface, though they are minimally visible due to the low reach value (0.05). A film grain texture with 0.2 strength is overlaid, adding subtle noise and texture to prevent the gradient from appearing too smooth and artificial. The overall mood is ethereal and energetic, with the bright magenta center fading into darker purple at the periphery. The ambient intensity is high (96), creating a luminous quality throughout. The blend mode of 'luminosity' on the background component enhances the glowing, light-based appearance. The vignette effect is absent (0), allowing the color to extend fully to the edges with a 'transparent' edge treatment.

Code

vue

<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  Kaleidoscope,
  StudioBackground
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <StudioBackground :ambient-intensity="96" :ambient-speed="3" :back-intensity="0" :back-softness="0" blend-mode="luminosity" :center="{ type: 'mouse-position', reach: 0.7, originX: 0.5, originY: 0.8, momentum: 0.3, smoothing: 0.4 }" color="#ca1cff" :fill-angle="72" :fill-intensity="9" :key-intensity="38" :wall-curvature="35" />
    <Kaleidoscope :center="{ type: 'mouse-position', reach: 0.05, originX: 0.3538324420677362, originY: 0.8256735340729001, momentum: 0.5, smoothing: 0.5 }" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>