Atelier UI®

Read the docsGithub
Docs 0.7.0

Getting started

  • Browse Catalog
  • Installation
  • How to contribute
  • Code of conduct

Components (19)

  • Dither Flow
    pro
  • Glowing Fog
    pro
  • Halftone Glow
    pro
  • Fluid Distortion
    new
  • Image Trail
    new
  • Liquid Image
    new
  • Magnetic Dot Grid
    new
  • Pixel Trail
    new
  • Pixelated Text
    new
  • Simple Scramble
    new
  • Text Bounce
    new
  • Text Fluid
    pro
  • Text Roll
    new
  • Curve Image
    new
  • Elastic Stick
    pro
  • Infinite Gallery
    new
  • Infinite Parallax
    new
  • Infinite Zoom
    new
  • Scattered Scroll
    new
Atelier UI 0.7.0 ©2026
Star on githubBuy me a coffeellms.txt
  1. Docs
  2. /
  3. Components
  4. /
  5. Text Fluid

Text Fluid

SEO-friendly text with an animated WebGL shimmer and distortion effect.

React Three Fiber
Drei
https://atelier-ui.com/text-fluid
Unlock Code
Unlock component

Unlock the source code and CLI installation with a one-time license.

Get pro accessSign in
One-time payment. Lifetime access to all current and future pro components.

API

NameTypeDefaultDescription
childrenstring—Text content.
speednumber0.2Overall animation speed multiplier.
opacitynumber1Overall opacity.
ripplenumber0.015UV warp strength: how much the surface refracts.
amplitudenumber0.002FBM displacement amplitude: how far vertices scatter.
frequencynumber1.5FBM spatial frequency: size of the noise pattern.
segmentsnumber20Plane geometry subdivisions, higher = better quality.
webglEnabledbooleantrueToggle WebGL effect on/off, falls back to plain text.
classNamestring—Class applied to the underlying span.
  • CLI Install
  • Manual Install
  • API
Star on githubBuy me a coffeellms.txt