Concentric 5

A dynamic shader effect featuring concentric curved bands radiating from the upper left corner, creating a tunnel-like perspective. The composition alternates between warm orange (#d6531e) and bright yellow (#ffcc17) stripes that flow in a swirling pattern with smooth, organic curves. The bands have subtle depth and dimensionality, appearing to recede into the background. The effect combines a swirl shader that creates the flowing color transition with a concentric spin shader generating 14 rings of alternating hues. The overall aesthetic is warm and energetic, with the stripes appearing to rotate or spiral outward. A fine film grain texture is overlaid at 60% opacity, adding subtle noise and texture throughout the composition. The edges fade to transparent, and the color space uses OKLCH for smooth, perceptually uniform color transitions. The effect creates a sense of motion and depth, with the alternating warm tones producing a vibrant, luminous quality reminiscent of heat or light radiation.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="44" color-a="#d6531e" color-b="#ffcc17" color-space="oklch" :detail="1.1" />
    <ConcentricSpin :center="{ x: 0, y: 0 }" :intensity="100" :rings="14" :smoothness="0.08" :speed="0.5" :speed-randomness="0.99" />
    <FilmGrain :opacity="0.6" :strength="0.3" />
  </Shader>
</template>