Component
God Rays Component for Framer
This is a customizable God Rays component for Framer that lets you add glowing, animated light beams to your designs — built based on Stephen’s "god rays" shader. You have full control over color, frequency, intensity, density, and movement, making it perfect for adding rich, atmospheric visuals. Just copy it into your project and fine-tune the effect using the properties in the right panel.
Created by
About the resource
This God Rays component is seriously fun to play with. Just drop it into your Framer project, set it as a background layer, and pin all sides to 0 — it’ll fill the whole screen and instantly give your layout this glowing, atmospheric vibe.
You’ve got five ready-made presets to get started — each one has a distinct feel, so you can quickly drop in a look that works and go from there.
About the resource
This God Rays component is seriously fun to play with. Just drop it into your Framer project, set it as a background layer, and pin all sides to 0 — it’ll fill the whole screen and instantly give your layout this glowing, atmospheric vibe.
You’ve got five ready-made presets to get started — each one has a distinct feel, so you can quickly drop in a look that works and go from there.
About the resource
This God Rays component is seriously fun to play with. Just drop it into your Framer project, set it as a background layer, and pin all sides to 0 — it’ll fill the whole screen and instantly give your layout this glowing, atmospheric vibe.
You’ve got five ready-made presets to get started — each one has a distinct feel, so you can quickly drop in a look that works and go from there.
The predefined presets in the god rays component in Framer.
The predefined presets in the god rays component in Framer.
The predefined presets in the god rays component in Framer.
Want to make it your own? There’s a ton you can customize. The Background sets the mood — go soft and airy or dark and moody. Stack up colors in Ray Colors to build beautiful gradients or bold color bursts. Dial up the Frequency for more beams, or increase Spotty to break them up into scattered streaks. Center Size and Center Intensity shape how strong and bright that central glow feels, and Density controls how solid or transparent the rays look.
You can also use Speed — chill and ambient or full-on energy. And if you need to shift things around, Offset X and Offset Y let you nudge the whole effect wherever you want it. Just turn on Preview to watch it animate live while you tweak.
Want to make it your own? There’s a ton you can customize. The Background sets the mood — go soft and airy or dark and moody. Stack up colors in Ray Colors to build beautiful gradients or bold color bursts. Dial up the Frequency for more beams, or increase Spotty to break them up into scattered streaks. Center Size and Center Intensity shape how strong and bright that central glow feels, and Density controls how solid or transparent the rays look.
You can also use Speed — chill and ambient or full-on energy. And if you need to shift things around, Offset X and Offset Y let you nudge the whole effect wherever you want it. Just turn on Preview to watch it animate live while you tweak.
Want to make it your own? There’s a ton you can customize. The Background sets the mood — go soft and airy or dark and moody. Stack up colors in Ray Colors to build beautiful gradients or bold color bursts. Dial up the Frequency for more beams, or increase Spotty to break them up into scattered streaks. Center Size and Center Intensity shape how strong and bright that central glow feels, and Density controls how solid or transparent the rays look.
You can also use Speed — chill and ambient or full-on energy. And if you need to shift things around, Offset X and Offset Y let you nudge the whole effect wherever you want it. Just turn on Preview to watch it animate live while you tweak.
Custom properties in the god rays component in Framer.
Custom properties in the god rays component in Framer.
Custom properties in the god rays component in Framer.
