Fred Moon

A creative and playful component for Framer. It allows you to apply glass effect on any images in your canvas! Original idea by Pablo Stanley - Codepen (MIT Licence) Ported to Framer by Fred Moon 🔗 Live Preview https://labs.framer.wiki/fractal-glass-effect 🔔 Updates Stay updated with more free components and new templates by following me on Twitter: twitter.com/fw3d 🎨 My templates Hero Carousel: a mind-blowing display of scroll effects that’s fun and budget-friendly!Polygon: a playful scroll experience with interactive elements 🤝 Hire Me Need help setting up my templates or my free components? Hire me for additional Framer support, reach out on Twitter twitter.com/fw3d or by email at [email protected].

Ideal for agencies or video production companies, the Hero Carousel is a Framer component that allows you to showcase your work in an immersive gallery with fixed images and a horizontal scroll. Optimised for 4 renditions (desktop standard, desktop ultra wide, tablet, mobile) – it fits all screens and resolutions. It relies only on native Framer components (no code override) and therefore runs smoothly on all kinds of devices. 🔗 Live Preview https://herocarousel.framer.website/ 🔔 Updates Stay tuned for future updates, custom components and new templates: twitter.com/fw3d 🗨️ Support There's a setup guide included directly in the template. If you're facing any issues or need assistance, feel free to reach out on Twitter (twitter.com/fw3d) or directly by email ([email protected]) 🤝 Hire I'm available for hire if you require comprehensive help to set it up and customise it with your content. Simply select the Framer Template + Installation package at checkout, and reach out directly by email when you're ready to move on to the next step. This service includes: editing existing sections, styling, fonts and colours, connecting your domain, optimising and adjusting the template to best fit your content.

NEW! Get Access to All Components → You can now purchase a lifetime access to all my components. More information here. Image to Particle ↓ Transform any image into a mesmerizing particle system with mouse interaction and smooth animations. Perfect for hero sections, portfolio showcases, and interactive art installations. Key Features Smart Image Processing - Automatically converts images into thousands of colored particles that animate into formationInteractive Mouse Effects - Particles respond to mouse movement with customizable attraction/repulsion zonesMobile Optimized - Intelligent resize handling with debouncing prevents performance issues on mobile devicesFully Customizable - Control particle size, animation speed, resolution density, and background colorsPerformance Focused - Built-in safety margins and optimization for smooth 60fps animationsResponsive Design - Automatically scales and centers content across all screen sizes Advanced Controls Resolution Control - Adjust particle density from sparse to ultra-detailedZoom & Scale - Fine-tune image sizing within the particle systemAnimation Speed - Control how quickly particles move and respondSafety Margins - Expandable canvas area for natural particle movementResize Intelligence - Smart debouncing prevents unnecessary reprocessing on mobile Perfect For Hero section backgrounds with your logo or brand imageryPortfolio piece showcases that come alive on interactionInteractive art installations and creative presentationsProduct reveals that build anticipation through particle formationAny design that needs that extra "wow factor" Built with P5.js for rock-solid performance and optimized for Framer's ecosystem. Works seamlessly across desktop and mobile with intelligent touch handling. Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

