---
title: "Shader Frame"
canonical_url: "https://framerhub.io/components/shader-frame"
last_updated: "2026-06-15T14:46:31.365Z"
---

## Turn Any Section into Abstract Art

Shader Frame uses advanced ray-marching techniques to create a continuously evolving, 3D-like frame that responds to mouse movement. Perfect for hero backgrounds, creative portfolios, and eye-catching visual experiences.

## Features

**Hypnotic Visuals**
The component renders a complex, self-shadowing 3D structure that constantly twists and turns, creating a mesmerizing background or focal point.

**Interactive**
Engage your visitors with optional mouse interaction. The shader distorts and ripples as the cursor moves across the frame.

**Fully Customizable**
Fine-tune the visual output with controls for speed, time offset, tint color, brightness, contrast, scale, and distortion intensity.

**Performance Optimized**
Adapts rendering quality based on RenderTarget for smooth performance in both canvas and preview modes.

## Use Cases

**Hero Backgrounds** — Create an immersive, animated backdrop that captivates visitors instantly.

**Creative Portfolios** — Showcase your appreciation for cutting-edge web graphics with this high-end effect.

**Landing Pages** — Make a bold first impression with hypnotic, abstract visuals.

**Section Dividers** — Use as an animated separator between content sections.

![Shader Frame Preview](/framerhub/img/components/control/shader-frame.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Shader Frame in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Animation**

- Speed: Control animation speed (0-5)
- Time Offset: Shift the starting point of the animation

**Appearance**

- Tint Color: Apply a color tint to the shader
- Brightness: Adjust overall brightness (-1 to 1)
- Contrast: Control contrast levels (0-3)
- Scale: Zoom in/out of the pattern (0.2-3)
- Distortion: Control the distortion intensity (0-5)

**Interaction**

- Enable Mouse: Toggle mouse interaction
- Mouse Strength: Control how strongly mouse movement affects the shader

### Quick Tips

**Performance** — The shader uses ray-marching which can be GPU-intensive. Use moderate settings on mobile devices.

**Subtle Effects** — Lower distortion (0.5-1) and slower speed (0.5) create elegant, subtle animations.

**Bold Statements** — Higher distortion (3+) with faster speed creates energetic, attention-grabbing visuals.

**Background Usage** — Works great behind text with reduced brightness and increased contrast for readability.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Shader Frame brings GPU-powered, cinema-quality visuals to Framer with zero coding. The mesmerizing ray-marched patterns create instant visual impact, perfect for creative agencies and portfolios that want to stand out.

---