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

Blocks

Blocks Icon
Blocks Icon
Blocks Icon

Blocks deconstructs your work into modern block art. It presents the image in a precise grid, breaking it down into countless vibrant blocks that illuminate one by one, ultimately constructing the complete artwork. This unique construction process is not only suitable for elegant, technological, and technical themes, but also adds a futuristic and refined feel to any type of work.

Copy Component

Property Control

Column (Number: 0 - 200)

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

Style: Color (Color)

The color of the blocks.

Style: Random (Boolean: Yes/No)

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

Style: Brightness (Number: 0 - 2)

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

Style: Blur (Number: 0 - 10)

The blur intensity of the blocks.

Direction (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.

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.

Blocks
Component
Media

Image

Video

Image

Image

Size

Fill

Column
Style

1.2, 5

Direction
Animate

Appear

Transition

Spring

Variant 1

Blocks
Component
Media

Image

Video

Image

Image

Size

Fill

Column
Style

1.2, 5

Direction
Animate

Appear

Transition

Spring

Variant 1

Blocks
Component
Media

Image

Video

Image

Image

Size

Fill

Column
Style

1.2, 5

Direction
Animate

Appear

Transition

Spring

Variant 1

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.

Maintain Effects
after the transition.

Variant 1

Video

by

StefWithAnF

Variant 1

Video

by

StefWithAnF

Reveals cool WebGL Effects Components for Framer.