54:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0xit-z5qwqul7.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/32cfyvu36_37j.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/1czq4md204jhl.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3ym52__dqzver.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1yafild1hsc0a.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 55:T96c,

Quick Image Mask

Built to simplify the process of creating visually unique image compositions, it allows you to quickly switch between multiple mask styles while maintaining full control over scale, positioning, outlines, shadows, and shape customization.

Whether you're building hero sections, galleries, cards, or experimental layouts, Quick Image Mask helps create distinctive visuals without requiring complex masking workflows or external editing tools.

Key Features

Multiple built-in mask shapes
Circle, Star, Diamond, Square, Rectangle, and Custom modes
Custom mask support using SVG or PNG files
Works with external assets or masks created directly in Framer
Easily create vectors with Framer's vector tools, export them, and reuse them as custom masks
Adjustable image scale and positioning controls
Independent X and Y offset controls
Rotation support for image orientation
Star shape customization with adjustable points and inner radius
Adjustable corner radius controls
Optional outline styling with custom width and color (*not available for custom masks)
Built-in shadow system with customizable styles
Background color support
Cover and Contain image fit modes
Lightweight and optimized for performance

Design

This component was designed around speed and flexibility, allowing image treatments that normally require additional editing tools or custom assets to be created directly inside Framer.

The workflow focuses on simplicity: select a shape, adjust the composition, and create visually distinctive layouts in seconds.

For more personalized results, the Custom mode allows you to use your own SVG or PNG masks. These can come from external sources or be designed directly inside Framer using vector tools, exported, and immediately reused inside the component.

The result is a component that feels fast, flexible, and highly adaptable while giving you complete control over the final composition.

Customization Options

56:T16b4,

Scroll Snapping Controller

A flexible section-based scroll controller designed to create controlled navigation experiences with smooth snapping behavior, customizable motion, and intelligent input handling.

Built to give you full control over how users move through page sections, it listens to wheel, trackpad, and keyboard interactions and smoothly transitions between defined sections while preserving responsiveness and usability.

Setup is intentionally simple: just place the component into your primary breakpoint, define the names of the sections or stacks you want to snap between using the same names from your Framer Layers Panel, and the controller automatically resolves and organizes them into the correct page flow.

Whether you're building storytelling pages, presentation-style layouts, landing pages, or fullscreen experiences, Scroll Snapping Controller provides fine control over scrolling behavior without requiring complex setup or custom scripts.

Key Features

Section-based page snapping system
Simple setup using existing Framer layer names
Define custom snap sections using names or IDs
Supports Framer names, IDs, or both simultaneously
Optional custom CSS selectors with $name placeholders
Smooth or instant snapping behavior
Built-in custom animation engine for enhanced smooth scrolling
Adjustable animation timing and response controls
Fine control over acceleration and deceleration curves
Tall sections support with independent scrolling behavior
Excluded Sections support for mixed scrolling experiences
Define sections that behave as natural scrolling areas instead of snap targets
Preserves active section detection while allowing free scrolling inside selected sections
Automatically resumes snapping when leaving excluded content areas
Keyboard navigation support (Arrow keys, Page Up/Down, Home, and End keys support)
Scroll direction inversion support
Adjustable snap offsets for sticky headers
Active section threshold controls
Scroll lock protection against accidental multi-skips
Wheel sensitivity filtering for trackpads
Vertical-only or mixed-axis wheel detection
Optional input detection to avoid interrupting typing fields
Built-in debug badge and status indicators
Lightweight and optimized for performance

Design

This component was designed around flexibility and control, making section snapping adaptable instead of rigid.

Rather than forcing a fixed scrolling behavior, it gives you precise control over how sections are detected, how movement feels, and how different input methods behave.

The custom smoothing engine allows subtle adjustments to motion characteristics, making transitions feel tighter and responsive or slower and more cinematic depending on the experience you want to create.

The component also adapts to more complex layouts where not every section should behave identically. Content-heavy areas can coexist alongside snapping sections without breaking the overall flow.

It integrates naturally into:

landing pages
storytelling websites
fullscreen experiences
product showcases
presentation-style layouts
portfolio websites
onboarding flows
one-page websites
immersive scrolling experiences

Why use it?

Many scroll snapping implementations feel overly aggressive, lack flexibility, or struggle with real-world situations like trackpads, large sections, sticky headers, and mixed input methods.

Scroll Snapping Controller addresses these limitations by providing intelligent input handling and customizable scrolling behavior while maintaining a natural browsing experience.

