---
title: "Blueprint Motion  — Free Framer component · Best of Framer"
description: "Free Framer component · by Abishek M · Buttons. Animated \"drawing\" border button"
canonical: "https://framer.elliotli.dev/component/blueprint-motion"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Blueprint Motion

# Blueprint Motion

Animated "drawing" border button

[View on Framer](https://framer.com/marketplace/components/blueprint-motion/?via=elliot-li)

![Blueprint Motion  preview image 1](https://framer.elliotli.dev/og/component/blueprint-motion/e1e8f2942fc67520/1600x1200.jpg)

## Summary

Animated "drawing" border button

## Description

### Bring your UI to life with Motion

The **Blueprint Motion** button is more than just a call-to-action—it’s an interactive experience. Built using precision CSS animation logic, the button "sketches" itself into existence when a user hovers, providing a high-end feel for portfolios, SaaS landing pages, and creative agencies.

### ✨ Interactive Features

-   **Clockwise Drawing Border:** Staggered line animations that follow a precise clockwise path upon interaction.
    
-   **Kinetic "Flying Dots":** Four perimeter dots that launch from the center to the corners on hover, creating a 3D depth effect.
    
-   **Organic Scaling:** Features a unique "stretched" border-radius ($30\\% / 200\\%$) that shifts to a standard rounded rectangle on hover for a satisfying morph effect.
    
-   **Icon Library Support:** Fully integrated with Framer's Component Instance control—swap in any icon from Phosphor, Lucide, or your custom sets.
    

### 🎨 Full Customization

No coding required. Use the Framer properties panel to adjust:

-   **Primary Accent:** Control the main button color and the transparent background "glow" effect.
    
-   **Blueprint Details:** Independently style the drawing lines and the kinetic dots.
    
-   **Typography:** Change the font family and size to match your brand's style guide.
    
-   **Flexible Sizing:** Adjustable width and height with "visible overflow" to ensure animations are never clipped.
    

### 🚀 Setup

1.  Add the component to your Framer project.
    
2.  Type your desired **Google Font** name into the Font Family field.
    
3.  Choose your **Icon** from your project's assets or an icon library.
    
4.  Adjust colors and watch the magic happen in Preview mode!
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7465

## Details

- **Author**: Abishek M
- **Published**: 2026-05-29
- **Updated**: 2026-05-29
- **Added**: 2026-05-15
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow