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 为你的作品带来独特的质感与深度。它巧妙地模拟出长虹玻璃的细长条纹纹理,为你的作品覆盖上一层半透明滤镜,让画面呈现出朦胧而又富有层次的视觉效果。Reeded Glass 特别适用于营造私密、怀旧或者梦幻的氛围,让你的作品更加细腻动人,给人留下深刻而难忘的印象。

Copy Component

属性控制

Stripe (Number: 0 - 100) 

条纹的数量。较大的值会创造出更密集的条纹。

Distortion (Number: 0 - 1)

扭曲强度,影响玻璃条纹的弯曲程度和媒体内容的扭曲效果。

Angle (Number: 0 - 360) 

条纹的角度。

Refraction (Boolean: Yes/No) 

折射效果。当启用时,会为条纹的弯曲处添加光照。

Advance: Move (Boolean: Yes/No)

位移效果。当启用时,扭曲将在动画进行时伴随位移效果。

Advance: Speed (Number: 0 - 1)

位移的速度。较大的值会让移动速度更快。

Advance: Keep Distorting (Boolean: Yes/No)

保持扭曲。当启用时,扭曲效果将不再随着动画进行而逐渐变弱。

Advance: Reverse (Boolean: Yes/No)

反转位移。当启用时,位移方向将进行反转,从左至右反转为从右至左。

Advance: Fade In (Boolean: Yes/No) 

启用或禁用淡入效果。当启用时,会为画面添加一个基于弯曲深度的透明度动画。

将组件作为巢内组件时,可以使用以下属性。

Animation Start (EventHandler: onAnimationStart)

当动画开始时触发事件。

Animation End (EventHandler: onAnimationEnd)

当动画结束时触发事件。

Video End (EventHandler: onVideoEnd)

当视频播放结束时触发事件,当 Loop 为 Yes 时,这个事件不会被触发。

Media Loaded (EventHandler: onMediaload)

当媒体载入完成时触发事件。

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

特性

随心使用你的图片或视频

使用滚动动画来触发效果

使用滚动变换创建交互式体验

使用滚动变换创建交互式体验。

跟随颜色主题切换媒体

兼容 Framer 的过渡控制器

在任意进度停止动画

下一个

Variant 1

Variant 2

Photo

by

Ant Rozetsky

Variant 1

Variant 2

Photo

by

Ant Rozetsky

Reveals cool WebGL Effects Components for Framer.