Not every section should behave like a rigid snap target. Some areas such as long articles, feature lists, documentation sections, or content-heavy layouts benefit from normal scrolling behavior. With Excluded Sections support, you can define specific areas that temporarily behave like regular scrolling zones while still remaining part of the navigation flow and active section detection system.

This prevents abrupt jumps, avoids skipping important content, and allows snapping and free scrolling to coexist naturally on the same page.

Instead of relying solely on browser-level snapping behavior, you can define exactly how scrolling should react, how movement should feel, and how users navigate through your content.

The result is a component that feels controlled, responsive, and adaptable without sacrificing usability.

Perfect for

Storytelling websites
Product showcases
SaaS landing pages
Portfolio websites
Fullscreen page layouts
Presentation websites
Interactive experiences
Agency websites
One-page websites
Design systems
Onboarding flows
Content-driven layouts
Mixed scroll experiences

Panel Options

Preview it Here

57:T14a3,

Blur Text Effect

A flexible text effect component that creates progressive blur transitions across individual characters, allowing text to gradually move from sharp to blurred with smooth visual control.

Built to create expressive typography treatments, it applies blur values independently to each character based on its position within the text, making it possible to create directional fade effects, edge emphasis, and dynamic visual compositions.

Beyond the visual effect itself, the component includes intelligent responsive behavior and automatic translation compatibility, ensuring the effect remains stable across different layouts and real-world usage scenarios.

Key Features

Progressive character-based blur effect
Independent blur calculation for each character
Left, right, or dual-edge blur directions
Adjustable blur intensity controls
Adjustable blur width controls
Fully customizable typography and colors

Blur Direction Modes

Left → blur gradually decreases from left to right
Right → blur gradually increases from left to right
Both → blur on both edges with a clear center area

Intelligent Responsive System

Unlike many text effects that rely on transform: scale(), Blur Text Effect uses a dynamic typography recalculation system.

Instead of visually scaling the component, it intelligently adjusts:

font size
letter spacing
line height

This avoids common scaling issues such as:

Broken stack spacing
Incorrect alignment
Wrong interaction areas
Unnatural layout expansion

The component dynamically calculates the optimal scale based on available space while preserving natural typography proportions.

Result:

Text grows and shrinks naturally without creating layout inconsistencies.

Width must be set to fill

Automatic Browser Translation Support

This component includes a less common but highly practical feature: compatibility with automatic browser translation systems.

Blur Text Effect actively detects content changes and automatically rebuilds the effect when translated text is detected.

The effect automatically updates while preserving blur behavior and layout consistency.

Result:

The component continues working seamlessly even after dynamic translation occurs.

Automatic Text Measurement

The component includes an internal measurement system that continuously calculates the natural width of the content.

This helps:

prevent overflow issues
determine responsive sizing limits
maintain stable typography proportions
calculate adaptive scaling behavior

Accessibility Support

Visual text effects often reduce accessibility by exposing each character separately.

Blur Text Effect preserves accessibility by separating visual rendering from semantic content.

Result:

Screen readers read the complete sentence naturally
Users do not hear individual letters one by one
Visual effects remain independent from accessibility behavior

Design

This component was designed around expressive typography while keeping behavior predictable and practical in real-world layouts.

Instead of acting as a purely decorative animation, it was built to adapt to responsive layouts, dynamic content, and translated interfaces without sacrificing consistency.

It integrates naturally into:

hero sections
landing pages
typography showcases
portfolio websites
product highlights
interactive sections
creative layouts
experimental typography systems

Why use it?

Most text effects focus only on visuals and tend to break under real-world conditions such as responsive layouts, dynamic content changes, or browser translation systems.

Blur Text Effect was designed differently.

Beyond creating progressive blur transitions, it handles responsiveness intelligently, adapts to changing content automatically, and maintains accessibility without requiring additional setup.

The result is a component that feels expressive, flexible, and dependable while remaining simple to use.

Perfect for

Hero typography
Landing pages
Portfolio websites
Product highlights
Interactive headings
Creative websites
Typography systems
Experimental layouts
Motion-inspired interfaces
Design systems

Panel Options

58:T959,

Social Proof Card

Built for premium interfaces, it combines soft transparency, subtle depth, and flexible layout and styling controls to create lightweight trust indicators that feel polished and highly adaptable.

Key Features

