Holofoil 5

Two interlocking circular rings rendered with a glossy glass material effect against a pure black background. The outer ring features a gradient transitioning from coral-red on the upper left to golden-yellow on the right side. The inner ring displays a brighter yellow-to-pale-yellow gradient. Both rings have a smooth, polished appearance with subtle specular highlights and fresnel reflections along their edges, creating a three-dimensional glass-like quality. The rings are positioned to overlap and interlock, creating a sense of depth and dimensionality. A subtle halftone texture with CMYK dot patterns is visible at low opacity (17%), adding fine detail and a print-like quality to the surface. The overall effect is luminous and warm, with the gradient colors creating a sense of motion or energy flowing around the circular forms. The glass shader creates realistic light refraction and edge highlights that enhance the three-dimensional appearance.

Code

vue

<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="47" color-a="#feff7d" color-b="#f78c3e" color-c="#ff4000" color-space="hsl" 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>