Resolving Chrome 2

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 radial pattern. The primary color palette transitions between deep navy blue (#010015), light gray (#b3b3b3), and charcoal (#121214), with subtle lavender accents (#8a8aa8). The rings exhibit a mirror-edge effect that creates symmetrical reflections, while the flowing gradient underneath provides organic, undulating color transitions with 0.4 distortion intensity. A film grain texture overlay (0.1 strength) adds subtle noise and tactile quality to the surface. The effect has smooth, polished metallic qualities with soft edges and transparent transitions. The concentric spin pattern is modulated by an invisible circle mask that controls smoothness variation from 0.23 to 1.0, creating depth and dimensional complexity. The overall mood is sleek, modern, and technological with a calm, meditative quality from the slow 0.1 speed rotation. Lighting appears to come from multiple directions, creating subtle highlights and shadows across the curved surfaces.

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: 0, 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>