Fully customizable avatar stack system
Horizontal and vertical layouts
Adjustable overlap, spacing, and stack direction
Optional random rotation for organic avatar composition
Support for image or text-based avatars
Customizable borders, shadows, blur, and corner radius
Flexible typography controls for trust messages
Lightweight and optimized for modern websites
Designed for Framer with intuitive visual controls

Design

This component was designed with a clean and refined aesthetic in mind, combining subtle transparency, soft shadows, and modern UI spacing to create elegant social proof elements without visual clutter.

It integrates naturally into:

landing pages
hero sections
testimonials
product showcases
SaaS websites
premium portfolios
modern UI systems

Why use it?

Social proof is one of the most effective ways to increase trust and conversion, but most implementations feel generic or visually outdated.

Social Proof Card brings a more refined and modern approach, allowing you to create premium trust indicators that feel integrated with the overall design language of your interface.

The result is a component that feels subtle, elegant, and highly customizable while still remaining lightweight and easy to use.

Perfect for

SaaS landing pages
Portfolio websites
Product launches
Hero call-to-actions
Startup websites
Testimonials sections
Minimal and futuristic interfaces
Modern design systems

Customization Options

59:T6e4,

Soft Glow Button

Unlike many button components, Soft Glow Button supports fully transparent backgrounds while preserving soft glow and gradient effects without visual compromises.

Built to feel light, refined, and highly usable, it brings a polished glow aesthetic without visual noise or unnecessary complexity.

Key Features

Soft inner + outer glow for a refined depth effect
Smooth hover and click interaction states
Adjustable scale and glow intensity per state
Fully customizable typography (font, spacing, transform)
Optional gradient fill with subtle animation
Built-in link support (external + anchor scroll)
Lightweight and optimized for performance

Design

This component was designed with a minimal, all-white glow system in mind, focusing on clarity, softness, and modern UI aesthetics.

It works seamlessly in:

landing pages
hero sections
call-to-action blocks
minimal and futuristic interfaces

Why use it?

Most button components are either too flat or too visually noisy.This one sits in between, giving you just enough glow and motion to feel premium, without distracting from your content.

Perfect for

SaaS landing pages
Portfolio websites
Product heroes
UI design systems
Experimental / futuristic layouts

Customization Options

