Shaders
header.lightDarkMode D
Gallery

Converging Panels 4

Converging Panels

A soft, blurred gradient background dominated by vibrant green tones with subtle radial light effects. The primary color is a bright, saturated green (#06d434) that serves as the base, with lighter lime-green highlights creating a glowing center point around coordinates (0.23, 0.29). The image exhibits a smooth, bokeh-like quality with soft-focus areas that transition from bright green in the center to darker forest-green at the edges. A kaleidoscopic effect with 6 segments creates subtle symmetrical patterns overlaid on the gradient, though the effect is very subtle due to low reach settings (0.05). The overall atmosphere is ethereal and dreamy, with a vignette-like darkening toward the corners. Fine film grain texture (0.2 strength) is applied uniformly across the surface, adding a subtle cinematic quality. The lighting appears to come from the upper-left quadrant, with ambient intensity at 96% creating a luminous, glowing quality. The blend mode of luminosity enhances the light-based appearance, making the effect feel like soft, diffused light passing through a translucent medium.

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