Retro

Retro introduces a nostalgic pixelation effect. By simulating old-style display modes, it reveals visuals in a pixel sweep, evoking a simple yet nuanced retro animation style.

Property Controls

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.

Origin (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).

Advance: Blend (Boolean: Yes/No)

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

Advance: Tint (Boolean: Yes/No)

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

Advance: 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

Distortion
Component
Media

Image

Video

Image
Upload
Fit
Pixel
Randomness
Origin
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Blend

Yes

No

Tint

Yes

No

Block Shift
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Progress
Randomness
Brightness
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Retro
Retro
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Pixel
Randomness
Origin
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Blend

Yes

No

Tint

Yes

No

Block Shift
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Progress
Randomness
Brightness
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Retro
Retro
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Pixel
Randomness
Origin
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Blend

Yes

No

Tint

Yes

No

Block Shift
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Progress
Randomness
Brightness
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Retro
Retro

Retro

Retro introduces a nostalgic pixelation effect. By simulating old-style display modes, it reveals visuals in a pixel sweep, evoking a simple yet nuanced retro animation style.

Get Start

Learn about the properties, controls, and usages.

Troubleshooting

Check out our support page or contact us for solutions.

Reveals Cool WebGL Effects Components for Framer - Retro

Stay updated.

Stay updated.

Stay updated.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

© 2025 Reveals. All rights reserved.

.framer-styles-preset-s5v84h { cursor: default !important; pointer-events: none; }