Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring a glowing purple and magenta smoke-filled shape against a very dark navy-black background. The composition shows a large circular or donut-like form with a hollow center, rendered with volumetric smoke that creates a three-dimensional, ethereal quality. The smoke exhibits vibrant purple gradients (#b87aff to #9430ff) that glow intensely, particularly bright on the upper right portion where the light appears concentrated. The effect demonstrates multiple layers of smoke emission: darker purple-tinted smoke (#1f193d, #0b132e) forms the base structure with lower opacity, while brighter magenta-purple smoke overlays create luminous highlights. The smoke particles dissipate gradually with a soft, feathered edge quality, creating a hazy, atmospheric appearance. The overall mood is mystical and energetic, with the glowing purple tones creating strong contrast against the nearly black background. The shape appears to be following an SVG path definition, creating an organic, flowing silhouette. Subtle motion blur and particle dispersion effects suggest dynamic movement and turbulence within the smoke volume.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Smoke,
  SmokeFill,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0d0817" />
    <Smoke color-a="#1f193d" color-b="#0b132e" :direction="49" :dissipation="0.7" :emit-from="{ x: 0, y: 0.99 }" :emit-radius="0.13" :intensity="0.75" :speed="8.3" :spread="65" />
    <Smoke color-a="#1f193d" color-b="#0b132e" :direction="277" :dissipation="0.7" :emit-from="{ x: 1, y: 1 }" :emit-radius="0.13" :intensity="0.75" :speed="8.3" :spread="65" />
    <SmokeFill color-a="#b87aff" color-b="#9430ff" :color-decay="3" :detail="16" :emit-from="{ type: 'mouse-position', originX: 0, originY: 0, momentum: 0, smoothing: 0 }" :emit-radius="0.05" :gravity="0" :intensity="0.95" :mouse-influence="0.35" :scale="1.1" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/5T7CT5qxxArz_sdf.bin" :speed="1.4" :spread="141" />
  </Shader>
</template>