$5

Sunlight

Animated rays of light

Details

Category

Last update

Suggest improvement or report a bug

Sunlight — Framer component

About this Component

Animated rays of light radiating out from a central glow — up to 5 colors, full control over ray density, length, and brightness, plus a separate bloom overlay. Great for dramatic hero backgrounds, logo reveals, or sun-shaft/energy-burst effects.

Features

  • Up to 5 ray colors — build multi-tone light rays instead of a flat single-color beam

  • Bloom overlay — blend in a separate bloom color for extra glow and atmosphere

  • Density & Spotty controls — set how many rays appear and how long they stretch out

  • Central glow — adjust Mid Size and Mid Intensity to control the size and brightness of the glowing core

  • Intensity control — dial the overall visibility and strength of the rays

  • Fully animated — smooth, continuous motion by default, with full control over speed

  • Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

  • Colors

  • Background Color

  • Bloom Color

  • Bloom

  • Intensity

  • Density

  • Spotty

  • Mid Size

  • Mid Intensity

  • Speed

  • Scale / Rotation / Offset

How to use

  1. Add the God Rays component onto your canvas

  2. Add up to 5 colors to build your ray palette

  3. Adjust Density and Spotty to set how many rays appear and how far they reach

  4. Set Mid Size and Mid Intensity to shape the central glow

  5. Dial in Bloom and Bloom Color for extra atmospheric glow

  6. Set Speed to control animation pace, or set it to 0 to freeze on a single frame

Shader powered by Paper Shaders.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.