Brush

Brush adds an artistic touch to your design. It allows you to use custom brush textures as masks and “paint” content onto the screen along preset paths, as if an artist were freely creating on canvas. This effect brings a unique, handcrafted style to your presentation.

Property Controls

Brush: Type (Enum: Preset/Custom)

The type of brush texture. Choose to use a preset texture or upload a custom one.

Brush: Texture (Enum/File)

The brush texture. When "Brush: Type" is "Preset", you can choose from six preset textures (Pen/Pencil/Watercolor/Oil/Star/Hexagon). When "Type" is "Custom", use the uploaded texture image.

* The texture image must be grayscale, with darker colors having higher transparency (pure black is completely transparent). The image dimensions will be used as the default size of the brush (256*256 recommended), and the format should be JPG or PNG.

Path: Type (Enum: Curve/Line/Spiral/Zigzag)

The drawing path. You can choose from four path types.

Path: Start Offset (Number: -1 - 1)

Path start point offset. When greater than 0, the starting point will shift to the right, otherwise to the left. Only available when "Path: Type" is "Curve/Line".

Path: End Offset (Number: -1 - 1)

Path endpoint offset. When less than 0, the endpoint will shift to the right, otherwise to the left. Only available when "Path: Type" is "Curve/Line".

Path: Swing (Number: -2 - 2)

The swing intensity of the curve. The closer the value is to 0, the smaller the curve swing. Only available when "Path: Type" is "Curve".

Path: Lap (Number: 0 - 10)

The number of laps of the spiral. Larger values may make the drawing animation discontinuous. Adjust "Scale" to ensure a continuous animation. Only available when "Path: Type" is "Spiral".

Path: Radius (Number: 0 - 1)

The radius of the spiral. Larger values may make the drawing animation discontinuous. Adjust "Scale" to ensure a continuous animation. Only available when "Path: Type" is "Spiral".

Path: Reverse (Boolean: Yes/No)

Reverse the direction of the spiral. When enabled, the spiral will be drawn from the outside in. Only available when "Path: Type" is "Spiral".

Path: Amplification (Number: 0 - 1)

The amplitude of the zigzag. Larger values will result in stronger oscillations. Only available when "Path: Type" is "Zigzag".

Path: Frequency (Number: 0 - 10)

The frequency of the zigzag. Larger values result in a denser zigzag effect. Only available when "Path: Type" is "Zigzag".

Path: Angle (Number: 0 - 360)

The angle of the path.

Advance: Density (Number: 0 - 100)

The drawing density of the path. The larger the value, the smoother the path drawing, but higher values will lead to significant performance degradation. Adjust "Scale" to achieve a smooth animation effect.

Advance: Scale (Number: 1 - 20)

The scaling factor of the brush texture. Larger values will display more of the original content and make the path animation smoother.

Advance: Skew Randomness (Number: 0 - 1)

The intensity of random skewing of the brush. Higher values will give the edges of the path a more natural variation.

Advance: Scale Randomness (Number: 0 - 1)

The intensity of random scaling of the brush. Higher values will give the path noticeable thickness variations.

Distortion
Component
Media

Image

Video

Image
Upload
Fit
Brush

Preset, Pen

Path

0, 0, 1, 90

Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Density
Higher Density affects performance more.
Scale
Skew Randomnes
Scale Randomnes
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Progress
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.
Brush
Type

Preset

Custom

Texture
Brush
Texture
Start Offset
End Offset
Swing
Angle
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Brush

Preset, Pen

Path

0, 0, 1, 90

Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Density
Higher Density affects performance more.
Scale
Skew Randomnes
Scale Randomnes
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Progress
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.
Brush
Type

Preset

Custom

Texture
Brush
Texture
Start Offset
End Offset
Swing
Angle
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Brush

Preset, Pen

Path

0, 0, 1, 90

Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Density
Higher Density affects performance more.
Scale
Skew Randomnes
Scale Randomnes
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Progress
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.
Brush
Type

Preset

Custom

Texture
Brush
Texture
Start Offset
End Offset
Swing
Angle

Brush

Brush adds an artistic touch to your design. It allows you to use custom brush textures as masks and “paint” content onto the screen along preset paths, as if an artist were freely creating on canvas. This effect brings a unique, handcrafted style to your presentation.

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 - Brush

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; }