5e:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 5f:T118b,

Gooey Liquid Button

Smooth Gooey Hover Button for Framer

Create playful liquid hover interactions directly inside Framer. This component blends the button label and icon using an SVG-powered gooey filter and separates them smoothly on hover.

Introduction

Watch the full tutorial and walkthrough here:

Overview

Gooey Liquid Button is a fully customizable Framer Code Component designed to add fluid hover interactions to your UI without writing animation code.

Using SVG filter technology, the icon and label visually merge at rest and smoothly separate on hover, creating a soft liquid motion effect.

The component integrates the Material Symbols icon library, giving you access to thousands of icons without importing external assets.

All visual parameters — including spacing, typography, icon appearance, and animation easing — can be adjusted directly from the Framer property panel.

Because the effect is SVG-based, the liquid blend works seamlessly on any background and remains crisp at any scale.

No external libraries, no plugins, and no setup required.

Key Features

Gooey liquid melt effect powered by SVG filters
Works on any background thanks to SVG rendering
Access to the Material Symbols icon library
Smooth icon separation animation on hover
Customizable typography, colors, and layout
Built-in easing presets and custom cubic-bezier animation support
Fully configurable through Framer property controls
Clean, production-ready implementation

Controls

What's Included

1 Main Code Component (GooeyLiquidButton)
Full Property Controls Panel
Future updates included

You can update anytime through:

Assets → Components inside Framer.

How to Use

Install the component from the Framer Marketplace
Insert the component from Assets → Components
Enter your button label text
Add a Material Symbols icon name
Adjust Default Gap to create the gooey overlap
Set Hover Gap to control the separation distance
Customize colors, typography, and animation

No additional setup required.

Best Practices

Use a negative Default Gap to create a stronger gooey merge
Use a positive Hover Gap for smooth icon separation
Rounded border radius enhances the liquid effect
Try different Material Symbols icons to match your design
Avoid extremely large gap values to maintain visual consistency

Refund Policy

Due to the digital nature of this product and immediate access after purchase, refunds are generally not provided.

If you encounter technical issues or believe something is not working as described, please contact me directly. I'm happy to help resolve any problems promptly.

Support

If you need help or have questions:

Contact: cobopso@gmail.comResponse time: 24–48 hours

I actively maintain and improve this component based on user feedback.

60:T16e2,

Halftone Text Effect

Turn your typography into a screen-print, risograph, or offset-press classic — directly in Framer.

A code component that renders any text as a customizable grid of halftone dots, recreating the coarse, hand-printed aesthetic of vintage print media.---------Live Tutorial

---------Overview

Halftone Text is a fully customizable Framer Code Component designed to help you add bold, editorial halftone typography to your projects without leaving Framer.

Built with SVG vector output and performance in mind, it converts any text into a grid of organic, size-varying dots — complete with edge falloff, ink roughness, and smooth noise variation — while keeping full control over every visual parameter directly from the properties panel.

All dots are rendered as a single SVG <path> element, meaning the output is infinitely crisp at any zoom level or screen DPI, and redraws stay fast even at high dot density.The text remains selectable and copyable for accessibility and SEO. No external libraries, no plugins, no setup required.

---------Key Features

Fully customizable via Framer property controls
SVG vector output — dots are sub-pixel crisp at any zoom, DPI, or export resolution
Single <path> rendering — all dots in one DOM node for fast, lag-free updates
Responsive — respects Framer REM Typography Base per breakpoint (Desktop / Tablet / Mobile)
Font-relative dot scaling — density stays visually consistent at any font size, no manual re-tuning needed across breakpoints
Clean, production-ready implementation
No third-party libraries required
Works with current Framer version (REM sizing support included)
Dot density, size, variation, and edge falloff controls
Smooth noise variation simulates organic ink deposit
Selectable and copyable text — invisible overlay preserves accessibility
Works on any background color with configurable dot and background colors
"On Effect" toggle — switch between halftone and normal text instantly

---------

Controls

Text

Text content (multi-line supported)

Font Style

Font family, size, weight, style
Line height, letter spacing
Text alignment (left / center / right)

Color

Dot Color
Background Color

Halftone Controls

Density — spacing between dots, font-relative (tighter = finer halftone)
Dot Size — base radius multiplier (larger = heavier ink fill)
Variation — organic size randomness using smooth noise
Roughness — random position jitter, simulates ink bleed

Toggle

On Effect — On renders the halftone SVG, Off renders clean normal text with the same font settings

---------

What's Included

1 Main Code Component (HalftoneText)
Full Property Controls Panel
Future updates included

You can stay on your current version or update anytime via Assets → Components inside Framer.

---------

How to Use

Install from the Framer Marketplace
Insert the component from Assets
Type your text in the Text field
Set your Font Style to match your design
Adjust Density and Dot Size to taste
Publish

