Guide
- Animated
- God rays
Guide
- Animated
- God rays
Guide
- Animated
- God rays
How to Create an Animated God Rays Effect in Framer
There’s a hidden trick to making your website feel alive, like it’s breathing light. In this Framer blog, you’ll learn how to instantly flood your canvas with cinematic glow, shifting colors, and soft, animated rays. With just a few clicks, you can shape the mood, set the tone, and create a visual experience that feels otherworldly.
Posted by
Nandi
Table of contents
Step 1: Drop it in
First things first, copy the God Rays Component into your Framer project. Then do this:
Set the component as a background layer.
Pin all sides (top, bottom, left, right) to 0.
Boom. Your entire canvas is now glowing.
You’ll instantly get this full-screen animated light effect that’s already doing a lot. But the best part? You can fully customize how it looks.
Step 2: Pick a preset
Step 1: Drop it in
First things first, copy the God Rays Component into your Framer project. Then do this:
Set the component as a background layer.
Pin all sides (top, bottom, left, right) to 0.
Boom. Your entire canvas is now glowing.
You’ll instantly get this full-screen animated light effect that’s already doing a lot. But the best part? You can fully customize how it looks.
Step 2: Pick a preset
Step 1: Drop it in
First things first, copy the God Rays Component into your Framer project. Then do this:
Set the component as a background layer.
Pin all sides (top, bottom, left, right) to 0.
Boom. Your entire canvas is now glowing.
You’ll instantly get this full-screen animated light effect that’s already doing a lot. But the best part? You can fully customize how it looks.
Step 2: Pick a preset
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.
When you drop the component in, you’ll see a Preset Selector with options like:
Time Travel
Kinetic Field
Ocean
Flowers
Highway
Each preset has its own vibe, some are moody and cinematic, others are energetic and abstract. It’s an easy way to set the tone in one click. Want that hazy sunlight look? Go for Ocean. Need something trippy for your landing page? Try Kinetic Field.
When you drop the component in, you’ll see a Preset Selector with options like:
Time Travel
Kinetic Field
Ocean
Flowers
Highway
Each preset has its own vibe, some are moody and cinematic, others are energetic and abstract. It’s an easy way to set the tone in one click. Want that hazy sunlight look? Go for Ocean. Need something trippy for your landing page? Try Kinetic Field.
When you drop the component in, you’ll see a Preset Selector with options like:
Time Travel
Kinetic Field
Ocean
Flowers
Highway
Each preset has its own vibe, some are moody and cinematic, others are energetic and abstract. It’s an easy way to set the tone in one click. Want that hazy sunlight look? Go for Ocean. Need something trippy for your landing page? Try Kinetic Field.
God rays component variants.
God rays component variants.
God rays component variants.
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.
Once you’ve got a base look, it’s time to dial things in. The component gives you a ton of properties to play with. Here’s a breakdown of what you can tweak:
Ray colors: Stack up multiple colors to create bold gradients or soft transitions. This controls the actual color of the rays.
Frequency: This controls how many rays appear on screen. Crank it up for a dense field or lower it for minimal, moody beams.
Spotty: Add texture. Increase this to break up the rays into scattered streaks — great for that ethereal, glowing dust look.
Center size & center intensity: These shape the core light source in the middle. Want a bright, punchy glow? Turn them both up.
Density: This controls how solid or transparent the rays are. Lighter density = airier and more ambient. Higher density = more dramatic.
Speed: How fast do you want the rays to move? Keep it slow for background ambiance. Speed it up for energy and motion.
Offset X & Y: Use these to shift the entire effect horizontally or vertically if it’s not quite where you want it.
And here’s the best part, turn on Preview, and everything animates in real-time while you tweak.
Final tip
This component shines (literally) as a background layer. Use it behind text, components, or full sections to give your layout depth and mood. It works especially well when paired with dark themes, gradients, or minimal UIs, letting the light do the talking.
Once you’ve got a base look, it’s time to dial things in. The component gives you a ton of properties to play with. Here’s a breakdown of what you can tweak:
Ray colors: Stack up multiple colors to create bold gradients or soft transitions. This controls the actual color of the rays.
Frequency: This controls how many rays appear on screen. Crank it up for a dense field or lower it for minimal, moody beams.
Spotty: Add texture. Increase this to break up the rays into scattered streaks — great for that ethereal, glowing dust look.
Center size & center intensity: These shape the core light source in the middle. Want a bright, punchy glow? Turn them both up.
Density: This controls how solid or transparent the rays are. Lighter density = airier and more ambient. Higher density = more dramatic.
Speed: How fast do you want the rays to move? Keep it slow for background ambiance. Speed it up for energy and motion.
Offset X & Y: Use these to shift the entire effect horizontally or vertically if it’s not quite where you want it.
And here’s the best part, turn on Preview, and everything animates in real-time while you tweak.
Final tip
This component shines (literally) as a background layer. Use it behind text, components, or full sections to give your layout depth and mood. It works especially well when paired with dark themes, gradients, or minimal UIs, letting the light do the talking.
Once you’ve got a base look, it’s time to dial things in. The component gives you a ton of properties to play with. Here’s a breakdown of what you can tweak:
Ray colors: Stack up multiple colors to create bold gradients or soft transitions. This controls the actual color of the rays.
Frequency: This controls how many rays appear on screen. Crank it up for a dense field or lower it for minimal, moody beams.
Spotty: Add texture. Increase this to break up the rays into scattered streaks — great for that ethereal, glowing dust look.
Center size & center intensity: These shape the core light source in the middle. Want a bright, punchy glow? Turn them both up.
Density: This controls how solid or transparent the rays are. Lighter density = airier and more ambient. Higher density = more dramatic.
Speed: How fast do you want the rays to move? Keep it slow for background ambiance. Speed it up for energy and motion.
Offset X & Y: Use these to shift the entire effect horizontally or vertically if it’s not quite where you want it.
And here’s the best part, turn on Preview, and everything animates in real-time while you tweak.
Final tip
This component shines (literally) as a background layer. Use it behind text, components, or full sections to give your layout depth and mood. It works especially well when paired with dark themes, gradients, or minimal UIs, letting the light do the talking.
