Atelier UI®

DocsCatalogShader StudioPricingGithub
Docs 1.0.0

tools

  • Browse Catalog
  • Shader Studio
    pro
  • Collage
    new

Documentation

  • How it works
  • License
  • MCP

Page Transition (04)

  • Clip Transition
  • Stripe Transition
  • Pixel Transition
  • Band Transition

Components (36)

  • Orbit Gallery
  • Sphere Gallery
  • Spiral Gallery
  • Glowing Fog
  • Gradient Flow
  • Halftone Glow
  • Scattered Grid
  • Tag Cloud
  • Edge Bounce
  • Fluid Distortion
  • Image Trail
  • Lens Media
  • Liquid Media
  • Magnetic Dot Grid
  • Pixel Media
  • Pixel Trail
  • Dither Cursor
  • Hover Burst
  • Image Bloom
  • Curve Media
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Pixel Scroll
  • Scattered Scroll
  • Elastic Stick
  • Letter Swarm
  • Magnify Trail
  • Stacking Grid
  • Wavy Scroll
  • Pixelated Text
  • Text Bounce
  • Text Fluid
  • Text Scramble
  • Falling Text
  • Text Roll

Foundation Blocks (07)

  • Smooth Scroll
  • Text Split
  • WebGL Image
  • WebGL Provider
  • WebGL Scene
  • WebGL Text
  • WebGL Video
Atelier UI 1.0.0 ©2026
Star on githubBuy me a coffeellms.txt
  1. Docs
  2. /
  3. Components
  4. /
  5. Glowing Fog

Glowing Fog

Dynamic fog and light beam cursor follow effect.

https://atelier-ui.com/glowing-fog
Copy Prompt
speed
18
beam-scale
0.80
fog-density
1.00
grain-intensity
0.10
mouse-follow
0.90
beam-x
0.50
beam-y
0.50
beam-color
6031ff
speed
18
beam-scale
0.80
fog-density
1.00
grain-intensity
0.10
mouse-follow
0.90
beam-x
0.50
beam-y
0.50
beam-color
6031ff

Unlock component

One license unlocks every pro feature for life, including the ones we haven't built yet.

Get pro access

Already have an account? Sign in


NameTypeDefaultDescription
speednumber18Animation speed of the effect.
beamColorstring"#6031ff"Color of the central light beam.
beamXnumber0.5Horizontal position of the beam.
beamYnumber0.5Vertical position of the beam.
beamScalenumber0.5Intensity / size of the beam glow.
fogDensitynumber1Density of the fog.
grainIntensitynumber0.1Amount of grain.
mouseFollownumber0.9Strength of mouse-based parallax follow on the beam.
onTextureReady(texture) => voidundefinedReturns the rendered result as a texture.

React Three Fiber
React renderer for Three.js.

Motion
React animation library.

WebGL Provider (Atelier)
A single shared WebGL canvas for the whole app.

Star on githubBuy me a coffeellms.txt