53:["$","$L54",null,{"value":{"fallback":{"$inf$activity-creator-c4c1a751-4012-4823-b710-5c67acd0163e-all:/unified/creator/c4c1a751-4012-4823-b710-5c67acd0163e/activity/":[{"data":[{"id":"019f3a52-0ba3-769f-a0f0-3010440e89a5","type":"comment.reply","target":{"type":"post","id":"019e9980-e46e-7129-b199-47c346107aae","preview":"Quick Image Mask","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/EnoL6qpAqiBeocb7SYrp/quick-image-mask-o1MNvJx3qhv3KaKf0LFSPPOBk4z4m3","targetDeleted":false,"owned":true,"actions":{"postId":"019e9980-e46e-7129-b199-47c346107aae","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f3a52-0b8c-7567-a971-f160cadcb418","preview":"Glad you liked it! Hope you find it useful ;)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Glad you liked it! Hope you find it useful ;)"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019e9980-e46e-7129-b199-47c346107aae","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ee818-7dd6-777a-adc7-a5ea92354faf"},"repost":null}},"actors":[{"id":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","slug":"joaobaltieri","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-07T02:04:43.299Z","latestAt":"2026-07-07T02:04:43.299Z"},{"id":"019f3a50-be8e-70b6-b5a2-fb19dc497606","type":"comment.reply","target":{"type":"post","id":"019e793d-56c3-7cee-a588-4e6dbbeb5726","preview":"Scroll Snapping","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JUjM4OKWaIDfsIk2l861/scroll-snapping-gb9yQW0lzttIWqcIDpxgN2na5F5etC","targetDeleted":false,"owned":true,"actions":{"postId":"019e793d-56c3-7cee-a588-4e6dbbeb5726","like":{"count":2,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f3a50-be78-7169-b1d3-0a5b8155c5ef","preview":"What kind of problem are you facing? All sections/anchor object names are matching? Feel free to dm or email so we can get it working properly","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What kind of problem are you facing? All sections/anchor object names are matching? Feel free to dm or email so we can get it working properly"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019e793d-56c3-7cee-a588-4e6dbbeb5726","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019f25a2-3773-70d9-954f-306890738939"},"repost":null}},"actors":[{"id":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","slug":"joaobaltieri","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-07T02:03:18.030Z","latestAt":"2026-07-07T02:03:18.030Z"},{"id":"019f3a4f-4097-762b-8a11-dd107c7e9f1f","type":"comment.liked","target":{"type":"comment","id":"019ee818-7dd6-777a-adc7-a5ea92354faf","preview":"Love the simplicity here.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Love the simplicity here."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019e9980-e46e-7129-b199-47c346107aae","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee818-7dd6-777a-adc7-a5ea92354faf"},"repost":null}},"context":{"type":"post","id":"019e9980-e46e-7129-b199-47c346107aae","preview":"Quick Image Mask","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/EnoL6qpAqiBeocb7SYrp/quick-image-mask-o1MNvJx3qhv3KaKf0LFSPPOBk4z4m3","targetDeleted":false,"owned":true,"actions":{"postId":"019e9980-e46e-7129-b199-47c346107aae","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","slug":"joaobaltieri","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-07T02:01:40.236Z","latestAt":"2026-07-07T02:01:40.236Z"},{"id":"019ed2d6-5d87-74fb-9af0-843c98c5c646","type":"creator.followed","target":{"type":"creator","id":"8576eb45-a65a-403d-929d-3b4390a6e428","preview":"Anwar Raza","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46166/avatar-0qtTvY5atCamiG19yf6Y5Qz5SLcGLn.jpg","slug":"itsanwarraza","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","slug":"joaobaltieri","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T23:48:44.548Z","latestAt":"2026-06-16T23:48:44.548Z"},{"id":"019ed2d5-f18d-736f-b544-7956045e7a7a","type":"component.liked","target":{"type":"component","id":"Mebqlgqch5SqqiEhoN5u","preview":"True Liquid Glass","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Mebqlgqch5SqqiEhoN5u/true-liquid-glass-OaKboLH8mlOQ8GkySMysaX29BMLNYL","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","slug":"joaobaltieri","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-16T23:48:16.905Z","latestAt":"2026-06-16T23:48:16.905Z"},{"id":"019ed2d5-74c5-726f-bf07-558a242521b0","type":"creator.followed","target":{"type":"creator","id":"4d4d9333-ef11-4e84-9c52-2a026fb91e1f","preview":"Lee Black","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/72198/avatar-tITRI6fWrDA7ScuROCY5fJUlpsKNXj.jpg","slug":"leeblack","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","slug":"joaobaltieri","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T23:47:44.961Z","latestAt":"2026-06-16T23:47:44.961Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:c4c1a751-4012-4823-b710-5c67acd0163e:/unified/posts/?creator=c4c1a751-4012-4823-b710-5c67acd0163e&with=reposts":[{"data":[{"id":"019e9980-e46e-7129-b199-47c346107aae","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"EnoL6qpAqiBeocb7SYrp","resolved":true,"title":"Quick Image Mask","body":"$55","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Quick Image Mask"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Built to simplify the process of creating visually unique image compositions, it allows you to quickly switch between multiple mask styles while maintaining full control over scale, positioning, outlines, shadows, and shape customization."}]},{"type":"paragraph","content":[{"type":"text","text":"Whether you're building hero sections, galleries, cards, or experimental layouts, Quick Image Mask helps create distinctive visuals without requiring complex masking workflows or external editing tools."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple built-in mask shapes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Circle, Star, Diamond, Square, Rectangle, and Custom modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom mask support using SVG or PNG files"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with external assets or masks created directly in Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easily create vectors with Framer's vector tools, export them, and reuse them as custom masks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable image scale and positioning controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent X and Y offset controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rotation support for image orientation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Star shape customization with adjustable points and inner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable corner radius controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional outline styling with custom width and color (*not available for custom masks)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in shadow system with customizable styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background color support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cover and Contain image fit modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight and optimized for performance"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Design"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This component was designed around speed and flexibility, allowing image treatments that normally require additional editing tools or custom assets to be created directly inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"The workflow focuses on simplicity: select a shape, adjust the composition, and create visually distinctive layouts in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"For more personalized results, the Custom mode allows you to use your own SVG or PNG masks. These can come from external sources or be designed directly inside Framer using vector tools, exported, and immediately reused inside the component."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a component that feels fast, flexible, and highly adaptable while giving you complete control over the final composition."}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":1}},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ech3vvma-JYLB1pERy1P0R9h2JuhkxjLbkWHHQq","link":null,"caption":"","uploadId":null}}]},"introduction":"A flexible image masking component","slug":"quick-image-mask","author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/EnoL6qpAqiBeocb7SYrp/quick-image-mask-o1MNvJx3qhv3KaKf0LFSPPOBk4z4m3","metadata":{"tint":{"h":120,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-30T19:46:30.754Z","updatedAt":"2026-07-10T01:29:26.740Z","publishedAt":"2026-06-05T20:37:01.678Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://quickimagemask.framer.website/?editSite","price":"5","paymentUrl":"https://joaobaltieri.gumroad.com/l/quickimagemask","workshop":true,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"QjlBAYX1VGYO2w2m6nJq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T20:37:01.678Z","updatedAt":"2026-06-05T20:37:01.678Z"},{"id":"019e793d-56c3-7cee-a588-4e6dbbeb5726","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JUjM4OKWaIDfsIk2l861","resolved":true,"title":"Scroll Snapping","body":"$56","bodyJson":null,"introduction":"Scroll Snapping Controller","slug":"scroll-snapping","author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JUjM4OKWaIDfsIk2l861/scroll-snapping-gb9yQW0lzttIWqcIDpxgN2na5F5etC","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-24T16:14:39.666Z","updatedAt":"2026-06-07T01:37:38.139Z","publishedAt":"2026-05-30T14:15:23.587Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollsnappingcontroller.framer.website/","price":"12","paymentUrl":"https://joaobaltieri.gumroad.com/l/scrollsnappingcontroller","workshop":true,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"anpuUFE1zO6PGmldnP8g","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T14:15:23.587Z","updatedAt":"2026-05-30T14:15:23.587Z"},{"id":"019e793c-e61f-728c-b8b6-5c7ebd70bc65","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kCMdPnfgjDx7oWjuCLED","resolved":true,"title":"Blur Text Effect","body":"$57","bodyJson":null,"introduction":"Progressive character blur","slug":"blur-text-effect","author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/kCMdPnfgjDx7oWjuCLED/blur-text-effect-19LF0LpFetXXlDd8t12E4Sf4MbNLDK","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-24T23:27:09.978Z","updatedAt":"2026-05-30T14:08:43.796Z","publishedAt":"2026-05-30T14:14:54.751Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/JBBlurTextEffect-7Tta5o.js@1W2LR5rzpqVZinTd57pS","previewUrl":"https://blurtexteffect.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"1W2LR5rzpqVZinTd57pS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T14:14:54.751Z","updatedAt":"2026-05-30T14:14:54.751Z"},{"id":"019e6459-5866-70fb-98a0-ce44d721b88d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9mGMw27DEGZhECFufk5W","resolved":true,"title":"SocialProof Card","body":"$58","bodyJson":null,"introduction":"Elegant social credibility component","slug":"socialproof-card","author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/9mGMw27DEGZhECFufk5W/socialproof-card-e52YA98RARLuzcA61338S2D9jrLuhW","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-15T00:03:15.534Z","updatedAt":"2026-05-26T14:07:34.689Z","publishedAt":"2026-05-26T12:53:57.478Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/JBSocialProofCard-qd3y0g.js@hxoLnb47TrSLHtsyVJix","previewUrl":"https://jbsocialproofcard.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"hxoLnb47TrSLHtsyVJix","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":19,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T12:53:57.478Z","updatedAt":"2026-05-26T12:53:57.478Z"},{"id":"019e2397-5b45-7e66-9a57-6803f4be0e27","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"iuvLt7ymnZOZv0uGQ4Bu","resolved":true,"title":"Soft Glow Button","body":"$59","bodyJson":null,"introduction":"Soft glow button with smooth interaction","slug":"soft-glow-button","author":{"framerUserId":"c4c1a751-4012-4823-b710-5c67acd0163e","name":"Joao Baltieri","slug":"joaobaltieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2237437/avatar-Sh1YHqkV9J5v1M0Nn8c2uSMw4crZjE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/iuvLt7ymnZOZv0uGQ4Bu/soft-glow-button-ToTwrNgTc8Js1lAuw1Up7iMNEmcpji","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-05T03:54:14.955Z","updatedAt":"2026-05-26T12:56:27.397Z","publishedAt":"2026-05-13T23:06:22.405Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/BorderGlowButton-WL6paV.js@epZ92QoODuSULBRe5PdW","previewUrl":"https://soft-glow-button.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"epZ92QoODuSULBRe5PdW","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-13T23:06:22.405Z","updatedAt":"2026-05-13T23:06:22.405Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L5a"}]