Converging Panels

Open in editor

A warm, glowing abstract shader effect dominated by golden and orange tones. The image features a soft, blurred bokeh-like quality with multiple overlapping light sources creating a dreamy, out-of-focus appearance. The primary illumination originates from the upper-center area, creating a bright yellow-gold core that gradually transitions to deeper orange and brown tones toward the edges. The StudioBackground component generates ambient lighting with a luminosity blend mode, producing soft halos and diffused light rays. A subtle kaleidoscopic pattern with 6 segments is layered underneath, creating gentle geometric distortions that are barely visible due to the low reach setting (0.05) and the dominant background. The overall effect is atmospheric and warm, with a vignette-like darkening at the corners transitioning from bright center to darker brown edges. A fine film grain texture (0.2 strength) adds subtle noise throughout, enhancing the cinematic quality. The composition suggests studio lighting with high ambient intensity (96) and moderate fill softness (70), creating a professional, polished glow effect with soft shadows and highlights blending seamlessly.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
    color-space="srgb"
  >
    <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="#ff9d0a" :fill-angle="72" :fill-intensity="24" :key-intensity="38" :wall-curvature="35" />
    <Kaleidoscope :center="{ type: 'mouse-position', reach: 0.05, originX: 0.551693404634581, originY: 0.26465927099841524, momentum: 0.5, smoothing: 0.5 }" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>