Godot Sliding Patterned Wallpaper Gradient Shader

A dynamic, flexible 2D shader for Godot 4.5+ that blends a configurable, angled gradient background with a motion-driven, luminance-aware pattern overlay.

Inspired by Telegram’s chat UI themes, this shader produces subtle, soft, adaptive wallpaper effects suitable for menus, chat screens, onboarding flows, dashboards, and UI containers.

Features

🎨 Background System

• Fully customizable gradient with:
  • Start color
  • End color
  • Adjustable gradient angle (in radians)
• Gradient dynamically integrates with pattern coloration

🌀 Pattern System

• Supports any texture (PNG/SVG raster) via pattern_sampler
• Automatically extracts pattern intensity using:
  • Alpha channel (ideal for masks and SVGs), OR
  • Luminance (computed from RGB)
• No asset requirements — white-on-transparent recommended but optional
• Pattern can:
  • Scroll
  • Scale
  • Rotate
  • Orbit (via scripting)
  • Pulse (via scripting)

😎 Adaptive Tinting

• Pattern color is derived from the underlying gradient
• Optional tint-shift and brightness-boost enable a soft "accented" look
• Pattern overlays without replacing the background colors

▶️ Motion Controls

• pattern_direction — normalized direction of scrolling
• pattern_speed — rate of UV motion
• pattern_rotation — rotation applied before animation
• pattern_scale — controls tiling density

🎨 Why This Shader?

This shader aims to provide:

• A high-quality, UI-friendly pattern effect
• Non-intrusive visuals that remain readable at any opacity
• A professional look similar to modern messaging apps and OS wallpapers
• Extremely flexible animation capabilities when paired with GDScript

The goal is subtle, tasteful atmospheric motion that never dominates the UI.

🧩 Using the Shader in Your Scene

1. Download or clone the repository.
2. Place the shader file in your project:

   res://shaders/

3. Add a ColorRect or other CanvasItem.
4. Assign a ShaderMaterial.
5. Load this shader.
6. Set pattern_sampler to your texture.
7. (A usage screenshot is available in the original source material.)

🔧 Shader Uniforms

### Background

| Uniform                           | Type  | Description                  |
| --------------------------------- | ----- | ---------------------------- |
| `background_gradient_start_color` | vec3  | Start color of gradient      |
| `background_gradient_end_color`   | vec3  | End color of gradient        |
| `gradient_angle`                  | float | Gradient direction (radians) |

### Pattern

| Uniform             | Type      | Description                    |
| ------------------- | --------- | ------------------------------ |
| `pattern_sampler`   | sampler2D | Texture used as pattern source |
| `pattern_scale`     | float     | UV scale / tiling density      |
| `pattern_direction` | vec2      | Scroll direction               |
| `pattern_speed`     | float     | Scroll speed                   |
| `pattern_rotation`  | float     | Rotation applied to pattern    |

### Pattern Appearance

| Uniform                    | Type  | Description                                                |
| -------------------------- | ----- | ---------------------------------------------------------- |
| `pattern_alpha`            | float | Overall pattern opacity                                    |
| `pattern_brightness_boost` | float | Brightness gain based on intensity                         |
| `tint_shift_strength`      | float | How much the pattern shifts away from the background color |

---

📄 Recommended Asset Format (Optional)

This shader supports any image, but for the most consistent results:

Recommended:

• White pattern shapes
• On a transparent background

This yields perfect alpha intensity, predictable luminance, and clean SVG imports. Colored images still work — luminance fallback handles them automatically.

🧪 Ideal Uses

• Menu backgrounds
• Message/chat backgrounds
• Dashboard UIs
• Decorative panels
• Loading screens
• “Wallpaper” effects behind gameplay HUDs

Usage Tips

• pattern_direction: (1,0) → right, (0,1) → down
• pattern_speed: try 0.02–0.1
• pattern_rotation: radians (PI/4 = 45°)
• pattern_scale: smaller = tighter tiling
• gradient_angle: 0 (horizontal), PI/2 (vertical), any value for diagonal gradients

Experiment with tint and brightness settings to match your visual theme.

Dynamically Setting Shader Values in Code

Since the shader makes significant usage of customizable parameters, you can leverage scripting to customize the design even further. See some of the project's scripting demos for examples.

(Demonstration GIFs are available in the original source, showing animated hue shifts and pattern pulsing via script.)

📜 License

This shader is released under the MIT License — free to use in commercial and open-source projects, with attribution encouraged but not required.