Resolving Chrome 5

A sophisticated shader effect displaying concentric circular rings with a flowing gradient base. The composition features 7 nested rings that spin slowly around a center point, creating a hypnotic spiral pattern. The rings alternate between light gray (#b3b3b3) and dark navy tones (#010015, #121214), with subtle purple-gray accents (#8a8aa8). The flowing gradient underneath provides organic color transitions in the oklab color space, creating smooth blends between the dark navy base and lighter gray highlights. A film grain texture overlay adds subtle noise and texture throughout, enhancing the cinematic quality. The concentric spin effect creates depth through the mirrored edge treatment, making the rings appear to recede toward the center. The overall effect has a polished, metallic quality with soft, smooth transitions between the alternating light and dark bands. The mouse-position tracking on the center point (anchored to bottom-left with momentum and smoothing) creates subtle interactive responsiveness. The distortion value of 0.4 on the flowing gradient introduces gentle waviness to the otherwise geometric rings, preventing the effect from appearing too rigid or artificial.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Circle id="idmnx0pxwoebmx1in6j" :center="{ type: 'mouse-position', originX: 0.5, originY: 0.5, momentum: 0.35, smoothing: 0.3 }" :radius="1.9" :softness="1" :visible="false" />
    <FlowingGradient color-a="#010015" color-b="#b3b3b3" color-c="#121214" color-d="#8a8aa8" color-space="oklab" :distortion="0.4" :seed="44" />
    <ConcentricSpin :center="{ type: 'mouse-position', reach: 0.05, originX: 0, originY: 1, momentum: 0.25, smoothing: 0.75 }" :intensity="100" :rings="7" :smoothness="{ type: 'map', curve: -1, source: 'idmnx0pxwoebmx1in6j', channel: 'alphaInverted', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.23 }" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>