Neon Sign

Open in editor

A neon cross symbol rendered against a pure black background with high contrast. The cross features a glowing outline with a gradient color transition from magenta/pink on the upper and left edges to blue on the lower and right edges, creating a dynamic chromatic effect. The neon tube has a thick, luminous glow with an orange-yellow halo radiating outward from the core, suggesting intense heat and energy. The cross shape is geometric with sharp right angles and smooth curved transitions at the corners. The glow creates a soft bloom effect that extends into the surrounding darkness, with the intensity peaking at approximately 1.95 as specified in the shader parameters. Small floating particles with warm golden-orange tones (#ffd4a0) drift subtly around the cross, adding atmospheric depth. The overall effect suggests a glowing neon sign in a dark environment, with the secondary blue color creating a cool-warm color contrast that enhances visual interest. A subtle tilt-shift blur effect is applied, keeping the center sharp while softly defocusing the periphery. The image conveys a modern, digital aesthetic with strong cyberpunk or retro-futuristic styling.

Code

vue

<script setup lang="ts">
import {
  Shader,
  FloatingParticles,
  ImageTexture,
  Neon,
  SolidColor,
  TiltShift
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ImageTexture url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/h7eBDklfg_bz.jpeg" />
    <SolidColor color="#000000" :opacity="0.95" />
    <Neon color="#ff6a00" :corner-smoothing="0.2" :flicker-amount="0.24" :flicker-speed="1.1" :flow-amount="1" :flow-speed="2.6" glow-color="#ff8800" :glow-intensity="0.25" :glow-radius="0.47" :hot-core-intensity="0.45" :intensity="1.95" :light-angle="251" :scale="0.9" :secondary-blend="1" secondary-color="#0055ff" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/w6Gk_KBfIO2t_sdf.bin" :specular-intensity="0.95" :specular-size="0.32" :tube-thickness="0.29" />
    <FloatingParticles :angle="81" :angle-variance="105" particle-color="#ffd4a0" :particle-density="0.8" :particle-size="0.3" :randomness="0.5" :speed="0.1" :speed-variance="0.2" :twinkle="0.7" />
    <TiltShift :angle="70" :falloff="0.4" :intensity="80" :width="0.2" />
  </Shader>
</template>