Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Reeded Glass

Reeded Glass Icon
Reeded Glass Icon
Reeded Glass Icon

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

Property Control

Stripe (Number: 0 - 100)

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

Distortion (Number: 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.

Advance: Move (Boolean: Yes/No)

Movement effect. When enabled, the distortion will be accompanied by a move effect as the animation progresses.

Advance: Speed (Number: 0 - 1)

The speed of the movement. Larger values will make the movement faster.

Advance: Keep Distorting (Boolean: Yes/No)

Keep Distorting. When enabled, the distorting effect will no longer fade as the animation progresses.

Advance: Reverse (Boolean: Yes/No)

Reverse the movement. When enabled, the movement direction will be reversed, from left to right to right to left.

Advance: Fade In (Boolean: Yes/No)

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

The properties below will be available when you use the Nest component.

Animation Start (EventHandler: onAnimationStart)

Triggers the event when the animation starts.

Animation End (EventHandler: onAnimationEnd)

Triggered when the animation ends.

Video End (EventHandler: onVideoEnd)

Triggered when the video playback ends, this event will not be triggered when "Loop" is "Yes".

Media Loaded (EventHandler: onMediaload)

Triggered when the media is loaded.

Reeded Glass
Component
Media

Image

Video

Image

Image

Size

Fill

Stripe
Distortion
Angle
Refraction

Yes

No

Advance

Move

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Reeded Glass
Component
Media

Image

Video

Image

Image

Size

Fill

Stripe
Distortion
Angle
Refraction

Yes

No

Advance

Move

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Reeded Glass
Component
Media

Image

Video

Image

Image

Size

Fill

Stripe
Distortion
Angle
Refraction

Yes

No

Advance

Move

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Features

Use your favorite
Image & Video.

Trigger effects with Scroll Animation.

Interactive experience with Scroll Transform.

Interactive experience
with Scroll Transform.

Media changes with Color Themes.

Compatible with
Framer Transition Controls.

Maintain Effects
after the transition.

Variant 1

Variant 2

Photo

by

Ant Rozetsky

Variant 1

Variant 2

Photo

by

Ant Rozetsky

Reveals cool WebGL Effects Components for Framer.