No additional setup required.

---------

Best Practices

Bold, heavy fonts work best — thin fonts lose detail at lower densities
Lower Density + higher Dot Size gives a bold screen-print look
Higher Density + lower Dot Size gives a finer editorial halftone feel
Use the On Effect toggle during design to quickly compare halftone vs. clean text
For responsive layouts, set font size in rem — the component automatically responds to Framer's per-breakpoint REM Typography Base values
Keep Density ≥ 1.5 for best performance on long text blocks

---------

Refund Policy

Due to the digital nature of this product and immediate access after purchase, refunds are generally not provided.

If you encounter technical issues or believe something is not working as described, please contact me directly. I'm happy to help resolve any problems promptly.

---------

Support

If you need help or have questions:

Contact: cobopso@gmail.com
Response time: 24–48 hours

I actively maintain and improve this component based on feedback.

61:Ta67,

PathTextMotion - Animate Text Along Any Open Path

Turn static text into dynamic motion that follows any open SVG path — directly inside Framer.

Create eye-catching hero sections, interactive menus, loading animations, and scroll-driven storytelling in minutes.

🔛 Property Controls

🚀 Simple Setup

Add your SVG path
Customize text & styling
Choose trigger and animation
Fine-tune position and offset. Done 🎉.

✨ Why Choose PathTextMotion?

Full creative control without complex setup:

Multiple triggers: Auto, Hover, Click, Scroll
Complete typography control
Paste SVG code or upload a path
Custom easing + loop options
4 animation directions (Forward, Reverse, Ping-Pong, Continuous)

🎯 Perfect For:

Curved hero headlines
Interactive navigation
Circular loading text
Product-shaped text layouts
Scroll-based reveals
Creative portfolio typography

🔧 Built for Designers

Works with any open SVG path
REM-based responsive sizing
Custom cubic-bezier easing
Scroll-triggered animation
Clean error handling

💡 Pro Tips:

Use "Nearly Circle" paths for circular text effects
Set negative start positions for entrance animations
Combine with hover triggers for interactive elements
Use Scroll Animation for storytelling experiences
Hide the path for invisible guide animations

🎨 Flexible by Design

From subtle micro-interactions to bold motion typography, PathTextMotion adapts seamlessly to your Framer projects.

Create expressive motion — without writing complex animation logic.💬 Support & Updates

PathTextMotion is actively maintained and improved.

All future updates are included with your purchase.You’re free to remain on your current version or update anytime via Assets → Components in Framer.

For support or questions:📧 cobopso@gmail.com

62:Td03,

# Pencil Sketch Generator

Transform any image into realistic pencil sketches directly in Framer. This component uses advanced canvas algorithms to create authentic hand-drawn and scanned artwork effects without external tools or plugins.

## ✨ Key Features

Dual Algorithm System:

- Classic Pencil Sketch - Traditional hand-drawn effect with adjustable stroke, intensity, and texture

- Scanned Artwork (Color Dodge) - Realistic pencil-on-paper texture that mimics scanned documents

Full Customization:

- Adjustable intensity, stroke width, and length

- Noise level and contrast controls

- Brightness adjustments

- Border customization with color and width options

- Real-time preview as you adjust parameters

Professional Workflow Tools:

- Toggle between original and sketch instantly

- Responsive to any container size

- Maintains image aspect ratio

- Works with all standard image formats (JPG, PNG, WebP, SVG)

## 🎨 Perfect For

Designers & Creators:

- Portfolio storytelling and hover effects

- Process showcases from sketch to final

- Artistic brand assets and avatars

- Client presentations with clear draft/final states

Marketing & Content:

- Social media graphics with authentic feel

- Email campaign headers

- Blog post featured images

- Digital advertisements that stand out

Product & UI Design:

- Prototype annotations and explanations

- Onboarding tutorials with hand-drawn feel

- Trust-building scanned document effects

- Interactive design presentations

## 🚀 Quick Start

1. Add component to your Framer canvas

2. Upload an image or use a URL

3. Toggle "Show Sketch" to see the effect

4. Adjust parameters to match your vision

5. Use in prototypes with hover states or animations

## 💡 Pro Tips

- Use Pencil Sketch for traditional artistic effects

- Use Scanned Artwork for authentic pencil-on-paper look

- Create hover interactions that transform from sketch to polished design

- Save your favorite settings as variants for consistent reuse

- Add borders for a finished, framed artwork look

## 🔧 Technical Details

- Compatible with Framer 2024+

- No external dependencies

- Optimized performance with canvas API

- Responsive across all breakpoints

- Works on desktop and mobile

- Updates in real-time as you adjust parameters

## ❓ Support & Questions

This is an independent component created by me, Cobopso. If you have any questions or need help, email me directly at cobopso@gmail.com.

