Texture Flame Shader

Shader 18Pro

A full-screen fragment shader background using four tiled noise textures, a warm flame-style color ramp, parabolic silhouettes, and adjustable warp and edge controls.

Shadcn UI Shader Block

Shader18 is a full-viewport shader background built with shadcn/ui and React Three Fiber. A single quad fills the screen with a custom fragment program. Four texture channels supply noise: scrolling and warped UVs sample them for masks and distortion. The shader stacks many parabolic distance fields to carve vertical flame-like silhouettes, then maps edge values through a warm ramp from red and orange into cooler purples. Uniforms expose silhouette height, vertical drift, warp scale, edge sharpness, and horizontal tiling so the flame column density and motion can be tuned without editing GLSL.

The palette reads hot near the simulated flame fronts and cooler in the margins. Layered noise scrolls and warps the UVs so the shapes shimmer rather than sit flat. The overall field is dark, letting the ramp-lit regions carry most of the brightness.

This block aims for an abstract, generative fireplace or plasma read rather than a literal photo. It is elaborate relative to a gradient background: multiple textures, many blended parabolas, and time-based animation. You need CDN or self-hosted noise image URLs that allow cross-origin sampling for WebGL, or pass custom channel URLs to local assets.

The canvas-driven plane tracks resolution through the shader uniforms so the effect scales when the window or container resizes.