Atelier UI

(0.3.0)
Read the docsGithub
Components14

Explore components

Getting started

  • Installation
  • How to contribute
  • Code of conduct
  • Why Atelier?

Background Effect

  • Glowing Fog
    pro
  • Halftone Glow
    pro

Cursor Effect

  • Fluid Distortion
  • Image Trail
  • Liquid Touch
  • Magnetic Dot Grid
  • Pixel Trail

Text Effect

  • Pixelated Text
  • Simple Scramble

Scroll Effect

  • Elastic Stick
    pro
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Scattered Scroll

Atelier UI

Pages

DocsGetting startedComponentsContribute

Social

Github(opens in new tab)Support(opens in new tab)
Design & Built by Jérémie NalletIn Paris, France 🇫🇷
Atelier UI version 0.3.0 ©2026all rights reserved
  1. Component list
  2. /
  3. Glowing Fog

Glowing Fog

Dynamic fog and light beam cursor follow effect.

React Three Fiber
Drei
Postprocessing
https://atelier-ui.com/glowing-fog-demo
Unlock Code
Unlock component

Unlock the source code and CLI install with a one-time license. Yours forever.

Go proSign in
One-time payment. Lifetime access to all current and future pro components.

API

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.2Strength of mouse-based parallax follow on the beam.
onTextureReady(texture) => voidundefinedReturns the rendered result as a texture.

On this page
  • CLI Install
  • Manual Install
  • API