Shaders
header.lightDarkMode D
Gallery

Metallic Rings 4

Metallic Rings

A dark, moody abstract shader effect featuring concentric circular rings that spiral inward toward a central point at the top of the composition. The primary visual element is a ConcentricSpin pattern with 8 rings creating a tunnel-like vortex effect with subtle rotation and mirrored edges. The rings have a smooth, glossy appearance with soft gradations between light and dark areas. Underlying this geometric structure is a Plasma effect that adds organic, flowing distortion and color variation, creating a sense of movement and turbulence. The color palette is predominantly deep navy and dark blue tones (#06030a to #8bbef0), with subtle light blue highlights appearing along the ring edges where light catches the curved surfaces. A fine film grain texture overlays the entire composition at low opacity (0.05), adding subtle noise and a cinematic quality. The overall atmosphere is mysterious and cosmic, with a strong sense of depth created by the converging rings. The lighting appears to come from above, creating subtle highlights on the upper portions of each ring while the lower areas fade into deep shadow. The effect has a polished, three-dimensional quality despite being a 2D shader composition.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Plasma :balance="35" color-a="#8bbef0" color-b="#06030a" color-space="oklab" :contrast="0.7" :density="0.6" :intensity="2" :speed="1.2" :warp="0.45" />
    <ConcentricSpin :center="{ x: 0.5, y: 0 }" :intensity="60" :smoothness="0.04" :speed-randomness="1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>