Radial Overlap 4

A sophisticated gradient shader effect displaying a smooth transition from warm terracotta and burnt orange tones on the left side to soft beige and cream colors on the right side. The composition features organic, flowing curves with a swirl distortion pattern that creates a sense of movement and depth. The effect incorporates a pixelated texture overlay that varies in intensity across the surface, creating a subtle ribbed or wave-like pattern that becomes more pronounced toward the right edge. The overall aesthetic is warm and earthy with a modern, abstract quality. The lighting suggests a three-dimensional form with gentle highlights and shadows that enhance the dimensional quality. A faint conic gradient with rotating animation provides underlying structure, though it remains mostly invisible in the final render. The blend of the swirl effect at 50% opacity creates a harmonious color transition while maintaining visual interest through the pixelation mapping that responds to the gradient's alpha channel.

Code

vue

<script setup lang="ts">
import {
  Shader,
  ConicGradient,
  Pixelate,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ConicGradient id="idmpiichpr7x5ibv89b" :center="{ x: 1, y: 0 }" color-a="#ffffff" color-b="#ffffff00" :repeat="3" :rotation="{ mode: 'loop', type: 'auto-animate', speed: 0.1, outputMax: 360, outputMin: 0 }" :visible="false" />
    <Swirl color-a="#b7916c" color-b="#933f0a" color-space="oklab" :detail="1.7" :visible="true" />
    <Pixelate :scale="{ type: 'map', curve: -0.65, source: 'idmpiichpr7x5ibv89b', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 93, outputMin: 1 }" />
  </Shader>
</template>