Holofoil 4
HolofoilA vibrant, modern shader effect displaying three interlocking circular rings arranged in a trefoil pattern against a pure black background. The rings feature a continuous rainbow gradient that cycles through the full color spectrum: cyan at the top-left, transitioning through blue, purple, magenta, pink, red, orange, yellow, and lime-green as it progresses clockwise around each ring. The gradient is smooth and seamless, creating a fluid color transition effect. Each ring has a glossy, glass-like appearance with subtle specular highlights and fresnel reflections along the edges, giving them dimensional depth and a polished, luminous quality. The rings appear to have a slight thickness with refined edge softness, and there's a subtle halftone texture overlay (CMYK style at 17% opacity) that adds fine print-like detail without overwhelming the primary gradient effect. The overall composition creates a sense of motion and energy through the color wheel rotation, with the interlocking geometry suggesting connectivity and flow. The lighting angle appears to come from the upper-left, creating subtle highlights that enhance the three-dimensional glass effect. The black background provides maximum contrast, making the neon-like colors pop with intensity.
Code
<script setup lang="ts">
import {
Shader,
ColorWheel,
Glass,
Halftone,
SolidColor,
WorleyNoise
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<WorleyNoise id="idmp1dieut6oaemps9r" :balance="0.8" :contrast="4" distance="chebyshev" :jitter="0.5" mode="f2MinusF1" :scale="50" :seed="35" :visible="false" />
<SolidColor color="#0a0a0a" />
<Glass :aberration="0" :cutout="true" :fresnel="0.19" :fresnel-softness="0.26" :highlight="0.4" :highlight-softness="0.6" :light-angle="224" :refraction="1.05" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/NEnjqh3-kdfX_sdf.bin" :thickness="0.05">
<ColorWheel :angle="19" color-a="#00ff3c" color-b="#00ffea" color-c="#0015ff" color-space="lch" mode="custom" :scale="{ type: 'map', curve: 0, source: 'idmp1dieut6oaemps9r', channel: 'luminance', inputMax: 1, inputMin: 0, outputMax: 4.1, outputMin: 4 }" :speed="0.3" />
<Halftone :frequency="151" :opacity="0.17" style="cmyk" />
</Glass>
</Shader>
</template>