NEW! Get Access to All Components → You can now purchase a lifetime access to all my components. More information here. Image to Sticker ↓ Turn any image, PNG or SVG into stunning realistic sticker effects with dynamic lighting and depth. Perfect for badges, logos, awards, and any design element that needs to pop off the page with authentic material properties. ✨ Key Features Custom Image Support - Use your own images and logos to create stickersDynamic Pointer Lighting - Light source follows your mouse cursor for realistic 3D illuminationCustomizable Materials - Full control over surface properties, specular highlights, and light reflectionSmart Outline System - Automatic white outline generation that adapts to any shape or imageRealistic Drop Shadows - Configurable shadow casting with depth and blur controlPerformance Optimized - Hardware-accelerated SVG filters for smooth 60fps interactions 🎛️ Advanced Material Controls Surface Properties - Adjust surface scale, specular constant, and reflection exponentLighting System - Control light color, intensity, and 3D positioning (X, Y, Z)Outline Customization - Set outline radius and color for perfect edge definitionShadow Control - Fine-tune shadow offset, blur, color, and opacityBlur Effects - Gaussian blur deviation for soft lighting transitions 💡 Perfect For Product badges and quality seals that demand attentionLogo presentations with premium, tactile feelAward badges and certification displaysInteractive buttons that feel physically responsiveBrand elements that need authentic material presenceAny UI element requiring depth and realism 🎨 Material Realism The component uses advanced SVG filter effects including: Morphological operations for precise outline generationSpecular lighting with configurable surface propertiesGaussian blur for natural light diffusionComposite blending for realistic material interactionDrop shadow with authentic depth simulation Built with pure SVG filters for maximum compatibility and performance. The lighting system responds naturally to mouse movement, creating an immersive experience that makes flat designs feel tangible and interactive. Works seamlessly across all devices with intelligent pointer tracking and hardware acceleration for buttery-smooth animations. Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

Pay once and get access to all my components (including future updates and releases).Get notified by email when new components are released, with an updated remix link. Components included: Image to ParticlesImage to StickerLiquid Metal LogoPixel ScanPulsating ShaderShimmering Effect Live preview See all my interactive components on Framer Official Marketplace Refund policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

Made possible thanks to paper.design and their shaders library. Liquid Metal Logo ↓ Transform any logo into a liquid metal surface with this advanced WebGL component. Your brand mark becomes a flowing, chromatic animation with realistic metallic reflections, dynamic light patterns, and smooth fluid motion that continuously loops. Powered by distance field processing and Poisson solver algorithms, this component automatically optimizes any logo shape for liquid metal rendering. Key Features Automatic logo optimization - upload any PNG, SVG, or image format for instant processingAdvanced distance field generation using Poisson solver for realistic beveled edgesChromatic aberration effects with adjustable dispersion for premium visual qualityDynamic stripe patterns that flow seamlessly across your logo surfaceInfinite animation loops with no visual repetition or cycling artifactsWebGL2-powered rendering for hardware-accelerated performanceMobile-optimized precision with specialized floating-point handlingTransparent background support preserving original logo alpha channels Fully Configurable Real-time dispersion control (0-0.06 range) for chromatic effectsEdge sharpness adjustment (0-100%) for different logo stylesPattern blur intensity for subtle or dramatic metallic texturesLiquify strength (0-100%) for fluid distortion effectsAnimation speed control from static to fast-flowing motionPattern scale adjustment (1-10x) for fine or broad metallic stripes Technical Smart image processing - automatically detects shapes vs text for optimal resultsCaching system - processed logos load instantly on repeat visitsDefault logo preview - see the effect immediately without uploadingError handling - graceful fallbacks ensure component never breaksMemory management - efficient WebGL cleanup and texture handlingCross-platform compatibility - works on all modern devices and browsers Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

NEW! Get Access to All Components → You can now purchase a lifetime access to all my components. More information here. PixelScan ↓ A unique component made for Framer website builder → It allows creators to reveal texts and images with a pixel scan effect. See examples The component comes with multiple options and presets such as 20+ colorways, speed control, pixel density, effect width, time delay and directional options. ✓ Questions? Consult the FAQ section. Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

Transform your Framer website into an interactive experience with POLYGON, a cutting-edge Framer template designed to captivate and engage. 🔗 Live Preview https://polygon.framer.ai/ Ideal for entertainment companies, development studios and indie game developers, POLYGON combines a stunning scroll experience with interactive elements to ensure your audience remains immersed as they browse through your site. Showcase the gameplay of your best video games! Optimised for 3 renditions (desktop, tablets, mobiles) – it fits all screens and resolutions. Make your gaming studio's website a dynamic and immersive experience with POLYGON, and engage your audience like never before! Interactive Background with Customisable Shapes POLYGON features a dynamic background with easily customisable bouncing and interactive shapes, adding a layer of depth and engagement. These interactive elements respond to user interactions, making your website not just a place to visit but an experience to enjoy. 🔔 Updates Stay updated with the latest features, custom components, and new templates by following me on Twitter: twitter.com/fw3d 🗨️ Support Need help setting up POLYGON? The template includes a quick setup guide on the left part of the canvas. For additional support, reach out on Twitter twitter.com/fw3d or email [email protected]. 🤝 Hire Me For a more tailored experience, I'm available for hire. Select the "Framer Template + Installation" package at checkout, and I will assist you in setting up and customising POLYGON to align perfectly with your brand. This service includes: Editing existing sectionsStyling, fonts, and coloursConnecting your domainOptimising and adjusting the template to fit your content perfectly Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

