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

Pixel Scan

Pixel Scan Icon
Pixel Scan Icon
Pixel Scan Icon

Pixel 为你的作品带来数字解构与像素化效果。观众将看到像素在画面上扫过,见证媒体内容的重塑。Pixel 适用于艺术、技术、科技等作品主题,通过调整像素数量、随机程度和出现方向,你可以创造出从细腻到粗犷的视觉风格。

Copy Component

属性控制

Pixel (Number: 1 - 200)

像素的数量。较大的值会产生更多更小的像素,创造更精细的像素化效果。

Randomness (Number: 0 - 1)

像素出现的随机强度。较大的值会使像素在出现时更散乱。

Direction (Enum: T/R/B/L/TL/TR/BL/BR)

像素出现的起点。选项包括上(T)、右(R)、下(B)、左(L)、左上(TL)、右上(TR)、左下(BL)、右下(BR)。

Scale Effect (Boolean: Yes/No)

启用或禁用缩放效果。启用后,每个像素动画完成后会对媒体内容进行缩放。注意:缩放基于媒体的原始比例进行,如果容器比例与媒体比例不同,则会导致画面裁剪。

Scale Value (Number: 0 - 2)

媒体缩放的倍数。仅在 Scale Effect 为 Yes 时可用。

Color: Blend (Boolean: Yes/No)

颜色混合。启用后,像素颜色将与原始图像颜色进行混合。

Color: Tint (Boolean: Yes/No)

像素着色。启用后,可以在 Color 中配置像素的颜色。

Color: Color (Color)

像素颜色。仅在 Tint 为 Yes 时可用。

Brightness (Number: 0 - 10)

像素的最大亮度。控制像素在动画过程中能够达到的最大亮度,影响整体视觉效果的明亮度和对比度。

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

Animation Start (EventHandler: onAnimationStart)

当动画开始时触发事件。

Animation End (EventHandler: onAnimationEnd)

当动画结束时触发事件。

Video End (EventHandler: onVideoEnd)

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

Media Loaded (EventHandler: onMediaload)

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

Pixel Scan
Component
Media

Image

Video

Image

Image

Size

Fill

Pixel
Radomness
Direction
Scale Effect

Yes

No

Color

Color

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Pixel Scan
Component
Media

Image

Video

Image

Image

Size

Fill

Pixel
Radomness
Direction
Scale Effect

Yes

No

Color

Color

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Pixel Scan
Component
Media

Image

Video

Image

Image

Size

Fill

Pixel
Radomness
Direction
Scale Effect

Yes

No

Color

Color

Animate

Appear

Transition

Spring

Variant 1

Variant 2

特性

随心使用你的图片或视频

使用滚动动画来触发效果

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

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

跟随颜色主题切换媒体

兼容 Framer 的过渡控制器

下一个

Variant 1

Variant 2

Video

by

Alena Darmel

Variant 1

Variant 2

Video

by

Alena Darmel

Reveals cool WebGL Effects Components for Framer.