Shaders
header.lightDarkMode D
Gallery

Stretched Chevrons 2

Stretched Chevrons

A geometric 3D relief pattern composed of repeating rectangular blocks arranged in a staggered grid formation. The blocks create a chevron-like directional pattern with a -45 degree angle orientation. The color palette transitions smoothly between deep purple (#751477) and vibrant magenta-pink (#d14881), creating a gradient effect across the surface. Each rectangular block has subtle shadow and depth effects that emphasize the three-dimensional relief structure, with darker purple tones appearing in the recessed areas and lighter magenta tones on the raised surfaces. The overall composition has a soft, diffused quality with gentle gradations between light and shadow, creating a sense of dimensional depth. The pattern repeats uniformly across the entire frame with consistent spacing and alignment. The lighting appears to come from above-left, casting subtle shadows that enhance the embossed appearance. The mood is modern and sophisticated with a smooth, almost velvety texture quality.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Chevron,
  ChromaFlow
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ChromaFlow id="idmp1helxtfp3bsckef" base-color="#ffffff" down-color="#ffffff" :intensity="0.6" left-color="#ffffff" :momentum="0" right-color="#ffffff" up-color="#ffffff" :visible="false" />
    <Chevron :angle="-45" :balance="{ type: 'map', curve: -0.8, source: 'idmp1helxtfp3bsckef', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.01 }" color-a="#751477" color-b="#d14881" color-space="oklab" :count="4" :softness="{ type: 'map', curve: 1, source: 'idmp1helxtfp3bsckef', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.01 }" :speed="0.1" :visible="true" />
  </Shader>
</template>