Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Cyber Diffusion

Neon glow effect with blurred lines creating a cyberpunk aesthetic.

Main Features of Cyber Diffusion

How to Use Cyber Diffusion in Next.js

Installation Guide for Cyber Diffusion

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#000000Background color
radialGradientFrom
string#0f172aRadial gradient start color
radialGradientVia
string#000000Radial gradient middle color
radialGradientTo
string#000000Radial gradient end color
radialOpacity
number0.8Radial gradient opacity
beamAngles
number[][0, 45, 90, 135]Angles for beam layers
beamColor
string#06b6d4Beam color
beamWidth
string150%Beam width
beamBlur
stringxlBeam blur amount
beamOpacity
number[][0.4, 0.8, 0.4]Beam opacity animation values
beamBaseOpacity
number0.6Base beam opacity
beamDuration
number3Beam animation duration
layer2Angles
number[][0, 45, 90, 135]Angles for second layer
layer2Color
string#9333eaSecond layer color
layer2Width
string150%Second layer width
layer2Height
string8remSecond layer height
layer2Blur
string80pxSecond layer blur
layer2Opacity
number0.3Second layer opacity
layer2Offset
number20Second layer angle offset
noiseUrl
stringhttps://grainy-gradients.vercel.app/noise.svgNoise texture URL
noiseOpacity
number0.2Noise overlay opacity
text
stringNeonText label
textColor
stringrgba(255, 255, 255, 0.9)Text color
className
stringAdditional CSS classes
PreviousVelvet Noir
NextLight Leak

When to Use

Excellent for tech-focused portfolios, gaming sites, and Next.js applications with a cyberpunk or high-energy aesthetic. Use this React component for a neon 'beam' effect that diffuses light across the screen with high intensity.

Best Practices

Maintain consistent spacing within your design system by ensuring the neon beams don't overpower your content. Follow React best practices by using the `layer2` props to add depth. Optimize for performance in large-scale applications by keeping the beam count low.

Why This Component Matters in Modern UI Development

Neon diffusion is a powerful storytelling technique for future-facing brands. This customizable UI component gives you a production-ready way to manage 'light' as a design element, adding semantic authority to your project.

Frequently Asked Questions

QCan I change the beam angles?

Yes, the `beamAngles` prop accepts an array of numbers representing degrees for each light source.

QDoes it support different neon colors?

Absolutely, you can set separate colors for the primary beams and the secondary diffusion layers.

QIs it readable?

The beams are diffused with heavy blur, making them surprisingly good backdrops for large, bold typography.

Cyber Diffusion - React Blur & Glassmorphism Effects | Uilora