I typically respond within 24 hours and provide updates based on user feedback. Your purchase includes all future updates and improvements.

---

Install once, create endlessly. Transform your images into artistic sketches with just a few clicks.

5d:["$","$L5e",null,{"value":{"fallback":{"$inf$activity-creator-0420c7e8-1098-41c4-9a2e-5c8749a2dba7-all:/unified/creator/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:0420c7e8-1098-41c4-9a2e-5c8749a2dba7:/unified/posts/?creator=0420c7e8-1098-41c4-9a2e-5c8749a2dba7&with=reposts":[{"data":[{"id":"019ce7a8-d8e7-773e-902b-c27bf4fd3923","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OCpZLYuaUJjgb0Qz8VcK","resolved":true,"title":"Gooey Liquid Button","body":"$5f","bodyJson":null,"introduction":"Gooey SVG Button with Custom Animation","slug":"gooey-liquid-button","author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OCpZLYuaUJjgb0Qz8VcK/gooey-liquid-button-UBwutzxR8FD5Sv1pRT8DnuAnzMc6hV","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-10T09:18:21.221Z","updatedAt":"2026-03-13T14:19:55.571Z","publishedAt":"2026-03-13T14:45:28.423Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ambitious-types-464943.framer.app/","price":"5","paymentUrl":"https://cobopso.lemonsqueezy.com/checkout/buy/cba357be-8ca3-452c-b233-33fe6a148149","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"y934ut6Pv3aF1iPkP6vG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-13T14:45:28.423Z","updatedAt":"2026-03-13T14:45:28.423Z"},{"id":"019ca0b1-f42d-74e7-b590-531ee6173d09","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OcNnSFgoKxo4bxJzxgIH","resolved":true,"title":"Halftone Text Effect","body":"$60","bodyJson":null,"introduction":"Dynamic halftone typography effect","slug":"halftone-text-effect","author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OcNnSFgoKxo4bxJzxgIH/halftone-text-effect-84yekbWp4AFvTIIxtLhKueIZ7MSViB","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-20T20:26:31.325Z","updatedAt":"2026-02-27T18:42:01.037Z","publishedAt":"2026-02-27T20:02:22.893Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://halftone-text-creativesquadvn.framer.website/","price":"5","paymentUrl":"https://cobopso.lemonsqueezy.com/checkout/buy/1ce698eb-209d-432c-85e9-8afcbb307e0f","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"2kiUjbiKguAsUSpwmlAk","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-02-27T20:02:22.893Z","updatedAt":"2026-02-27T20:02:22.893Z"},{"id":"019c70d7-551e-741e-9cfb-eefa5a5ba19f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"r9ijNJhfQ25P0Di81Ca1","resolved":true,"title":"PathTextMotion","body":"$61","bodyJson":null,"introduction":"Animate text along any open SVG path","slug":"pathtextmotion","author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/r9ijNJhfQ25P0Di81Ca1/pathtextmotion-JoDOFI5iZjxbASEQKmMmgQ4KFopQnF","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-08T12:06:08.852Z","updatedAt":"2026-02-18T12:54:28.229Z","publishedAt":"2026-02-18T13:01:26.174Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://textpathmotion-creativesquadvn.framer.website","price":"8","paymentUrl":"https://cobopso.lemonsqueezy.com/checkout/buy/d6c3bce7-b7c0-47c7-b4b1-10dca2080cf5","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"AJkvlBk4TWhOwzExxz1E","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-02-18T13:01:26.174Z","updatedAt":"2026-02-18T13:01:26.174Z"},{"id":"019c5971-c361-7d2e-aa79-4cf9c16b1165","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"S5kuSJBe3OCQwXZroFMo","resolved":true,"title":"PencilSketch","body":"$62","bodyJson":null,"introduction":"Turn images into realistic pencil sketch","slug":"pencilsketch","author":{"framerUserId":"0420c7e8-1098-41c4-9a2e-5c8749a2dba7","name":"Khannh huu","slug":"khannh-huu","avatar":"https://framerusercontent.com/avatars/users/0420c7e8-1098-41c4-9a2e-5c8749a2dba7/FgupJlKhv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/S5kuSJBe3OCQwXZroFMo/pencilsketch-D6g9gv3t4Ux6Us5JNDgTQ469bfN4ki","metadata":{"tint":{"h":60,"s":26,"l":47},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-03T08:46:53.463Z","updatedAt":"2026-02-13T14:03:05.063Z","publishedAt":"2026-02-13T23:59:13.761Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cobopso-pencilsketch.framer.website/","price":"5","paymentUrl":"https://cobopso.lemonsqueezy.com/checkout/buy/c696f8f0-f0fd-44a7-a873-63d611a6e5f9","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"RoKPgLASqJ1qM2yQnIQE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-13T23:59:13.761Z","updatedAt":"2026-02-13T23:59:13.761Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]