Reeded Glass

Reeded Glass brings a unique texture and depth to your work. It cleverly simulates the fine, elongated stripe pattern of reeded glass, covering your creation with a semi-transparent filter that gives the image a hazy yet layered visual effect. Reeded Glass is particularly suitable for creating intimate, nostalgic, or dreamlike atmospheres, making your work more delicate and touching, leaving a profound and unforgettable impression on viewers.

Copy Component

Component Copied

Property Controls

Reeded Glass
Component
Media

Image

Video

Image

Image

Size

Fill

Stripe
Distortion
Animate

Appear

Transition

Spring

Reeded Glass
Component
Media

Image

Video

Image

Image

Size

Fill

Stripe
Distortion
Animate

Appear

Transition

Spring

Reeded Glass
Component
Media

Image

Video

Image

Image

Size

Fill

Stripe
Distortion
Animate

Appear

Transition

Spring

Features

Image & Video

The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.

Scroll Animation

The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.

Scroll Transform

The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.

Target Animation

The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.

Light/Dark Theme Media

The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.

Custom Transition

The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.

Image & Video

The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.

Scroll Animation

The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.

Scroll Transform

The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.

Target Animation

The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.

Light/Dark Theme Media

The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.

Custom Transition

The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.

Image & Video

The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.

Scroll Animation

The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.

Scroll Transform

The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.

Target Animation

The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.

Light/Dark Theme Media

The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.

Custom Transition

The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.

Property Specification

Stripe (0 - 100)

Controls the number of reeded glass stripes. Higher values create a denser texture.

Distortion (0 - 1)

Adjusts the distortion intensity, affecting the prominence of glass stripes and the distortion effect on media content. Higher values make the glass stripes more pronounced.

Animate: Fade In (Yes/No)

Enables or disables the fade-in effect. When enabled, it adds a transparency animation based on distortion changes to the effect.

Explore the next effector.

Pixel Scan

Pixel Scan Effect Cover
Pixel Scan Effect Cover
Pixel Scan Effect Cover

Reveals cool WebGL Effects Components for Framer.