Blocks

Blocks deconstructs your visuals into pixel-like cubes, then rebuilds them piece by piece. This vibrant block-by-block reveal creates a sense of futuristic construction, adding both precision and sophistication to your presentation.

Copy on Framer Market

View on Sandbox

Property Controls

Column (Number: 0 - 200)

The number of columns of blocks. The image will be filled with square blocks based on the number of columns.

Color (Color)

The color of the blocks.

Origin (Enum: T/R/B/L/TL/TR/BL/BR/Center/Edge)

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

Advance: Random (Boolean: Yes/No)

Random colorization. When enabled, it will randomly offset the color based on Style: Color.

Advance: Brightness (Number: 0 - 2)

The brightness of the blocks. Brightness varies based on Style: Colo.

Advance: Blur (Number: 0 - 10)

The blur intensity of the blocks.

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Column

Color

FFF3DB

Origin

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Random

Yes

Brightness

Blur

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Progress

Column

Brightness

Blur

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

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.

Blocks

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Column

Color

FFF3DB

Origin

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Random

Yes

Brightness

Blur

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Progress

Column

Brightness

Blur

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

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.

Blocks

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Column

Color

FFF3DB

Origin

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Random

Yes

Brightness

Blur

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Progress

Column

Brightness

Blur

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

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.

Blocks

Copy on Framer Market

Get Start

Learn about the properties, controls, and usages.

Check it out

Troubleshooting

Check out our support page or contact us for solutions.

Support

Glass

Distortion

Reveals Cool WebGL Effects Components for Framer - Blocks

Stay updated.

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

Home

Support

About

Source Code

Effects

CMS

Source Code

Source Code

Source Code