Resolving Chrome 3

A sophisticated abstract shader effect featuring concentric spinning rings with a dark, moody aesthetic. The composition displays 7 nested circular rings that rotate at varying speeds, creating a hypnotic spiral pattern. The color palette transitions between deep navy blue (#010015), cool gray tones (#b3b3b3), dark charcoal (#121214), and muted lavender-gray (#8a8aa8). The rings have sharp, defined edges with subtle blur and anti-aliasing that creates a polished, metallic appearance. A flowing gradient underlayer provides organic color variation and subtle distortion (0.4 intensity) that adds depth and movement. The effect includes film grain texture overlay (0.1 strength) for a cinematic quality. The concentric spin pattern is anchored near the top-right corner with mouse-position tracking (reach 0.05), allowing subtle interactive movement. The smoothness of the rings varies dynamically, creating visual interest through the interplay of sharp and soft edges. The overall mood is sleek, technological, and contemplative, with a cool color temperature dominated by blues and grays. The effect has a three-dimensional quality despite being 2D, achieved through the layering of the gradient, spin effect, and grain texture.

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