Blinking Dot Logos in Framer

Copy component

Blinking Dot Logos in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Blinking Dot Logos in Framer

These are some logos in Framer that have this nice blinking dot background. It's inspired by the effect seen on the whop.com or even the vercel.com website. Feel free to remix the project to see how it's built, or copy the component to your project.

image of Nandi Muzsik
image of Clement Lionne

Created by

Blinking Dot Background Logos in Framer
Blinking Dot Background Logos in Framer
Blinking Dot Background Logos in Framer
How To Use The Shimmer Dot Component in Framer

Related Lesson

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

Related Lesson

How To Use The Shimmer Dot Component in Framer

How To Use The Shimmer Dot Component in Framer

Related Lesson

How To Use The Shimmer Dot Component in Framer

About the resource

This demo leverages the shimmer dot component I created for Framer. It's an easy to use, highly customizable component that can be used to create these amazing-looking shimmer dot backgrounds.

The tricky part is: how do we make sure the dots are only visible on the area of the logo?

Well, we first get our logo in an SVG format. We need that because we are going to apply this SVG as a mask to our shimmer dot component.

About the resource

This demo leverages the shimmer dot component I created for Framer. It's an easy to use, highly customizable component that can be used to create these amazing-looking shimmer dot backgrounds.

The tricky part is: how do we make sure the dots are only visible on the area of the logo?

Well, we first get our logo in an SVG format. We need that because we are going to apply this SVG as a mask to our shimmer dot component.

About the resource

This demo leverages the shimmer dot component I created for Framer. It's an easy to use, highly customizable component that can be used to create these amazing-looking shimmer dot backgrounds.

The tricky part is: how do we make sure the dots are only visible on the area of the logo?

Well, we first get our logo in an SVG format. We need that because we are going to apply this SVG as a mask to our shimmer dot component.

masking the component

Masking the component in Framer.

masking the component

Masking the component in Framer.

masking the component

Masking the component in Framer.

As you can see in the image above, as soon as we apply the SVG as a mask to the component, the dots will only be visible on the area of the SVG mask.

Quick tip: apply the mask by going to the right panel, clicking the plus button next to styles, and selecting mask.

You can increase the visibility of the logo by adding a little outline with a separate SVG element, that you just drag and drop on top of the masked component.

As you can see in the image above, as soon as we apply the SVG as a mask to the component, the dots will only be visible on the area of the SVG mask.

Quick tip: apply the mask by going to the right panel, clicking the plus button next to styles, and selecting mask.

You can increase the visibility of the logo by adding a little outline with a separate SVG element, that you just drag and drop on top of the masked component.

As you can see in the image above, as soon as we apply the SVG as a mask to the component, the dots will only be visible on the area of the SVG mask.

Quick tip: apply the mask by going to the right panel, clicking the plus button next to styles, and selecting mask.

You can increase the visibility of the logo by adding a little outline with a separate SVG element, that you just drag and drop on top of the masked component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

    Morphing Tabs Interaction in Framer

    Component

    The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

    Morphing Tabs Interaction in Framer

    Component

    The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

    Morphing Tabs Interaction in Framer

    Component

  • Decorative store banner with icons and blue text pill design

    Magnetic Hover Component for Framer

    Component

    Decorative store banner with icons and blue text pill design

    Magnetic Hover Component for Framer

    Component

    Decorative store banner with icons and blue text pill design

    Magnetic Hover Component for Framer

    Component