51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T8c7,

Elevate your UI with Liquid Magic

Add a touch of magic to your Framer projects with this high-performance, interactive button component. Designed with precision physics and fluid motion, it provides a tactile experience that goes beyond standard web buttons.

✨ Key Features

Fluid Liquid Physics: The button features a unique skewed, rotating container that feels organic and alive.
Staggered Text Animations: Every character is treated as an individual element, creating a beautiful "fly-away" effect when clicked.
Interactive Success State: Built-in logic that smoothly transitions from your call-to-action to a custom "Success" or "Thank You" message after a short delay.
Dynamic Glow & Shadows: Multi-layered shadows and a sweeping "light-streak" outline that activates on hover.
SVG Splash Effects: Includes integrated vector splash animations that trigger on interaction.

🎨 Full Control at Your Fingertips

This component is built to be flexible. You don't need to touch a single line of code to make it yours:

Custom Success Message: Toggle between your initial text and a secondary message for post-click interaction.
5-Point Color Gradient: Fine-tune the liquid look using five distinct primary color slots.
Shadow & Text Controls: Easily adjust the depth of the button and the color/size of your typography.
Adaptive Sizing: Fully responsive width, height, and border-radius controls.

🚀 How to Use

Drag the component onto your canvas.
Update the Text and Success Text in the properties panel.
Match the Primary Colors to your brand’s palette.
Set the Font Family to your project's primary typeface.

Perfect for: Landing pages, waitlists, premium SaaS dashboards, and high-conversion "Join" or "Submit" actions.

53:T7d8,

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

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

54:T71d,

The Liquid Kinetic Nav: Key Features

