Converging Panels 3

A sophisticated shader effect featuring a deep blue gradient background with subtle atmospheric lighting. The primary base is a rich medium blue (#2a6aa8) that transitions smoothly across the canvas with soft directional lighting creating a three-dimensional depth effect. Bright light rays emanate from the upper left area, creating luminous streaks that fade diagonally across the composition, suggesting a studio lighting setup with key light positioned at approximately 71% horizontal and 78% vertical. The background exhibits a subtle vignette effect with darker navy tones concentrated in the upper left corner, gradually brightening toward the center and right edges. A kaleidoscopic pattern with 6 segments is subtly integrated, creating a faint symmetrical geometric structure that's barely perceptible beneath the dominant lighting effects. The overall atmosphere is cool and professional, reminiscent of high-end studio backgrounds used in broadcast or premium visual production. Fine film grain texture is applied uniformly across the entire surface at 20% strength, adding a subtle cinematic quality and preventing the gradient from appearing too smooth or artificial. The lighting creates a sense of depth and dimensionality, with the fill light (#d5e4ea) providing soft illumination at 9% intensity, while the ambient lighting at 96% intensity creates the overall atmospheric glow. The blend mode uses luminosity, which preserves the underlying color information while emphasizing the light distribution.

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.713903743315508, originY: 0.7781299524564184, momentum: 0.3, smoothing: 0.4 }" color="#2a6aa8" :fill-angle="72" :fill-intensity="9" :key-intensity="38" :wall-curvature="35" />
    <Kaleidoscope :center="{ type: 'mouse-position', reach: 0.05, originX: 0.8324420677361853, originY: 0.24881141045958796, momentum: 0.5, smoothing: 0.5 }" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>