Animated Prism Effect in Framer

Copy component

Animated Prism Effect in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Animated Prism Effect in Framer

This is an animated prism effect component for Framer (brought over from React Bits), which adds colorful, shifting prism animations to any layer. Simply drop it into your project and customize the colors, speed, and intensity to make your content pop.

image of Nandi Muzsik
profile image of Emanuele
image of Prianca S.
Image of David

Created by

,

,

and

Animated prism effect with glowing light rays
Animated prism effect with glowing light rays
Animated prism effect with glowing light rays

About the resource

To use this animated prism effect component, simply paste it into your Framer project and customize it to suit your design needs. You can select the type of animation such as rotate, 3D rotate, or hover and turn on preview mode to see the effect in action. The component offers a variety of controls for fine tuning the look and behavior including intensity, speed, distortion, ray count, offset, blend mode, quality, and maximum FPS. This lets you create everything from subtle shimmering effects to bold, dynamic prism animations that make your content stand out.

About the resource

To use this animated prism effect component, simply paste it into your Framer project and customize it to suit your design needs. You can select the type of animation such as rotate, 3D rotate, or hover and turn on preview mode to see the effect in action. The component offers a variety of controls for fine tuning the look and behavior including intensity, speed, distortion, ray count, offset, blend mode, quality, and maximum FPS. This lets you create everything from subtle shimmering effects to bold, dynamic prism animations that make your content stand out.

About the resource

To use this animated prism effect component, simply paste it into your Framer project and customize it to suit your design needs. You can select the type of animation such as rotate, 3D rotate, or hover and turn on preview mode to see the effect in action. The component offers a variety of controls for fine tuning the look and behavior including intensity, speed, distortion, ray count, offset, blend mode, quality, and maximum FPS. This lets you create everything from subtle shimmering effects to bold, dynamic prism animations that make your content stand out.

Animated prism effect settings panel with controls

The properties of the animated prism effect in Framer.

Animated prism effect settings panel with controls

The properties of the animated prism effect in Framer.

Animated prism effect settings panel with controls

The properties of the animated prism effect in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • swipe cards in framer

    Swipe Card Stack Component in Framer

    Component

    swipe cards in framer

    Swipe Card Stack Component in Framer

    Component

    swipe cards in framer

    Swipe Card Stack Component in Framer

    Component

  • interactive hover card

    Case Study Hover Interaction in Framer

    Component

    interactive hover card

    Case Study Hover Interaction in Framer

    Component

    interactive hover card

    Case Study Hover Interaction in Framer

    Component