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 brings a digital deconstruction and pixelation effect to your work. The audience will see pixels sweep across the screen, witnessing the reconstruction of the media content. Pixel is suitable for artistic, technical, and technological themes. By adjusting the number of pixels, randomness, and direction of appearance, you can create visual styles ranging from delicate to bold.

Copy Component

Property Control

Pixel (Number: 1 - 200)

The number of pixels. Larger values will generate more and smaller pixels, creating a more refined pixelation effect.

Randomness (Number: 0 - 1)

The random intensity of pixel appearance. Larger values will make the pixels appear more scattered.

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

The starting point for the pixels to appear. Options include Top (T), Right (R), Bottom (B), Left (L), Top Left (TL), Top Right (TR), Bottom Left (BL), Bottom Right (BR).

Scale Effect (Boolean: Yes/No)

Enable or disable the scaling effect. When enabled, the media content will be scaled after each pixel animation is complete. Note: Scaling is based on the original aspect ratio of the media. If the container aspect ratio is different from the media aspect ratio, it will result in image cropping.

Scale Value (Number: 0 - 2)

The scaling factor of the media. Only available when "Scale Effect" is "Yes".

Color: Blend (Boolean: Yes/No)

Color blending. When enabled, the pixel color will be blended with the original image color.

Color: Tint (Boolean: Yes/No)

Pixel tinting. When enabled, you can configure the color of the pixels in "Color".

Color: Color (Color)

The pixel color. Only available when "Tint" is "Yes".

Brightness (Number: 0 - 10)

The maximum brightness of the pixels. Controls the maximum brightness that pixels can reach during the animation, affecting the overall brightness and contrast of the visual 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.

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

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.

Variant 1

Variant 2

Video

by

Alena Darmel

Variant 1

Variant 2

Video

by

Alena Darmel

Reveals cool WebGL Effects Components for Framer.