Resolving Chrome 4

A sophisticated shader effect featuring concentric circular rings that create a mesmerizing spiral pattern emanating from the bottom-right corner. The rings display alternating bands of deep navy blue (#010015), light gray (#b3b3b3), and charcoal (#121214) with subtle lavender undertones (#8a8aa8). The effect creates a three-dimensional tunnel-like appearance with smooth, flowing gradients that transition between the color bands. The rings appear to rotate slowly with a gentle spin motion, creating a sense of depth and movement. The overall aesthetic is sleek and modern with a dark, moody atmosphere. A subtle film grain texture overlays the entire composition, adding a cinematic quality and slight visual noise. The lighting creates soft highlights on the lighter bands while maintaining deep shadows in the darker areas, producing a polished metallic appearance. The concentric pattern suggests motion and energy, with the rings appearing to pulse outward from the focal point. The color palette transitions smoothly between cool tones, creating a sophisticated, tech-forward visual experience.

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