Apple-Inspired Liquid Aesthetic: Features deep, multi-layered glassmorphism powered by GPU-accelerated backdrop filters for a premium "wet" look.
Advanced Kinetic Magnetics: Nav items exert a subtle magnetic pull on the cursor using custom spring physics, creating a tactile and responsive interface.
Haptic Interaction Feedback: Provides physical confirmation on click with a haptic scale-down effect (0.98x), making digital interactions feel grounded.
Thumb-Zone Optimized Mobile Layout: Overhauls traditional mobile menus with a floating expansion system designed for one-handed ergonomics.
WCAG 2.1 AA Accessibility: Includes built-in contrast logic that automatically adjusts text and icon colors to ensure legibility in any theme.
Performance-Aware Rendering: Features a "Low-Power Mode" toggle that scales backdrop blur on mobile devices to save battery while maintaining high frame rates.
Full Component Control: Complete customization via the Framer sidebar, including magnetic strength, spring stiffness, haptic intensity, and corner radius.
Dynamic Lucide Icon Integration: Supports the entire Lucide icon library—simply type the icon name to update your navigation visuals.
Native Framer Linking: Each item supports native link properties for seamless connection to internal project pages or external URLs.
Constraint-Ready Design: Built-in logic handles long text labels gracefully with automatic ellipsis to prevent layout breaks.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-67af7a65-013d-4fc2-867f-9bb91d154afc-all:/unified/creator/67af7a65-013d-4fc2-867f-9bb91d154afc/activity/":[{"data":[{"id":"019ed967-3467-7408-9100-c891cfde3194","type":"comment.created","target":{"type":"post","id":"019ed672-af92-7003-87d2-26a47202742e","preview":"FrameMon — spin, tear, pull, collect. \nA card-pack-opening experience built with Framer Agents. Pull a gold legendary and pay one like ♥","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FrameMon — spin, tear, pull, collect. "}]},{"type":"paragraph","content":[{"type":"text","text":"A card-pack-opening experience built with Framer Agents. Pull a gold legendary and pay one like "},{"type":"emoji","attrs":{"name":"hearts","emoji":"♥"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed672-af92-7003-87d2-26a47202742e","like":{"count":118,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ed967-3453-7768-b79c-3784441325c2","preview":"Smooth and cool...I love this ❤","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth and cool...I love this "},{"type":"emoji","attrs":{"name":"heart","emoji":"❤"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed672-af92-7003-87d2-26a47202742e","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed967-3453-7768-b79c-3784441325c2"},"repost":null}},"actors":[{"id":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","slug":"abishek","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T06:24:40.038Z","latestAt":"2026-06-18T06:24:40.038Z"},{"id":"019ed966-9760-745a-a71f-81406a9f5d9c","type":"post.liked","target":{"type":"post","id":"019ed672-af92-7003-87d2-26a47202742e","preview":"FrameMon — spin, tear, pull, collect. \nA card-pack-opening experience built with Framer Agents. Pull a gold legendary and pay one like ♥","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FrameMon — spin, tear, pull, collect. "}]},{"type":"paragraph","content":[{"type":"text","text":"A card-pack-opening experience built with Framer Agents. Pull a gold legendary and pay one like "},{"type":"emoji","attrs":{"name":"hearts","emoji":"♥"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed672-af92-7003-87d2-26a47202742e","like":{"count":118,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","slug":"abishek","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T06:23:59.836Z","latestAt":"2026-06-18T06:23:59.836Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:67af7a65-013d-4fc2-867f-9bb91d154afc:/unified/posts/?creator=67af7a65-013d-4fc2-867f-9bb91d154afc&with=reposts":[{"data":[{"id":"019e747e-f7c8-71e4-bffe-8e6c2e00cf61","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"l7uqg83JbistIsXyTCpE","resolved":true,"title":"Magic 3D Button","body":"$52","bodyJson":null,"introduction":"High-end animated 3D magic button ","slug":"magic-3d-button","author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/l7uqg83JbistIsXyTCpE/magic-3d-button-Dma2RIlTedFdCPavqJJIMD0lV3yYC6","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-15T18:52:18.223Z","updatedAt":"2026-05-29T16:07:27.686Z","publishedAt":"2026-05-29T16:08:58.568Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Buttton-85BBsI.js@uTGjjfpDk4tEUEhvcWRj","previewUrl":"https://brilliant-mango-830562.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"uTGjjfpDk4tEUEhvcWRj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-29T16:08:58.568Z","updatedAt":"2026-05-29T16:08:58.568Z"},{"id":"019e747e-be9f-7be9-b3d7-6c8f0f098b26","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"wJScxHYk0zDlgQyxRU9O","resolved":true,"title":"Blueprint Motion ","body":"$53","bodyJson":null,"introduction":"Animated \"drawing\" border button","slug":"blueprint-motion","author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/wJScxHYk0zDlgQyxRU9O/blueprint-motion-UhsXqAST00QkvxhBQ1nKEO4nucNxMp","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-15T19:01:38.211Z","updatedAt":"2026-05-29T16:07:45.484Z","publishedAt":"2026-05-29T16:08:43.935Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Button-1-tVoRW3.js@yNr5PSejJ1gYQEMgVCFl","previewUrl":"https://methodical-velociraptor-674371.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"yNr5PSejJ1gYQEMgVCFl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-29T16:08:43.935Z","updatedAt":"2026-05-29T16:08:43.935Z"},{"id":"019e7478-82c1-7905-a9bc-6cbdc302bcf2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4IvfbPQ370EcPJVGhYP5","resolved":true,"title":"Liquid Kinetic Nav","body":"$54","bodyJson":null,"introduction":"Apple-inspired liquid glass navigation","slug":"liquid-kinetic-nav","author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/4IvfbPQ370EcPJVGhYP5/liquid-kinetic-nav-lrh95cx5jPmkiqKikLEjQDTwnUu1fP","metadata":{"tint":{"h":0,"s":26,"l":63},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-15T10:40:31.320Z","updatedAt":"2026-05-30T12:45:13.826Z","publishedAt":"2026-05-29T16:01:55.393Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/KinecticNav-mkvAZI.js@MeTM9VMVgkaDCTgXaBCw","previewUrl":"https://amazing-window-399522.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"MeTM9VMVgkaDCTgXaBCw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":24,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-29T16:01:55.393Z","updatedAt":"2026-05-29T16:01:55.393Z"},{"id":"019e26b8-e27e-7df2-b997-ec8875d85534","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"QpP2BfoLS4ci6Xd87vAG","resolved":true,"title":"Gallery_with_filter","body":"

Premium cinematic gallery component built for modern brands, portfolios, tattoo studios, photography showcases, fashion products, creative agencies, and visual-first businesses. Designed with smooth hover interactions, immersive lightbox navigation, responsive grid layouts, smart category filtering, keyboard accessibility, and high-performance animations for a premium browsing experience inside Framer.

This component helps creators showcase visual content in a more engaging and professional way while maintaining fast performance and clean UX across desktop and mobile devices. Perfect for real-world product presentations, portfolio websites, agency showcases, creative campaigns, and image-heavy experiences.

","bodyJson":null,"introduction":"Cinematic portfolio gallery component","slug":"gallery-with-filter","author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/QpP2BfoLS4ci6Xd87vAG/gallery-with-filter-eNMOIsNyzzNK4X1zji98SUIrLslvGS","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-10T20:42:35.385Z","updatedAt":"2026-05-23T07:12:52.136Z","publishedAt":"2026-05-14T13:41:51.358Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Gallery-with-filter-option-gMK3aq.js@PIsajBY5GxSQSa7wcqFU","previewUrl":"https://vast-approach-769040.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"PIsajBY5GxSQSa7wcqFU","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":30,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T13:41:51.358Z","updatedAt":"2026-05-14T13:41:51.358Z"},{"id":"019dfef4-ceaf-7de6-9192-77a3b545eec7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"15321","resolved":true,"title":"SquareNFT","body":null,"bodyJson":null,"introduction":"SquareNFT is a web 3 real estate project","slug":"squarenft","author":{"framerUserId":"67af7a65-013d-4fc2-867f-9bb91d154afc","name":"Abishek M","slug":"abishek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/48872/avatar-X9okvFdHrUqSPhUvC4rw7GMbWnx5m7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/sites/15321/thumbnail-D1rzxv9fn35Jd2F2xbGCu2w2Uf5InI.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-06T20:22:29.829Z","updatedAt":"2026-05-06T20:22:29.829Z","publishedAt":"2026-05-06T20:22:29.807Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://www.squarenft.com/","categories":[{"id":"b3738841-4fce-4e5d-af4b-034ff1decdba","name":"Real Estate","slug":"real-estate"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T20:22:29.807Z","updatedAt":"2026-05-06T20:22:29.807Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]