Resolving Chrome

Open in editor

A mesmerizing concentric spiral pattern with smooth, flowing curves that create a tunnel-like vortex effect. The image features a sophisticated color palette transitioning from deep dark navy and black tones (#010015, #121214) in the outer regions to lighter silver and pale gray tones (#b3b3b3) toward the center. The spiral consists of approximately 7 concentric rings that rotate slowly, creating a hypnotic sense of depth and motion. The rings have soft, blurred edges with smooth gradients between them, enhanced by the flowing gradient component that adds organic distortion (0.4 intensity) to prevent rigid geometric appearance. A subtle film grain texture (0.1 strength) overlays the entire composition, adding a cinematic quality and reducing the digital smoothness. The center of the spiral appears to respond to mouse position with momentum and smoothing, creating an interactive focal point. The overall effect is elegant and meditative, with a glossy, polished surface quality enhanced by the linear color space rendering. The blur and soft focus create a sense of motion and fluidity, while the dark-to-light gradient progression draws the viewer's eye inward toward the center vortex.

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.5, 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>