The perfect Table of Content for Framer, with a dynamic scroll progress bar. It retrieves automatically your HTML titles (h1, h2, h3, etc) and creates the table of content accordingly. Perfect for blog posts and other content-oriented web pages. Original idea by Nitish Khagwal Ported to Framer by Fred Moon 🔗 Live Preview https://scrollprogress.framer.ai/ 🔔 Updates Stay updated with more free components and new templates by following me on Twitter: twitter.com/fw3d 🎨 My templates Hero Carousel: a mind-blowing display of scroll effects that’s fun and budget-friendly!Polygon: a playful scroll experience with interactive elements 🤝 Hire Me Need help setting up my templates or my free components? Hire me for additional Framer support, reach out on Twitter twitter.com/fw3d or by email at [email protected].

NEW! Get Access to All Components → You can now purchase a lifetime access to all my components. More information here. Pulsating Shader ↓ A customizable pulsating component with glowing effects, color transitions, and particle elements. Perfect for highlighting content, creating focus areas, or adding visual interest to your designs. Built with WebGL shaders for gpu-smooth performance and optimized specifically for Framer's ecosystem. Works flawlessly across all devices with intelligent scaling and responsive design. Key Features Dynamic Color Transitions - Seamlessly blend between multiple border colors with smooth gradient animationsCustomizable Glow Effects - Adjustable bloom and intensity controls for the perfect luminous effectFloating Particle System - Add animated spots and smoke-like particles that dance along your bordersReal-time Animation - Smooth pulsing and flowing effects that bring static frames to lifePerformance Optimized - Lightweight shader-based rendering ensures smooth animations without compromising speedResponsive Scaling - Automatically adapts to any container size while maintaining visual quality Advanced Controls Border Customization - Fine-tune thickness, roundness, and softness for the perfect aestheticAnimation Speed - Control the pace of color transitions and particle movementParticle Density - Adjust the number and size of floating elementsTransform Controls - Precise positioning with scale, rotation, and offset optionsWorld Size Settings - Manual override for advanced layouts and custom dimensionsBackground Integration - Seamless background color blending for cohesive designs Perfect For Premium call-to-action buttons that demand attentionHero section frames that elevate your key messagingProduct showcase containers with luxury appealInteractive cards and panels that feel alivePortfolio pieces that need that professional edgeAny design element that deserves to stand out from the crowd Why choose this pulsating component? No complex setup, no performance headaches – just drop it in and customize to match your brand. Whether you're building for startups or enterprise clients, this component delivers that premium feel that separates great design from good design. Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.

NEW! Get Access to All Components → You can now purchase a lifetime access to all my components. More information here. Shimmering Effect ↓ A creative and playful component for Framer — allowing you to create a shimmering effect directly in Framer. Ported to Framer by Fred Moon 🔗 Live Preview https://shimmer-canvas-preview.framer.ai/ 🔔 Updates Stay updated with more free components and new templates by following me on Twitter: twitter.com/fw3d 🎨 My templates Hero Carousel: a mind-blowing display of scroll effects that’s fun and budget-friendly!Polygon: a playful scroll experience with interactive elements 🤝 Hire Me Need help setting up my templates or my free components? Hire me for additional Framer support, reach out on Twitter twitter.com/fw3d or by email at [email protected]. Refund Policy Due to the nature of digital products, all sales are final and refunds cannot be provided. Please review all product details carefully before purchasing.