# FramerHub Canonical Origin: https://framerhub.io/ **Agent Skills:** Skills an agent can install from this site. The index at https://framerhub.io/.well-known/agent-skills/index.json carries a sha256 digest for each one. ## LLM Resources - [Full Content](https://framerhub.io/llms-full.txt): Complete page content in markdown format. ## Agent Skills - [find-framerhub-products](https://framerhub.io/SKILL.md): Discover and evaluate FramerHub's Framer plugins, premium code components, website templates, and tutorials. Use when a user wants Framer plugins (CMS Filter, Form Kit, scheduling, WooCommerce/Shopify, and more), Framer code components (WebGL effects, animations, 3D), Framer templates (portfolio, SaaS, agency, e-commerce, landing pages), or how-to guidance for building Framer sites. --- - **Page:** Contact FramerHub — Get Help & Support for Framer Plugins - **Source:** https://framerhub.io/contact - **Description:** Get in touch with the FramerHub team. We're here to help with questions, feedback, and support for all Framer plugins and components. # **Get In Touch ** Questions about FramerHub plugins, components or templates? Send us a message below. Need help with your Framer account, billing or the Framer editor itself? Contact Framer at [~~framer.com/contact~~](https://www.framer.com/contact/). Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** All Access Pass - Ship Framer Sites 10x Faster | FramerHub - **Source:** https://framerhub.io/components/all-access - **Description:** Join 1,500+ designers shipping premium Framer sites in days, not weeks. 90+ WebGL effects, 3D interactions. Lifetime access $199. **Join 1,500+ designers charging premium rates** # **Ship Premium Framer Sites **10x Faster**. Charge 2-3x More. ** WebGL effects, 3D interactions, premium animations—insert directly into Framer with one click. No dashboard login needed. **Get All Access — $99 ** **See How It Works ** **90+ Components** **Plugin Access** **2-4 New Weekly** **Lock in Current Pricing** ## **Smart Way vs. Hard Way ** Why spend weeks when you can deliver in days? ### **Building from Scratch** **Build from scratch **(40+ hours/project) WebGL and 3D require deep technical expertise **Debug WebGL/3D **(constant headaches) Browser inconsistencies and performance issues **Manual copy-paste **(workflow friction) Context switching breaks your design flow **Competitors ship faster **(lost projects) Time to market matters in client work **Hidden Cost** **$2,000+** Lost time per project at $100/hour ### **All Access Pass** **One-click insert from plugin **(10 seconds) Search, preview, insert—all inside Framer **Battle-tested components **(zero debug time) Used by 1,500+ designers, proven in production **Auto-syncing library **(always up to date) New components appear automatically in your plugin **Ship before competitors **(win more projects) Deliver premium work in a fraction of the time **Lifetime Investment** **$199** Break even after 1 project Zero Friction Workflow ## **Insert Components **Without Leaving Framer No more hunting through emails. No more forgetting where you bought that component. No more chasing sellers for support. ### **One-click insert from Framer plugin** Search or browse components, click to insert—done. No dashboard login required. ### **Auto-syncs when components are added/updated** Your library updates automatically. Always have access to the latest components. ### **Search & filter to find what you need instantly** Filter by category, search by name. Find the right component in seconds. ### **Favorites (coming soon) for quick access** Bookmark your go-to components and access them instantly. ### **Never visit the dashboard unless you want to** Everything you need is right inside Framer. Stay in your creative flow. ## **Premium Components That Make **Clients Say "Wow" Live demos. Click to interact. Copy-paste ready. Trusted by Designers ## **What Our **Customers Say Real results from designers using FramerHub components > "Saved me 8 hours on a client project. The components would've taken me days to code from scratch." ![Relwan Sharif](https://framerhub.io/avatars/ricky.jpg) **Relwan Sharif**Framer Designer **Freelancer** > "Game-changer for my agency. We can now deliver advanced components without custom code." ![Mike Chen](https://framerhub.io/avatars/mike.jpg) **Mike Chen**Agency Owner **Agency** > "Clean, performant, and exactly what Framer needed. My clients love the search and filter experience." ![Emma Davis](https://framerhub.io/avatars/emma.jpg) **Emma Davis**Freelance Designer **Designer** Everything You Need ## **What's Included ** All the tools to build stunning Framer sites ### **Plugin Access** Insert directly into Framer. No dashboard login. ### **Auto-Sync Library** Components update automatically. Always current. ### **WebGL Effects** GPU-accelerated shaders and particles ### **3D Interactions** Interactive cards, globes, immersive effects ### **Premium Animations** Glitch text, scroll reveals, typewriter ### **Weekly Drops** 2-4 new components every week ### **Commercial License** Unlimited client projects ### **Priority Support** Fast, friendly help when needed Lock in Current Pricing ## **Choose Your All Access Pass** Prices increase as library grows. Secure lifetime access at today's rate. ### **Yearly** Perfect for testing the waters **$99**/year - 90+ production-ready components - Insert directly via Framer plugin - 2-4 new components weekly - WebGL, 3D, animations & more - Use on unlimited client projects - Commercial license included - Priority email support - 12 months of updates ### **Lifetime** Best value — pay once, own forever **$199**one-time - Everything in Yearly, plus: - Pay once, access forever - All future components (no extra cost) - Lifetime updates & new features - Lock in current pricing forever - Priority support for life ### **Creator** For designers selling templates **$399**one-time - Everything in Lifetime, plus: - Sell templates using our components - List on Framer, Gumroad, anywhere - Unlimited products & downloads - Extended commercial license - Creator badge in community **90+ Components** **Plugin Access** **2-4 New Weekly** **Lock in Current Pricing** **14-Day Refund If It Doesn't Work ** Full refund if components are non-functional or defective. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Refund Policy — FramerHub Component Purchase Returns - **Source:** https://framerhub.io/refund-policy - **Description:** Review FramerHub refund terms for plugin and component purchases, including the 14-day eligibility window and support process for documented product issues. # **Refund Policy ** - Effective Date: **2026-01-09** We operate a **case-by-case refund policy**. Refunds are not automatically granted, but we will carefully review legitimate requests where technical issues prevent you from using the product as intended. ## **Why This Policy?** We want to be transparent about why we have this refund policy: - **Instant Digital Access:** When you purchase a component, you receive immediate access to the component share URL. Unlike physical products, we cannot "take back" digital access once it's been granted. - **No Access Revocation:** Framer components work via share links—once you have the URL, you can use it in unlimited projects. There's no technical way for us to revoke access after purchase. - **Industry Standard:** This policy aligns with how most digital component and template marketplaces operate (Framer, Webflow, Figma ecosystems). **🎁 Try Before You Buy** Not sure if our components are right for you? We offer **free components** so you can experience the quality and workflow before making a purchase. Check out our [~~free components~~](https://framerhub.io/components) to get started. ## **1. When Refunds May Be Granted** We may offer a full or partial refund if: - The components are completely non-functional or defective - You've contacted our support team at [~~hello@framerhub.io~~](mailto:hello@framerhub.io) but received no response within 72 hours (business days only) - The product description was fundamentally misleading - There's a documented technical incompatibility that cannot be resolved **Important:** All refund requests require documentation (screenshots, error messages, project links) to help us investigate the issue effectively. ## **2. When Refunds Will NOT Be Granted** We reserve the right to refuse refunds in the following situations: - You've changed your mind about the purchase - You no longer need the product after receiving access - The product is difficult to use or has a learning curve (we provide documentation and support to help) - The product is not the right fit for your use case (free components are available to evaluate before purchase) - The purchase was made by mistake after access was already granted - You've purchased the product at a discounted or promotional price - You refuse to provide our support team with necessary information to investigate your issue - The request is made during an active promotional campaign (requests will be reviewed after the promotion ends) - License upgrades or plan changes ## **3. Important Notes** - **Immediate Access:** Since you receive instant access to component share URLs upon purchase, all sales are considered final unless the above conditions are met - **License Restrictions:** If a refund is granted, you must immediately remove all Framer CMS MultiFilter components from your projects and stop using them - **Processing Time:** Approved refunds may take up to 10 business days to reflect in youraccount - **Active License Requirement:** Support and refund eligibility are only available to users with an active, valid license ## **4. How to Request a Refund** If you believe you qualify for a refund based on the criteria above: 1. Contact us at [~~hello@framerhub.io~~](mailto:hello@framerhub.io) 2. Include your order number and detailed description of the issue 3. Provide screenshots, error messages, or other relevant documentation 4. Our team will review your request and respond within 72 hours ## **5. Contact Us** For questions about our refund policy or to submit a request, please reach out: - **Email:** [~~hello@framerhub.io~~](mailto:hello@framerhub.io) - **Support:** [~~https://framerhub.io/~~](https://framerhub.io/) --- - **Page:** Privacy Policy — How FramerHub Protects Your Data - **Source:** https://framerhub.io/privacy - **Description:** How FramerHub collects, uses, and protects your personal data. We value transparency — read our full privacy practices for plugins and components. # **Privacy Policy ** Last updated: January 20, 2026 At FramerHub, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our website and services. ## **1. Information We Collect ** ### **1.1 Information You Provide ** We collect information you voluntarily provide when you: - **Create an account:** Email address, name, password - **Make a purchase:** Payment information (processed by LemonSqueezy), billing details - **Contact us:** Name, email, message content - **Use OAuth login:** Email, name, profile picture from Google or GitHub ### **1.2 Automatically Collected Information ** When you visit FramerHub, we automatically collect: - **Device & browser data:** IP address, browser type, operating system, device identifiers - **Usage data:** Pages visited, time spent, referring URLs, click patterns - **Cookies & tracking:** Session cookies, analytics cookies, preference cookies ### **1.3 Fraud Prevention Information ** To protect against fraudulent signups and maintain service quality, we use SignupGate to verify: - Email address validity and reputation - Domain reputation and risk scores - Patterns indicating bot or fraudulent activity This verification happens during account registration and helps prevent spam, abuse, and unauthorized access. ## **2. How We Use Your Information ** We use collected information for the following purposes: - **Provide services:** Process purchases, deliver components, manage your account - **Authentication:** Verify your identity and maintain secure sessions - **Payment processing:** Handle transactions via LemonSqueezy (our payment processor) - **Communication:** Send transactional emails (purchase confirmations, password resets) - **Marketing:** Send newsletters and promotional content (with your consent) - **Analytics:** Understand how users interact with our service to improve functionality - **Fraud prevention:** Detect and prevent fraudulent signups, abuse, and security threats - **Legal compliance:** Comply with legal obligations and enforce our Terms of Service ## **3. How We Share Your Information ** We do not sell your personal information. We may share your information with: ### **3.1 Service Providers ** - **LemonSqueezy:** Payment processing and transaction management - **Brevo:** Email delivery and marketing automation - **SignupGate:** Email verification and fraud prevention - **Cloudflare:** Hosting, CDN, and infrastructure services - **Google Analytics:** Website analytics and user behavior tracking - **Microsoft Clarity:** User session recording and heatmaps ### **3.1 Legal Requirements ** We may disclose your information if required by law, court order, or government request, or to protect our rights, property, or safety. ### **3.3 Business Transfers ** In the event of a merger, acquisition, or sale of assets, your information may be transferred to the acquiring entity. ## **4. Cookies & Tracking Technologies ** We use cookies and similar technologies to: - **Essential cookies:** Required for authentication, security, and core functionality - **Analytics cookies:** Track usage patterns and improve our service (Google Analytics, Clarity) - **Marketing cookies:** Track conversions and ad performance (Google Tag Manager) You can control cookies through your browser settings, but disabling certain cookies may limit functionality. ## **5. Data Security ** We implement industry-standard security measures to protect your information: - **Encryption:** HTTPS/TLS encryption for data in transit - **Password security:** Passwords are hashed using bcrypt before storage - **Session security:** Encrypted HTTP-only cookies for authentication - **Database security:** Restricted access and regular backups - **Payment security:** PCI-compliant payment processing via LemonSqueezy However, no method of transmission over the internet is 100% secure. While we strive to protect your information, we cannot guarantee absolute security. ## **6. Data Retention ** We retain your information for as long as necessary to: - Provide our services and fulfill transactions - Comply with legal obligations (tax records, purchase history) - Resolve disputes and enforce our agreements - Maintain fraud prevention and security measures When you delete your account, we will remove or anonymize your personal information within 30 days, except where retention is required by law. ## **7. Your Privacy Rights ** Depending on your location, you may have the following rights: ### **7.1 Access & Portability ** Request a copy of your personal information in a portable format. ### **7.2 Correction ** Update or correct inaccurate information in your account settings. ### **7.3 Deletion ** Request deletion of your account and personal information (subject to legal retention requirements). ### **7.4 Marketing Opt-Out ** Unsubscribe from marketing emails using the link in any promotional email or by contacting us. ### **7.5 Do Not Track ** We do not currently respond to Do Not Track (DNT) signals, as there is no industry standard. To exercise these rights, contact us at **privacy@framerhub.com**. ## **8. Third-Party Links ** Our website may contain links to third-party sites (e.g., Framer, component preview URLs). We are not responsible for the privacy practices of these external sites. Please review their privacy policies before providing any information. ## **9. Children's Privacy ** FramerHub is not intended for children under 13 years of age. We do not knowingly collect personal information from children. If we become aware that a child under 13 has provided personal information, we will delete it immediately. ## **10. International Data Transfers ** Your information may be transferred to and processed in the United States or other countries where our service providers operate. By using FramerHub, you consent to the transfer of your information to countries outside your residence, which may have different data protection laws. ## **11. California Privacy Rights (CCPA) ** If you are a California resident, you have additional rights under the California Consumer Privacy Act (CCPA): - Right to know what personal information is collected and how it's used - Right to delete personal information (with certain exceptions) - Right to opt-out of the sale of personal information (we do not sell your data) - Right to non-discrimination for exercising your CCPA rights To exercise these rights, email us at **privacy@framerhub.com** with "CCPA Request" in the subject line. ## **12. European Privacy Rights (GDPR) ** If you are in the European Economic Area (EEA), you have rights under the General Data Protection Regulation (GDPR): - Right to access your personal data - Right to rectification (correction) of inaccurate data - Right to erasure ("right to be forgotten") - Right to restrict processing - Right to data portability - Right to object to processing - Right to withdraw consent at any time Our lawful basis for processing your data includes: - **Contract performance:** Processing necessary to provide services you requested - **Legitimate interests:** Fraud prevention, analytics, service improvement - **Consent:** Marketing communications (you can withdraw consent anytime) - **Legal obligations:** Compliance with tax and financial regulations ## **13. Changes to This Privacy Policy ** We may update this Privacy Policy from time to time. Material changes will be communicated via: - Email notification to registered users - Prominent notice on our website - Updated "Last modified" date at the top of this page Continued use of FramerHub after changes constitutes acceptance of the updated Privacy Policy. ## **14. Contact Us ** If you have questions, concerns, or requests regarding this Privacy Policy or our data practices, contact us at: **Email:** privacy@framerhub.com**Support:** support@framerhub.com**Website:** https://framerhub.com ### **Privacy Summary ** This summary highlights key points but does not replace the full Privacy Policy above. - ✓ We collect only necessary information to provide our services - ✓ We never sell your personal information to third parties - ✓ We use industry-standard security measures to protect your data - ✓ We use fraud prevention tools (SignupGate) to maintain service quality - ✓ You can request access, correction, or deletion of your data anytime - ✓ You can opt-out of marketing emails at any time - ✓ We comply with GDPR, CCPA, and other privacy regulations --- - **Page:** Terms of Service — FramerHub License & Usage Rights - **Source:** https://framerhub.io/terms - **Description:** Terms of Service for FramerHub plugins and components. License rights, usage restrictions, and purchase terms for professionals using our Framer tools. # **Terms of Service ** Last updated: January 20, 2026 ## **1. Acceptance of Terms ** By accessing and using FramerHub ("the Service"), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our Service. ## **2. License & Usage Rights ** ### **2.1 Free Components ** Free components are provided at no cost for both personal and commercial use, subject to the following restrictions: - **Allowed:** Use in unlimited client projects and commercial applications - **Allowed:** Modify and customize for your specific needs - **Prohibited:** Reselling, redistributing, or sharing components with others - **Prohibited:** Bundling in themes, templates, or starter kits - **Prohibited:** Creating derivative products for sale or distribution - **Prohibited:** Claiming ownership or authorship of components ### **2.2 Paid Components & Bundles ** Purchased components and bundles grant you a single-user license with the following terms: - **Allowed:** Use in unlimited personal and client projects - **Allowed:** Modify, customize, and build upon components - **Allowed:** Create commercial applications using components - **Prohibited:** Sharing license keys or download links - **Prohibited:** Team or multi-user access without additional licenses - **Prohibited:** Reselling or redistributing in any form - **Prohibited:** Bundling in templates, themes, or SaaS products for distribution ### **2.3 Commercial Use Clarification ** You may use FramerHub components in client projects and commercial applications, including: - Websites built for clients or employers - SaaS applications or web platforms (end products) - E-commerce sites and marketing campaigns - Internal business applications However, the components themselves must remain integrated into your end product and cannot be extracted, resold, or redistributed as standalone items. ## **3. Account Registration ** To access certain features, you must create an account. You agree to: - Provide accurate and complete registration information - Maintain the security of your account credentials - Use a valid, non-disposable email address - Not create multiple accounts for fraudulent purposes - Notify us immediately of any unauthorized access We reserve the right to suspend or terminate accounts that violate these terms or engage in fraudulent activity. ## **4. Payments & Refunds ** All payments are processed securely through LemonSqueezy, our payment provider. ### **4.1 Pricing ** All prices are listed in USD. We reserve the right to change pricing at any time, but changes will not affect purchases already completed. ### **4.2 Refund Policy ** We offer a 14-day money-back guarantee on all paid components and bundles. To request a refund, contact us at support@framerhub.com with: - Your order number and email address - Reason for refund request - Date of purchase (must be within 14 days) Refunds are granted at our discretion. Abuse of refund policy may result in account termination. ## **5. Intellectual Property ** All components, designs, documentation, and content on FramerHub are protected by copyright and intellectual property laws. - FramerHub retains ownership of all original components and designs - Your license grants usage rights only, not ownership transfer - You may not claim ownership or copyright of FramerHub components - Reverse engineering or attempting to extract source code is prohibited ## **6. Prohibited Activities ** You agree not to: - Violate any applicable laws or regulations - Share, resell, or redistribute components in any form - Use automated bots or scripts to access the Service - Attempt to bypass security measures or payment systems - Upload malicious code or compromise Service integrity - Impersonate FramerHub or misrepresent affiliation - Scrape or harvest content without permission ## **7. Disclaimer of Warranties ** FramerHub components are provided "AS IS" without warranties of any kind. We do not guarantee: - Components will meet your specific requirements - Components will be error-free or uninterrupted - Components will be compatible with all browsers or devices - Future updates or continued availability of components While we strive for quality and reliability, you use components at your own risk. ## **8. Limitation of Liability ** To the maximum extent permitted by law, FramerHub shall not be liable for: - Any indirect, incidental, or consequential damages - Loss of profits, data, or business opportunities - Damages arising from use or inability to use components - Third-party claims related to your use of components Our total liability shall not exceed the amount you paid for the component in question. ## **9. Updates & Support ** We may update components to improve functionality, fix bugs, or maintain compatibility. However, we are not obligated to provide: - Regular updates or new features - Technical support or implementation assistance - Customization services - Compatibility with future Framer versions Support is provided on a best-effort basis via email at support@framerhub.com. ## **10. Termination ** We reserve the right to suspend or terminate your account at any time for: - Violation of these Terms of Service - Fraudulent or abusive behavior - Chargebacks or payment disputes - Any conduct we deem harmful to the Service or community Upon termination, your license to use components is revoked, though end products already created may remain live. ## **11. Changes to Terms ** We may update these Terms of Service at any time. Material changes will be communicated via: - Email notification to registered users - Notice on the FramerHub website - Updated "Last modified" date at the top of this page Continued use of the Service after changes constitutes acceptance of updated terms. ## **12. Governing Law ** These Terms shall be governed by and construed in accordance with the laws of the United States, without regard to conflict of law provisions. ## **13. Contact Information ** For questions about these Terms of Service, contact us at: **Email:** support@framerhub.com**Website:** https://framerhub.com ### **Summary of Key Restrictions ** This summary is for convenience only and does not replace the full Terms above. #### **✓ You CAN:** - • Use in client projects - • Use in commercial applications - • Modify and customize - • Create end products for sale #### **✗ You CANNOT:** - • Resell or redistribute components - • Share with others or bundle in themes - • Claim ownership or authorship - • Create derivative products for distribution --- - **Page:** About FramerHub — Plugins & Components for Framer Pros - **Source:** https://framerhub.io/about - **Description:** Learn how FramerHub helps professional Framer designers ship advanced client sites faster with curated plugins, templates, and components. About FramerHub # **Built by creators, for creators ** FramerHub helps designers and founders ship faster by giving them the plugins and code components they need to build high-quality Framer sites without wasting time on repetitive work. ## **Our mission** We're building the essential toolkit for Framer freelancers, agencies, and teams. Ship faster, work smarter, and focus on what matters—creating, launching, and growing your business. ## **Why FramerHub exists** Framer makes it easy to build modern websites, but advanced features often require custom code. Most creators rebuild the same components again and again, spending hours on functionality instead of design. FramerHub provides ready-to-use plugins and code components so you can focus on creating, launching, and growing—without writing a single line of code. ## **What we offer** Powerful plugins that automate routine work and unlock new workflows Premium code components tested for performance and reliability Tools for freelancers and agencies to deliver projects faster Practical guides for building, launching, and optimizing Framer sites A growing community of builders sharing insights and workflows ## **Meet the founder** FramerHub is created by Shahul, an entrepreneur and designer who has spent more than a decade building products used by thousands of customers. ### **Shahul** Shahul started as a designer who loved crafting clean, conversion-focused interfaces. He built and sold multiple ThemeForest products under **Amazee** and **Innwithemes**, reaching Elite Author status and generating more than $300k in sales. Composer, one of his WordPress themes, grew to nearly $10k in monthly recurring revenue. In 2017 he created **WPConfigurator**, scaled it to consistent monthly revenue, and later sold it to focus on new SaaS products. His experience building plugins, shipping templates, and growing tools for designers shaped the vision for FramerHub.**FramerHub continues that same mission: Help creators work faster. Help freelancers earn more. Help founders launch without friction. **## **Our promise **### **Keep every resource simple and useful** No bloat, no complexity. Just tools that work. ### **Ship updates that improve your workflow** Continuous improvements based on real feedback. ### **Build tools based on real demand** We listen to our community and solve actual problems. ### **Support independent creators and agencies** Built for the people who build the web. ## **What's next** FramerHub is growing into a complete toolkit for building and shipping polished Framer sites. More plugins. More components. Better workflows. A stronger community.**If you design or build in Framer, this is your new home. ** Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** FramerHub | Framer Plugins and Components - **Source:** https://framerhub.io/ - **Description:** Curated plugins and components for Framer freelancers, agencies, and teams. CMS filters, multi-step forms, code components, and more — no coding required. Trusted by 1,500+ Framer Pros # **Plugins & Components that add features Framer doesn't have ** Curated plugins and components for Framer freelancers, agencies, and teams. Built by professionals who ship for money. **Explore Plugins ****(5/5)** check out ## **Our Plugins** Used by designers, agencies, and founders launching production Framer sites ### [Framer CMS Filter](https://framercmsfilter.com/) [Advanced Filtering for Framer in 5 minutes without duplicates, variants.](https://framercmsfilter.com/) [**More Info **](https://framercmsfilter.com/) ### [Framer Form Kit](https://framerformkit.com/) [Stop losing leads to form limits. Build advanced workflows with full design control.](https://framerformkit.com/) [**More Info **](https://framerformkit.com/) ### **FrameWoo** Build WooCommerce stores in Framer. Start free and launch when you're ready. [**More Info **](https://framercmsfilter.com/) ### **Framer Gallery Kit** Beautiful portfolio layouts for Framer without needing multiple CMS collections. Built for Professionals ## **Trusted by the Framer Community ** Join 1,500+ designers building advanced sites without code. From freelance portfolios to enterprise e-commerce, FramerHub powers the projects that matter. Framer Components ## **Premium Components** Built with care. Copy-paste and ship without worrying. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** FramerHub Newsletter — Free Framer Components & Plugin Drops - **Source:** https://framerhub.io/newsletter - **Description:** Join the FramerHub newsletter for weekly free Framer component drops, early plugin beta invites, and subscriber-only discounts. Weekly Framer drops for pros # **Get Free Components Before Everyone Else ** Join 1,500+ Framer pros getting weekly free components, early plugin access, and subscriber-only discounts. Weekly free component drops48h early access to pluginsSubscriber-only discountsNo spam --- - **Page:** Framer Portfolio Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-portfolio-templates - **Description:** Framer portfolio templates for designers, photographers, and creatives are launching soon on FramerHub. Join the waitlist for early access and pricing. # **Framer Portfolio Templates** Framer portfolio templates built for designers, photographers, and creative studios who need a fast way to showcase work without starting from a blank canvas. Every template ships with the same craft as our code components: clean structure, CMS-ready galleries, and sensible defaults you can restyle in minutes. ### No live templates yet in this category "We're still building this category. Join the waitlist below and we'll email you the moment the first one ships." ## **Get new template drops in your inbox ** Join the Portfolio Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Framer Real Estate Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-real-estate-templates - **Description:** Browse Framer real estate templates with CMS-powered listings, advanced property search, responsive layouts, and polished property detail pages. # **Framer Real Estate Templates** Framer real estate templates for brokerages, agents, and property teams that need more than a static listing grid. Launch with CMS-managed properties, refined search experiences, and responsive layouts designed to help buyers find the right home faster. ## **Get new template drops in your inbox ** Join the Real Estate Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Framer Templates for Faster Website Launches | FramerHub - **Source:** https://framerhub.io/templates - **Description:** Browse the latest premium Framer templates from FramerHub. Production-ready website designs built to help professionals launch polished sites faster. **Curated for Framer ** # **Framer templates built to launch. ** Polished, production-ready starting points for ambitious websites. Pick a template, make it yours, and skip the blank canvas. **Recently added** ## **Latest templates ** **4 available ** **More coming soon** ## **Get the next template drop in your inbox.** --- - **Page:** Framer Landing Page Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-landing-page-templates - **Description:** Framer landing page templates for launches, waitlists, and single-page campaigns are launching soon on FramerHub. Join the waitlist for early access. # **Framer Landing Page Templates** Conversion-focused Framer landing page templates for product launches, waitlists, and single-page campaigns that need to be live fast. Each template pairs a clear structure with FramerHub's animation and CMS components, so you spend time on copy instead of layout. ### No live templates yet in this category "We're still building this category. Join the waitlist below and we'll email you the moment the first one ships." ## **Get new template drops in your inbox ** Join the Landing Page Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Free Framer Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-free-templates - **Description:** Free Framer templates are on the way from FramerHub. Join the waitlist to get notified the moment the first free templates ship - no cost, no catch, ever. # **Free Framer Templates** A growing set of free Framer templates for anyone who wants a solid starting point without paying upfront. These cover the most common use cases, portfolios, simple business sites, and landing pages, built to the same standard as our paid work. ### No live templates yet in this category "We're still building this category. Join the waitlist below and we'll email you the moment the first one ships." ## **Get new template drops in your inbox ** Join the Free Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Framer Ecommerce Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-ecommerce-templates - **Description:** Multi-purpose Framer ecommerce templates for businesses and personal sites are coming soon. Join the FramerHub waitlist to get early access the day they launch. # **Framer Ecommerce Templates** General-purpose Framer ecommerce templates for small businesses, personal brands, and multi-page sites that need more structure than a single landing page. Built on the same component library FramerHub already ships, so pages stay fast and easy to customize. ## **Get new template drops in your inbox ** Join the Ecommerce Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Blog - Framer Tips & Tutorials - FramerHub - **Source:** https://framerhub.io/blog - **Description:** Read practical Framer guides for designers, freelancers, and agencies covering components, SEO, performance, pricing, AI discovery, and scalable site delivery. Our Blog # **Framer Tips & Insights ** Learn how to build better Framer sites with our guides, tutorials, and design insights. **Templates** Where to find Framer templates in 2026: the Framer Marketplace, free template lists, paid template shops, and how to pick, use and customise one. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 9 min read **Tutorials** How to build an image gallery in Framer: a native CMS grid step by step, where it stops, and how to add lightbox, masonry, sliders and category filters from your CMS. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 9 min read **Guides** How to reach Framer support: in-app Contact Support, the contact page, support@framer.com for billing, the Emergency button, response times by plan, and what support won't cover. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 6 min read **Guides** Framer is a visual website builder: you design on a canvas and publish a fast, responsive site without writing code. How it works, what Framer 3.0 changed, pricing, and who it suits. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 9 min read **Comparison** Honest Framer vs WordPress comparison from a plugin builder who spent 10+ years in WordPress before switching. Design, CMS, plugins, pricing, and when each wins. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 15 min read **Guides** Framer's affiliate program sits inside the Creator Program. Here's how both payout channels work, what each pays, and which one is worth your time. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 10 min read **Guides** Framer actually has three distinct developer surfaces. Here's what the Plugin API, Server API, and Code Components each let you build — with real limits. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 8 min read **Guides** What the Framer CMS API actually is, how plugins read and write CMS data, and what you can (and can't) build with it. A practical developer guide. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 9 min read **Guides** Framer CMS has real limits on collections, filtering, and code access. An honest breakdown of what you'll hit and how to work around each one. ![Shahul](https://framerhub.io/shahul-profile-pic.jpg)Shahul 10 min read --- - **Page:** Premium Framer Components - FramerHub - **Source:** https://framerhub.io/components - **Description:** Browse premium and free Framer components for animations, CMS interfaces, effects, forms, and advanced no-code experiences. Trusted by 1,500+ Framer Pros # **Professional Framer Components ** Unlock advanced functionality without code. The essential library for serious Framer designers and agencies. **(5/5)** Framer Components ## **Browse Collection** Everything you need to build advanced functionality in Framer. ### **Infinite Gallery** An infinitely scrolling horizontal gallery with snapping physics and a smooth parallax effect. ### **ShaderHatch** Add beautiful hatching and scribble WebGL effects to your elements. ### **TextHatch** Apply a stunning, hand-drawn hatching shader effect to your typography. ### **VideoHatch** Apply a real-time, hand-drawn hatching shader effect to any video. ### **VFX Scroll Shift** Apply a stunning multi-color glitch effect to text, driven by scroll velocity. ### **Portfolio Reveal Hero** Mesmerizing organic blob-mask reveal between two images. ### **CMS Gallery Lightbox** A powerful CMS masonry gallery with native GLightbox support, responsive extraction, and interactive hover effects. ### **Mouse Image Trail** Leave a dynamic trail of images that follow your cursor. ### **Bouncing Image Trail** Add an immersive, GSAP-powered bouncing image trail to your cursor. Built for Professionals ## **Trusted by the Framer Community ** Join 1,500+ designers building advanced sites without code. From freelance portfolios to enterprise e-commerce, FramerHub powers the projects that matter. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Framer SaaS Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-saas-templates - **Description:** Framer SaaS templates for product marketing sites are coming soon from FramerHub. Join the waitlist to get early access and launch-day pricing details. # **Framer SaaS Templates** Framer SaaS templates built for product marketing sites: pricing tables, feature grids, and onboarding flows for software teams that need a site as polished as their product. They ship with the same CMS and animation components already used across FramerHub. ### No live templates yet in this category "We're still building this category. Join the waitlist below and we'll email you the moment the first one ships." ## **Get new template drops in your inbox ** Join the SaaS Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Framer Agency Templates | FramerHub - **Source:** https://framerhub.io/templates/framer-agency-templates - **Description:** Framer agency templates for studios and consultancies are launching soon on FramerHub. Join the waitlist to get early access when the first ones ship. # **Framer Agency Templates** Framer agency templates for studios and consultancies that need a site built to win client trust: case studies, service pages, and a portfolio layout that scales with a growing team. Built with the same component quality behind everything else on FramerHub. ### No live templates yet in this category "We're still building this category. Join the waitlist below and we'll email you the moment the first one ships." ## **Get new template drops in your inbox ** Join the Agency Templates list and we'll email you when new designs ship, along with early-access pricing. --- - **Page:** Mercato | FramerHub - **Source:** https://framerhub.io/templates/framer-ecommerce-templates/mercato - **Description:** A polished multi-category ecommerce template for modern stores, with product discovery, collections, editorial content, wishlists, and customer account. # **Mercato** A polished multi-category ecommerce template for modern stores, with product discovery, collections, editorial content, wishlists, and customer account pages. ![Mercato preview 1 of 1](https://framerhub.io/framerhub/img/templates/mercato-template.png) - Multi-category storefront with collection and product pages - Product search, wishlist, cart, and customer account flows - Lookbook, blog, sale, and editorial content layouts - Responsive design with light and dark modes ## A complete storefront for everyday brands Mercato pairs a clean, neutral visual system with the structure a growing ecommerce brand needs. Use it for apparel, home goods, accessories, technology, or a catalogue that spans several categories. The template includes the core shopping journey alongside the supporting pages that make a store feel established: collections, product details, a lookbook, editorial content, account screens, policies, and customer support. --- - **Page:** Terrane | FramerHub - **Source:** https://framerhub.io/templates/framer-real-estate-templates/terrane - **Description:** A premium real estate template with advanced property filters, live map search, CMS-managed listings, and polished pages for homes, neighborhoods, and. # **Terrane** A premium real estate template with advanced property filters, live map search, CMS-managed listings, and polished pages for homes, neighborhoods, and brokers. ![Terrane preview 1 of 4](https://framerhub.io/framerhub/img/templates/terrane/01-terrane.webp) - Advanced filters for price, status, bedrooms, bathrooms, and property type - Live map that updates as visitors filter, search, or load more listings - CMS-managed property details, neighborhoods, brokers, and journal content - 12 responsive pages including listings, property details, profiles, and contact ## About Terrane Terrane is a real estate template for brokerages and property teams with a substantial catalog of homes. It pairs an editorial, architecture-led visual system with the search tools buyers need to narrow a large inventory quickly. The listings experience combines a price range slider with filters for status, bedrooms, bathrooms, and home type. Visitors can stack filters, clear them in one action, sort the results, and switch to a map that updates as they search or load more properties. ### Property discovery - Search and filter a large property catalog without sending buyers through static category pages - Browse homes alongside an interactive location map - Sort results and clear active filters quickly - Give each listing a full page with photography, price, beds, baths, size, lot details, features, and broker information ### Included pages - Home with property search - Listings with advanced filters and map view - CMS-driven property detail pages - Neighborhood guides - Broker profiles - Journal for market notes and editorial content - About, contact, and 404 pages ### Built for easy editing Manage addresses, prices, bedrooms, bathrooms, photos, locations, and supporting content directly in Framer CMS. Replace the branding, colors, listings, and copy, then publish a responsive property site without rebuilding the search experience from scratch. --- - **Page:** Aurelle Jewels Shop | FramerHub - **Source:** https://framerhub.io/templates/framer-ecommerce-templates/aurelle-jewels-shop - **Description:** A refined ecommerce template for fine jewelry, crafted brands, and luxury boutiques, with editorial layouts and a complete FrameWoo storefront. # **Aurelle Jewels Shop** A refined ecommerce template for fine jewelry, crafted brands, and luxury boutiques, with editorial layouts and a complete FrameWoo storefront. ![Aurelle Jewels Shop preview 1 of 2](https://framerhub.io/framerhub/img/templates/aurelle/01-home.png) - 18+ storefront, commerce, account, and support pages - Live WooCommerce products, cart, checkout, and customer accounts - Editorial collections, craftsmanship stories, and product cross-sells - Reusable components with a consistent type and spacing system ## About Aurelle Jewels Shop Aurelle is a refined ecommerce template for fine jewelry, crafted brands, and luxury boutiques. Editorial layouts, elegant serif typography, and a warm neutral palette give your pieces the quiet, gallery-like presentation they deserve. Aurelle is designed for FrameWoo, the WooCommerce plugin for Framer. Connect your WooCommerce store and sell directly from your Framer site with real products, a live cart, checkout, and customer accounts. Every commerce screen is already designed and wired. ### Storefront pages - Home with hero, category tiles, product spotlight, new arrivals, craft story, editorial moment, social proof, and newsletter - Shop with filter bar, category, metal, and price dropdown states, plus load more - Product page with gallery, details, craftsmanship, complementary products, care, and reviews - Collections campaign page with an editorial grid - Our Craft brand story covering the atelier, making process, materials, artisans, and commitments ### Commerce flow - Cart drawer and full cart page - Multi-step checkout with step indicator - Order confirmation - Account, login, registration, and forgotten-password pages ### Support pages - Size guide with ring sizing, measuring guidance, and chain lengths - FAQ, contact, shipping and returns policy, and a designed 404 page ### Built right - Reusable navigation, announcement bar, footer, newsletter, product cards, buttons, and form fields - Consistent typography and spacing across 18+ pages - Every layout is ready to connect to a live WooCommerce catalog through FrameWoo Launch a jewelry store that feels like a maison, not a marketplace. Replace the imagery, connect your store, and publish. --- - **Page:** Orlea | FramerHub - **Source:** https://framerhub.io/templates/framer-ecommerce-templates/orlea - **Description:** A bespoke fine-jewelry template for made-to-order pieces, with editorial layouts, refined serif type, and a complete FrameWoo storefront. # **Orlea** A bespoke fine-jewelry template for made-to-order pieces, with editorial layouts, refined serif type, and a complete FrameWoo storefront. ![Orlea preview 1 of 5](https://framerhub.io/framerhub/img/templates/orlea/01-home.png) - 15+ responsive storefront, commerce, account, and support pages - Live WooCommerce products, cart, checkout, and customer accounts - Commission, engraving, materials, sizing, and gifting experiences - Dedicated mobile homepage and slide-out mobile navigation ## About Orlea Orlea is a bespoke fine-jewelry template for Framer, built for made-to-order pieces. Editorial layouts, refined serif type, and a warm, gallery-like palette give heirloom jewelry the presentation it deserves. Orlea runs on FrameWoo, the WooCommerce plugin for Framer. Connect your store and sell from your Framer site with real products, a live cart, checkout, and customer accounts. Every commerce screen is already designed and wired. ### Storefront pages - Home with private-showroom hero, commission path, ring sizer, engraving preview, materials tabs, atelier sequence, and gifting path - Shop with an editorial product grid - Product page with split gallery, craftsmanship, macro details, complementary products, care, and reviews - Collections campaign page with three signature-band editorials - Our Craft page featuring the atelier, process, materials, maker quote, and artisans ### Commerce flow - Cart drawer and full cart page - Checkout - Order confirmation with a delivery timeline - Account, login, and contact pages ### Support pages - Size guide with ring sizer, at-home measuring guidance, and chain guide - FAQ, shipping and returns policy, and a designed 404 page ### Built right - Fully responsive with a dedicated mobile homepage and slide-out mobile menu - Interactive engraving specimen and materials sections - Reusable header, announcement bar, footer, product cards, buttons, and labels - Consistent typography and spacing across 15+ pages - Every layout is ready to connect to a live WooCommerce catalog through FrameWoo Launch a jewelry maison, not a marketplace. Replace the imagery, connect your store, and publish. --- - **Page:** Gravity Bouncing Balls | FramerHub - **Source:** https://framerhub.io/components/bouncing-balls - **Description:** Interactive 2D physics simulation with gravity, collisions, and mouse repulsion. Free Framer component for client sites, portfolios, and product pages. # **Gravity Bouncing Balls ** Interactive 2D physics simulation with gravity, collisions, and mouse repulsion. One-time payment Lifetime updates Commercial license ## **Overview** Interactive 2D physics simulation with gravity, collisions, and mouse repulsion. - Real-time 2D physics engine - Mouse repulsion interaction - Customizable object sizes - Multiple color palettes - Adjustable bounciness and friction - Responsive canvas ## Interactive Physics Playground Transform your Framer site with a mesmerizing physics simulation. Watch colorful objects fall under gravity, bounce off walls and floors, and scatter when users interact with their mouse. A playful, attention-grabbing element for modern websites. ## Features**Realistic Physics Engine** Simulates gravity, velocity, restitution (bounciness), and friction. Objects interact with container boundaries naturally, creating lifelike movement.**Mouse Repulsion** Enable interactive mode to let users push and scatter objects with their cursor—adding a delightful layer of playfulness to your design.**Customizable Objects** Control object count, size range (min/max), color palettes, bounciness, and ground friction. Fine-tune every aspect of the simulation.**Color Palette Options** Choose from Random, Fixed Color, Warm Tones, Cool Tones, or Pastel modes to perfectly match your brand aesthetic.**Performance Optimized** Canvas-aware rendering reduces GPU load on the Framer canvas. Smooth animation loop with efficient collision detection. ## Use Cases**Hero Sections** — Create an engaging, interactive hero that captures visitor attention instantly.**About Pages** — Add personality and playfulness to tell your brand story.**Portfolio Showcase** — Stand out with dynamic, physics-driven visual elements.**Loading States** — Entertain users while content loads with bouncing animations.![Gravity Bouncing Balls Preview](https://framerhub.io/framerhub/img/components/control/BouncingBalls.png) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Bouncing Balls in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Quick Tips**Best Performance** — Keep object count between 10-30 for smooth animation. Reduce to 10-15 on mobile.**Color Combinations** — Dark backgrounds (black or deep blue) make vibrant objects pop. Try pastel mode for softer aesthetics.**Layering** — Place text content above the component. White text with subtle shadows provides best readability.**Physics Feel** — Lower bounciness (0.3-0.5) feels more grounded. Higher values (0.8-1.0) create energetic bouncing. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Bouncing Balls brings websites to life with genuine interactivity. It's not just a decoration—it's an experience that invites users to play, explore, and engage. Whether you want a subtle background effect or a bold statement piece, this component adapts to your creative vision with extensive customization options. --- ### **Gravity Bouncing Balls - FREE** Interactive 2D physics simulation with gravity, collisions, and mouse repulsion.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** CMS Gallery Lightbox | FramerHub - **Source:** https://framerhub.io/components/cms-gallery-lightbox - **Description:** A powerful CMS masonry gallery with native GLightbox support, responsive extraction, and interactive hover effects. Premium Framer component for client. # **CMS Gallery Lightbox ** A powerful CMS masonry gallery with native GLightbox support, responsive extraction, and interactive hover effects. One-time payment Lifetime updates Commercial license ## **Overview** A powerful CMS masonry gallery with native GLightbox support, responsive extraction, and interactive hover effects. - Native Masonry & Grid Layouts - Smart Image Extraction (Supports Custom Components) - GLightbox Integration (Images & Video) - Interactive Hover Effects (Scale, Fade, Slide, Bounce) - Customizable Captions ## Transform Your CMS Collections A CMS masonry gallery component with built-in **GLightbox** support, interactive hover effects, and smart image extraction. It effortlessly transforms raw CMS data or custom Framer gallery components into a stunning, fully responsive masonry grid. ## Features**Smart Image Extraction** Drop any custom component (like a custom 2x3 grid) into the slot, and this component will intelligently extract, deduplicate, and natively render all images into a seamless masonry layout.**Masonry & Grid Layouts** Toggle between an automatic responsive masonry layout (perfect for varying image heights) or a clean, fixed-height Grid layout with customizable image fit settings.**GLightbox Integration** Click-to-open lightbox for CMS images and videos, complete with fully customizable captions powered by your CMS text fields.**Hover Effects** Scale, fade, slide, and bounce animations with customizable overlay colors, icons, and background blur effects. ## Use Cases**Portfolio Galleries** — Display your creative work with a dynamic masonry layout and professional lightbox experience.**Photography Showcases** — Build a stunning, Pinterest-style photography grid that effortlessly scales across devices.**Video Galleries** — Showcase your video content natively within a lightbox from your CMS URLs.![CMS Gallery Lightbox Preview](https://framerhub.io/framerhub/img/components/control/cms-gallery-lightbox.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find CMS Gallery Lightbox in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Connect your Framer CMS collection to the component slot.**Layout Settings**- Toggle between Masonry and Grid Layouts - Adjust Image Height and Fit (in Grid mode) - Adjust Columns and Gap - Customize Item Border Radius and Shadow Intensity**Lightbox & Hover**- Enable or disable the Lightbox - Enable hover effects and select animations (Scale, Fade, Slide, Bounce) - Customize the overlay color, icon type (Zoom, Plus, View), icon size, and icon colors**Captions**- Toggle Show Caption to display image information inside the lightbox - Adjust Caption Font, Color, Background, Padding, and Margin directly from the properties panel ### Quick Tips**Custom Components** — If you use a custom component variant inside the CMS slot, the Lightbox will automatically extract all its images and render them seamlessly into the masonry grid while ignoring hidden responsive variants.**Best Performance** — Optimize your CMS images before uploading them for faster load times.**Layout Sizing** — Ensure your container is sized appropriately to allow the masonry layout to render columns correctly on all breakpoints. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It turns standard CMS collections into highly engaging, interactive portfolios instantly, complete with a built-in lightbox experience that usually requires complex external libraries and custom code overrides. ### **CMS Gallery Lightbox - $18** A powerful CMS masonry gallery with native GLightbox support, responsive extraction, and interactive hover effects.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** CMS Gallery Popup | FramerHub - **Source:** https://framerhub.io/components/cms-gallery-popup - **Description:** A fully customizable CMS Gallery Popup with thumbnail navigation and seamless interactions. Premium Framer component for client sites, portfolios, and. # **CMS Gallery Popup ** A fully customizable CMS Gallery Popup with thumbnail navigation and seamless interactions. One-time payment Lifetime updates Commercial license ## **Overview** A fully customizable CMS Gallery Popup with thumbnail navigation and seamless interactions. - CMS Integration - Thumbnail Navigation - Keyboard Support - Touch Gestures - Custom Styling ## CMS Gallery Popup A powerful and flexible image gallery component designed for Framer's CMS. It seamlessly integrates with your CMS data to create stunning lightboxes with thumbnail navigation. ## Features**CMS Integration** Connect directly to your CMS collections. Automatically detects images from gallery fields and nested content.**Thumbnail Navigation** Intuitive thumbnail strip for easy browsing. Position thumbnails at the bottom, top, left, or right.**Responsive Design** Adapts perfectly to all screen sizes. Thumbnails automatically reposition on smaller devices for optimal mobile experience.**Customizable Styling** Full control over colors, borders, shadows, and spacing. Customize arrows, close buttons, and badges to match your brand.**Keyboard & Touch Support** Navigate with arrow keys or swipe gestures on touch devices. Includes escape key support to close the popup. ## Use Cases**Product Galleries** — Showcase product images in a detailed lightbox with zoom capabilities.**Portfolio Projects** — Display high-resolution project images with a clean, professional gallery interface.**Real Estate Listings** — Create immersive photo tours for property listings directly from your CMS.![CMS Gallery Popup Preview](https://framerhub.io/framerhub/img/components/control/cms-gallery-popup.jpg) ## How to Use ### Installation 1. Find **CMS Gallery Popup** in the Framer Marketplace. 2. Click "Copy" or "Add to Project". 3. Paste the component onto your canvas. 4. Connect the "CMS Gallery" property to your CMS collection's gallery field. ### Customization**Source Options**- **CMS**: Pulls images directly from a CMS Gallery field. - **Normal**: Manually add images via the property panel. - **Override**: Use for advanced scenarios with overrides.**Popup Settings**- **Transition**: Choose from Slide, Fade, Scale, SlideScale, or SlideFade animations. - **Speed**: Adjust animation speed for transitions. - **Backdrop**: Customize the overlay color and opacity.**Thumbnails**- **Position**: Place thumbnails relative to the main image. - **Styling**: Adjust size, gap, borders, and active/inactive opacity. - **Responsiveness**: Set a breakpoint to automatically stack thumbnails on mobile.**Controls**- **Arrows**: Customize icon, size, color, and hover effects. - **Close Button**: Style the close button and position it as needed. - **Badge**: Show image count (e.g., "1/5") with custom styling. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This "The perfect solution for CMS galleries in Framer. It just works, and the customization options are endless!" --- ### **CMS Gallery Popup - $18** A fully customizable CMS Gallery Popup with thumbnail navigation and seamless interactions.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Bouncing Image Trail | FramerHub - **Source:** https://framerhub.io/components/bouncing-image-trail - **Description:** Add an immersive, GSAP-powered bouncing image trail to your cursor. Premium Framer component for client sites, portfolios, and product pages. # **Bouncing Image Trail ** Add an immersive, GSAP-powered bouncing image trail to your cursor. One-time payment Lifetime updates Commercial license ## **Overview** Add an immersive, GSAP-powered bouncing image trail to your cursor. - GSAP Physics - Mouse Interaction - Customizable Distances ## Transform Your Cursor into a Playful Gallery Instantly enhance user engagement with a dynamic, gravity-defying image trail that tracks your mouse movements and bounds across the screen. ## Features**GSAP Physics** Powered by the industry-leading GSAP animation library, each image drops and bounces with highly realistic physics and perfect easings.**Optimized Performance** Automatically cleans up DOM nodes and manages timelines, ensuring that your 60fps framerate holds steady no matter how fast you move your mouse. ## Use Cases**Creative Portfolios** — Showcase glimpses of your work interactively as the user explores your landing page.**Event Teasers** — Tease event photos in a playful, unexpected way that begs users to keep moving their cursor.![Bouncing Image Trail Preview](https://framerhub.io/framerhub/img/components/control/bouncing-image-trail.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Bouncing Image Trail in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Everything is adjustable right in the Framer properties panel.**General Settings**- Upload or link your array of images - Change the `Distance` value to control how frequently images spawn - Adjust the `Image Size` and `Border Radius` to match your aesthetic ### Quick Tips**Best Performance** — Keep your source images optimized and avoid passing extremely high-resolution assets to prevent loading spikes.**Size & Radius** — Use a smaller `Image Size` combined with a rounded `Border Radius` for a bubble-like effect, or larger sizes with sharp edges for a brutalist vibe.**Layering** — Ensure the container has enough vertical space so the bounce effect has room to resolve at the bottom of the section. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It turns a simple cursor movement into a delightful micro-interaction that users literally can't stop playing with. --- ### **Bouncing Image Trail - $9** Add an immersive, GSAP-powered bouncing image trail to your cursor.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Circular Showcase | FramerHub - **Source:** https://framerhub.io/components/circular-showcase - **Description:** A creative circular rotating gallery of images orbiting around central text. Premium Framer component for client sites, portfolios, and product pages. # **Circular Showcase ** A creative circular rotating gallery of images orbiting around central text. One-time payment Lifetime updates Commercial license ## **Overview** A creative circular rotating gallery of images orbiting around central text. - Smooth continuous rotation - Fully customizable images and text - Customizable radius, size, and speed ## Circular Showcase A creative circular rotating gallery of images orbiting around a central text element, perfect for showing off projects, clients, or portfolios. ## Features**Smooth Rotation** Continuously rotates the image gallery with smooth framer-motion animation.**Fully Customizable** Easily adjust the circle's radius, item sizes, and rotation speed. Change the center text to suit your context. ## Use Cases**Client Showcase** — Display logos or images of clients you've worked with in a dynamic loop.**Portfolio Highlights** — Showcase snippets of your recent projects in a visually engaging manner.![Circular Showcase Preview](https://framerhub.io/framerhub/img/components/control/circular-showcase.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Circular Showcase in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Easily adapt the gallery to your design needs using the Framer properties panel.**Images**- Add, remove, or reorder the images you want to display in the circle.**Geometry**- Circle Radius: The distance from the center text to the images. - Item Size: The width and height of each image item. - Border Radius: Round the corners of the images.**Animation**- Speed: How fast the gallery rotates. - Direction: Choose between clockwise and counter-clockwise rotation.**Center Text**- Text: The central headline. - Font: Full typography control over the central text. - Color: Color of the central text. ### Quick Tips**Best Performance** — Keep the number of images reasonable (6-12) for the best performance and visual balance.**Image Formatting** — Use square images for the best results, as the items have a fixed width and height. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It's a visually striking and interactive way to display collections without taking up too much vertical space. It adds motion and life to static sections of a site. --- ### **Circular Showcase - $9** A creative circular rotating gallery of images orbiting around central text.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Infinite Gallery | FramerHub - **Source:** https://framerhub.io/components/infinite-gallery - **Description:** An infinitely scrolling horizontal gallery with snapping physics and a smooth parallax effect. Premium Framer component for client sites, portfolios, and. # **Infinite Gallery ** An infinitely scrolling horizontal gallery with snapping physics and a smooth parallax effect. One-time payment Lifetime updates Commercial license ## **Overview** An infinitely scrolling horizontal gallery with snapping physics and a smooth parallax effect. - True Infinite Scrolling Loop - Horizontal & Vertical Modes - Custom Physics & Snapping - Deep Parallax Effect - 3D Tilt & Scale ## Infinite Gallery A highly interactive, infinitely scrolling horizontal gallery with custom physics and dynamic spatial effects built natively for Framer. ## Features**True Infinite Loop** Scroll or drag continuously without any jitter or layout thrashing.**Vertical & Horizontal Modes** Switch seamlessly between horizontal carousels and vertical scrolling lists.**Physics Engine** Enjoy buttery-smooth inertia, customizable snap-to-center functionality, and scroll smoothing.**Dynamic Parallax** Images move independently within their containers, creating a deep sense of space and premium feel.**Spatial 3D Effects** Items scale down, fade, and rotate in 3D space as they move away from the center of the screen. ## Use Cases**Portfolio Showcases** — Make your visual work stand out with premium interaction.**E-Commerce Lookbooks** — Display products in an engaging horizontal layout.![Infinite Gallery Preview](https://framerhub.io/framerhub/img/components/control/infinite-gallery.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Infinite Gallery in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Fully customize the gallery right from the Framer properties panel.**Physics Settings**- Toggle drag and wheel scrolling. - Adjust snap delay, snap strength, inertia damping, and scroll smoothing.**Effects Settings**- Control parallax strength. - Modify the edge scale, opacity fading, and 3D tilt amount. ### Quick Tips**Parallax Requirement** — For the parallax effect to work, make sure the "Image Fit" setting is set to either "Fill" or "Tile".**Performance Optimization** — While the component is highly optimized with requestAnimationFrame, using properly sized web-optimized images ensures smooth 60fps performance on all devices. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It turns a standard image slider into a rich, interactive experience that feels like a custom-coded webGL experience, without writing a single line of code. --- ### **Infinite Gallery - $9** An infinitely scrolling horizontal gallery with snapping physics and a smooth parallax effect.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** DelphiTunnel - **Source:** https://framerhub.io/components/delphitunnel ## DelphiTunnel Build the digital version of you to scale your expertise and availability, infinitely. DelphiTunnel is a robust infinite 3D tunnel background that showcases your images in a looping environment. ## Features **Infinite 3D Looping** Optimized continuous scrolling that loops your images infinitely. **Interactive Mouse Scrolling** Allows users to infinitely scroll through the tunnel seamlessly when hovering over it with their mouse or touch dragging. **Randomized Grid Snapping** Randomly distribute your images across the tunnel walls while keeping them perfectly aligned and snapped to the grid. **Device Quality Detection** Auto-detects the user's device and adjusts the renderer settings so your site never lags on low-end hardware. ## Use Cases **Hero Backgrounds** — Perfect for impactful headers or portfolio landing pages. **Immersive Galleries** — Display an abstract collection of photos as the user scrolls. ![DelphiTunnel Preview](/framerhub/img/components/large/delphitunnel.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find DelphiTunnel in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Easily adjust everything from colors to scroll speed. **Colors** - Background Color - Line Color - Line Opacity **Behavior** - Speed - Images (Upload your own) ### Quick Tips **Best Performance** — Keep the Quality set to "Auto" so mobile devices get smooth framerates. **Color Combinations** — Dark backgrounds with low-opacity lines create the most immersive futuristic feel. **Layering** — Place text inside a Framer Stack positioned absolutely over the tunnel to create a stunning hero section. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It brings a complex WebGL 3D effect natively into Framer without needing any coding skills. --- - **Page:** Inline Media Word | FramerHub - **Source:** https://framerhub.io/components/inline-media-word - **Description:** Put an image or video block directly inside a word. Premium Framer component for client sites, portfolios, and product pages. # **Inline Media Word ** Put an image or video block directly inside a word. One-time payment Lifetime updates Commercial license ## **Overview** Put an image or video block directly inside a word. - Insert an image or video between any characters - Rounded inline media block with simple hover motion - Adjustable size, spacing, radius, and vertical offset - Extended font controls for big editorial typography ## Inline Editorial Text Inline Media Word recreates the look of a large word that stays fully readable by default, then swaps specific letters into images or videos on hover. It is ideal for hero titles, fashion-style layouts, and editorial landing sections. ## Features**Hover Letter Replacement** Choose specific letters that should transform into rounded images or looping videos on hover.**Editorial Typography** Use large type with precise spacing and a media tile that feels like part of the lettering.**Simple Layout Controls** Adjust which letters are interactive plus the shared media size, gap, corner radius, and baseline offset without editing code. ## Use Cases**Hero Headlines** — Add a visual accent directly inside a landing page title.**Fashion and Editorial Sites** — Build the exact word-image treatment shown in the reference.**Campaign Typography** — Mix bold type and media for launch pages and posters.![Inline Media Word Preview](https://framerhub.io/framerhub/img/components/control/inline-media-word.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Inline Media Word in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization**Text**- Set the word or title - Add multiple entries in `Hover Items`- Choose which letter each media tile should replace with `Letter`**Appearance**- Tune gap, radius, width, height, and position - Set text color**Motion**- Control video autoplay, fade duration, and hover effect (Scale, Slide, Rotate, Flip) ### Quick Tips**Reference Match** — For the provided “Celebrations” style, keep the full word visible by default and assign square or near-square tiles to the letters you want to swap on hover.**Large Type** — Keep font size high and letter spacing slightly negative for the clean editorial look.**Video Choice** — Short looping portrait clips work best when used as the inline insert. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This This component turns a simple headline into a styled visual statement. It is fast to set up, easy to tune, and captures a modern editorial look with very little effort. --- ### **Inline Media Word - $9** Put an image or video block directly inside a word.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Mouse Image Trail | FramerHub - **Source:** https://framerhub.io/components/mouse-image-trail - **Description:** Leave a dynamic trail of images that follow your cursor. Premium Framer component for client sites, portfolios, and product pages. # **Mouse Image Trail ** Leave a dynamic trail of images that follow your cursor. One-time payment Lifetime updates Commercial license ## **Overview** Leave a dynamic trail of images that follow your cursor. - Customizable Images - Fluid Framer Motion Physics - Adjustable Density and Lifespan - Random Rotation Effect - Fade Out Animation ## Title/Headline Create an engaging, playful interaction with the Mouse Image Trail component. As visitors move their cursor across your site, a vibrant sequence of images appears, trailing their path before smoothly fading away. Perfect for creative portfolios, photography sites, and modern landing pages. ## Features**Customizable Imagery** Easily add your own sequence of images to create a personalized trail effect.**Fluid Animations** Powered by Framer Motion, images scale up beautifully on entrance and fade out smoothly as the mouse moves on.**Fully Adjustable Settings** Control the distance between spawned images, their size, fade duration, and random rotation for the perfect look. ## Use Cases**Creative Portfolios** — Showcase your best work in an unexpected, interactive way as users explore your site.**Photography Studios** — Provide a sneak peek of photo sessions directly connected to the user's cursor.**Playful Landing Pages** — Add a "wow" factor to a hero section to capture visitor attention immediately.![Mouse Image Trail Preview](https://framerhub.io/framerhub/img/components/control/mouse-image-trail.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Mouse Image Trail in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Easily adjust the component to fit your design style directly from the Framer properties panel.**Image Settings**- Add as many images as you want to the sequence. - Set the `Image Size` to determine how large each photo appears.**Trail Physics**- Adjust `Distance` to control how frequently images spawn along the path. - Change `Fade Out (s)` to control how long images linger before disappearing. - Use `Rotation Range` to add organic variety with random tilting for each image. ### Quick Tips**Best Performance** — Keep the `Max Images` setting around 15-20 to ensure smooth performance across all devices.**High Quality Images** — Since these images appear briefly, use well-compressed, high-impact visuals that are instantly recognizable.**Layering** — Ensure the component is placed in a container with appropriate z-indexing so the images don't block critical interactive elements below. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This The Mouse Image Trail transforms an empty space into an interactive playground. It adds that elusive "delight" factor that makes websites memorable and encourages users to spend more time engaging with the page. --- ### **Mouse Image Trail - $9** Leave a dynamic trail of images that follow your cursor.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** ShaderHatch | FramerHub - **Source:** https://framerhub.io/components/shader-hatch - **Description:** Add beautiful hatching and scribble WebGL effects to your elements. Premium Framer component for client sites, portfolios, and product pages. # **ShaderHatch ** Add beautiful hatching and scribble WebGL effects to your elements. One-time payment Lifetime updates Commercial license ## **Overview** Add beautiful hatching and scribble WebGL effects to your elements. - Native WebGL Three.js Effect - Responsive Image Fitting - Interactive Hover States - Fully Customizable Jitter & Hatching ## Bring Your Elements to Life Add a dynamic, scribbled hatching effect to your images with ShaderHatch. Powered by native Three.js WebGL, this component converts standard images into beautifully shaded artwork right on the canvas with incredibly smooth performance. ## Features**Interactive Triggers** Set the effect to run continuously or smoothly animate in on hover using Framer Motion springs.**Perfect Responsive Fitting** Standard image fit modes (Fill, Fit, Stretch, Tile) ensure your images and the shader effect adapt flawlessly to any container size.**Fully Customizable** Fine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic look you need. ## Use Cases**Hero Graphics** — Transform a standard hero image into a striking, animated scribble illustration.**Interactive Portfolios** — Make your creative work stand out with highly customized hover or reveal states.![ShaderHatch Preview](https://framerhub.io/framerhub/img/components/control/shader-hatch.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find ShaderHatch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization ShaderHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.**Core Settings**- **Image**: Upload your source image. - **Image Fit**: Control how the image scales within its container. - **Trigger**: Choose whether the effect runs always, or only animates in when hovered. - **Quality**: Auto-detects device capabilities to ensure optimal framerates.**Style & Geometry**- **Angle**: Define the tilt of the hatch lines. - **Spacing**: Adjust the gap between consecutive strokes. - **Line Width**: Set the thickness of the scribbles. - **Softness & Round Cap**: Control anti-aliasing and stroke terminations.**Jitter & Animation**- **Angle, Offset, & Spacing Jitter**: Introduce randomness to create a hand-drawn feel. - **Speed**: Determine the frame rate of the scribble animation. Set to 0 for a static sketch. ### Quick Tips**Performance** — The component automatically detects device capabilities to adjust pixel ratio and antialiasing. You can manually force it into "Performance" mode via the Quality dropdown for heavy pages.**Static Sketches** — Set the `Speed` to 0 and tweak the `Seed` property to lock in a specific, perfect scribble iteration.**Dynamic Coloring** — By turning off `Use Original`, you can enforce a monochrome or specific line color, making the component highly adaptable to different color themes. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This ShaderHatch brings the power of custom shaders into Framer with zero code. It provides an immediate, striking visual upgrade to regular media that cannot be replicated with standard CSS filters. ### **ShaderHatch - $9** Add beautiful hatching and scribble WebGL effects to your elements.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Portfolio Reveal Hero | FramerHub - **Source:** https://framerhub.io/components/portfolio-reveal-hero - **Description:** Mesmerizing organic blob-mask reveal between two images. Premium Framer component for client sites, portfolios, and product pages. # **Portfolio Reveal Hero ** Mesmerizing organic blob-mask reveal between two images. One-time payment Lifetime updates Commercial license ## **Overview** Mesmerizing organic blob-mask reveal between two images. - WebGL-powered organic blob mask - Seamless image transitions - Fully customizable styles ## Title/Headline A compelling introduction description for Portfolio Reveal Hero. Allow users to magically wipe away one image to reveal another underneath using organic, physics-based liquid blobs. ## Features**Organic Masking** High performance WebGL shaders render a beautiful noisy blob cursor mask.**Auto-Optimization** Intelligently downscales quality on mobile or low-end devices to maintain steady 60fps. ## Use Cases**Before & After** — Perfect for showing edits, color changes, or transformations.**Hidden Surprises** — Reveal a totally different context or easter egg behind a professional headshot.![Portfolio Reveal Hero Preview](https://framerhub.io/framerhub/img/components/control/portfolio-reveal-hero.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Portfolio Reveal Hero in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Easily swap out images and control the blob dynamics.**Images & Layout**- Base Image - Reveal Image - Image Fit**Dynamics**- Blob Radius - Blob Fade ### Quick Tips**Best Performance** — Keep the Quality setting on "Auto" to ensure all of your visitors have a smooth experience regardless of their hardware.**Image Proportions** — Upload images with the same exact aspect ratio to prevent jarring jumps when interacting. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It turns a static boring photo into a delightful, fluid interaction that captures users' attention. ### **Portfolio Reveal Hero - $9** Mesmerizing organic blob-mask reveal between two images.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Swiper Carousel | FramerHub - **Source:** https://framerhub.io/components/swiper-carousel - **Description:** The ultimate carousel component with stunning effects and total control. Premium Framer component for client sites, portfolios, and product pages. # **Swiper Carousel ** The ultimate carousel component with stunning effects and total control. One-time payment Lifetime updates Commercial license ## **Overview** The ultimate carousel component with stunning effects and total control. - 5 transition effects (Slide, Fade, Coverflow, Flip, Cards) - Autoplay with pause-on-hover - Navigation arrows, pagination bullets, and scrollbar - Keyboard and mousewheel navigation - Free mode and loop capabilities - Fully customizable styling ## The Ultimate Carousel for Framer Transform your Framer projects with the most powerful carousel component available. Powered by Swiper.js, this component gives designers complete control over every aspect of their carousel – no code required. ## Features**5 Stunning Effects** Choose from Slide, Fade, Coverflow, Flip, or Cards effects. Each effect comes with its own customization options to perfect the look.**Complete Navigation Control** Add navigation arrows, pagination bullets (or fraction/progress bar), and scrollbar. Customize colors and sizes to match your design.**Smart Autoplay** Set your carousel to auto-advance with customizable timing. Pause on hover keeps users in control.**Multiple Interaction Modes** Enable keyboard navigation, mousewheel scrolling, and touch/drag functionality.**Slot-Based Content** Connect any frame or component to the carousel slots for total design flexibility. Support for multiple slides per view and custom gap settings.![swiper Caroisel](https://framerhub.io/framerhub/img/components/control/swiper-carousel.jpg) ## Use Cases**Hero Sections** — Create eye-catching homepage heroes with the Fade or Slide effects.**Product Galleries** — Showcase products with the Coverflow effect for that premium feel.**Testimonials** — Display customer reviews with the elegant Fade effect.**Portfolio** — Show off your work with the playful Cards effect.**Image Galleries** — Full-screen image viewing with customizable transitions.**Slides**- Connect your frames to the Slide Content slot - Add/remove slides by adding/removing frames from the connection**Layout**- Direction: Horizontal or Vertical scrolling - Slides Per View: Show multiple slides at once - Gap: Space between slides - Center Slides: Center the active slide**Effects**- Slide: Classic sliding transition - Fade: Smooth crossfade between slides - Coverflow: Album cover-style effect - Flip: 3D card flip - Cards: Stacked cards effect**Navigation**- Show/hide navigation arrows - Customize arrow color, size, background, and hover effects - Support for custom SVG or image arrows**Pagination**- Bullets: Clickable dots - Fraction: Shows "1 / 4" style - Progress Bar: Animated progress line - None: Hide pagination**Autoplay**- Enable/disable auto-advance - Set delay between slides - Pause when mouse hovers - Reverse direction option**Behavior**- Loop: Infinite scrolling - Transition Speed: Control animation duration - Free Mode: Slides move freely without snapping - Rewind: Jump back to first slide at the end (when loop is off)**Interaction**- Touch/Drag: Enable or disable swiping - Keyboard: Use arrow keys to navigate - Mousewheel: Scroll to change slides - Grab Cursor: Visually indicate draggable state**Styling**- Slide Radius: Round slide corners (px) - Full control over pagination and scrollbar colors ### Quick Tips**Tip 1** — For the best Coverflow effect, set "Slides Per View" to 3 and enable "Center Slides".**Tip 2** — Use the Cards effect with 1 slide per view for a stack of overlapping cards.**Tip 3** — Enable "Free Mode" with "Sticky" for a satisfying snap-to-slide behavior while dragging.**Tip 4** — Set "Transition Speed" to 800-1000ms for a more cinematic, smooth feeling. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Love This This isn't just another carousel – it's THE carousel. With 5 powerful effects, complete navigation options, and pixel-perfect customization, you'll never need another slider component. Every control is designed with designers in mind: no code, no confusion, just beautiful results. ---**Need Help?** Visit framerhub.io/support for documentation and video tutorials. ### **Swiper Carousel - $18** The ultimate carousel component with stunning effects and total control.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** TextHatch | FramerHub - **Source:** https://framerhub.io/components/text-hatch - **Description:** Apply a stunning, hand-drawn hatching shader effect to your typography. Premium Framer component for client sites, portfolios, and product pages. # **TextHatch ** Apply a stunning, hand-drawn hatching shader effect to your typography. One-time payment Lifetime updates Commercial license ## **Overview** Apply a stunning, hand-drawn hatching shader effect to your typography. - Native WebGL Three.js Effect - Fully Custom Fonts - Interactive Hover States - Fully Customizable Jitter & Hatching ## Hand-Drawn Typography Add a dynamic, scribbled hatching effect to your typography with TextHatch. Powered by native Three.js WebGL, this component converts standard text into beautifully shaded, hand-drawn artwork right on the canvas with incredibly smooth performance. ## Features**Interactive Triggers** Set the effect to run continuously or smoothly animate in on hover using Framer Motion springs.**Custom Fonts & Styling** Fully supports Framer's built-in font controls. Choose any font family, adjust the size and weight, and the hatching system will automatically adapt.**Fully Customizable** Fine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic look you need. ## Use Cases**Hero Headlines** — Make an unforgettable first impression by turning your main headline into an animated sketch.**Creative Portfolios** — Add a layer of artistic polish to showcase pages.![TextHatch Preview](https://framerhub.io/framerhub/img/components/control/text-hatch.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find TextHatch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization TextHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.**Text Settings**- **Text**: The string to be rendered. - **Font**: Use Framer's font picker to select the exact family, size, and weight. - **Trigger**: Choose whether the effect runs always, or only animates in when hovered. - **Quality**: Auto-detects device capabilities to ensure optimal framerates.**Style & Geometry**- **Angle**: Define the tilt of the hatch lines. - **Spacing**: How far apart the scribble strokes are. - **Line Width**: The thickness of each stroke.**Jitter & Animation**- Control how messy the scribble looks by tweaking Angle Jitter, Offset Jitter, and Spacing Jitter. Set the animation speed to control how fast the scribble updates. ### Quick Tips**Best Font Styles** — The hatching effect looks best on text with thicker strokes. Try using heavier font weights (Bold, Black) or larger font sizes so the scribble lines have plenty of room to draw.**Static Sketches** — Set the `Speed` to 0 and tweak the `Seed` property to lock in a specific, perfect scribble iteration. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This TextHatch brings the coveted "awwwwards-style" WebGL shading effect directly into Framer typography without writing a single line of shader code. ### **TextHatch - $9** Apply a stunning, hand-drawn hatching shader effect to your typography.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** ASCII Image - **Source:** https://framerhub.io/components/ascii-image ## Transform Images into ASCII Art Create retro-style ASCII art effects from any image. Perfect for hero sections, backgrounds, or unique visual effects that stand out. ## Features **Image Conversion** Upload any image and watch it transform into a grid of ASCII characters in real-time. **Grid Control** Fine-tune the resolution with adjustable columns (10-400) and rows (10-400) for the perfect balance of detail and performance. **Color Palettes** Choose from three color modes: - **Mono** — Classic monochrome look - **Grey 4** — 4-level grayscale for subtle depth - **Color** — Full RGB color preservation **Custom Charset** Define your own character set to control the visual density and style of the output. **Extended Font Controls** Full control over font family, size, weight, line height, and letter spacing. **Responsive Design** Automatically adapts to container size changes with optimized debounced resize handling (100ms) using ResizeObserver for smooth performance. ## Use Cases **Hero Sections** — Create eye-catching headers with ASCII-style imagery **Portfolio Sites** — Stand out with unique visual effects **Retro Themes** — Perfect for nostalgic or tech-focused designs **Interactive Backgrounds** — Add visual interest without heavy assets ![ASCII Image Preview](/framerhub/img/components/control/ascii-image.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find ASCII Image in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Grid Settings** - Columns: Controls horizontal resolution (default: 120) - Rows: Controls vertical resolution (default: 60) **Visual Options** - Charset: Custom characters for ASCII mapping - Invert: Toggle light/dark character mapping - Palette: Choose color output mode **Typography** - Font: Extended controls for font family, size, weight, and spacing ### Quick Tips **Performance** — Lower grid values (60-80 columns) for smooth performance on mobile. Higher values (150+) for detailed desktop displays. **Monospace Fonts** — Use monospace fonts like Courier New or Fira Code for authentic ASCII aesthetics. **Contrast** — Enable Invert for dark backgrounds, disable for light backgrounds. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Add a unique, retro-tech aesthetic to any project with zero performance impact. ASCII art creates memorable visual experiences that set your designs apart. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** VFX Scroll Shift | FramerHub - **Source:** https://framerhub.io/components/vfx-scroll-shift - **Description:** Apply a stunning multi-color glitch effect to text, driven by scroll velocity. Premium Framer component for client sites, portfolios, and product pages. # **VFX Scroll Shift ** Apply a stunning multi-color glitch effect to text, driven by scroll velocity. One-time payment Lifetime updates Commercial license ## **Overview** Apply a stunning multi-color glitch effect to text, driven by scroll velocity. - Velocity-based scroll effect - High-performance native Three.js WebGL rendering - Customizable smoothing and intensity ## Title/Headline Transform your typography into an interactive WebGL masterpiece. The VFX Scroll Shift component applies a dynamic multi-color split glitch effect that reacts to your scroll speed. ## Features**Velocity Reactive** The faster you scroll, the more intense the glitch separation becomes, creating a dynamic sense of speed and motion.**Customizable Colors** Configure three distinct colors (Main Text, Trail 1, Trail 2) for maximum aesthetic control instead of being locked into a standard RGB split.**Smooth Decay** Built-in interpolation ensures the glitch effect smoothly fades out when scrolling stops, providing a polished and premium feel. ## Use Cases**Hero Typography** — Make massive typography headings distort dynamically as users scroll past them.**Kinetic Typography** — Perfect for highly interactive typography sections that demand attention.![VFX Scroll Shift Preview](https://framerhub.io/framerhub/img/components/control/vfx-scroll-shift.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VFX Scroll Shift in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Drag the component onto your canvas, type your text, and tweak the properties.**Typography & Color**- **Text:** The text string to display. - **Font:** Full extended font controls (Family, Weight, Size, Spacing). - **Colors:** Set your Main Color, and your two glitch split colors (Trail 1, Trail 2).**Effect Controls**- **Strength:** Multiplier for how far the glitch channels separate during scroll. - **Smoothing:** Adjusts the decay rate. Lower values create a longer trail effect. - **Overflow:** Adds extra boundary space to prevent the glitch effect from clipping at the edges. ### Quick Tips**Performance** — This component utilizes a native WebGL texture for the text rendering, providing excellent performance across devices. Use the Quality setting to toggle between Performance and Quality modes if needed.**Combine with Sticky** — Place this component inside a `Sticky` positioned section so users can scroll while the element stays in view, maximizing the visible effect. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It takes standard typography and elevates it into a highly immersive WebGL experience without writing a single line of shader code. --- ### **VFX Scroll Shift - $9** Apply a stunning multi-color glitch effect to text, driven by scroll velocity.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Aurora - **Source:** https://framerhub.io/components/aurora ## Aurora Bring the magic of the northern lights to your website. Aurora generates a flowing, organic curtain of light using procedural noise, creating a soothing and premium background effect that never repeats. ## Features **Organic Flow** The light rays move naturally, simulating the unpredictable yet rhythmic dance of real aurora borealis. **Color Customization** Start with a base color and control the hue variation to create green, purple, or any other colored aurora effects. **Performance Focused** Uses off-screen canvas rendering and optimized transparency handling to ensure smooth performance without blocking the main thread. ## Use Cases **Hero Backgrounds** — Create an immersive, dreamy first impression. **Landing Pages** — Add visual interest without distracting from your content. **Portfolio Sites** — Showcase a modern, artistic aesthetic. **SaaS Products** — Create a premium, polished feel for your app. ![Aurora Preview](/framerhub/img/components/control/aurora.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Aurora in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the appearance and behavior using Framer's property controls. **Intensity** - Controls the density of aurora rays (0.1 to 2) **Base Color** - Primary color of the aurora rays **Color Variation** - How much the colors vary from the base color (0-180 degrees) **Speed** - Animation speed of the flowing rays **Blur Amount** - Glow intensity and softness ### Quick Tips **Best Performance** — Keep intensity at 1 or below for smooth animation on most devices. **Color Combinations** — Green with 60° variation gives classic aurora look. Try purple or cyan for different moods. **Layering** — Place content above the component. Use contrasting text colors for readability. **Speed Settings** — Slower speeds (0.5-0.8) feel more elegant and hypnotic. ## License **Free Component** — Use freely in personal and commercial projects. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Credits [Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743). --- --- - **Page:** VideoHatch | FramerHub - **Source:** https://framerhub.io/components/video-hatch - **Description:** Apply a real-time, hand-drawn hatching shader effect to any video. Premium Framer component for client sites, portfolios, and product pages. # **VideoHatch ** Apply a real-time, hand-drawn hatching shader effect to any video. One-time payment Lifetime updates Commercial license ## **Overview** Apply a real-time, hand-drawn hatching shader effect to any video. - Native WebGL Three.js Effect - Real-time Video Textures - Original Color Sampling - Interactive Hover States - Fully Customizable Jitter & Hatching ## Hand-Drawn Video Playback Add a dynamic, scribbled hatching effect to your videos with VideoHatch. Powered by native Three.js WebGL, this component uses `VideoTexture` to convert any standard MP4 into a beautifully shaded, hand-drawn animation right on the canvas with incredibly smooth performance. ## Features**Original Color Sampling** The hatching shader samples the exact colors from the underlying video pixels, recreating your video entirely out of colored scribble strokes. Alternatively, turn off Original Color to tint the entire sketch with a single custom color.**Interactive Triggers** Set the effect to run continuously or smoothly animate in on hover using Framer Motion springs. The video continues to play underneath, but the scribble mask dynamically transitions in and out.**Fully Customizable** Fine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic sketch look you need. ## Use Cases**Creative Portfolios** — Make your showreel or project thumbnails stand out by presenting them as living sketches.**Hero Backgrounds** — Use a muted, monochromatic hatching effect on a background video to add subtle, organic texture without distracting from your foreground content.![VideoHatch Preview](https://framerhub.io/framerhub/img/components/control/video-hatch.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VideoHatch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization VideoHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.**Video Settings**- **Source**: Toggle between pasting a URL or Uploading a local video file. - **Playback Controls**: Toggle AutoPlay, Loop, and Mute. - **Video Fit**: Control how the video scales within the component bounds (Fill, Fit, Stretch). - **Trigger**: Choose whether the effect runs always, or only animates in when hovered. - **Quality**: Auto-detects device capabilities to ensure optimal framerates. Video textures are heavy, so leaving this on Auto is recommended.**Style & Geometry**- **Original Color**: Enable this to sample colors directly from the video. Disable it to tint the strokes with a single solid `Color`. - **Angle**: Define the tilt of the hatch lines. - **Spacing**: How far apart the scribble strokes are. - **Line Width**: The thickness of each stroke.**Jitter & Animation**- Control how messy the scribble looks by tweaking Angle Jitter, Offset Jitter, and Spacing Jitter. Set the animation speed to control how fast the scribble updates over time. ### Quick Tips**Best Performance** — Video textures are the most demanding type of texture in WebGL. To ensure 60fps on mobile devices, compress your video files and keep the resolution reasonable (e.g., 720p or 1080p max).**Static Sketches** — Set the `Speed` to 0 and tweak the `Seed` property to lock in a specific, perfect scribble iteration. The video will still play underneath, but the strokes will remain fixed in place. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This VideoHatch brings the coveted "awwwwards-style" WebGL shading effect directly into Framer video playback without writing a single line of shader code. ### **VideoHatch - $9** Apply a real-time, hand-drawn hatching shader effect to any video.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** AutoTOC - **Source:** https://framerhub.io/components/auto-toc ## AutoTOC Automatically generate a table of contents for your blog posts or documentation pages. This component scans your page for H2 and H3 headings and creates a clickable, sticky navigation menu that highlights the current section as the user scrolls. ## Features **Auto-Generation** No manual linking required. Just drop it on your page, and it automatically finds all `

` and `

` tags to build the hierarchy. **Scroll Tracking** The active section is highlighted in real-time as the user scrolls down the page, providing clear context. **Collapsible Subsections** Keep your TOC clean by automatically collapsing H3 subsections when they are not in view. **Customizable Styles** Full control over fonts, colors, hover states, and active states for both H2 and H3 heading levels. ## Use Cases **Blog Posts** — Perfect for long-form articles where readers need quick navigation between sections. **Documentation** — Help users navigate technical docs, API references, and knowledge bases effortlessly. **Landing Pages** — Make multi-section landing pages easier to explore with sticky navigation. ![AutoTOC Preview](/framerhub/img/components/control/auto-toc.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find AutoTOC in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Use the property controls to adjust the look and feel: **Layout** - Gap between items - Indentation for H3 subsections **H2/H3 Styles** - Font family, size, and weight - Default, hover, and active colors - Background colors and padding **Collapsible Mode** - Toggle collapsible subsections - Auto-collapse options ### Quick Tips **Sidebar Placement** — Place the component in a sticky sidebar for best results. Users can navigate while scrolling. **Use Standard Headings** — Ensure your page uses proper H2 and H3 text styles in Framer for the component to detect them. **Preview Mode** — The component only populates with real headings in Preview/Publish mode. Canvas shows placeholder data. **Dark Mode** — Customize colors for both light and dark themes using the color controls. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This AutoTOC is the fastest way to add professional, auto-updating navigation to content-heavy pages. No manual linking, no maintenance—just drop it in and go. --- --- - **Page:** Bokeh Orbs - **Source:** https://framerhub.io/components/bokeh-orbs ## Bokeh Orbs Create an elegant atmosphere with soft, floating bokeh orbs. Perfect for adding subtle motion to backgrounds without distracting from content. ## Features **Elegant Motion** Smooth sine-wave based floating animation that feels natural and calming. **Color Modes** Choose between a vibrant **Rainbow** mode where each orb gets a unique hue, or **Single** mode to match your brand color. **Customizable** Adjust the orb count, size, opacity, and animation speed to dial in the perfect look. **Performance Optimized** Automatic canvas/preview optimization reduces GPU load during design time. ## Use Cases **Hero Sections** — Add ambient movement to landing page backgrounds. **About Pages** — Create a subtle, calming atmosphere. **Loading States** — Provide visual interest while content loads. **Event Pages** — Set a festive or elegant mood. ![Bokeh Orbs Preview](/framerhub/img/components/control/bokeh-orbs.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Bokeh Orbs in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Colors** - Set the background to match your section - Choose Rainbow for multi-colored orbs or Single for brand-matched colors **Animation** - Adjust Speed for faster/slower floating - Modify Amplitude for larger/smaller vertical movement - Change Spread to control horizontal spacing ### Quick Tips **Best Performance** — Keep orb count between 5-10 for smooth animation on most devices. Reduce to 3-5 on mobile for optimal performance. **Color Combinations** — Dark backgrounds (black or deep blue) make orbs pop. Try matching orb color to your accent color for cohesion. **Layering** — Place content above the component. White text with subtle shadows provides best readability. **Speed Settings** — Start with default speed (1.0). Slower speeds (0.5-0.8) feel more elegant, faster speeds (2.0+) add energy. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Bokeh Orbs brings that dreamy, out-of-focus light effect seen in professional photography to your web designs—without the complexity of WebGL coding. Just drop it in and customize. --- --- - **Page:** Before After Picture - **Source:** https://framerhub.io/components/before-after-picture ## Interactive Before/After Image Comparisons for Framer Perfect for showcasing transformations, design improvements, or product changes. Drag the circular handle with arrows to reveal before and after images with smooth interactions. Built for designers who need to demonstrate visual impact effectively. ## Features **Three Interaction Modes** Choose how users interact with the slider—drag the handle, click anywhere to jump, or hover to follow the cursor automatically. Perfect flexibility for different use cases. **Intuitive Handle Design** Circular handle with customizable icons makes the interaction immediately obvious. Upload one image containing both left and right icons, or use the default arrows. Scales up on hover for better user feedback. **Smooth Interactions** Works flawlessly with mouse and touch. Responsive dragging with smooth transitions, instant click positioning, or effortless hover tracking. **Full Customization** Control every detail—responsive images, custom icons image, labels, divider color and width, handle size, icon sizing, and initial position—all from Framer's properties panel. **Responsive Images** Automatically serves the right image size for each device using srcSet support for optimized performance. **Responsive Design** Works beautifully at any size. Adapts to desktop, tablet, and mobile with perfect touch support. **Polished Labels** Optional before/after labels with full customization—choose position (top or bottom), background color, text color, border styling, and border radius. Includes backdrop blur for a modern look. **Production Ready** Optimized performance with smooth animations. Works seamlessly in any Framer layout. ## Use Cases **Portfolio Work** — Show design transformations and improvements side-by-side **Product Features** — Demonstrate before/after results of your product or service **Photo Editing** — Showcase retouching, color grading, or editing skills **Renovation Projects** — Display home improvements, interior design changes, or remodels **UI/UX Comparisons** — Highlight redesigns and interface improvements **Photo Filters** — Demonstrate filter effects or image processing ![Before After Picture Preview](/framerhub/img/components/control/before-after-picture.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** After accessing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Before After Picture in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) Everything you need is in Framer's properties panel: **Images** - Upload your before and after images (responsive with automatic srcSet) - Set initial divider position (0-100%) **Interaction** - Choose interaction mode: Drag, Click, or Hover - Drag mode: Traditional drag-and-drop interaction - Click mode: Click anywhere to jump divider to that position - Hover mode: Divider follows cursor automatically **Labels** - Toggle labels on/off - Customize before and after text - Choose position (top or bottom) - Set background color with opacity support - Customize text color - Adjust border radius (0-50px) - Add optional border with custom width and color **Icons** - Toggle icons on/off - Upload one image containing both left and right icons - Adjust icon height (12-40px) - Customize default arrow color if using built-in arrows **Styling** - Adjust divider color to match your design - Set divider width (1-10px) - Control handle size (32-72px) - All labels include backdrop blur for polish ### Quick Tips **Image Quality** — Use high-resolution images at the same dimensions for best results. Responsive images will automatically optimize for different screen sizes. **Custom Icons** — Upload one image that contains both left and right icons side-by-side (like ← →). The component will display the full image. Keep icons simple and recognizable at small sizes. **Color Contrast** — Choose divider and icon/arrow colors that stand out against both images for visibility **Initial Position** — Set the starting position based on what you want to emphasize (default 50% shows both equally) **Mobile Testing** — Always test touch interaction on mobile devices in preview mode **Alignment** — Ensure both images have the same subject aligned for smooth comparison **Handle Visibility** — Use contrasting colors for the handle to ensure it's immediately visible **Label Styling** — Adjust label background opacity for better readability. Use borders to make labels stand out or keep them borderless for a clean look **Interaction Mode** — Use Drag for traditional control, Click for quick comparisons, or Hover for presentations and demos where hands-free interaction works best ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Three interaction modes give you complete control over user experience. Choose drag for traditional interaction, click for quick comparisons, or hover for demos and presentations. The circular handle with customizable icons makes every mode instantly clear. Upload your own branded icons image (containing both left and right icons) or use the default arrows. Smooth interactions with hover effects feel premium and polished across all modes. Responsive images ensure optimal performance across all devices. Simple setup with full control over interactions, icons, colors, and sizing. Perfect for portfolios, case studies, and landing pages where you need to show tangible results or transformations. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** BubbleBurst - **Source:** https://framerhub.io/components/bubble-burst ## Transform Your Designs with Dynamic 3D Physics BubbleBurst brings life to your Framer projects with an interactive 3D physics simulation featuring colorful, bouncing bubbles that respond naturally to mouse and touch interactions. ## Features **Realistic Physics Engine** Advanced physics simulation with gravity, friction, elasticity, and ball-to-ball collision detection for natural, organic movement. **Premium Visual Quality** Built with Three.js using physically-based materials with metalness, roughness, and clearcoat properties for stunning reflections and depth. **Interactive Controls** Three interaction modes: Repel, Attract, or Push bubbles with your mouse or touch. Fully customizable force and radius settings. **Performance Optimized** Engineered for smooth 60fps performance with Float32Array physics data, object pooling, and smart rendering optimizations. **Mobile First** Full touch support with visibility detection - automatically pauses when off-screen to save battery and resources. ## Use Cases **Hero Sections** — Create eye-catching landing page backgrounds that engage visitors immediately **Product Showcases** — Add dynamic, interactive elements to product pages and presentations **Creative Portfolios** — Showcase your artistic vision with premium, physics-based animations **Event Pages** — Build excitement with playful, interactive bubble effects ![BubbleBurst Preview](/framerhub/img/components/control/bubble-burst.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find BubbleBurst in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization BubbleBurst offers extensive customization options organized into intuitive sections: **Physics Settings** - Ball Count: Control the number of bubbles (10-500) - Gravity: Adjust downward force strength - Friction: Control how quickly bubbles slow down - Wall Bounce: Set energy retained when hitting boundaries - Max Velocity: Limit maximum speed - Bounciness: Control elasticity in ball-to-ball collisions **Size Controls** - Min Size: Smallest bubble size - Max Size: Largest bubble size - Cursor Ball Size: Size of the interactive cursor bubble **Colors & Materials** - Color 1, 2, 3: Create beautiful color gradients across bubbles - Cursor Ball Color: Customize the interactive cursor bubble - Metalness: Control metallic appearance (0-1) - Roughness: Adjust surface roughness (0-1) - Clearcoat: Add glossy coating effect - Clearcoat Roughness: Fine-tune clearcoat appearance **Lighting** - Ambient Light: Overall scene brightness - Light Intensity: Dynamic point light that follows cursor **Interaction** - Show Cursor Ball: Toggle visibility of interactive cursor bubble - Mouse Force: Strength of mouse interaction - Mouse Radius: Range of mouse influence - Mouse Mode: Choose between Repel, Attract, or Push modes ### Quick Tips **Performance** — For better performance on lower-end devices, reduce ball count and disable some advanced material properties **Backgrounds** — Set the component to 100% width and height for full-screen background effects **Color Schemes** — Use 2-3 colors that complement your brand for cohesive design **Interaction Modes** — Repel mode works great for hero sections, while Attract creates a magnetic, playful effect ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Love This BubbleBurst isn't just another animation component - it's a fully production-ready 3D physics engine optimized for the web. With realistic collision detection, premium materials, and buttery-smooth performance, your designs will stand out from the crowd. Whether you're building a stunning portfolio, an engaging product page, or an unforgettable landing experience, BubbleBurst delivers that "wow" factor your clients expect. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Chroma Flux - **Source:** https://framerhub.io/components/chroma-flux ## Stunning 3D Torus Shader for Framer Transform your Framer projects with ChromaFlux – a mesmerizing twisted torus shader that responds to mouse movement with smooth, fluid animations. Perfect for hero sections, loading screens, and creative backgrounds. ## Features **Interactive Hover Mode** The torus follows your cursor with buttery-smooth inertia, creating an engaging and responsive experience that captivates visitors. **Auto-Spin Animation** Enable continuous rotation with customizable speed for a hypnotic, hands-free animation that works perfectly for background elements. **Fully Customizable Geometry** Fine-tune every aspect of the torus shape – from twist intensity and radius to thickness and scale – to match your design vision. **Rich Visual Effects** Apply glow, bloom, saturation adjustments, and hue shifting to create vibrant, eye-catching color schemes that pop. **Always Transparent** The component renders with a transparent background, making it easy to layer over any content or background. ## Use Cases **Hero Sections** — Create an unforgettable first impression with an interactive 3D element that responds to visitor movement. **Loading States** — Transform boring loading screens into mesmerizing visual experiences. **Background Elements** — Add depth and movement to any page with a subtle, animated background. **Creative Portfolios** — Showcase your design skills with a modern, interactive component. ![Chroma Flux Preview](/framerhub/img/components/control/chroma-flux.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find ChromaFlux in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization ChromaFlux offers extensive customization through organized property groups: **Geometry** - Twist: Control the spiral intensity (0-10) - Radius: Adjust the torus size - Thickness: Change the tube thickness - Scale: Overall size multiplier **Visual Effects** - Glow: Light emission intensity - Bloom: Post-processing bloom effect - Saturation: Color vibrancy - Hue Shift: Rotate the color spectrum - Color Frequency: Pattern complexity - Noise: Add grain texture **Animation** - Mode: Switch between Interactive (hover) and Auto Spin - Speed: Animation speed multiplier - Wobble: Enable organic movement **Performance** - Max DPR: Limit pixel density for better performance ### Quick Tips **Best Performance** — On lower-end devices, reduce Max DPR to 1 for smoother animation. **Color Combinations** — Use Base Color with Hue Shift to create dynamic color palettes without manual color picking. **Layering** — The transparent background lets you place text or other content directly over the component. **Subtle Effects** — For background use, reduce Glow and Bloom for a more understated look. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This ChromaFlux brings high-end 3D shader effects to Framer without any coding. The interactive hover mode creates memorable experiences, while the extensive customization options ensure it fits any design style. --- --- - **Page:** Chromatic Aberration - **Source:** https://framerhub.io/components/chromatic-aberration ## Chromatic Aberration Text Effect Transform your text into a stunning visual experience with the Chromatic Aberration component. This effect splits text into separate RGB color channels that animate independently, creating that iconic glitch-style look popular in modern web design. ## Features **Animated RGB Channels** Watch as the red, green, and blue color channels shift and separate in a smooth, continuous animation. The effect creates depth and visual interest that draws the eye. **Customizable Animation** Control the offset distance (how far channels separate) and duration (animation speed) to achieve exactly the look you want—from subtle shifts to dramatic separations. **Full Typography Control** Use extended font controls to customize every aspect of your text: family, size, weight, alignment, line height, letter spacing, and more. **Custom Channel Colors** Go beyond traditional RGB. Customize each of the three color channels to match your brand or create unique color combinations. ## Use Cases **Hero Headlines** — Create impactful landing page headlines that immediately grab attention. **Gaming & Tech Sites** — Perfect for esports, gaming, and technology websites looking for that edgy, digital aesthetic. **Event Promotions** — Add excitement to music festival, concert, or tech conference promotions. **Creative Portfolios** — Stand out with eye-catching typography that showcases your design sensibility. ![Chromatic Aberration Preview](/framerhub/img/components/control/chromatic-aberration.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Content Settings** - Text: Enter your headline or text content - Font: Full typography controls including family, size, weight, and alignment **Animation Settings** - Offset: Control how far the RGB channels separate (0-50px) - Duration: Set the animation cycle speed (0.1-10 seconds) **Color Settings** - Channel 1: First color layer (default: red) - Channel 2: Center color layer (default: green) - Channel 3: Third color layer (default: blue) ### Quick Tips **Best Performance** — Keep offset values between 2-10 for smooth, readable text. Higher values create more dramatic but harder-to-read effects. **Color Harmony** — While RGB is classic, try complementary colors or your brand palette for unique results. **Background Matters** — Dark backgrounds make the screen blend mode pop. Light backgrounds may require adjusting colors. **Static Preview** — The canvas shows a static offset preview. Use Preview mode to see the full animation. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This The Chromatic Aberration effect instantly adds a premium, modern feel to any project. It's the perfect way to make headlines stand out without complex animation setups—just drop it in, customize, and go. --- - **Page:** Cipher Scramble - **Source:** https://framerhub.io/components/cipher-scramble ## Cipher Scramble Text Effect Create that iconic hacker/terminal text decoding effect with the Cipher Scramble component. Watch as random characters rapidly cycle through before revealing your actual message, letter by letter. ## Features **Decode Animation** Characters scramble through random letters, numbers, and symbols before settling into your final text. Creates an engaging, cinematic reveal effect. **Multiple Triggers** Choose how the animation starts: - **Auto Play**: Starts immediately on load - **On Click**: User clicks to trigger - **On Hover**: Activates on mouse hover - **In View**: Triggers when scrolled into viewport **Full Typography Control** Use extended font controls to customize every aspect of your text. Monospace fonts work particularly well for that authentic terminal feel. **Adjustable Speed** Control the scramble duration from 500ms to 5000ms to achieve the perfect timing for your design. ## Use Cases **Hero Headlines** — Create dramatic reveal moments for landing page headlines. **Tech & Security Sites** — Perfect for cybersecurity, blockchain, and developer portfolios. **Gaming Interfaces** — Add that sci-fi, hacker aesthetic to gaming websites. **Interactive Reveals** — Use click or hover triggers for engaging micro-interactions. ![Cipher Scramble Preview](/framerhub/img/components/control/cipher-scramble.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Content Settings** - Text: Enter your message to reveal - Font: Full typography controls (monospace recommended) - Text Color: Set the text color (green is classic!) **Animation Settings** - Duration: How long the scramble effect takes (500-5000ms) - Trigger: When to start the animation ### Quick Tips **Monospace Fonts** — Use monospace fonts like "Fira Code" or "JetBrains Mono" for that authentic terminal look. **Classic Green** — The default bright green (#00FF00) on dark backgrounds gives that iconic Matrix/hacker vibe. **Duration Sweet Spot** — 1500-2500ms provides enough time to appreciate the effect without feeling slow. **In View Trigger** — Great for scroll-based storytelling where text reveals as users navigate. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This The Cipher Scramble effect instantly adds mystery and intrigue to any text. It's perfect for creating those "wow" moments that make websites memorable—no code required. --- - **Page:** CMS Gallery Slider - **Source:** https://framerhub.io/components/cms-gallery-slider ## Versatile Gallery Slider for Framer A flexible gallery slider component that seamlessly integrates with Framer CMS or works standalone with custom images. Perfect for product galleries, portfolios, and image showcases with smooth animations and fully customizable controls. ## Features **Dual Gallery Modes** Switch between CMS Gallery mode (connect directly to your CMS gallery field) or Normal Gallery mode (add images manually) with a simple toggle. **Smart Thumbnail Navigation** Position thumbnails on any side (bottom, top, left, right) with automatic responsive behavior—side thumbnails switch to bottom on mobile. Auto-scrolling keeps the active thumbnail visible. **Smooth Transitions** Choose from 5 transition types: Slide, Fade, Scale, Slide+Scale, or Slide+Fade. Control animation speed and direction (horizontal/vertical) for the perfect effect. **Custom Arrows** Fully customizable navigation arrows with hover effects, custom icons support, and precise positioning controls. ## Use Cases **Product Pages** — Showcase multiple product images with thumbnail previews for e-commerce sites. **Portfolios** — Display project galleries with smooth transitions and professional presentation. **Real Estate Listings** — Present property photos with intuitive navigation. **Blog Galleries** — Enhance articles with connected CMS image galleries. ![CMS Gallery Slider Preview](/framerhub/img/components/control/cms-gallery-slider.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find CMS Gallery Slider in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Gallery Source** - Toggle between "CMS" and "Normal" modes - For CMS: Connect your CMS Gallery component to the slot - For Normal: Add images directly to the Gallery Images array **Large Image Settings** - Width/Height: Set dimensions (%, px, vh supported) - Object Fit: Cover, Contain, Fill, None, Scale Down - Border Radius: Round the image corners - Animation: Speed, direction, and transition type **Thumbnail Settings** - Position: Bottom, Top, Left, Right - Size & Gap: Control thumbnail dimensions - Opacity: Active vs inactive states - Animation: Scale, Lift, Glow, or Scale+Lift hover effects - Border & Background: Full styling control **Arrow Controls** - Size, position, and border radius - Colors for normal and hover states - Upload custom arrow icons ### Quick Tips **Responsive Thumbnails** — Left/right positioned thumbnails automatically move to bottom on screens smaller than the breakpoint (default 768px). **CMS Connection** — When using CMS mode, connect a CMS Gallery component to the slot. The main image becomes the first slide. **Performance** — Use appropriately sized images. The component handles display sizing, but source images affect load time. **Transition Combos** — Slide+Fade and Slide+Scale offer the most dynamic transitions for showcasing products. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Zero code required to create stunning, CMS-connected product galleries. Every aspect is customizable through Framer's properties panel—from thumbnail animations to arrow styling—making it perfect for e-commerce and portfolio sites where image presentation matters. --- --- - **Page:** CleanSky - **Source:** https://framerhub.io/components/clean-sky ## Dynamic Procedural Sky Backgrounds Create stunning animated sky effects with organic cloud movement. CleanSky uses advanced domain warping techniques to generate beautiful, ever-changing cloudscapes. ## Features **Procedural Generation** No static images needed—clouds are generated in real-time using noise functions and domain warping for truly organic movement. **Three-Color System** Mix deep, mid, and highlight colors to create any sky mood—from peaceful blue skies to dramatic sunset atmospheres. **Auto Quality Detection** Automatically adapts to device capabilities for smooth performance on any device, from mobile to desktop. **Fully Customizable** Control cloud density, warp strength, flow speed, and contrast to achieve your perfect sky effect. ## Use Cases **Hero Backgrounds** — Create immersive landing pages with animated sky backgrounds that captivate visitors. **Mood Setting** — Set the atmosphere for weather apps, meditation apps, or any project needing dynamic ambiance. **Creative Portfolios** — Add visual interest with subtle, ever-changing backgrounds that don't distract from content. ![CleanSky Preview](/framerhub/img/components/control/clean-sky.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find CleanSky in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Atmosphere Settings** - Deep Color: Base sky color - Mid Color: Secondary cloud color - Highlight: Accent color for cloud edges - Contrast: Color intensity control **Simulation Settings** - Flow Speed: How fast clouds move (0-2) - Cloud Density: Coverage amount (0.1-5.0) - Warp Strength: Organic distortion intensity (0.1-10.0) ### Quick Tips **Color Harmony** — Use colors in the same temperature family for natural skies, or contrasting colors for dramatic effect. **Subtle Motion** — Lower flow speeds (0.1-0.3) create relaxing backgrounds perfect for content sites. **Performance** — Use Auto quality mode; it automatically detects device capabilities for optimal performance. **Layering** — Works great as a background layer with content placed on top. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This CleanSky brings your hero sections to life with hypnotic, organic cloud movement. No static images, no video files—just smooth, procedural animation that works on any device. --- --- - **Page:** CMS Masonry Lightbox - **Source:** https://framerhub.io/components/cms-masonry-lightbox ## Beautiful Masonry Galleries from Your CMS Turn any CMS collection into a professional masonry gallery with lightbox preview and category filtering. Perfect for portfolios, product showcases, and media libraries. Built for designers who need production-ready galleries without touching code. ## Features **Auto-Adapting Masonry Layout** Connect any CMS collection and watch it transform into a Pinterest-style masonry grid. Supports 1-12 columns with custom gap spacing. **Built-In Lightbox** Click any image or video to open an elegant full-screen lightbox. Automatically detects media types and handles both images and videos seamlessly. **Smart Category Filtering** Add filter pills that automatically sync with your CMS categories. Choose single-select or multi-select modes. Fully customizable pill colors, fonts, and spacing. **Customizable Hover Effects** Four hover animations (scale, fade, slide, bounce) with adjustable overlay colors, icons, and shadow intensity for polished interactions. **Flexible Grid Control** Adjust columns, gaps, and shadows from the properties panel. Everything responds instantly without code. ## Use Cases **Portfolio Galleries** — Showcase design work with category filters that let visitors browse by project type **Product Showcases** — Display product images with lightbox zoom for detailed views and filtering by category **Photography Sites** — Create stunning image galleries with masonry layouts that adapt to different image sizes **Case Study Libraries** — Organize client work with filterable categories and quick preview capabilities **Media Archives** — Build searchable collections of images and videos with elegant lightbox playback ![CMS Masonry Lightbox Preview](/framerhub/img/components/control/cms-masonry-lightbox.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find CMS Masonry Lightbox in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Setup **Connect Your CMS** 1. Drag the component onto your canvas 2. In the properties panel, click "Connect CMS" 3. Select your CMS collection 4. The masonry layout appears automatically **Configure Layout** - Set your preferred number of columns (1-12) - Adjust gap spacing between items - Choose shadow intensity for depth **Enable Lightbox** (optional) - Toggle "Enable Lightbox" in the properties panel - Specify your CMS image field name (default: "image") - Specify your CMS video field name (default: "video") - Customize hover effects and overlay styles **Add Category Filtering** (optional) 1. Paste the CMSMasonboxFilter component above your gallery 2. Set the "Category Field" to match your CMS field name 3. Choose single or multi-select mode 4. Customize pill colors, fonts, and spacing Both components automatically sync using a "Store Key"—no manual connection needed. ### Quick Tips **Column Strategy** — Use 3-4 columns on desktop, 2 on tablet, 1 on mobile for best readability **Field Names** — Make sure your image/video field names match exactly what you set in the properties panel **Filter Setup** — If your CMS uses a different field name for categories, update both components to match **Performance** — For large collections (90+ items), consider using CMS pagination limits ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Love This Connect your CMS and get a polished masonry gallery in seconds. No wrestling with layouts or writing filter logic—just paste, connect, and customize through Framer's properties panel. Perfect for agencies building portfolio sites and freelancers delivering client galleries without custom development. --- --- - **Page:** Coalesce - **Source:** https://framerhub.io/components/coalesce ## Coalesce Create a hypnotic visual center with Coalesce. This effect features thousands of geometric particles spiraling inward, creating a sense of depth and focus that draws the user's eye to the center of your screen. ## Features **Geometric Spirals** Particles aren't just dots—they are rotated squares that leave trails, creating a unique structure to the chaos. **Focus Inducing** The inward motion naturally guides viewer attention to the center, making it perfect for framing key messages or logos. **Rich Compositing** Uses multiple blur layers and additive blending to create a glowing, ethereal look that feels organic and high-tech. ## Use Cases **Hero Backgrounds** — Create a mesmerizing focal point that draws attention. **Landing Pages** — Guide users visually toward your call-to-action. **Loading States** — Keep users engaged with hypnotic particle animation. **Product Showcases** — Frame your product with dynamic energy. ![Coalesce Preview](/framerhub/img/components/control/coalesce.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Coalesce in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the appearance and behavior using Framer's property controls. **Color Settings** - Base Hue: Starting hue color (0-360) - Hue Range: Color variation from base - Saturation: Color intensity (0-100%) - Lightness: Color brightness (0-100%) **Particle Settings** - Intensity: Particle count multiplier - Base Size / Size Range: Particle dimensions - Base Speed / Speed Range: Movement speed **Effects** - Blur 1 & 2 Amount: Dual glow layer strengths - Opacity: Overall transparency ### Quick Tips **Best Performance** — Keep intensity at 1 or below for smooth animation. **Color Combinations** — Orange/red hues (10-30) with wide range create fire-like effect. Blue hues (200-240) feel more cosmic. **Layering** — Place content above the component. Center your logo or CTA for maximum impact. **Blur Settings** — Higher blur creates softer glow, lower blur creates sharper particles. ## License **Free Component** — Use freely in personal and commercial projects. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Credits [Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743). --- --- - **Page:** Confetti Lines 3D - **Source:** https://framerhub.io/components/confetti-lines-3d ## Create Stunning 3D Celebrations A vibrant 3D animation component featuring confetti lines with smooth dash animations, customizable colors, and interactive camera controls. ## Features **3D Confetti Lines** Dynamic confetti lines that move through 3D space with smooth dash animations and natural motion. **Customizable Colors** Define up to 5 colors for your confetti lines. Each line randomly uses one of your chosen colors. **Dash Animations** Smooth dash offset animations create flowing, continuous movement along each confetti line. **Mouse Interaction** Optional camera orbit control based on mouse movement for an interactive experience. ## Use Cases **Celebration Pages** — Perfect for success pages, milestone achievements, and special announcements **Product Launches** — Add excitement to product launch pages and marketing campaigns **Event Websites** — Ideal for party invitations, conference sites, and celebration events **Hero Sections** — Create attention-grabbing hero sections with dynamic 3D effects ![Confetti Lines 3D Preview](/framerhub/img/components/control/confetti-lines-3d.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Confetti Lines 3D in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) Use the property controls to customize your 3D confetti effect. **Colors** - Colors — Enter comma-separated hex colors for confetti lines (e.g., "#4062BB, #52489C, #59C3C3") **Background** - Background Color — Set a background color for the entire canvas **Animation** - Count — Number of confetti lines (10-200) - Speed — Animation speed multiplier (0.1-5) - Line Width — Thickness of the confetti lines (0.01-0.5) - Dash Length — Percentage of line visible (0.1-0.9) ### Quick Tips **Best Performance** — Use 30-60 lines for smooth animation on most devices. Reduce to 20-30 on mobile for optimal performance. **Color Combinations** — Use bright, contrasting colors for festive, energetic feels. Try pastel colors for elegant, sophisticated celebrations. **Dash Length** — Shorter dash lengths (0.2-0.3) create dotted, staccato effects. Longer dashes (0.6-0.8) feel more continuous and flowing. **Speed Settings** — Default speed (1.0) works for most cases. Slower speeds (0.5-0.8) feel more elegant, faster speeds (2-3) add energy. ## Credits Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/). ## Why Designers Love This Bring celebrations to life with stunning 3D confetti lines. Built with Three.js for smooth 60fps performance, this component adds professional-grade visual effects to your Framer projects. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Counter Number - **Source:** https://framerhub.io/components/counter-number ## Counter Number An animated counter component perfect for displaying statistics, milestones, or pricing. It smoothly counts up from a start value to your target with customizable duration and easing. ## Features **Precise Formatting** Handle currency, percentages, and large numbers easily. Add custom prefixes (e.g., "$"), suffixes (e.g., "M+"), and control decimal places and thousands separators. **Animation Control** Choose linear or eased animations, control duration, and toggle auto-start. **Responsive Typography** Fully customizable font styles that adapt to your layout. ![Counter Number Preview](/framerhub/img/components/control/counter-number.jpg) ## Use Cases **Statistics Dashboard** — Display growing user metrics or revenue numbers that catch the eye. **Milestones** — Showcase company achievements or project stats on landing pages. ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Counter Number in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Counter Settings** - **Start**: The initial number you want to start counting from. - **End**: The final target number to display. - **Animation**: Choose when the animation triggers—either when the layer is in view (✨ Layer in View) or immediately when it appears (⚡ On Appear). - **Duration**: How many seconds the animation should last (0.1s to 10s). **Formatting & Style** - **Decimals**: Quickly select 0-3 decimal places using the preset toggle. - **Commas**: Enable or disable the thousands separator. - **Color**: Set the exact color for your numbers and text. - **Prefix / Suffix**: Add symbols like "$" or text like "kg" or "+". - **Decoration**: Add an underline or strikethrough for specialized styles. ### Quick Tips **Best Performance** — Uncheck "Auto Start" and use "View Trigger" to only animate when the user scrolls the component into view. This saves resources when the component is off-screen. **Visual Hierarchy** — Use a large font size and bold weight to make key metrics stand out against your page content. **Contextual Data** — Use the Prefix and Suffix fields to give context to your numbers without needing extra text layers. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It's a simple yet essential element for any data-driven design, adding life and movement to static numbers with minimal setup. --- --- - **Page:** Credit Card 3D Tilt - **Source:** https://framerhub.io/components/credit-card-3d-tilt ## Premium 3D Credit Card Component Elevate your payment forms, fintech landing pages, and banking applications with this hyper-realistic 3D credit card component. It responds to mouse movement with a buttery-smooth tilt effect, dynamic holographic glare, and modern glassmorphism aesthetics. ## Features **Interactive 3D Tilt** The card tilts in 3D space as users move their mouse, providing immediate tactile feedback that feels premium and responsive. **Holographic Rainbow Shimmer** A beautiful rainbow gradient shimmers across the card surface based on cursor position, simulating the holographic security features found on real credit cards. **Glassmorphism Design** Subtle frosted glass effects with noise texture overlay create that modern, premium aesthetic trending in 2024 fintech design. **Contactless Icon** Built-in contactless payment waves icon that can be toggled on/off, adding authenticity to your card design. **Card Network Logo** Upload your own Visa, Mastercard, or custom card network logo, or use the default stylized circles. ## Use Cases **Fintech Landing Pages** — Showcase payment features with an interactive hero element that captures attention. **Banking Apps** — Display virtual card details in a visually stunning and interactive format. **Checkout Forms** — Add visual flair to payment sections and increase user engagement. **Portfolio Pieces** — Demonstrate your attention to micro-interactions and premium design details. ![Credit Card 3D Tilt Preview](/framerhub/img/components/control/credit-card-3d-tilt.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Credit Card 3D Tilt in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Card Details** - Card Number, Holder Name, and Expiry Date are fully editable - Use realistic format or placeholder text for demos **Visual Styling** - Set custom gradient colors (start and end) - Upload a custom background image for branded cards - Adjust text color and blend modes - Control border radius for different card styles **Effects** - Toggle holographic shimmer on/off - Adjust glare intensity (0-100%) - Enable/disable noise texture overlay - Control tilt strength (5-30°) ### Quick Tips **Best Performance** — Disable holographic effect on mobile-heavy projects for smoother animations. **Custom Branding** — Upload your brand's card design as a background image and set a matching chip image. **Dark Mode** — The default dark gradient works great; for light mode, use lighter gradient colors with dark text. **Tilt Settings** — Start with default (15°). Lower values (5-10°) feel subtle and elegant, higher values (20-30°) are more dramatic. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This This isn't just a static credit card image—it's a living, breathing UI element that responds to user interaction. The combination of 3D physics, holographic effects, and glassmorphism creates that "wow" moment designers crave. Perfect for making payment experiences feel premium and trustworthy. --- - **Page:** Cyberpunk City - **Source:** https://framerhub.io/components/cyberpunk-city ## Immersive Cyberpunk Experience Transform your Framer projects with this stunning WebGL-powered cyberpunk cityscape. Watch as infinite neon-lit buildings fly through space, creating a mesmerizing sci-fi atmosphere perfect for landing pages, hero sections, or background animations. ## Features **Real-time WebGL Rendering** Powered by Three.js and custom shaders for smooth, high-performance 3D animation that runs seamlessly in the browser. **Fully Customizable Colors** Control fog color, dual neon colors, and color mixing to match your brand or create unique cyberpunk aesthetics. **Dynamic Building Generation** Adjust building scale and height variation to create different cityscape densities and architectural styles. **Performance Optimized** Efficient shader-based rendering with automatic pixel ratio management ensures smooth animation across all devices. **Seamless Animation Loop** Continuous, smooth animation with no jarring restarts or jumps—perfect for background elements. ## Use Cases **Hero Sections** — Create an eye-catching animated background for landing pages and hero sections that immediately capture attention. **Tech & Gaming Sites** — Perfect for technology, gaming, or sci-fi themed websites that need a futuristic aesthetic. **Loading Screens** — Use as an engaging loading animation or transition element in your web applications. **Event Pages** — Ideal for virtual events, hackathons, or tech conferences that want a cutting-edge visual presence. ![Cyberpunk City Preview](/framerhub/img/components/control/cyberpunk-city.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Cyberpunk City in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization The component provides three main control groups for easy customization: **Animation** - **Speed** — Control the animation speed (0-2x). Lower values create a slow, dreamy flythrough while higher values add energy and dynamism. - **Height Variation** — Adjust how much building heights vary (0-1). Lower values create uniform buildings, higher values create dramatic skyscrapers. **Buildings** - **Scale** — Change the overall size of buildings (0.5-2x). Larger scale creates massive structures, smaller scale creates distant cityscape. **Colors** - **Fog Color** — Set the background fog/space color. Black creates deep space, while colors create atmospheric effects. - **Neon A** — First neon color (default: hot pink). This is the primary building light color. - **Neon B** — Second neon color (default: cyan). Creates color variety across buildings. - **Neon Mix** — Blend between Neon A and Neon B (0-1). Animate this value for color-shifting effects. - **Background** — Set the background color (supports transparency). - **Transparent** — One-click toggle to make the background completely transparent. **Quality** - **Quality** — Choose between Auto (recommended), Performance, Balanced, or Quality modes to optimize for your use case and target devices. ### Quick Tips **Performance** — The component automatically adjusts pixel ratio for optimal performance. It renders at full quality but caps at 2x pixel ratio. **Canvas vs Preview** — The component shows a static frame in Framer's canvas mode and animates smoothly in preview/live mode. **Responsive Design** — Automatically adapts to any container size. Use it as a full-screen background or contained element. **Color Combinations** — Try classic cyberpunk (pink + cyan), matrix (two greens), or synthwave (purple + orange) color schemes. **Background Transparency** — Toggle "Transparent" to remove the background color, allowing you to layer the city over videos, images, or gradients. **Auto Quality** — "Auto" mode automatically detects device performance to ensure smooth playback on all devices. You can also force "Performance" or "Quality" modes. ## Technical Details - **Built with Three.js** — Industry-standard WebGL library - **Custom GLSL Shaders** — Hand-crafted fragment and vertex shaders for optimal performance - **Ray Marching Technique** — Advanced 3D rendering using signed distance fields - **SSR Safe** — Properly handles server-side rendering for Framer sites - **Memory Efficient** — Proper cleanup prevents memory leaks ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Stop settling for flat, static backgrounds. Cyberpunk City brings professional-grade 3D animation to your Framer projects without writing a single line of code. Whether you're building a tech startup landing page, a gaming portfolio, or a futuristic brand experience, this component delivers instant sci-fi atmosphere that keeps visitors engaged. The intuitive controls mean you can customize every aspect—from the neon glow colors to the building density—while the optimized WebGL rendering ensures butter-smooth performance on all devices. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Digital Rain - **Source:** https://framerhub.io/components/digital-rain ## Digital Rain Bring the cyberpunk aesthetic to your site with Digital Rain. This high-performance component recreates the iconic falling code effect (Matrix style) using Three.js instancing for smooth 60fps animation even with thousands of drops. ## Features **Cyberpunk Aesthetic** Instantly add a sci-fi / tech vibe to your landing pages or backgrounds. **Transparent Background** Layer the digital rain over any content with full alpha transparency support. **Performant 3D** Built with `THREE.InstancedMesh` to render up to 2000 falling elements efficiently without lagging the browser. **Fully Customizable** Control every aspect: drop count, speed, size, spread, depth, opacity, and camera distance. ## Use Cases **Hero Sections** — Create an immersive cyberpunk landing page experience. **Tech Product Pages** — Add a futuristic vibe to SaaS or developer tools. **Background Effects** — Layer over dark backgrounds for cinematic depth. ![Digital Rain Preview](/framerhub/img/components/control/digital-rain.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Digital Rain in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Appearance** - Rain Color: Adjust the color of falling elements - Opacity: Control transparency of the drops - Wireframe: Toggle wireframe rendering on/off **Geometry** - Drop Width: Size of each drop element - Drop Height: Length of each falling bar - Spread: Horizontal distribution area - Depth: Z-axis depth for 3D parallax **Animation** - Speed: Velocity of the falling rain - Drop Count: Number of falling particles (50-2000) - Camera Distance: Perspective depth control ### Quick Tips **Best Performance** — Use 200-500 drops for smooth animation on most devices. Reduce to 100 on mobile for optimal performance. **Color Combinations** — Dark backgrounds make bright green, cyan, or white drops pop. Try subtle color contrasts for depth. **Layering** — Since the background is transparent, place content above for readability. **Speed Settings** — Start with default speed (1.0). Slower speeds (0.5) feel more elegant, faster speeds (5.0+) add energy. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Digital Wind - **Source:** https://framerhub.io/components/digital-wind ## Mesmerizing Digital Flow Effects Create stunning particle animations with flowing digital characters. Digital Wind uses Three.js and custom shaders to render thousands of particles with physics-based flow and interactive mouse effects. ## Features **Custom Shader Rendering** Optimized WebGL shaders render thousands of particles efficiently with customizable character sets. **Interactive Physics** Particles flow naturally using simplex noise while responding to mouse movement with realistic repulsion. **Post-Processing Effects** Built-in bloom effects add a professional glow to your particles, perfect for modern UI designs. **Fully Customizable** Control particle count, size, speed, noise scale, colors, and bloom settings through intuitive property controls. ## Use Cases **Hero Sections** — Add dynamic backgrounds to landing pages and hero sections **Loading Screens** — Create engaging animations while content loads **Tech Branding** — Perfect for tech, AI, and data visualization themes **Interactive Installations** — Use mouse interaction for immersive experiences ![Digital Wind Preview](/framerhub/img/components/control/digital-wind.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Digital Wind in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) **Flow Settings** - **Speed** — Control how fast particles move (0.1 - 5.0) - **Noise Scale** — Adjust the turbulence of particle flow (0.0001 - 0.01) **Particle Settings** - **Memory Efficient** — Proper cleanup prevents memory leaks - **Auto Quality** — Automatically adjusts rendering settings based on device capabilities - **Count** — Number of particles to render (1000 - 10000) - **Size** — Base size of each particle (5 - 50) - **Characters** — Custom character set (default: "01" for binary) **Appearance** - **Color 1 & Color 2** — Gradient colors for particles - **Background** — Set the background color. - **Transparent** — Toggle to remove the background completely. - **Opacity** — Adjust the overall opacity of the particles (0-1). **Effects** - **Bloom** — Enable/disable glow effect - **Bloom Strength** — Intensity of the bloom (0 - 3) **Interaction** - **Mouse Repulsion** — Enable/disable mouse interaction - **Repulsion Radius** — Distance at which particles react to mouse (50 - 500) - **Repulsion Force** — Strength of the repulsion effect (0.1 - 5.0) ### Responsive Design Digital Wind automatically adapts to any canvas size. The component uses a responsive resize system that: - Detects container size changes in real-time - Adjusts camera and renderer dimensions dynamically - Redistributes particles to fill the available space - Optimizes particle count in canvas mode for smoother editing The component supports flexible layouts while preferring fixed dimensions for optimal performance. ### Quick Tips **Performance** — For better performance on lower-end devices, reduce particle count to 2000-3000 **Custom Characters** — Try different character sets like "ABCDEFGHIJKLMNOPQRSTUVWXYZ" or "!@#$%^&*()" for unique effects **Color Combinations** — Try matrix-style (green), cyberpunk (neon pink/blue), or subtle white/gray for a cleaner look. **Performance** — Use the "Quality" control to optimize for different devices. "Auto" mode adjusts settings automatically. **Mouse Interaction** — The repulsion effect works best with bloom enabled for dramatic visual feedback ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Love This Digital Wind brings high-performance particle effects to Framer without any setup complexity. The shader-based rendering ensures smooth 60fps animations even with thousands of particles, while the interactive mouse effects create engaging user experiences. Perfect for adding a modern, tech-forward aesthetic to any project. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Curved Text SVG | FramerHub - **Source:** https://framerhub.io/components/curved-text-svg - **Description:** Animate text along any SVG path with smooth GSAP-powered motion. Premium Framer component for client sites, portfolios, and product pages. # **Curved Text SVG ** Animate text along any SVG path with smooth GSAP-powered motion. One-time payment Lifetime updates Commercial license ## **Overview** Animate text along any SVG path with smooth GSAP-powered motion. - Multiple preset path shapes (Circle, Ellipse, Wave, Arc, Line) - Custom SVG path support - GSAP-powered smooth animation - Extended font controls with full typography customization - Text effects (shadow, blur, opacity) - Background arc with customizable end caps ## Make Your Text Follow Any Path Transform ordinary text into captivating curved typography. The Curved Text SVG component lets you animate text along any SVG path—from simple waves to custom shapes—creating eye-catching headlines, logos, and decorative elements. ## Features**Multiple Path Presets** Choose from Circle, Ellipse, Wave, Arc, or Straight Line presets that automatically adapt to your component's dimensions.**Custom SVG Path Support** Use your own SVG path data for complete creative control. Perfect for brand logos, unique shapes, and custom designs.**Smooth GSAP Animation** Butter-smooth text scrolling powered by GSAP. Seamlessly loops without any visible jumps or stutters.**Full Typography Control** Extended font controls including family, size, weight, letter spacing, and more—all accessible directly in Framer's properties panel.**Visual Effects** Add depth with configurable text shadow, blur effects, and opacity adjustments.**Background Arc** Add a customizable background stroke behind your text path with color, opacity, thickness, and end cap style options (Round, Flat, Square). ## Use Cases**Hero Headlines** — Create attention-grabbing curved text for landing page headers**Logo Animations** — Animate brand text along custom paths for dynamic logos**Decorative Elements** — Add visual interest with text following waves or arcs**Ticker/Marquee** — Seamless looping text animation along circular or elliptical paths![Curved Text SVG Preview](https://framerhub.io/framerhub/img/components/control/curved-text-svg.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Curved Text SVG in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)**Text & Path**- **Text**: Your content with optional separator (use `•` or emoji for seamless loops) - **Path Shape**: Choose from presets or select "Custom" for your own path - **Custom Path**: Enter SVG path data (when Custom is selected) - **ViewBox**: Set the coordinate system for custom paths**Typography**- **Font**: Full font family, size, weight, and letter spacing control - **Color**: Text fill color - **Rotation**: Rotate the entire text path**Animation**- **Animate**: Enable/disable animation - **Duration**: Speed of text movement (1-60 seconds) - **Reverse**: Change animation direction**Background Arc**- **Show Background**: Toggle the background arc visibility - **BG Color**: Background arc color - **BG Opacity**: Background arc transparency - **BG Thickness**: Width of the background stroke - **BG End Cap**: Shape of arc ends (Round, Flat, Square) - **Text Y Offset**: Vertical adjustment to center text on the arc**Effects**- **Opacity**: Text transparency (0-1) - **Blur**: Add blur effect to text - **Shadow Blur**: Text shadow intensity - **Shadow Color**: Color of the text shadow ### Quick Tips**Seamless Loops** — Add a separator like `•` or `😁` at the end of your text for smooth continuous animation.**Custom Paths** — Generate SVG paths at svg-editor.griffen.codes or export from Figma/Illustrator.**Performance** — Keep path complexity reasonable. Simpler paths render faster.**Responsive Design** — The component automatically adapts preset paths to fill its container.**Debug Mode** — Enable "Show Path" to visualize the path while designing. ## License**Single Use License** — Use in unlimited client projects with full commercial rights. No redistribution. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Curved text effects add instant visual impact without complex workarounds. This component brings that creative freedom to Framer with no code required—just drag, drop, and customize. ---**Need Help?** Visit framerhub.io/support for documentation and video tutorials. ### **Curved Text SVG - $5** Animate text along any SVG path with smooth GSAP-powered motion.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Dither Shader - **Source:** https://framerhub.io/components/dither-shader ## Dither Shader A high-performance, interactive dithering effect component for Framer. This component creates a retro-style pixelated aesthetic with dynamic patterns, shapes, and interactive ripple effects. ## Features **Dynamic Dithering** Customizable pixel size, pattern density, and noise amount for the perfect retro look. **Shape Variants** Choose between Square, Circle, Triangle, and Diamond patterns. **Interactive Ripples** Reacts to clicks/taps with customizable ripple animations. **Gradient Support** Optional dual-color vertical gradient (bottom to top). **Glow Effect** Integrated post-processing glow for a stunning neon look. **Performance Optimized** Auto-scaling resolution and offscreen pausing maintain high FPS on all devices. ## Use Cases **Hero Backgrounds** — Create striking, interactive hero sections with retro vibes. **Portfolio Sites** — Add a creative, artistic touch to design portfolios. **Landing Pages** — Engage visitors with dynamic, responsive backgrounds. **Music & Art Sites** — Perfect for creative industries needing bold aesthetics. ![Dither Shader Preview](/framerhub/img/components/control/dither-shader.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Dither Shader in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Appearance Section** - Shape: Square, Circle, Triangle, Diamond - Color: Primary pattern color - Pixel Size: Larger = blockier retro look - Opacity: Overall transparency - Edge Fade: Vignette effect **Pattern Section** - Pattern Density: How "full" the pattern looks - Pattern Scale: Underlying noise texture scale - Dither Intensity: Amount of noise/dithering - Size Variation: Random size variation **Animation Section** - Animation Speed: Pattern evolution speed - Rotation Speed: Pattern rotation - Color Pulse: Enable pulsating color animation - Pulse Speed: Color pulse animation speed - Pulse Intensity: Strength of pulse effect **Ripples Section** - Enable Ripples: Toggle click/tap ripples - Ripple Strength: Distortion intensity - Ripple Width: Wave thickness - Ripple Speed: Expansion speed **Gradient Section** - Enable Gradient: Switch to 2-color gradient - Color 1: Bottom color of the gradient - Color 2: Top color of the gradient **Glow Section** - Enable Glow: Add bloom/glow effect - Glow Strength: Intensity - Glow Size: Blur radius **Performance Section** - Performance Mode: High / Balanced / Low - Auto Scale: Dynamic resolution adjustment - Pause Offscreen: Save battery when hidden - Target FPS: Framerate target (default: 60) ### Quick Tips **Best Performance** — Use "Balanced" mode for most devices. Switch to "Low" on mobile for optimal performance. **Retro Look** — Increase Pixel Size (8-16) and use muted colors for authentic retro aesthetics. **Interactive Elements** — Enable Ripples and place over clickable areas for engaging user feedback. **Canvas Editing** — The component auto-detects Framer Canvas and uses high quality mode so you always see accurate previews. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Dither Shader brings retro computing aesthetics to modern web design with zero performance compromises. The interactive ripples and smart optimization make it perfect for both eye-catching hero sections and subtle background effects. --- --- - **Page:** Dot Globe - **Source:** https://framerhub.io/components/dot-globe ## Interactive Particle Globe A highly versatile 3D particle component that can render a globe, cube, or plane using various artistic styles. From a classic dot-matrix earth to a cyberpunk ASCII cube, Dot Globe is a powerhouse of visual effects with a transparent background for seamless integration. ## Features **Multiple Styles** Switch between **Dots** for a clean look, **Matrix** for digital rain vibes, or **ASCII** for a retro-terminal aesthetic. **Transparent Background** The background is fully transparent, allowing you to layer the globe over any content, images, or gradients. **Interactive** The object rotates automatically but responds to mouse movement with tilt and particle repulsion effects, making it fun to play with. **Rich Effects** Layer on additional visual flair with built-in Scanlines, Wave pulses, Glitch distortion, and Halo glows. ## Use Cases **Hero Sections** — Create stunning landing pages with an interactive globe as the centerpiece. **Tech Websites** — Perfect for AI, crypto, or SaaS sites with the Matrix or ASCII style. **Portfolio** — Add visual interest with subtle animation that responds to user interaction. **Data Visualization** — Represent global data or network connections with the sphere shape. ![Dot Globe Preview](/framerhub/img/components/control/dot-globe.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Dot Globe in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Geometry Settings** - Shape: Choose between Sphere, Cube, or Plane - Scale: Adjust the size of the object **Particle Settings** - Style: Dots, Matrix, or ASCII rendering - Density: Control the number of particles - Color: Set the particle color - Rainbow Mode: Enable animated rainbow colors **Effects** - Scanline: Horizontal scanning effect - Wave Pulse: Circular wave animation - Glitch: Digital distortion effect - Halo: Atmospheric glow around the object **Interaction** - Auto Rotation: Enable continuous rotation - Mouse Effect: Tilt and particle repulsion on mouse movement ### Quick Tips **Best Performance** — Use density between 40-80 for smooth animation on most devices. Reduce to 30-40 on mobile. **Style Combinations** — Matrix style looks great with green color and scanline effect. ASCII pairs well with amber/orange colors. **Layering** — Since the background is transparent, place your own gradient or image behind the component for custom backgrounds. **Halo Glow** — Works best with the Sphere shape for an atmospheric Earth effect. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Dot Globe transforms any hero section into an interactive experience. The combination of multiple styles, shapes, and effects gives you endless creative possibilities, while the transparent background makes it easy to integrate into any design system. --- - **Page:** Dot Text - **Source:** https://framerhub.io/components/dot-text ## Title/Headline Dot Text: Transform text into mesmerizing particle animations with interactive effects. ## Features **Interactive Mouse Effects** Experience dynamic text that responds to mouse movement with repulsion and tilt effects. **Multiple Particle Styles** Choose from dots, matrix-style characters, or ASCII art particles for unique visual appeal. **Advanced Animations** Add wave pulses, scanlines, and distortion effects with customizable intensities and colors. **Rainbow Mode** Enable cycling rainbow colors for vibrant, animated text displays. **Halo Glow** Create atmospheric depth with customizable halo glow effects. ## Use Cases **Interactive Hero Sections** — Add engaging particle text to landing pages that responds to user interaction. **Brand Animations** — Showcase company names or slogans with dynamic particle effects. **Event Promotions** — Create eye-catching text displays for special offers or announcements. **Background Elements** — Use as subtle animated backgrounds for websites or presentations. ![Dot Text Preview](/framerhub/img/components/control/dot-text.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Dot Text in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize your particle text through the intuitive properties panel: **Projection Settings** - Input any text to display as particles **Particle Configuration** - Select style: Dots, Matrix, or ASCII - Adjust density for performance vs detail balance - Set particle and background colors - Enable rainbow mode for color cycling **Effect Controls** - Toggle scanlines with intensity and color controls - Add wave pulses with customizable strength and color - Enable glitch/distortion effects - Apply halo glow with color selection **Interactive Features** - Enable auto-rotation with speed control - Add mouse repulsion effects - Toggle global animation timeline ### Quick Tips **Best Performance** — Use density values between 50-100 for smooth animation on most devices. Reduce to 30-50 on mobile for optimal performance. **Color Combinations** — Dark backgrounds (black or deep blue) make particles pop. Try white/light particles on dark backgrounds for maximum contrast. **Layering** — Place content above the component for readable text overlays. Use subtle halo colors for atmospheric depth. **Speed Settings** — Start with default rotation speed (0.4). Slower speeds (0.2-0.5) feel elegant, faster speeds (1.0+) add dynamic energy. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Dot Text brings your text to life with cutting-edge WebGL particle effects that engage users and add visual interest to any project. Perfect for modern web design that demands attention and interactivity. --- - **Page:** ElectricBolts - **Source:** https://framerhub.io/components/electric-bolts ## Transform Your Designs with Electric Energy ElectricBolts brings dynamic, animated electric energy effects to your Framer projects with stunning 3D mesh lines that pulse and flow across your canvas. Built with Three.js and optimized for performance, this component creates mesmerizing visual effects that captivate your audience. ## Features **Advanced 3D Mesh Animation** Powered by Three.js and MeshLine library for smooth, organic electric bolt animations with realistic energy flow patterns. **Multi-Color Gradient System** Four independent color controls create stunning gradient transitions along each energy bolt, perfect for matching your brand palette. **Customizable Turbulence** Fine-tune the chaos and randomness of your electric bolts with adjustable turbulence controls for unique visual styles. **Frequency Controls** Adjust the density and spacing of energy bolts to create subtle background effects or intense energy storms. **WebGL Performance** Hardware-accelerated rendering ensures smooth 60fps animations even with multiple active energy bolts. **Responsive Design** Automatically adapts to any container size, perfect for hero sections, backgrounds, or creative accents. ## Use Cases **Hero Sections** — Create electrifying landing page backgrounds that immediately grab attention and convey energy and innovation **Tech Product Pages** — Perfect for showcasing cutting-edge technology products, AI services, or futuristic brands **Event Landing Pages** — Build excitement for conferences, launches, or special events with dynamic energy effects **Creative Portfolios** — Stand out with unique, eye-catching backgrounds that showcase your creative vision **Gaming Websites** — Add intensity and action to gaming sites with electric energy animations ![Electric Bolts Preview](/framerhub/img/components/control/electric-bolts.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find ElectricBolts in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ElectricBolts offers intuitive customization options for complete creative control: **Color System** - Color 1-4: Create stunning multi-color gradients along energy bolts - Background Color: Set the canvas background (use dark colors for best effect) **Line Appearance** - Line Width: Control the thickness of energy bolts (0.5-5.0) - Default: 2.0 for balanced visual impact **Animation Controls** - Turbulence: Adjust randomness and chaos (0-5) - Low (0.5-1.5): Smoother, more controlled bolts - High (3-5): Wild, chaotic energy patterns - Frequency: Control bolt density and spawn rate - Lower values: Sparse, dramatic effects - Higher values: Dense energy field ### Quick Tips **Best Performance** — Use 3-4 colors for optimal gradient rendering. More complex gradients may impact performance on lower-end devices. **Color Combinations** — Dark backgrounds (black, deep blue, dark purple) make electric bolts pop. Try neon colors (cyan, magenta, electric blue) for authentic electric effects. **Layering** — Place content above the component. Use white or bright text with glow effects for best readability against electric backgrounds. **Turbulence Settings** — Start with 1.5 turbulence for balanced chaos. Increase for more dramatic effects, decrease for cleaner, tech-style animations. **Width Settings** — Line width of 1.5-2.5 works best for hero sections. Go thinner (0.8-1.2) for subtle backgrounds, thicker (3-4) for bold statements. ## Credits Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/). ## Why Designers Love This ElectricBolts isn't just another animation component - it's a production-ready electric energy system built with Three.js for stunning visual impact. With smooth WebGL performance, customizable colors, and organic animation patterns, your designs will crackle with energy. Whether you're building a tech startup landing page, a gaming website, or a futuristic portfolio, ElectricBolts delivers that electric "wow" factor that sets premium brands apart. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. **Support Contact:** [https://x.com/shahulbuilds](https://x.com/shahulbuilds) or [shahul@amazee.studio](mailto:shahul@amazee.studio) --- - **Page:** Emerging Image - **Source:** https://framerhub.io/components/emerging-image ## Reveal Your Images with Stunning WebGL Animations Transform ordinary images into captivating visual experiences with EmergingImage. This powerful component uses WebGL shaders to create eye-catching reveal effects that trigger as users scroll, perfect for hero sections, portfolios, and product showcases. ## Features **5 Animation Types** Choose from Pixelate Grid Slide, Noise Curtain, Dissolve Pattern, Wave Curtain, or Simple Pixelate—each offering a distinct visual style. **Scroll-Triggered Animations** Automatically animates when the element scrolls into view with configurable trigger threshold. **Full Image Control** Supports all CSS object-fit modes (cover, contain, fill, none, scale-down), alt text, and srcSet for responsive images. **Performance Optimized** Built-in WebGL context management, adaptive frame skipping, and performance monitoring for smooth animations. ## Use Cases **Hero Sections** — Create memorable first impressions with animated image reveals. **Portfolio Galleries** — Showcase work with elegant scroll-based transitions. **Product Images** — Add visual interest to e-commerce product displays. **Landing Pages** — Capture attention with dynamic visual effects. ![Emerging Image Preview](/framerhub/img/components/control/emerging-image.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Emerging Image in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Image Settings** - Select an image using the ResponsiveImage picker - Choose how the image fits within the container (Cover, Contain, Fill, None, Scale-down) **Animation Settings** - Pick from 5 unique animation styles - Customize duration (0.3s - 5s) - Choose from 6 easing options - Set trigger threshold for scroll activation **Appearance** - Set fill color for reveal transition - Toggle transparent background - Select quality preset (Auto, Performance, Balanced, Quality) ### Quick Tips **Best Performance** — Use optimized images (< 2MB). The component automatically manages WebGL contexts to prevent memory issues. **Animation Selection** — "Pixelate Grid Slide" works great for tech themes, while "Wave Curtain" suits organic/creative brands. **Fill Color** — Match the fill color to your background for seamless reveal transitions. **Trigger Threshold** — Lower values (0-20%) trigger earlier as the element enters view. Higher values (80-100%) wait until mostly visible. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This EmergingImage brings cinematic-quality reveal effects to Framer without any coding. The WebGL-powered animations run smoothly across devices, and the intuitive controls make customization effortless. Perfect for designers who want premium visual impact with minimal effort. --- --- - **Page:** Flowing Rivers - **Source:** https://framerhub.io/components/flowing-rivers ## Create Organic 3D Experiences A stunning 3D animation component featuring organic flowing lines that follow the surface of an invisible sphere, creating mesmerizing river-like patterns. ## Features **Organic Flowing Lines** Beautiful flowing lines that naturally follow the surface of an invisible sphere, creating organic, river-like patterns. **Sphere Surface Raycasting** Advanced raycasting technology ensures lines perfectly follow the curved surface of the sphere. **Background Starfield** Optional twinkling stars in the background add depth and atmosphere to your scene. **Mouse Interaction** Enable camera orbit control with mouse movement for an interactive experience. **Customizable Colors** Choose up to 6 vibrant colors for your flowing rivers. Lines will randomly use these colors. ## Use Cases **Hero Sections** — Perfect for modern, artistic hero sections and landing pages **Portfolio Sites** — Showcase creativity with organic, flowing backgrounds **Brand Experiences** — Create unique brand experiences with custom color palettes **Abstract Backgrounds** — Add visual interest to any page with mesmerizing patterns ![Flowing Rivers Preview](/framerhub/img/components/control/flowing-rivers.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Flowing Rivers in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) Use the property controls to customize your flowing rivers effect. **River Colors** - Color 1-6 — Customize up to 6 colors for the flowing rivers **Background** - Background Color — Set a background color for the entire canvas - Star Count — Number of background stars (0-2000) - Star Color — Color of the background stars - Star Size — Size of the background stars (0.01-0.2) **Animation** - Speed — Control how fast the rivers flow (0.1-5) - Line Width — Thickness of the river lines (0.01-0.2) **Interaction** - Enable Mouse Effect — Toggle camera orbit based on mouse movement ### Quick Tips **Best Aesthetics** — Use dark backgrounds with vibrant river colors for maximum contrast. Try analogous color schemes for harmonious flows. **Speed Settings** — Slower speeds (0.5-1) feel meditative and calming. Faster speeds (2-4) create energetic, dynamic scenes. **Background Stars** — Add background stars for cosmic atmospheres. Try 500-1000 stars for subtle depth, 1500-2000 for rich starfields. **Color Harmony** — Use color gradients between adjacent colors (e.g., blues to purples to pinks) for smooth, natural-looking flows. ## Credits Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/). ## Why Designers Love This Create unique, organic 3D experiences with flowing rivers that naturally follow spherical surfaces. Built with advanced Three.js raycasting for smooth, mesmerizing animations. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Fluid Distortion - **Source:** https://framerhub.io/components/fluid-distortion ## Interactive Fluid Effects for Images and Backgrounds Add liquid-like distortion effects that respond to mouse movement in real-time. Perfect for hero sections, image galleries, and interactive showcases where you want to create an immersive, tactile experience. Designed for designers who want to add premium interactive effects that feel organic and alive. ## Features **Mouse-Reactive Distortion** Fluid ripples follow your cursor naturally with smooth interpolation, creating depth and movement that responds to every interaction. **Smooth Cursor Tracking** Adjustable smoothness lets you control how fluidly the effect follows the cursor — from responsive tracking to elegant trailing effects. **Image Fit Options** Choose how your image fills the container: Cover (fills and crops), Contain (fits entirely), or Fill (stretches to fit). **Full Visual Control** Adjust distortion strength, mouse sensitivity, smoothness, dissipation speed—all from Framer's properties panel. **Performance First** Smooth rendering that maintains 60fps while creating complex fluid simulations. Works seamlessly across devices. ## Use Cases **Hero Sections** — Create memorable first impressions with interactive backgrounds that respond to visitor movement **Portfolio Showcases** — Add fluid distortion to photography or artwork for a premium, gallery-quality presentation **Product Pages** — Showcase products with interactive effects that communicate innovation and attention to detail **Agency Websites** — Demonstrate creative technical excellence with effects that feel expensive and custom-built **Landing Pages** — Increase engagement with interactive elements that encourage exploration and cursor movement ![Fluid Distortion Preview](/framerhub/img/components/control/fluid-distortion.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Fluid Distortion in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Everything you need is in Framer's properties panel: **Image Settings** - Image: Upload any image (uses demo portrait if empty) - Image Fit: Cover, Contain, or Fill **Distortion Settings** - Strength: Intensity of the fluid effect (0-1) - Sensitivity: How strongly mouse movement affects distortion (0.1-5) - Smoothness: How fluidly the effect follows the cursor (0.01-1) - Dissipation: How fast the distortion fades (0.8-0.99) - Falloff: Softness of distortion edges (0-1) - Alpha: Overall opacity of the effect (0-1) ### Quick Tips **Best Results** — Start with Strength at 0.2 and Sensitivity at 1.0, then adjust to taste **Smooth Effect** — Lower Smoothness values (0.03-0.08) create elegant trailing effects; higher values (0.3+) make it more responsive **With Images** — Use high-contrast images for more visible distortion. The effect works beautifully with portraits and product shots **Subtle vs Dramatic** — Lower Strength (0.1-0.2) for elegant refinement, higher (0.4-0.6) for bold interactive statements **Performance** — Higher Dissipation values (0.95+) create longer-lasting trails but may impact performance on older devices ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Drop it in, upload an image, adjust a few sliders—done. The fluid effect runs automatically with smooth cursor tracking and no setup complexity. Perfect for creating those "wow" moments that make client presentations memorable. Ideal for agencies delivering high-end interactive work and freelancers who want to add premium effects without the premium development time. --- --- - **Page:** Fluid Noise - **Source:** https://framerhub.io/components/fluid-noise ## Fluid Noise Add organic, animated textures to your site with Fluid Noise. This component uses WebGL shaders to generate smooth, flowing noise patterns with extensive customization options for colors, animation, and visual effects. ## Features **Rich Color Control** Define three gradient colors and choose from smooth, hard, or gradient blending modes for unique visual styles. **Multiple Animation Modes** Choose from Continuous flow, rhythmic Wave/Pulse effects, or hypnotic Spiral patterns. Control direction and speed independently. **Visual Effects** Fine-tune your visuals with contrast, brightness, and saturation controls. Adjust noise complexity, turbulence, and FBM octaves for endless variations. **Performance Optimized** Runs entirely on the GPU via custom shaders. Auto-optimizes on Framer canvas with reduced pixel ratio and low-power mode. ## Use Cases **Hero Backgrounds** — Create eye-catching animated backgrounds that draw attention without distracting from content. **Section Dividers** — Use as subtle animated separators between content sections. **Loading States** — Perfect for mesmerizing loading or transition screens. **Artistic Effects** — Combine with overlays for unique artistic website themes. ![Fluid Noise Preview](/framerhub/img/components/control/fluid-noise.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Fluid Noise in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Colors** - Color A, B, C: Set your three-color gradient palette - Color Blend: Choose blending style (Smooth for gradual transitions, Hard for distinct bands, Gradient for mixed) **Noise Settings** - Scale: Larger values = smaller patterns - Complexity: Higher values = more intricate details - Distortion: Controls warping intensity - Turbulence: Adds chaotic movement **Animation** - Speed: 0.5–1.5 for subtle, 2.0+ for energetic - Mode: Continuous (default), Wave (pulsating), Pulse (rhythmic), Spiral (hypnotic) - Direction: Control flow direction **Effects** - Contrast/Brightness/Saturation: Fine-tune the final look ### Quick Tips **Best Performance** — Use 2-4 Octaves for smooth animation on most devices. Lower on mobile for optimal performance. **Color Combinations** — Complementary colors (opposite on color wheel) create vibrant effects. Analogous colors (adjacent) feel more harmonious. **Layering** — Place content above with white text and subtle shadows for best readability. **Speed Settings** — Start with speed 1.0. Slower (0.5–0.8) feels relaxing, faster (2.0+) adds energy. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Fluid Noise brings life to static designs with organic, never-repeating motion. With extensive controls for colors, animation modes, and effects, you can create unique backgrounds that perfectly match your brand—all with zero coding required. --- --- - **Page:** Exist Popup | FramerHub - **Source:** https://framerhub.io/components/exist-popup - **Description:** Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment. Premium Framer component for client sites, portfolios,. # **Exist Popup ** Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment. One-time payment Lifetime updates Commercial license ## **Overview** Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment. - Three smart trigger modes (exit intent, scroll depth, timed) - Exit warning to prevent accidental tab closes - Optional auto-close with progress bar - Four smooth animations (fade, zoom, slide) - Center overlay or corner positioning - Fully customizable colors and styling - Drop in your own content with content slot - Works in any Framer project ## ExitPopup — Smart Popup Component Create engaging popups that appear exactly when you want them. Perfect for announcements, newsletter signups, exit offers, and promotional messages. ## Features**Multiple Trigger Modes** Choose when your popup appears: after a time delay, when users try to leave (exit intent), or after scrolling a certain distance.**Auto-Close with Progress** Automatically dismiss popups after a set duration with an optional progress bar that pauses on hover.**Flexible Positioning** Display as a centered overlay with backdrop or position in any corner of the screen.**Smooth Animations** Four animation styles: Fade, Zoom, Slide Up, and Slide Down with customizable speed.**Slot-Based Content** Connect any Framer design as popup content — full creative freedom. ## Use Cases**Newsletter Signup** — Capture emails with a timed popup after visitors engage with content.**Exit Intent Offer** — Show special discounts when visitors try to leave.**Announcements** — Display important updates in corner positions without blocking content.**Cookie Consent** — Auto-closing notification with progress indicator.![Exist Popup Preview](https://framerhub.io/framerhub/img/components/control/exit-popup.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find ExitPopup in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)**Popup Content** Connect your popup design by dragging a frame into the slot.**When to Show (Trigger Settings)**- Trigger: After Time Delay, Exit Intent, or After Scrolling - Delay: Wait time before showing (0-30 seconds) - Exit Intent Sensitivity: Distance from top to trigger - Scroll Distance: How far to scroll before popup appears - Exit Warning: Show when visitor tries to leave the page**Auto-Close**- Enable: Close popup automatically after duration - Duration: Time before auto-close (1-60 seconds) - Progress Bar: Show countdown indicator - Bar Position: Top or Bottom - Bar Color: Customize progress color**Position**- Style: Center Overlay or Corner Position - Corner: Top Left, Top Right, Bottom Left, Bottom Right, Center - Edge Space: Distance from screen edges - Show Backdrop: Dark background behind popup - Backdrop Color: Overlay color**Animation**- Style: Fade, Zoom, Slide Up, Slide Down - Speed: Animation duration (0.1-2 seconds)**Close Button**- Show Close Button: Display X button - Hide if Auto-Close: Hide when using auto-close - Position: Inside or Outside popup - Distance: Spacing from corner - Size: Button size - Icon Size: X icon size - Icon Color: X icon color - Background: Button background color ### Quick Tips**Exit Intent** — Works best on desktop. Set sensitivity to 10px for reliable triggering when cursor moves toward browser controls.**Auto-Close** — Enable progress bar so users know the popup will dismiss. The timer pauses on hover for better UX.**Corner Positioning** — Great for non-intrusive announcements. Use Bottom Right for cookie notices.**Slot Content** — Design your popup as a separate frame, then connect it. This gives you full control over layout and styling. ## License Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This ExitPopup combines powerful trigger options with intuitive controls. No coding required — just connect your design and configure when it appears. The auto-close feature with pause-on-hover provides a polished user experience that feels native to modern websites. ---**Need Help?** Visit framerhub.io/support for documentation and video tutorials. ### **Exist Popup - $15** Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Fluid Trail - **Source:** https://framerhub.io/components/fluid-trail ## Fluid Trail Effect Add a layer of fluid interactivity with Fluid Trail. This component uses OGL (WebGL) to render a high-performance trail of diminishing circles that follows your cursor, creating a smooth, organic feel. ## Features **WebGL Performance** Unlike traditional DOM-based trails, this runs on the GPU, ensuring 60fps performance even with long, complex trails. **Organic Motion** The "lag" parameter allows you to create trails that feel heavy and liquid, or snappy and energetic. **Blend Modes** Use blend modes like "Difference" or "Screen" to make the trail interact visually with your underlying content. **Portal Rendering** In preview/live mode, the trail renders as a portal to document.body, ensuring it covers the entire viewport regardless of component placement. ## Use Cases **Interactive Portfolios** — Add a dynamic, playful element that follows visitors as they explore your work. **Landing Pages** — Create memorable first impressions with an eye-catching cursor effect. **Creative Agency Sites** — Demonstrate technical creativity with a smooth, GPU-powered visual effect. **Event & Entertainment Sites** — Add energy and movement to promotional pages. ![Fluid Trail Preview](/framerhub/img/components/control/fluid-trail.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Fluid Trail in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Color** Set the trail color using the color picker. Supports hex, RGB, and short hex formats. **Blend Mode** Choose from Normal, Difference, Screen, Overlay, Multiply, or Exclusion to create different visual effects. **Count** Adjust the number of circles in the trail (5-500). Higher counts create longer, more dramatic trails. **Size** Control the radius of the head circle (10-200). Trailing circles scale down proportionally. **Lag** Set the inertia of the trail (0.01-0.99). Higher values create smoother, slower-following trails. ### Quick Tips **Best Performance** — Keep count between 50-200 for optimal performance on most devices. **Blend Mode Magic** — Use "Difference" blend mode on dark backgrounds for an inverted color effect. Use "Screen" for a glowing appearance. **Lag Settings** — Lower lag (0.1-0.2) for snappy, responsive trails. Higher lag (0.5+) for liquid, flowing motion. **Placement** — Place anywhere on canvas; the component automatically renders full-screen in preview mode via portal. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Fluid Trail adds an instant "wow factor" to any project. The OGL-powered rendering ensures buttery-smooth 60fps performance while the customizable lag and blend modes let you create everything from subtle accents to dramatic visual effects. Perfect for creative portfolios, landing pages, and any site that needs a touch of interactive magic. --- --- - **Page:** Glyph Twist - **Source:** https://framerhub.io/components/glyph-twist ## Glyph Twist - 3D Kinetic Typography Create mesmerizing 3D text effects with the Glyph Twist component. Text is dynamically mapped onto a twisted cubic mesh that rotates and animates, creating an eye-catching visual experience with a **transparent background** so you can overlay it on any content. ## Features **3D Twisted Geometry** Your text is mapped onto a twisted cubic mesh using Three.js shaders, creating a unique distorted 3D effect. **Transparent Background** The component has a fully transparent background, allowing you to place it over any Framer frame, image, or gradient. **Smooth Animation** Watch text scroll across the twisted geometry with adjustable animation speed. **Auto Rotation** Enable automatic rotation with customizable speed for a dynamic, constantly evolving display. ## Use Cases **Hero Sections** — Create dramatic 3D headlines over background images. **Creative Portfolios** — Showcase your design skills with innovative typography. **Brand Experiences** — Elevate brand messages with premium 3D visuals. **Event Pages** — Add excitement to music, tech, or creative event promotions. ![Glyph Twist Preview](/framerhub/img/components/control/glyph-twist.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Content** - Text: Your display text - Font: Extended font controls **Colors** - Text Color: Color of the text (default: white) - Cube Color: Background of the rotating cube (default: blue) **Animation** - Animation Speed: Text scrolling speed - Camera Distance: How far/close the view - Auto Rotate: Toggle automatic rotation - Rotation Speed: Speed of auto rotation ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- --- - **Page:** Image Tiles Menu - **Source:** https://framerhub.io/components/image-tiles-menu ## Image Tiles Menu Elevate your site navigation with the Image Tiles Menu. This component creates an immersive experience where hovering over menu items reveals a scattered grid of related images in the background, perfect for portfolios, agencies, or visually rich brands. ![image tiles menu](/framerhub/img/components/control/lmage-tiles-menu.jpg) ## Features **Dynamic Image Reveal** Hovering over a link triggers a unique layout of image tiles that fade and scale into view, providing immediate visual context for the section. **Smooth Animations** Powered by Framer Motion and FLIP techniques, the transitions are buttery smooth and performant, even with multiple images animating at once. **Fully Customizable** Control the font styles, colors, menu items, and the images associated with each link directly from the Framer sidebar. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Interactive Particles - **Source:** https://framerhub.io/components/interactive-particles ## Interactive Image Particles for Framer Turn any image into a living, breathing particle field. Your images respond naturally to mouse movement and touch with smooth 3D depth effects. Perfect for hero sections, portfolio showcases, and anywhere you want to make images unforgettable. ## Features **Image-to-Particle Conversion** Upload any image and watch it transform into thousands of interactive particles that maintain the original composition. **Interactive Touch Effects** Particles respond smoothly to mouse and touch input with organic ripple effects that create depth and engagement. **Multiple Particle Shapes** Choose from circle, square, soft-square, star, or hexagon shapes to match your design aesthetic. **Flexible Color Modes** Display in full color to preserve original imagery, or switch to black & white with four contrast presets (Natural, Balanced, Soft, Bright). **3D Depth Control** Adjust depth and spread to create subtle or dramatic 3D effects. Particles float at different layers, creating natural parallax. **Performance Optimization** Built-in quality controls let you balance visual impact with smooth performance across all devices. ## Use Cases **Hero Images** — Transform static hero images into interactive experiences that capture attention instantly **Portfolio Showcases** — Display work samples with particle effects that invite exploration and engagement **About Pages** — Add personality to team photos or founder images with subtle interactive motion **Product Highlights** — Make product images memorable with touch-responsive particle animations **Brand Identity** — Turn logos or brand imagery into distinctive interactive elements ![Interactive Particles Preview](/framerhub/img/components/control/interactive-particles.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Interactive Particles in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization All settings are accessible through Framer's properties panel: **Image Setup** - Upload your image - Choose image fit (Fill, Cover, Contain, Scale Down) - Select style: Full Color or Black & White - Adjust contrast preset (for Black & White mode) **Particle Appearance** - Select particle shape (5 options) - Set particle size - Adjust detail level (brightness threshold) **Motion & Effects** - Toggle entrance animation on/off - Control 3D depth intensity - Adjust particle spread - Freeze movement option for static look **Interaction** - Set touch interaction size - Control touch strength (displacement intensity) **Performance** - Adjust max resolution (lower = faster) - Set sampling rate (1=high quality, 4=faster) - Control minimum brightness size ### Quick Tips **Best Images** — High-contrast images with clear subjects work best. Portraits, logos, and silhouettes create strong effects **Performance Balance** — Start with default settings. If performance lags, reduce max resolution to 200 and increase sampling to 2 **Color Choice** — Black & White mode often creates cleaner, more professional effects. Use "Natural" contrast for best results **Subtle is Better** — Keep 3D depth around 4.0 and spread around 2.0 for natural-looking effects ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Choose This Static images are forgettable. Interactive particles make them memorable. Upload any image and instantly create an experience that engages visitors through natural mouse and touch interaction. No complex setup, no coding. Just add your image, adjust the look, and deploy. Perfect for agencies delivering premium sites and freelancers who want portfolio pieces that stand out. --- --- - **Page:** InfiniteScrollingTicker - **Source:** https://framerhub.io/components/infinite-scrolling-ticker ## Seamless Looping Text Animations for Framer Add eye-catching marquee scrolls to hero sections, announcement bars, or promotional banners. Perfect for sales, events, and dynamic messaging. Built for designers who need professional animations without complexity. ## Features **Seamless Looping** Smooth infinite scroll with no jumps or breaks. Text flows continuously for a polished, professional look. **Multi-Item Support** Add multiple messages separated by commas. Each item scrolls as part of one continuous stream. **Custom Separators** Choose the default star icon or upload your own SVG separator. Control size and color to match your brand. **Full Typography Control** Customize font family, size, weight, and color directly from Framer's properties panel. **Speed & Spacing** Adjust animation speed (5-60 seconds) and gap between items (10-100px) for the perfect rhythm. **Production Ready** Copy, paste, and customize in minutes. No code, no setup—just instant marquee animations. ## Use Cases **Announcement Bars** — Highlight sales, shipping updates, or limited-time offers at the top of any page **Promotional Banners** — Create urgency with scrolling "BLACK FRIDAY • 50% OFF • LIMITED TIME" messages **Hero Sections** — Add dynamic movement to headlines with scrolling keywords or brand values **Event Pages** — Showcase dates, speakers, or key highlights in an engaging ticker format **Portfolio Headers** — Display skills, services, or client names in a modern scrolling layout ![InfiniteScrollingTicker Preview](/framerhub/img/components/control/infinite-marquee.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Infinite Marquee in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Everything you need is in Framer's properties panel: **Text Content** - Enter your text with items separated by commas - Example: "BLACK FRIDAY, SALE, 50% OFF, LIMITED TIME" - Each item becomes part of the continuous scroll **Typography** - Choose any font from Framer's library - Adjust size, weight, and alignment - Set text color to match your design **Animation Settings** - Speed: Control how fast text scrolls (5-60 seconds per loop) - Gap: Set spacing between items (10-100px) **Separators** - Toggle separators on/off - Use default star icon or upload custom SVG - Adjust separator size and color ### Quick Tips **Best Readability** — Use 48px or larger for hero sections. Smaller sizes work for announcement bars. **Consistent Length** — Keep items roughly similar in length for balanced visual rhythm. **Color Contrast** — Ensure text color has strong contrast with background for easy reading. **Speed Balance** — Slower speeds (15-25 seconds) work best for important messages. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This No setup, no complexity—just copy, paste, and start customizing. Perfect for agencies delivering client work fast and designers who want professional marquee effects without writing code. Instant visual impact with complete control over every detail through Framer's familiar interface. --- --- - **Page:** Warp Drive | FramerHub - **Source:** https://framerhub.io/components/warp-drive - **Description:** Hyperspeed tunnel effect with dynamic car lights and distortion. Free Framer component for client sites, portfolios, and product pages. # **Warp Drive ** Hyperspeed tunnel effect with dynamic car lights and distortion. One-time payment Lifetime updates Commercial license ## **Overview** Hyperspeed tunnel effect with dynamic car lights and distortion. - 6 Unique visual presets with distinct distortion patterns - Interactive speed-up on click/touch - Dynamic 3D car light trails - Customizable color palettes - Random color generation mode - Post-processing effects (Bloom, SMAA) ## Warp Drive Engage your warp engines. This stunning 3D component creates a high-speed tunnel effect, complete with rushing car lights and road markings. Perfect for futuristic themes, speed-related content, or just a really cool hero background. ## Features**6 Distinct Presets** Switch instantly between different visual styles—_Turbulent Pulse_, _Mountain Drift_, _Axis Swing_, _Endless Run_, _Solar Flare_, and _Deep Current_—each with unique distortion patterns and color moods.**Interactive Speed Boost** Users can click or touch the component to trigger a "boost," momentarily accelerating the warp speed and widening the field of view for a satisfying interactive moment.**Customizable Colors** While the presets look great out of the box, you can override individual colors for background, road, car lights, and side sticks to match your specific brand guidelines.**Random Color Mode** Enable randomized colors for each session to create unique, ever-changing visual experiences.**Post-Processing Effects** Built-in bloom and SMAA anti-aliasing effects create a polished, cinematic look. ## Use Cases**Hero Backgrounds** — Create immersive landing pages that capture attention with dynamic motion.**Gaming & Tech Sites** — Perfect for conveying speed, technology, and futuristic themes.**Loading Screens** — Keep users engaged during loading with mesmerizing visuals.**Music & Event Pages** — Add energy to entertainment websites with pulsing light effects.![Warp Drive Preview](https://framerhub.io/framerhub/img/components/control/warp-drive.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Warp Drive in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Choose your preferred preset from the dropdown, then customize further with these options:**Presets**- Turbulent Pulse — Chaotic, energetic movements - Mountain Drift — Smooth, rolling distortion - Axis Swing — Side-to-side motion - Endless Run — Long sweeping curves - Solar Flare — Warm, orange-tinted energy - Deep Current — Diving into the tunnel**Color Overrides**- Background, Road, and Island colors - Left and Right Car lights (3 colors each for variety) - Side light sticks (3 colors) ### Quick Tips**Performance** — The component uses WebGL with post-processing. For mobile, consider testing performance on target devices.**Layering** — Place content above the component. White text with subtle shadows provides best readability on dark tunnel backgrounds.**Interaction** — Click/touch to boost speed. Great for encouraging user engagement.**Full Screen** — Looks best at full viewport width. Use as a hero section background. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This WarpDrive transforms ordinary pages into immersive experiences. The combination of dynamic 3D animation, interactive speed boost, and fully customizable colors means you can create unique hero sections that truly stand out. The six carefully crafted presets give you instant variety, while the color override system ensures perfect brand alignment. ### **Warp Drive - FREE** Hyperspeed tunnel effect with dynamic car lights and distortion.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Lens Zoom Gallery - **Source:** https://framerhub.io/components/lens-zoom-gallery ## Lens Zoom Gallery A sophisticated image viewer that adds a magnifying glass effect to your images, perfect for product showcases or detailed photography. ## Features **Magnifying Lens** Hover over the image to reveal a magnifying lens that zooms into the details. **High-Res Support** Seamlessly switch to a higher resolution image within the lens for crystal clear zooming without loading heavy assets for the main view. **Customizable Design** Adjust the lens size, shape (circle/square), borders, and shadows to match your brand. **Smooth Experience** Enable smooth movement for a premium, weighted feel as the lens follows the cursor. **Flexible Sizing** Control how your image fits within the container (Cover, Fit/Contain, or Stretch), ensuring varied aspect ratios work perfectly. ## Use Cases **Product Details** Allow customers to inspect product textures and details closely. **Photography Portfolios** Showcase high-resolution photos without compromising initial page load impact. ![Lens Zoom Gallery Preview](/framerhub/img/components/control/lens-zoom-gallery.jpg) ## How to Use ### Installation 1. Copy the component from the marketplace. 2. Paste it into your Framer project. ### Customization **Image Settings** - **Image**: Set the main display image. - **High Res**: Upload a higher resolution version specifically for the zoomed view (optional). - **Sizing**: Choose between Cover, Fit, or Stretch. **Lens Settings** - **Lens Size**: Control how large the magnifying glass appears (50px - 500px). - **Zoom**: Set the magnification level (1.1x - 10x). - **Shape**: Choose between Circle or Square lens. - **Smoothness**: Add physics lag for a premium feel. - **Styling**: Customize borders, shadows, and glass reflection effects. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Letter Swap - **Source:** https://framerhub.io/components/letter-swap ## Letter Swap Add playful interactivity to links, headers, or buttons with Letter Swap. This component smoothly swaps characters on hover, creating a satisfying "slot machine" style motion that draws attention. ## Features **Staggered Animation** Letters animate one by one (staggered) for a fluid, wave-like motion rather than a stiff, uniform movement. **2 Interaction Modes** - **Forward**: The swap happens once on hover and resets instantly (good for links). - **PingPong**: The swap reverses when the mouse leaves (good for buttons). **Full Customization** Control the stagger direction (first-to-last, center-out), animation speed, spring physics, and of course, any font family and style. ## Use Cases **Navigation Links** — Add subtle micro-interactions to your site navigation that encourage exploration. **Call-to-Action Buttons** — Draw attention to important buttons with playful text effects that feel premium. **Hero Headlines** — Create memorable first impressions with animated headings that engage visitors. **Portfolio Titles** — Showcase creativity with dynamic text effects that reflect your design aesthetic. ![Letter Swap Preview](/framerhub/img/components/control/letter-swap.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Letter Swap in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Letter Swap provides intuitive controls for complete customization: **Text & Animation** - Text: Enter your content directly - Variant: Choose between Forward (one-shot) or PingPong (toggle on hover) - Direction: Control whether letters animate up or down **Timing Controls** - Spring Duration: Adjust the animation bounciness (0.1 - 2.0s) - Stagger Duration: Fine-tune the delay between each letter - Stagger From: Start animation from first letter, last letter, or center **Typography** - Full font control via Framer's extended font picker - Color picker for text styling ### Quick Tips **Best for Buttons** — Use PingPong mode for interactive buttons where the effect should reverse on mouse leave. **Create Wave Effects** — Set Stagger From to "Center" for an outward wave animation that expands from the middle. **Subtle is Better** — Start with default stagger (0.03s) for smooth motion. Higher values create more dramatic, typewriter-like effects. **Spring Physics** — Lower spring values (0.4-0.6) feel snappy and modern, while higher values (0.8-1.0) add playful bounce. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Letter Swap transforms static text into an interactive experience. The staggered animation creates a premium, polished feel that impresses clients and engages visitors. With two animation modes and full customization, you can use it anywhere—from subtle navigation links to bold hero headlines. No code required, just drop it in and customize through the Framer properties panel. --- --- - **Page:** Liquid Chrome - **Source:** https://framerhub.io/components/liquid-chrome ## Making Your Site Fluid Add a touch of mesmerizing interactivity to your Framer projects with Liquid Chrome. This component brings a high-end, shader-based fluid simulation that reacts to user mouse movement, creating a deeply engaging visual experience. ## Features **Interactive Fluid Simulation** The surface reacts to mouse movements, creating ripples, swirls, and distortions that feel natural and responsive. **3 Unique Render Modes** Choose between Classic Chrome, Fire Colormap, or a Hybrid mode to perfectly match your brand's aesthetic. **Custom Color Palettes** Fully customizable base and highlight colors allow you to integrate the effect seamlessly into any design system. ## Use Cases **Hero Backgrounds** — Create an unforgettable first impression with a full-screen liquid background. **Interactive Cards** — Use as a background for cards or sections to draw attention to key content. **Brand Visuals** — precise control over colors and complexity makes it perfect for abstract brand motion graphics. ![Liquid Chrome Preview](/framerhub/img/components/control/liquid-chrome.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Liquid Chrome in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the look and feel through the property controls right in Framer. **Appearance** - **Render Mode**: Switch between Chrome, Fire, and Hybrid. - **Base & Highlight Colors**: Define the core look of your fluid. - **Color Shift**: Adjust the iridescent oil-slick intensity. **Fluid Settings** - **Flow Speed**: Control how fast the detailed noise moves. - **Distortion Scale**: Zoom in or out of the fluid pattern. - **Complexity**: Adjust the detail level of the simulation. **Mouse Interaction** - **Effect Intensity**: How strongly the mouse affects the fluid. - **Effect Radius**: The size of the interaction area. ### Quick Tips **Best Performance** — Keep the complexity moderate on mobile devices to ensure 60fps performance. **Layering** — Place text or other content on top of the liquid layer with good contrast for a striking effect. **Subtle Motion** — Use lower speed settings for a calm, premium feel, or crank it up for high-energy visuals. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Liquid Chrome offers that "awwwards" look with zero coding required. It's performant, beautiful, and endlessly customizable, giving you the power of WebGL shaders in a simple drag-and-drop package. --- --- - **Page:** Liquid Data Hologram - **Source:** https://framerhub.io/components/liquid-data-hologram ## Liquid Data Hologram Add a futuristic, high-end feel to your project with the Liquid Data Hologram. This stunning interactive particle effect converts any image into a dynamic, 3D particle system that reacts organically to mouse movement with fluid-like physics and holographic aesthetics. ## Features **Image Conversion** Automatically converts any image into a detailed 3D particle system. The component analyzes brightness and alpha channels to generate points only where needed, preserving the essence of your original design. **Liquid Physics** Experience smooth, organic motion with particle physics that react to your cursor. Create ripples, swirls, and "data-splash" effects that make your site feel alive and interactive. **Transparent Background Support** Seamlessly layer the hologram over any background, image, or video. Full alpha transparency ensures it fits perfectly into any design system without rigid boundaries. **Customizable Visuals** Take complete control over the particle size, density, glow, and bloom strength. Fine-tune the "holographic characters" to match everything from tech interfaces to creative portfolios. ## Use Cases **Hero Sections** — Create an immediate, immersive impact with a full-screen holographic hero background that responds to visitor exploration. **Data Visualization** — Present logos, icons, or abstract data in a futuristic, tech-forward style that feels premium and innovative. **Creative Overlays** — Use on top of existing layouts with the transparent background to add a layer of digital texture and interactive depth. ![Liquid Data Hologram Preview](/framerhub/img/components/control/liquid-data-hologram.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Liquid Data Hologram in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Appearance** - **Image**: Upload any image to convert it into a particle system. High-contrast logos and silhouettes work best. - **Characters**: Customize the characters used for the "data" points (e.g., `+*/=<>[]01`). **Particle Controls** - **Size**: Adjust the radius of individual data particles. - **Density**: Controls how many points are generated (lower value = higher density). - **Threshold**: Fine-tune which parts of the image become particles based on brightness. **Interaction Settings** - **Brush Size**: Controls the area of influence around your cursor. - **Force**: Adjust how strongly particles are pushed away or pulled. - **Ripple Depth**: Add Z-axis movement to create deep 3D waves on hover. **Glow & Bloom** - **Bloom Strength**: Control the intensity of the holographic glow. - **Bloom Radius**: Adjust how far the light bleeds from each particle. ### Quick Tips **Best Performance** — Keep density at a balanced level (2-4) for smooth performance across all devices. For mobile-heavy sites, a density of 4-6 is recommended. **Contrast is Key** — Use images with high contrast or transparent backgrounds (PNGs) to get the cleanest holographic outlines. **Layering** — Place white or high-contrast text over the hologram. Add a slight shadow to the text for maximum readability when the particles move underneath. **Interaction Feel** — For a "liquid" feel, use a high Brush Size with moderate Force. For a "crystalline" feel, use a smaller Brush Size and higher Ripple Depth. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This The Liquid Data Hologram transforms static visuals into a mesmerizing, interactive experience. It offers that elusive "high-end tech" aesthetic with zero coding required—just drop it in, upload your asset, and watch your design come to life. Whether you're building a cyberpunk portfolio or a corporate tech landing page, this component provides the polish and interactivity needed to stand out. --- --- - **Page:** Magnetic Buttons - **Source:** https://framerhub.io/components/magnetic-buttons ## Magnetic Buttons Create interactive buttons that magnetically follow your cursor with smooth, physics-based motion. Choose from 4 pre-styled presets or connect your own custom component to add the magnetic effect. ## Features **Physics-Based Motion** Smooth, natural cursor-following with customizable magnetic strength and smoothness. **4 Button Presets** Rounded Rectangle, Circle Fill, Pill Fill, and Circle Outline styles ready to use. **Custom Component Support** Connect any Framer component to make it magnetic - icons, cards, or complex designs. **Text Counter-Movement** Adds depth by moving text in the opposite direction of the button. ## Use Cases **Call-to-Action Buttons** — Make CTAs more engaging and interactive. **Navigation Elements** — Create memorable navigation experiences. **Portfolio Showcases** — Highlight clickable elements with magnetic effects. **Landing Pages** — Add premium interactivity to key conversion points. ![Magnetic Buttons Preview](/framerhub/img/components/control/magnetic-buttons.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Magnetic Buttons in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Type Selection** - Default: Use pre-styled button presets - Custom: Connect your own Framer component **Magnetic Behavior** - Magnetic Strength: How strongly the button follows cursor (0-1) - Distance Threshold: Activation range for the effect - Smoothness: Animation fluidity (lower = smoother) - Text Counter Move: Depth effect intensity **Button Styles** Each preset has full customization for dimensions, typography, colors, and hover states. ### Quick Tips **Strength Settings** — Start with 0.3 for subtle effect. Use 0.5-0.8 for more dramatic following. **Smoothness** — Values around 0.1 provide the best balance of responsiveness and fluidity. **Custom Mode** — When connecting custom components, ensure they have visible boundaries for best effect. **Hover States** — Customize hover colors to provide clear feedback when the magnetic effect activates. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Turn ordinary buttons into engaging interactive elements. The magnetic effect adds a layer of polish and interactivity that users remember, making your interface feel premium and alive. --- --- - **Page:** Matrix Rain - **Source:** https://framerhub.io/components/matrix-rain ## Matrix Rain Effect Bring the iconic Matrix digital rain effect to your Framer projects. Watch as streams of characters cascade down your screen in that unforgettable green-on-black aesthetic. ## Features **Authentic Matrix Effect** Random characters (including Japanese katakana) fall in vertical streams, creating the iconic digital rain. **Customizable Colors** Change the rain color from classic green to any color. Customize the background too. **Adjustable Density** Control font size to adjust the density and appearance of the rain. **Responsive** Automatically adapts to container size for consistent visuals. ## Use Cases **Hero Backgrounds** — Create immersive landing pages with a tech/hacker aesthetic. **Loading Screens** — Add visual interest while content loads. **Tech & Security Sites** — Perfect for cybersecurity, blockchain, or developer portfolios. **Creative Projects** — Add that iconic digital aesthetic anywhere. ![Matrix Rain Preview](/framerhub/img/components/control/matrix-rain.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Style** - Font Size: Adjust character size (affects rain density) **Colors** - Rain Color: Color of falling characters (default: green) - Background: Background color (default: black) ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Motion Hover RGB - **Source:** https://framerhub.io/components/motion-hover-rgb ## Chromatic Aberration Hover Effect Motion Hover RGB creates a stunning chromatic aberration effect that shifts color channels as the image follows the cursor, producing a glitch-like visual effect that captivates your visitors. ## Features **RGB Shift Effect** Creates chromatic aberration by separating the red, green, and blue color channels. As the cursor moves, the channels separate creating a dynamic, premium visual effect. **Strength Control** Adjust the intensity of the RGB separation from subtle (0.1) to dramatic (1.0) to match your design aesthetic. **Full Customization** Comprehensive styling controls for titles, subtitles, colors, fonts, padding, borders, shadows, and more. ## Use Cases **Portfolio Showcases** — Display project thumbnails with eye-catching hover reveals that highlight your creative work. **Product Galleries** — Make e-commerce product images come alive with interactive hover effects. **Hero Sections** — Create memorable landing page headers with dynamic, cursor-following imagery. **Creative Agency Sites** — Add a modern, tech-forward aesthetic to your agency website. ![Motion Hover RGB Preview](/framerhub/img/components/control/motion-hover-rgb.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Motion Hover RGB in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization The component offers extensive customization through grouped property controls: **Title Styles** - Font (extended controls for size, weight, line height, letter spacing, alignment) - Color & Hover Color - Background, Padding, Border, Radius, Shadow **Subtitle Styles** - Same comprehensive options as title styles **Image Settings** - Image source via ResponsiveImage - Sizing mode: Cover, Contain, or Custom dimensions **Effect Settings** - Strength: Controls RGB separation intensity (0-1) ### Quick Tips **Best Performance** — The WebGL renderer uses canvas mode optimization for smooth performance in the Framer editor. **Image Quality** — Use high-resolution images for best results, as color separation is more visible with detailed images. **Strength Settings** — Start with 0.25 for subtle effect, increase to 0.5+ for more dramatic separation. **Custom Content** — Use the Custom Items slot to replace default text with your own Framer components. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Motion Hover RGB transforms ordinary hover interactions into memorable experiences with its chromatic aberration effect. The Three.js-powered rendering ensures buttery-smooth animations while GSAP provides precise timing control. --- --- - **Page:** Motion Hover Trails - **Source:** https://framerhub.io/components/motion-hover-trails ## Image Trails Hover Effect Motion Hover Trails generates multiple trailing copies of your image that follow the cursor with staggered timing, creating a mesmerizing trail effect that captivates your visitors. ## Features **Trail Effect** Creates multiple copies of your image that follow the cursor with staggered timing, producing a fluid motion trail that responds to cursor movement. **Amount Control** Adjust the number of trailing images from 1 to 20, creating anything from a subtle double image to a dramatic cascading trail. **Duration Control** Fine-tune the animation timing to control how quickly or slowly the trail follows the cursor. **Full Customization** Comprehensive styling controls for titles, subtitles, colors, fonts, padding, borders, shadows, and more. ## Use Cases **Portfolio Showcases** — Display project thumbnails with mesmerizing hover reveals that highlight your creative work. **Product Galleries** — Make e-commerce product images come alive with flowing trail interactions. **Hero Sections** — Create memorable landing page headers with dynamic, cursor-following imagery. **Art & Creative Sites** — Add a dreamy, artistic visual effect perfect for creative portfolios. ![Motion Hover Trails Preview](/framerhub/img/components/control/motion-hover-trails.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Motion Hover Trails in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization The component offers extensive customization through grouped property controls: **Title Styles** - Font (extended controls for size, weight, line height, letter spacing, alignment) - Color & Hover Color - Background, Padding, Border, Radius, Shadow **Subtitle Styles** - Same comprehensive options as title styles **Image Settings** - Image source via ResponsiveImage - Sizing mode: Cover, Contain, or Custom dimensions **Effect Settings** - Amount: Number of trailing images (1-20) - Duration: Trail animation timing (0-2s) ### Quick Tips **Best Performance** — The WebGL renderer uses canvas mode optimization. Reduce Amount on mobile for optimal performance. **Trail Length** — Lower Amount (3-5) for subtle effect, higher (10-20) for dramatic cascading trail. **Duration Settings** — Lower duration (0.3) for snappy trails, higher (1.0+) for dreamy, flowing effect. **Custom Content** — Use the Custom Items slot to replace default text with your own Framer components. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Motion Hover Trails transforms ordinary hover interactions into mesmerizing experiences with its flowing trail effect. The Three.js-powered rendering ensures buttery-smooth animations while GSAP provides precise timing control. --- --- - **Page:** Motion Trail - **Source:** https://framerhub.io/components/motion-trail ## Motion Trail Create mesmerizing cursor trail effects that follow mouse movement. Choose from 8 unique animation styles including classic trails, spinning images, velocity-based effects, and 3D perspective motion. ## Features **8 Animation Styles** Classic, Innerscape, Exiting, Flow Follow, Spin Trail, Velocity, Persistence, and Perspective modes. **Custom Images** Add your own images to create personalized trail effects. **Velocity-Aware Effects** Speed-responsive animations that react to cursor movement intensity. **3D Perspective** Create depth with perspective-based rotations and scaling. ## Use Cases **Creative Portfolios** — Stand out with interactive image trails. **Art Galleries** — Showcase work with engaging cursor effects. **Landing Pages** — Create memorable first impressions. **Interactive Experiences** — Build immersive web experiences. ![Motion Trail Preview](/framerhub/img/components/control/motion-trail.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Motion Trail in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Animation Styles** - Classic: Images appear and scale/fade out - Innerscape: Inner image movement with brightness - Exiting: Special upward exit direction - Flow Follow: Following mouse with filters - Spin Trail: Rotation in trail motion - Velocity: Speed-aware size and effects - Persistence: Blend mode with images remaining - Perspective: 3D space motion **Image Settings** - Trail Length: Number of images in the trail - Image Size: Width and height of trail images - Object Fit: How images fill their container - Border Radius: Corner rounding ### Quick Tips **Trail Length** — Use 8-12 images for smooth trails. More images may impact performance. **Threshold** — Lower values trigger more frequently. Start with 80 and adjust. **Smoothness** — Lower values (0.05-0.1) create smoother, more elegant motion. **Blend Modes** — Persistence style uses screen blend mode for artistic overlays. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Transform cursor movement into a visual experience. Motion Trail adds a layer of interactivity that captivates visitors and makes your site memorable. --- --- - **Page:** Neon Sign Ticker - **Source:** https://framerhub.io/components/neon-sign-ticker ## Neon Sign Ticker Bring the energy of city nightlife to your site. Neon Sign Ticker creates a realistic, scrolling marquee with authentic glow effects and random flickering, perfect for sales, announcements, or cyberpunk themes. ## Features **Realistic Glow** Multi-layered text shadows create a soft, convincing neon tube look that works on any dark background. **Flicker Effect** Optional random flickering simulates aging neon signs, adding character and realism to your design. **Seamless Loop** Text scrolls infinitely without jumps, with customizable speed and spacing. **Custom Separators** Add star icons or your own custom SVG between text items for extra visual flair. **Scanline Overlay** Subtle scanline effect adds a retro CRT screen aesthetic. ## Use Cases **Black Friday & Sales** — Create urgency with eye-catching scrolling announcements. **Cyberpunk & Retro Themes** — Perfect for gaming sites, entertainment venues, and creative portfolios. **Nightlife & Events** — Capture the energy of neon-lit cityscapes. **Limited Time Offers** — Draw attention to time-sensitive promotions. ![Neon Sign Ticker Preview](/framerhub/img/components/control/neon-sign-ticker.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Neon Sign Ticker in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Text** Enter comma-separated text items (e.g., "BLACK FRIDAY, SALE, 50% OFF"). **Font** Extended font controls for family, size, weight, alignment, and more. **Neon Color** Pick any color for the neon glow effect. **Speed** Control scroll duration (5-60 seconds per loop). **Flicker** Adjust flicker intensity (0 = no flicker, 0.5 = frequent flicker). **Separator** Toggle star separators between items, or use custom SVG. ### Quick Tips **Best Colors** — Bright, saturated colors (magenta, cyan, green) work best for authentic neon look. **Dark Backgrounds** — Neon effect shines brightest on dark backgrounds (default is #0A0A0A). **Flicker Intensity** — Use 0.05-0.15 for subtle realism, higher for dramatic "broken sign" effect. **Custom SVG** — Paste any SVG code as a custom separator for unique styling. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Neon Sign Ticker instantly adds energy and atmosphere to any project. The realistic glow and flicker effects create an authentic retro-futuristic vibe that's perfect for sales promotions, entertainment sites, and creative portfolios. The seamless infinite scroll ensures smooth, professional results. --- --- - **Page:** Motion Hover Stretch - **Source:** https://framerhub.io/components/motion-hover-stretch ## Elastic Stretch Hover Effect Motion Hover Stretch applies a dynamic stretching distortion to images based on cursor movement, creating a fluid, organic feel that responds to user interaction. ## Features **Stretch Distortion Effect** Creates an elastic deformation effect where the image stretches and warps based on cursor velocity, producing a fluid, organic visual response. **Strength Control** Adjust the intensity of the stretch distortion from subtle (0.1) to dramatic (1.0) to match your design aesthetic. **Full Customization** Comprehensive styling controls for titles, subtitles, colors, fonts, padding, borders, shadows, and more. ## Use Cases **Portfolio Showcases** — Display project thumbnails with fluid hover reveals that highlight your creative work. **Product Galleries** — Make e-commerce product images come alive with organic, flowing interactions. **Hero Sections** — Create memorable landing page headers with dynamic, cursor-following imagery. **Fashion & Lifestyle Sites** — Add an elegant, flowing visual effect that matches premium aesthetics. ![Motion Hover Stretch Preview](/framerhub/img/components/control/motion-hover-stretch.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Motion Hover Stretch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization The component offers extensive customization through grouped property controls: **Title Styles** - Font (extended controls for size, weight, line height, letter spacing, alignment) - Color & Hover Color - Background, Padding, Border, Radius, Shadow **Subtitle Styles** - Same comprehensive options as title styles **Image Settings** - Image source via ResponsiveImage - Sizing mode: Cover, Contain, or Custom dimensions **Effect Settings** - Strength: Controls stretch distortion intensity (0-1) ### Quick Tips **Best Performance** — The WebGL renderer uses canvas mode optimization for smooth performance in the Framer editor. **Image Selection** — Works best with images that have clean edges and clear subjects. **Strength Settings** — Start with 0.25 for elegant effect, increase to 0.5+ for more dramatic distortion. **Custom Content** — Use the Custom Items slot to replace default text with your own Framer components. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Motion Hover Stretch transforms ordinary hover interactions into fluid, organic experiences. The Three.js-powered rendering ensures buttery-smooth animations while GSAP provides precise timing control. --- --- - **Page:** Nebula Hero - **Source:** https://framerhub.io/components/nebula-hero ## Stunning 3D Particle Backgrounds for Framer Add cinematic galaxy, nebula, and cosmic effects to your hero sections. Five ready-to-use presets with full customization—no code required. Designed for agencies and freelancers who need premium hero sections fast. ## Features **Five Visual Presets** Galaxy, Nebula, Star Field, Swarm, or Vortex—each with unique particle patterns and motion. **Interactive Controls** Mouse-controlled orbit rotation and zoom with smooth damping for a polished feel. **Full Customization** Adjust particle density, animation speed, zoom level, colors, and particle size—all from Framer's properties panel. **Auto Color Transitions** Enable automatic color shifts that cycle smoothly at your preferred speed, or set custom colors manually. **Performance Optimized** Smooth 60fps animation that adapts to any viewport size. Works perfectly on desktop and mobile. ## Use Cases **Hero Sections** — Make unforgettable first impressions with animated cosmic backgrounds **Product Launches** — Showcase tech products with futuristic effects that communicate innovation **Agency Portfolios** — Stand out with interactive 3D backgrounds that demonstrate design excellence **SaaS Landing Pages** — Build credibility with sophisticated animations that convey professionalism **Event Pages** — Create excitement for conferences and launches with dynamic cosmic visuals ![Nebula Hero Preview](/framerhub/img/components/control/nebula-hero.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Nebula Hero in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Everything you need is in Framer's properties panel: **Visual Style** - Choose from 5 presets: Galaxy, Nebula, Star Field, Swarm, Vortex - Adjust particle density and size - Set animation speed and initial zoom **Colors** - Customize background, inner, and outer gradient colors - Or enable auto color transitions with speed control **Interaction** - Toggle mouse rotation (orbit controls) - Enable/disable scroll zoom - Set auto-play on or off ### Quick Tips **Best Performance** — Reduce particle counts on mobile (20,000 inner, 40,000 ring) for smooth animation **Color Harmony** — Use complementary colors for depth. Dark backgrounds make particles pop **Layering** — Place text above the component. White text with subtle shadows works best ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Love This Five ready-to-use presets mean you start with something beautiful, then make it yours with full color and animation control. No code, no complexity—just copy, paste, and customize through Framer's familiar properties panel. Perfect for agencies delivering premium work fast and freelancers who want to stand out with interactive 3D effects. --- --- - **Page:** Neon Trails - **Source:** https://framerhub.io/components/neon-trails ## Create Mesmerizing Neon Experiences A stunning 3D animation component featuring colorful spiral helix patterns with forward-moving neon lines and interactive camera controls. ## Features **Spiral Helix Pattern** Mesmerizing spiral lines that create a dynamic helix pattern as they move forward through 3D space. **Neon Aesthetics** Vibrant neon-style lines with customizable colors create eye-catching visual effects. **Mouse Interaction** Enable camera orbit control with mouse movement for an interactive, immersive experience. **Customizable Colors** Choose up to 5 vibrant colors for your neon trails. Lines will randomly use these colors. ## Use Cases **Tech Websites** — Perfect for modern tech companies, SaaS products, and digital agencies **Hero Sections** — Create attention-grabbing hero sections with futuristic aesthetics **Product Launches** — Add visual excitement to product launch pages and announcements **Portfolio Sites** — Showcase creativity with dynamic, artistic backgrounds ![Neon Trails Preview](/framerhub/img/components/control/neon-trails.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Neon Trails in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) Use the property controls to customize your neon trails effect. **Trail Colors** - Color 1-5 — Customize up to 5 colors for the neon trails **Background** - Background Color — Set a background color for the entire canvas **Animation** - Speed — Control how fast the trails move forward (0.1-5) - Line Width — Thickness of the neon trails (0.01-0.2) - Line Count — Number of spiral lines (10-100) - Frequency — How often new trails are generated (0.1-10) - Max Lines — Maximum number of simultaneous lines (10-200) **Interaction** - Mouse Control — Toggle camera orbit based on mouse movement - Mouse Sensitivity — How much the camera reacts to mouse movement (0.1-2) - Mouse Smoothing — Camera movement smoothness (0.01-0.2) ### Quick Tips **Best Aesthetics** — Use dark backgrounds (black or deep navy) with bright neon colors for maximum visual impact. **Speed & Energy** — Slower speeds (0.5-1.5) feel cinematic and elegant. Faster speeds (2-4) create energetic, dynamic scenes. **Line Count** — Fewer lines (10-30) feel minimal and sophisticated. More lines (50-100) create dense, cyberpunk atmospheres. **Mouse Interaction** — Enable mouse control for interactive experiences. Adjust sensitivity and smoothing for precise feel: low smoothing = responsive, high smoothing = cinematic. ## Credits Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/). ## Why Designers Love This Transform your website with futuristic neon aesthetics. Built with Three.js for smooth 60fps performance, this component creates mesmerizing spiral patterns that captivate visitors. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Neural Core - **Source:** https://framerhub.io/components/neural-core ## Neural Core Create stunning 3D ASCII particle spheres for your Framer projects. Perfect for hero sections, loading screens, or any area that needs a futuristic, tech-focused visual impact. ## Features **3D Particle Sphere** A beautiful animated sphere made of thousands of ASCII characters with realistic depth and movement. **Three Character Sets** Choose from Binary (0s and 1s), Hex (0-9, A-F), or Glyphs (symbols and special characters) to match your aesthetic. **Bloom Glow Effect** Add an ethereal glow to your particles with adjustable bloom intensity for that perfect sci-fi look. **Transparent Background** Seamlessly blend the component into your design with transparent background support (disables bloom). **Interactive Mouse Tilt** The sphere responds to mouse movement, creating an engaging interactive experience for visitors. ## Use Cases **Hero Backgrounds** — Create an immersive, futuristic first impression. **Loading States** — Keep users engaged with mesmerizing particle animation. **Tech Portfolios** — Showcase a modern, code-focused aesthetic. **AI/ML Products** — Perfect visual metaphor for neural networks and data processing. ![Neural Core Preview](/framerhub/img/components/control/neural-core.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Neural Core in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the appearance and behavior using Framer's property controls. **Colors** - Core Color: Primary inner particle color - Outer Color: Secondary gradient color - Background: Scene background color (hidden when Transparent BG is on) **Particles** - Count: Number of particles (affects performance) - Size: ASCII character size - Radius: Sphere radius - Scale: Uniform scaling of the entire sphere **Animation** - Distortion: Noise displacement strength - Noise Speed: Animation speed - Rotation Speed: Sphere spin rate **Effects** - Bloom: Glow intensity - Tilt Strength: Mouse interaction sensitivity - Character Set: Binary, Hex, or Glyphs - Transparent BG: Toggle transparency (disables bloom) ### Quick Tips **Best Performance** — Use Auto quality mode which detects your device capabilities. On mobile, stick to 5,000-10,000 particles. **Color Combinations** — Bright neon colors on dark backgrounds create stunning bloom effects. Try cyan/magenta or green/purple gradients. **Layering** — Place content above or behind the component using transparent background. Use contrasting text colors for readability. **Character Style** — Binary feels classic tech, Hex feels hacker/crypto, Glyphs feels sci-fi/alien. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This A professional-grade 3D effect that would typically require custom Three.js development, now available as a simple drag-and-drop component with full customization options. --- --- - **Page:** Neural Grid - **Source:** https://framerhub.io/components/neural-grid ## Neural Grid Visualize intelligence with Neural Grid. This shader-based background simulates a grid of connected nodes that react to mouse movement, perfect for AI startups, data platforms, or tech documentation. ## Features **Interactive Nodes** Nodes gently float and pulse, reacting to your mouse cursor's position to create a sense of responsiveness and intelligence. **Tech Aesthetic** The combination of a structured grid and organic node movement strikes the perfect balance for modern tech branding. **Shader Performance** Running entirely on the GPU via WebGL, this effect is buttery smooth even on large screens. Includes canvas mode optimization for the Framer editor. **Full Customization** Control node colors, grid opacity, animation speed, and spread distance to match your brand. ## Use Cases **AI & Machine Learning** — Perfect background for AI startups, data science platforms, and ML documentation. **Tech Dashboards** — Add depth to analytics dashboards and data visualization interfaces. **Cybersecurity** — Create a sense of digital networks and connected systems. **SaaS Landing Pages** — Modern tech aesthetic for software product pages. ![Neural Grid Preview](/framerhub/img/components/control/neural-grid.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Neural Grid in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Animation** Toggle the animation on or off (default: Yes). **Speed** Control animation speed of the floating nodes (0-3, default: 0.5). **Time Multiplier** Adjust the time scale for the simulation (0-5, default: 2.02). **Nodes** Number of nodes in the simulation (1-64, default: 18). **Size** Size of the nodes (0.01-1, default: 0.03). **Spread** How far nodes drift from their center position (0.1-4, default: 1.75). **Mouse Influence** Strength of the mouse attraction effect (0-2, default: 0.73). **Grid Opacity** Visibility of the background grid lines (0-1, default: 0.5). **Grid Scale** Scale of the background grid (0.5-20, default: 5). **Colors** Customize the Background, Node Color, and Grid Color. **Blend Mode** Choose between Normal and Additive blending. **Pixel Ratio** Adjust rendering resolution (1-3, default: 2). ### Quick Tips **Best Colors** — Bright blues and cyans work well for tech aesthetics. Use contrasting grid colors. **Dark Backgrounds** — The glow effect shows best on dark backgrounds. **Spread Settings** — Lower spread (0.5-1.0) for tight clusters, higher (2.0+) for scattered nodes. **Performance** — GPU-accelerated shader ensures smooth 60fps animation. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Neural Grid instantly communicates "cutting-edge technology" with its flowing nodes and structured grid. The WebGL shader ensures smooth performance while the mouse interaction adds a layer of engagement that static backgrounds can't match. Perfect for any project that needs a modern, intelligent aesthetic. --- --- - **Page:** Physics Tags - **Source:** https://framerhub.io/components/physics-tags ## Physics Tags Create playful, interactive tag animations with realistic physics. Tags fall from above and bounce around the container, responding to mouse hover with repulsion. ## Features **Matter.js Physics** Powered by Matter.js for realistic gravity, bouncing, and friction. **Custom Tags** Define your own tags with custom text, tag color, and text color using a list control. **Interactive** Tags react to mouse hover, creating engaging repulsion effects. **Fine-Tuned Physics** Adjust gravity, bounciness, friction, air resistance, and wall bounce properties to get the exact feel you want. **Transparent Background** Seamlessly overlays on any background in your Framer project. ## Use Cases **Skill Showcases** — Display skills or technologies in a fun, interactive way. **Sale Promotions** — Create eye-catching discount and sale tag displays. **Tag Clouds** — Bring tag clouds to life with physics. **Interactive Elements** — Add playful interactivity to any page. ![Physics Tags Preview](/framerhub/img/components/control/physics-tags.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Tags** - Tags: Add/edit tags with text and colors - Count: Number of tags to spawn (duplicates from your list) - Min Width/Height: Tag dimensions **Physics** - Interactive: Toggle mouse repulsion - Gravity: How fast tags fall (0.1 - 5) - Bounciness: How much tags bounce (0 - 1.2) - Friction: Surface friction - Air Resist: Air drag - Wall Bounce: How walls respond ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Pipeline - **Source:** https://framerhub.io/components/pipeline ## Pipeline Evoke the feeling of data flow and retro technology with Pipeline. This component features self-drawing lines that navigate a grid, turning at right angles and leaving glowing trails, perfect for tech, data, or crypto-themed projects. ## Features **Grid Movement** Lines stick to a strict grid, turning only at 90-degree angles, simulating circuit boards or data pipes. **Self-Cleaning** Old pipes fade away as new ones are drawn, creating an endless, evolving display of digital activity. **Tech Aesthetic** The glowing lines and geometric movement immediately communicate themes of connectivity, infrastructure, and technology. ## Use Cases **Tech Websites** — Perfect for data, crypto, or infrastructure companies. **Landing Pages** — Create a futuristic, connected feel. **Dashboard Backgrounds** — Add visual interest to admin interfaces. **Loading States** — Keep users engaged with dynamic activity. ![Pipeline Preview](/framerhub/img/components/control/pipeline.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Pipeline in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the appearance and behavior using Framer's property controls. **Intensity** - Controls the number of active pipes **Base Color** - Primary color of the pipeline circles **Color Variation** - Hue spread from base color ### Quick Tips **Best Performance** — Keep intensity at 1 or below for smooth animation. **Color Combinations** — Cyan/blue hues feel techy and digital. Orange/red hues feel like warning systems. **Layering** — Place content above the component with contrasting text colors. **Dark Theme** — Works best on dark backgrounds for maximum glow effect. ## License **Free Component** — Use freely in personal and commercial projects. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Credits [Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743). --- --- - **Page:** Scroll Text Reveal | FramerHub - **Source:** https://framerhub.io/components/scroll-text-reveal - **Description:** Transform headlines into captivating scroll animations with 29 ready-to-use text reveal effects. Premium Framer component for client sites, portfolios,. # **Scroll Text Reveal ** Transform headlines into captivating scroll animations with 29 ready-to-use text reveal effects. One-time payment Lifetime updates Commercial license ## **Overview** Transform headlines into captivating scroll animations with 29 ready-to-use text reveal effects. - 29 professionally crafted scroll text animations - Smooth scroll-scrubbing with character-level control - Full typography customization (font, size, weight, spacing) - Variable font support for precise weight control - Works with any text length or language - Responsive and performance-optimized - Works in any section or layout - No coding required ## Animated Text Reveals for Framer Demo 1: [Set 1](https://global-engineers-437657.framer.app/set1) Demo 2: [Set 2](https://global-engineers-437657.framer.app/set2) Turn ordinary headlines into scroll-triggered experiences. 29 animation effects that bring text to life as visitors scroll—no code needed. Designed for designers who want to add premium typography animations to landing pages, hero sections, and feature areas. ## Features**29 Animation Effects** Scale, bounce, rotate, blur, 3D flips, glitch, wave, elastic—every effect designed for maximum impact. From subtle to dramatic, choose the perfect animation for your message.**Smooth Scroll Control** Animations sync perfectly with scroll position. Visitors can scrub through animations by scrolling up and down for a polished, interactive feel.**Full Typography Control** Customize font family, size, weight, letter spacing, line height, and alignment. Works with Google Fonts, custom fonts, and variable fonts.**Character-Level Animation** Each letter animates individually for sophisticated, staggered effects that feel premium and intentional.**Responsive Design** Automatically adapts to any screen size while maintaining smooth animation performance on desktop and mobile. ## Use Cases**Hero Headlines** — Make your main message unforgettable with dramatic scroll reveals that command attention**Feature Sections** — Introduce key features with animated text that reveals as visitors explore your page**Landing Pages** — Increase engagement with interactive typography that rewards scrolling**Agency Portfolios** — Showcase design expertise with sophisticated text animations that demonstrate attention to detail**Product Launches** — Build anticipation with dynamic reveals that make every word feel important![Scroll Text Reveal Preview](https://framerhub.io/framerhub/img/components/control/scroll-text-reveal.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Scroll Text Reveal in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Control everything from Framer's properties panel:**Text & Animation**- Enter your headline or message - Choose from 29 animation effects - Each effect has a descriptive name (e.g., "Bounce Up", "3D Flip", "Glitch Reveal")**Typography**- Font family, size, weight - Letter spacing, line height, text alignment - Variable font weight control for fonts that support it**Colors**- Set text color to match your design system ### Quick Tips**Best Results** — Use short, impactful headlines (2-8 words) for maximum effect**Effect Selection** — Preview each effect by scrolling. More dramatic effects work best for hero sections, subtle effects for body content**Color Contrast** — High contrast between text and background ensures animations are visible throughout the scroll**Placement** — Add vertical spacing above and below the component to give animations room to trigger properly ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This 29 effects means endless creative possibilities. Transform ordinary text into scroll-stopping visual experiences that keep visitors engaged. --- ### **Scroll Text Reveal - $12** Transform headlines into captivating scroll animations with 29 ready-to-use text reveal effects.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Quantum Nebula - **Source:** https://framerhub.io/components/quantum-nebula ## Quantum Nebula A mesmerizing 3D particle system that can take the shape of a swirling torus or transform any image into a volumetric hologram. Powered by Three.js for high-performance visuals that look stunning. ## Features **Two Visualization Modes** Switch between a swirling sci-fi torus and a custom image-based 3D hologram. **Interactive Performance** GPU-accelerated WebGL with auto-quality detection for zero lag on all devices. **Highly Customizable** Control particle count, size, twist, flow speed, and post-processing glow. ## Use Cases **Hero Sections** — Create a high-tech, futuristic first impression. **Data Visualization** — Style abstract data networks and AI concepts. **Creative Portfolios** — Stand out with experimental WebGL artistry. ![Quantum Nebula Preview](/framerhub/img/components/control/quantum-nebula.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Quantum Nebula in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **View Mode** Switch between procedural Torus and Image Hologram. **Appearance** Set background and particle colors, and adjust glow strength. **Geometry** Tune particle count and torus thickness for different densities. ### Quick Tips **Auto-Quality** — Detects device power automatically for best performance. **Dark Mode** — Best viewed on #000 or deep navy backgrounds. **Hologram Mode** — High contrast images work best for depth extrusion. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Quantum Nebula brings elite WebGL visual fidelity to the Framer canvas without complexity. It's the perfect statement piece for high-tech SaaS, AI startups, and creative pioneers who want to push web boundaries. --- --- - **Page:** Kinetic ASCII | FramerHub - **Source:** https://framerhub.io/components/kinetic-ascii - **Description:** Transform shapes and images into mesmerizing dot-matrix ASCII art with real-time 3D animation. Premium Framer component for client sites, portfolios, and. # **Kinetic ASCII ** Transform shapes and images into mesmerizing dot-matrix ASCII art with real-time 3D animation. One-time payment Lifetime updates Commercial license ## **Overview** Transform shapes and images into mesmerizing dot-matrix ASCII art with real-time 3D animation. - Animated 3D Torus Knot shape - Custom image to ASCII conversion - Transparent background support - True Color mode for original colors - Retro CRT scanline overlay - Real-time dot-matrix rendering ## Kinetic ASCII — Dynamic Dot-Matrix Visual Effects Transform any 3D shape or image into stunning dot-matrix ASCII art with real-time animation. Built with Three.js for smooth, GPU-accelerated rendering, this component creates a unique retro-futuristic aesthetic that's perfect for creative portfolios, landing pages, and experimental web projects. ## Features**3D Torus Knot Animation** A beautifully animated 3D Torus Knot shape that rotates continuously, rendered entirely as ASCII dots. The shape is lit with multiple directional lights for depth and dimension.**Image to ASCII Conversion** Upload any image and watch it transform into a dot-matrix representation. Perfect for hero backgrounds or artistic image treatments.**Transparent Background** Full transparency support allows the ASCII effect to layer seamlessly over any content, enabling creative compositions and overlays.**True Color Mode** Enable True Color to preserve the original colors from your source image or 3D shape, creating a colorful ASCII interpretation rather than monochrome.**CRT Scanline Effect** Add authentic retro vibes with an optional scanline overlay that mimics vintage CRT monitors. ## Use Cases**Creative Portfolios** — Stand out with a unique visual effect that showcases technical creativity and artistic vision.**Hero Sections** — Create eye-catching landing page headers with animated ASCII art that draws attention.**Tech & Gaming Sites** — Perfect for projects with a retro, cyberpunk, or hacker aesthetic.**Art Installations** — Use as a digital art piece or interactive installation element.**Music & Entertainment** — Add dynamic visual interest to artist pages, album promotions, or event sites.![Kinetic ASCII Preview](https://framerhub.io/framerhub/img/components/control/kinetic-ascii.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Kinetic ASCII in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Configure the component through the Properties panel:**Source Selection**- **3D Shape**: Animated Torus Knot (default) - **Image**: Upload your own image**Visual Controls**- **Density**: Adjust dot size (4 = large dots, 32 = fine detail) - **Scale**: Resize the content (0.1 - 3.0, default 1.0) - **Color**: Set the ASCII dot color (hidden when True Color is on) - **Background**: Set background color or keep transparent - **Invert**: Flip the brightness mapping**Animation Controls**- **Speed**: Control rotation speed (0 = static, 2 = fast)**Effects**- **True Color**: Use source colors instead of single color - **Scanlines**: Toggle retro CRT effect (Default: No) ### Quick Tips**Best Performance** — Higher density values (smaller dots) render faster. Start with 10-12 for a good balance of detail and performance.**Scale it Up** — Use the Scale property to perfectly fit the 3D shape or image within your frame without resizing the component itself.**Transparent Layering** — Set Background to transparent and layer the component over images or gradients for creative compositions.**True Color Magic** — Enable True Color when using colorful source images to create vibrant ASCII interpretations.**Scanline Subtlety** — The scanline effect is intentionally subtle. It works best on larger component sizes.**Mobile Considerations** — Reduce density to 16-24 on mobile for smoother performance. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Kinetic ASCII bridges the gap between retro aesthetics and modern web technology. With just a few clicks, you can add a unique, animated visual element that's impossible to replicate with static images or CSS. The transparent background support and True Color mode give you complete creative freedom to integrate this effect into any design. Whether you're building a portfolio, landing page, or artistic project, Kinetic ASCII delivers that "wow" factor that makes visitors stop and look twice. --- ### **Kinetic ASCII - $9** Transform shapes and images into mesmerizing dot-matrix ASCII art with real-time 3D animation.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Random Letter Glitch - **Source:** https://framerhub.io/components/random-letter-glitch ## Random Letter Glitch Create mesmerizing Matrix-style animated backgrounds with randomly changing letters and smooth color transitions. Perfect for tech-themed hero sections and creative backgrounds. ## Features **Multi-Color Support** Add multiple glitch colors that randomly cycle through the letter grid. **Smooth Transitions** Enable smooth color interpolation for elegant, flowing animations. **Vignette Effects** Add center or outer vignette overlays for depth and focus. **Custom Characters** Use any character set - letters, numbers, symbols, or custom glyphs. ## Use Cases **Tech Landing Pages** — Create futuristic, cyber-themed backgrounds. **Hero Sections** — Add visual interest behind headlines and CTAs. **Loading Screens** — Engaging animated backgrounds during transitions. **Creative Portfolios** — Stand out with unique visual effects. ![Random Letter Glitch Preview](/framerhub/img/components/control/random-letter-glitch.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Random Letter Glitch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Glitch Colors** Add multiple colors that randomly appear on letters. **Animation Settings** - Glitch Speed: Control animation frequency - Smooth Transitions: Enable/disable color interpolation - Font Size: Character size in pixels **Vignette Options** - Center Vignette: Dark overlay from center - Outer Vignette: Dark overlay from edges ### Quick Tips **Color Contrast** — Use contrasting colors on dark backgrounds for best visibility. **Speed Settings** — Lower speeds (20-40) feel elegant. Higher speeds (70-100) are more intense. **Character Sets** — Try using only numbers or symbols for different visual styles. **Layering** — Position text content above the component with higher z-index. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Instantly create a Matrix-inspired background that captivates visitors. The customizable colors and smooth animations make it versatile for any tech or creative project. --- --- - **Page:** Quantum Tunnel | FramerHub - **Source:** https://framerhub.io/components/the-quantum-tunnel - **Description:** Infinite 3D particle tunnel with mouse steering and warp speed. Premium Framer component for client sites, portfolios, and product pages. # **Quantum Tunnel ** Infinite 3D particle tunnel with mouse steering and warp speed. One-time payment Lifetime updates Commercial license ## **Overview** Infinite 3D particle tunnel with mouse steering and warp speed. - Infinite scroll animation - Mouse-controlled steering curve - Dynamic twist and warping - Customizable depth and colors - Transparent background support - Auto quality detection ## The Quantum Tunnel Take your users on a journey through hyperspace. This infinite 3D tunnel pulls viewers into your content with a mesmerizing warp effect that reacts to their mouse movements. ## Features**Interactive Steering** Move the mouse to curve the tunnel, giving users the feeling of piloting through a digital wormhole.**Warp Speed** Adjust the speed, twist, and length of the tunnel to create everything from a gentle drift to a high-speed jump to lightspeed.**Transparent Background** Seamlessly blend the component into your design with transparent background support (disables bloom).**Matrix Mode** Choose between Binary, Hex, or Glyph character sets for the particles to match your site's tech aesthetic. ## Use Cases**Hero Sections** — Use as a full-screen background to create an immersive first impression for tech, space, or futuristic brands.**Loading Screens** — Simulate a "warp travel" effect while content loads, keeping users engaged during wait times.**Data Visualization** — Represents data streams or information highways efficiently with the Matrix/Hex character modes.![Quantum Tunnel Preview](https://framerhub.io/framerhub/img/components/control/quantum-tunnel.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Quantum Tunnel in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization You can fully customize the tunnel's geometry, particles, and animation to match your brand:**Geometry**- **Radius**: Control how wide the tunnel appears. - **Length**: Adjust how far the tunnel extends into the distance. - **Twist**: Add a spiral twist for a surreal effect.**Particles**- **Count**: Increase for density, decrease for performance. - **Size**: Scale the ASCII characters. - **Char Set**: Switch between Hex, Binary, or Glyphs.**Appearance**- **Colors**: Set distinct Near and Far colors for depth. - **Bloom**: Adjust the glow intensity (works best on dark backgrounds). ### Quick Tips**Best Performance** — Keep particle count around 10,000–15,000 for desktop. For mobile, the component automatically adjusts, but you can manually lower it if needed.**Color Combinations** — High contrast colors (e.g., Neon Blue on Black) work best with the Bloom effect.**Steering Sensitivity** — Set steering power to 0 if you want a straight, non-interactive tunnel. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This The Quantum Tunnel offers a "wow" factor with zero coding required. It transforms static pages into dynamic journeys, perfect for standing out in the crowded digital space. ### **Quantum Tunnel - $12** Infinite 3D particle tunnel with mouse steering and warp speed.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Reaction Diffusion - **Source:** https://framerhub.io/components/reaction-diffusion ## Reaction Diffusion Create hypnotic, organic patterns that evolve over time. This component simulates a reaction-diffusion chemical process using efficient WebGL shaders, resulting in beautiful, biological-looking textures that never repeat. ## Features **Procedural Patterns** Generates infinite variations of organic patterns resembling fingerprints, zebra stripes, or coral growth. **Fully Customizable** Adjust the zoom, scale, complexity, and edge softness to create everything from large smooth blobs to intricate, high-density textures. **Performance Optimized** Runs seamlessly on the GPU to ensure high frame rates without impacting your site's performance. ## Use Cases **Dynamic Backgrounds** — Create subtle, moving backgrounds for hero sections or full-page immersive experiences. **Brand Textures** — Generate unique, on-brand patterns by mixing your brand colors in organic ways. ![Reaction Diffusion Preview](/framerhub/img/components/control/reaction-diffusion.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find **Reaction Diffusion** in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the look and feel through the property controls right in Framer. **Appearance** - **Colors**: Set the Primary color to match your theme. - **Edge Softness**: Control how sharp or soft the transition between colors is. **Pattern Structure** - **Zoom Level**: Zoom in or out of the fractal-like pattern. - **Pattern Scale**: Scale the entire texture up or down. - **Pattern Density**: Increase complexity for more detailed, intricate lines. ### Quick Tips **Best Performance** — Since this is a shader-based effect, it runs on the GPU. For mobile devices, you might want to use slightly simpler settings or lower density if you notice any slowdowns, though it is generally very performant. **Color Combinations** — High contrast colors (like Neon Green) against your page background create a digital, sci-fi look. Since the background is transparent, layer it over dark or light sections for different effects. **Layering** — Place text or other content on top of this component. Using a glassmorphism (background blur) effect on your content containers over this background looks stunning. **Speed Settings** — Lower speeds (0.1 - 0.3) are great for ambient backgrounds. Higher speeds (1.0+) create a more energetic, psychedelic vibe. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This ## "Reaction Diffusion adds that missing 'organic' feel to digital designs. It's perfect for breaking up rigid grid layouts with something soft and alive." --- - **Page:** Retro CRT - **Source:** https://framerhub.io/components/retro-crt ## Retro CRT Transport your users back to the 80s and 90s with this authentic CRT monitor effect. Retro CRT simulates the curved glass, glowing phosphors, and scanlines of old-school displays, perfect for retro-themed sites, gaming portfolios, or nostalgic UI elements. ## Features **Realistic Curvature** Simulates the physical distortion of old CRT screens, complete with edge warping and vignette. **Details that Matter** Fine-tune the scanline intensity, phosphor grid density, and glow colors to match specific eras of technology (e.g., green monochrome vs. color TV). **Performance First** Built with efficient WebGL shaders to ensure smooth playback without draining battery life. ## Use Cases **Gaming Portfolios** — Give your site that classic arcade or console vibe. **Retro Landing Pages** — Perfect for "vaporwave" or 80s/90s aesthetic brands. **Interactive UIs** — Use as a container background to make modern UI elements feel like they are displayed on an old terminal. ![Retro CRT Preview](/framerhub/img/components/control/retro-crt.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find **Retro CRT** in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the look and feel through the property controls right in Framer. **Animation** - **Speed**: Controls how fast the grid and effects animate. **Visual** - **Phosphor Color**: The "on" color of the grid/pixels. - **Grid Density**: How tight the background grid pattern is. **Effects** - **Scanlines**: Controls the visibility of the horizontal scan lines. - **Curvature**: Warps the screen edges to simulate a curved glass tube. - **Vignette**: Darkens the corners to focus attention on the center. ### Quick Tips **Best Performance** — This effect runs on the GPU. While efficient, reducing the complexity or resolution on low-end mobile devices can save battery. **Authentic Look** — For a true vintage feel, combine "Scanlines" with high "Curvature". **Color Styling** — Use the "Phosphor Color" to mimic different monitor types (Green for monochrome, RGB for color TV). **Transparent Overlay** — This component has a transparent background. Place it *over* any image, video, or content to instantly apply a CRT monitor look to it. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This ## "It's instant nostalgia. The curvature and vignette are so perfectly tuned that you can almost feel the static electricity on the screen." --- - **Page:** Rain Overlay | FramerHub - **Source:** https://framerhub.io/components/rain-overlay - **Description:** Realistic rain effect for your Framer sites. Premium Framer component for client sites, portfolios, and product pages. # **Rain Overlay ** Realistic rain effect for your Framer sites. One-time payment Lifetime updates Commercial license ## **Overview** Realistic rain effect for your Framer sites. - Customizable Rain Simulation - 5 Unique Rain Styles - Realistic Splash & Ripple Effects - High Performance Canvas Rendering ## Rain Overlay Add atmospheric depth to your Framer projects with Rain Overlay. This component simulates thousands of raindrops efficiently using HTML5 Canvas, offering everything from gentle drizzles to heavy storms with realistic splashes and wind interactions. ## Features**Customizable Simulation** Full control over particle count, fall speed, wind direction, and drop length allows you to dial in the perfect weather conditions for your scene.**Realistic Interaction** Drops create dynamic splashes upon hitting the bottom of the frame. In "Realistic" mode, they even generate expanding ripples for an extra touch of detail.**5 Visual Styles** Switch instantly between distinct aesthetic modes: - **Lines**: Classic rain streaks - **Dots**: Stylized pixel-art or snow-like feel - **Mixed**: A balanced combination - **Heavy**: Thicker, more intense downpour - **Realistic**: Gradient-filled drops with tear-drop shapes ## Use Cases**Mood & Atmosphere** — Instantly change the feeling of a hero section or landing page from static to dynamic and moody.**Data Visualization** — Use as a backdrop for weather apps, environmental dashboards, or nature-themed projects.**Storytelling** — Create immersive digital narratives where the environment reflects the story's emotional tone.![Rain Overlay Preview](https://framerhub.io/framerhub/img/components/control/rain-overlay.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Rain Overlay in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Detailed control over the rain simulation.**Simulation**- **Count**: Number of raindrops (20-500) for density control. - **Speed & Wind**: Adjust vertical fall and horizontal drift. - **Length**: Set the vertical streak length for motion blur effects.**Appearance**- **Style**: Select from 5 preset styles to match your design. - **Color**: Set the primary rain color. - **Opacity Range**: Randomize drop opacity for depth perception. - **Size Range**: Randomize drop thickness for organic variation.**Splash**- **Show Splash**: Toggle bottom impact effects. - **Splash Size**: Scale the splash particles. ### Quick Tips**Performance** — Keep particle count under 150-200 on mobile to maintain smooth 60fps animations.**Depth** — Use a lower opacity range (0.3 - 0.6) and varied sizes to create a sense of depth without distracting from content.**Styling** — "Dots" style can double as snow or magical particles when slowed down and colored white! ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Rain Overlay brings cinema-quality weather effects to the web without the weight of video files. It's fully programmatic, meaning it looks crisp on any resolution and can be tweaked endlessly to fit the exact mood of your project—from a cyber-punk neon downpour to a gentle spring shower. ### **Rain Overlay - $9** Realistic rain effect for your Framer sites.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Ribbon Wave - **Source:** https://framerhub.io/components/ribbon-wave ## Create Playful Celebrations A vibrant 2D canvas-based confetti lines component with smooth animation, customizable colors, and physics-based gravity effects. ## Features **Smooth Ribbon Lines** Elegant confetti ribbons that flow smoothly across your canvas with customizable colors and patterns. **Physics-Based Motion** Optional gravity and turbulence effects create natural, organic movement that feels alive. **Customizable Colors** Choose up to 5 vibrant colors for your confetti ribbons. Lines will randomly use these colors. **Performance Optimized** Canvas-based 2D rendering ensures smooth performance across all devices. ## Use Cases **Celebration Pages** — Perfect for success pages, achievement unlocks, and special announcements **Hero Sections** — Add playful energy to landing pages and marketing sites **Event Websites** — Ideal for party invitations, festival sites, and celebration events **Interactive Backgrounds** — Create dynamic backgrounds that add movement without distraction ![Ribbon Wave Preview](/framerhub/img/components/control/ribbon-wave.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Ribbon Wave in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) Use the property controls to customize your confetti effect. **Confetti Colors** - Color 1-5 — Choose up to 5 vibrant colors for your confetti ribbons **Background** - Background Color — Set a background color for the confetti animation **Animation** - Spawn Rate — Control how frequently new confetti ribbons appear (0-10) - Speed — Animation speed multiplier (0.1-5) - Turbulence — Wind/turbulence intensity for more chaotic motion (0-5) - Line Width — Thickness of the confetti ribbons (1-10) **Physics** - Enable Gravity — Toggle gravity to make confetti fall naturally or float freely ### Quick Tips **Best Colors** — Use bright, contrasting colors for maximum visual impact. Try complementary color schemes for harmonious effects. **Gravity On/Off** — Enable gravity for celebration effects (falling confetti). Disable for floating, dreamlike ribbons. **Spawn Rate** — Lower spawn rates (1-3) feel elegant and subtle. Higher rates (5-10) create energetic, festive atmospheres. **Turbulence** — Add turbulence for wind-blown effects. Combine with gravity for realistic confetti physics. ## Credits Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/). ## Why Designers Love This Bring celebrations to life with vibrant, physics-based confetti ribbons. Canvas-optimized for smooth performance on all devices, this component adds joy and energy to any Framer project. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Scratch & Win Coupon - **Source:** https://framerhub.io/components/scratch-and-win-coupon ## Scratch & Win Coupon Boost engagement and conversion rates with a fun, interactive scratch card experience. Perfect for revealing discount codes, special offers, or secret messages. ## Features **Animated Shine Effect** A premium, animated silver foil effect that catches the eye. The shine seamlessly disappears as the user scratches. **Confetti Celebration** A delightful confetti ribbon animation triggers automatically when the prize is revealed, adding a layer of reward and excitement. **Smart Scratching** Smooth, interpolated scratching ensures that fast mouse movements create continuous lines instead of dots. **Custom Content Slot** Connect any Frame or Component to serve as the "Prize" layer. This gives you unlimited design freedom for the winning state. **Fully Customizable** Change everything from the scratch overlay color and text to the prize background, fonts, borders, and reveal behavior. **Auto-Reveal** Automatically reveals the entire card once the user has scratched off a specific percentage, ensuring the prize is always seen. **Performance Optimized** Built with HTML5 Canvas for 60fps performance on all devices, using efficient offscreen buffering. ## Use Cases **E-commerce Discounts** Hide a discount code behind a scratch card to make earning a coupon feel like a win. **Product Reveals** Tease a new product launch by letting users "scratch" to see a sneak peek. **Gamified Signups** Reward users for signing up to your newsletter with a chance to scratch and win a prize. ![Scratch & Win Coupon Preview](/framerhub/img/components/control/scratch-and-win-coupon.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find **Scratch & Win Coupon** in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization You can fully customize the appearance of both the "before" and "after" states. **Card Styles** - **Border**: Customize the color, width, and radius of the card border to match your brand. **Scratch Layer** - **Scratch Color**: The color of the foil to be scratched away. - **Scratch Image**: Upload a custom pattern or texture (e.g., silver foil texture) for more realism. - **Scratch Text**: Add a call to action like "SCRATCH ME". **Prize Layer** - **Prize Label & Code**: Configure the text that appears after scratching. - **Prize Background**: Set a festive background color or image for the winning state. **Confetti Settings** - **Enable Confetti**: Toggle the celebration effect on/off. - **Colors**: Customize the confetti ribbon colors. **Custom Prize Design** - **Custom Content**: Connect any Frame or Component to the `Custom prize` connector to use your own design. This will hide the default text controls. ### Quick Tips **Best Performance** — Keep the **Brush Size** around 20-30 for the most satisfying feel. Too small makes it tedious; too large makes it too easy. **Reveal Threshold** — Set the **Reveal %** to around 50-60%. This ensures users don't have to hunt for every last pixel of foil to see their prize. **Mobile Friendly** — The component handles touch events automatically, so it works great on smartphones. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It adds a moment of delight and surprise to an otherwise static web page. The tactile feel of "scratching" something digital is incredibly satisfying and significantly increases user interaction time. --- --- - **Page:** Scroll 3D Grid - **Source:** https://framerhub.io/components/scroll-3d-grid ## Scroll 3D Grid Create stunning 3D grid animations that respond to scroll. Choose from 6 unique animation styles, each creating a different dramatic 3D effect as users scroll through your gallery. ## Features **6 Animation Styles** Choose from Perspective Slide, Rotation Fade, Zoom In, Pop Out, Row Slide, and Spin Up effects. **GSAP Scroll Integration** Smooth, performant animations powered by GSAP and ScrollTrigger. **Flexible Grid Layout** Customize columns, spacing, and image aspect ratios to fit your design. **3D Perspective Control** Adjust the 3D depth intensity for subtle or dramatic visual effects. ## Use Cases **Portfolio Galleries** — Showcase creative work with eye-catching scroll animations. **Product Showcases** — Display product images with engaging 3D transitions. **Hero Sections** — Create immersive landing page experiences. **Image Collections** — Transform standard galleries into interactive experiences. ![Scroll 3D Grid Preview](/framerhub/img/components/control/scroll-3d-grid.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Scroll 3D Grid in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Effect Style** Choose from 6 unique animation types. Each creates a different 3D transformation as users scroll. **Grid Layout** - Columns: Set the number of grid columns (1-12) - Spacing: Adjust gap between images - Image Ratio: Control height/width ratio (1 = square, 1.5 = portrait) **Appearance** - 3D Depth: Control perspective intensity (lower = more dramatic) - Corner Radius: Round image corners - Background: Set the color behind the grid **Scroll Behavior** - Scroll Smoothness: Lower = snappy, Higher = smoother lag effect ### Quick Tips **For Best Performance** — Use 12-24 images for optimal visual impact without performance issues. **Effect Selection** — Type 1 (Perspective Slide) works great for portfolios. Type 5 (Row Slide) is perfect for horizontal emphasis. **3D Intensity** — Lower perspective values (500-1000) create more dramatic depth. Higher values (2000+) are more subtle. **Grid Sizing** — The component requires sufficient height to trigger scroll animations. Ensure it's placed in a scrollable container. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Transform ordinary image galleries into immersive 3D experiences. Based on the acclaimed Codrops implementation, this component brings high-end web animation to Framer with zero coding required. --- --- - **Page:** Shift - **Source:** https://framerhub.io/components/shift ## Shift Add a layer of calm sophistication with Shift. Soft, oversized orbs drift lazily across the screen, slowly changing color to create a breathing, living background that sets a mood without distraction. ## Features **Ambient Motion** The movement is intentionally slow and fluid, designed to sit comfortably behind content without competing for attention. **Gentle Color Shifts** Colors slowly rotate through hues, creating a dynamic gradient that feels fresh every time you look at it. **Soft Bokeh** Heavy blurring creates a depth-of-field effect, making the shapes feel like distant lights or soft reflections. ## Use Cases **Landing Pages** — Create a calm, premium atmosphere. **Portfolios** — Add visual depth without overwhelming your work. **Meditation/Wellness Apps** — Perfect for relaxing, ambient experiences. **SaaS Products** — Elegant backgrounds for modern applications. ![Shift Preview](/framerhub/img/components/control/shift.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Shift in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the appearance and behavior using Framer's property controls. **Color Settings** - Base Hue: Starting hue (0-360) - Hue Range: Color variation - Saturation/Lightness: Color intensity **Orb Settings** - Intensity: Number of orbs - Base Radius / Radius Range: Orb sizes - Base Speed / Speed Range: Movement speed **Effects** - Blur Amount: Bokeh softness ### Quick Tips **Best Performance** — Keep intensity at 1 or below for smooth animation. **Color Combinations** — Blue/purple hues (200-280) feel calming. Warm hues (0-60) feel energetic. **Layering** — Place content above with contrasting text colors for readability. **Blur Settings** — Higher blur creates dreamier effect, lower blur shows more distinct orbs. ## License **Free Component** — Use freely in personal and commercial projects. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Credits [Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743). --- --- - **Page:** Shader Frame - **Source:** https://framerhub.io/components/shader-frame ## Turn Any Section into Abstract Art Shader Frame uses advanced ray-marching techniques to create a continuously evolving, 3D-like frame that responds to mouse movement. Perfect for hero backgrounds, creative portfolios, and eye-catching visual experiences. ## Features **Hypnotic Visuals** The component renders a complex, self-shadowing 3D structure that constantly twists and turns, creating a mesmerizing background or focal point. **Interactive** Engage your visitors with optional mouse interaction. The shader distorts and ripples as the cursor moves across the frame. **Fully Customizable** Fine-tune the visual output with controls for speed, time offset, tint color, brightness, contrast, scale, and distortion intensity. **Performance Optimized** Adapts rendering quality based on RenderTarget for smooth performance in both canvas and preview modes. ## Use Cases **Hero Backgrounds** — Create an immersive, animated backdrop that captivates visitors instantly. **Creative Portfolios** — Showcase your appreciation for cutting-edge web graphics with this high-end effect. **Landing Pages** — Make a bold first impression with hypnotic, abstract visuals. **Section Dividers** — Use as an animated separator between content sections. ![Shader Frame Preview](/framerhub/img/components/control/shader-frame.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Shader Frame in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Animation** - Speed: Control animation speed (0-5) - Time Offset: Shift the starting point of the animation **Appearance** - Tint Color: Apply a color tint to the shader - Brightness: Adjust overall brightness (-1 to 1) - Contrast: Control contrast levels (0-3) - Scale: Zoom in/out of the pattern (0.2-3) - Distortion: Control the distortion intensity (0-5) **Interaction** - Enable Mouse: Toggle mouse interaction - Mouse Strength: Control how strongly mouse movement affects the shader ### Quick Tips **Performance** — The shader uses ray-marching which can be GPU-intensive. Use moderate settings on mobile devices. **Subtle Effects** — Lower distortion (0.5-1) and slower speed (0.5) create elegant, subtle animations. **Bold Statements** — Higher distortion (3+) with faster speed creates energetic, attention-grabbing visuals. **Background Usage** — Works great behind text with reduced brightness and increased contrast for readability. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Shader Frame brings GPU-powered, cinema-quality visuals to Framer with zero coding. The mesmerizing ray-marched patterns create instant visual impact, perfect for creative agencies and portfolios that want to stand out. --- --- - **Page:** Shooting Stars - **Source:** https://framerhub.io/components/shooting-stars ## Create Stunning Cosmic Experiences A stunning 3D animation component featuring diagonal shooting star lines that streak across space with dynamic dash animations and optional background starfield. ## Features **Diagonal Shooting Stars** Mesmerizing diagonal lines that streak across 3D space with customizable colors and dash animations. **Background Starfield** Optional twinkling stars in the background add depth and atmosphere to your scene. **Mouse Interaction** Enable camera orbit control with mouse movement for an interactive experience. **Customizable Colors** Choose up to 3 vibrant colors for your shooting stars. Stars will randomly use these colors for variety. ## Use Cases **Hero Sections** — Perfect for space/cosmic themed hero sections and landing pages **Loading Screens** — Create engaging loading experiences with dynamic star animations **Decorative Backgrounds** — Add visual interest to sci-fi or tech-themed websites **Product Launches** — Eye-catching visual effects that grab attention ![Shooting Stars Preview](/framerhub/img/components/control/shooting-stars.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Shooting Stars in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) Use the property controls to customize your shooting stars effect. **Star Colors** - Color 1, 2, 3 — Customize up to 3 colors for the shooting stars **Background** - Background Color — Set a background color for the entire canvas - Star Count — Number of background stars (0-2000) - Star Color — Color of the background stars - Star Size — Size of the background stars (0.01-0.2) **Animation** - Speed — Control how fast the stars streak (0.1-5) - Line Width — Thickness of the star trails (0.01-0.2) **Interaction** - Enable Mouse Effect — Toggle camera orbit based on mouse movement ### Quick Tips **Best Contrast** — Use darker background colors (black or deep blue) for better contrast with bright star colors. Try transparent backgrounds to layer over other content. **Speed & Mood** — Adjust speed and line width together for different moods: slow + thin = elegant and atmospheric, fast + thick = energetic and dynamic. **Background Stars** — The background starfield adds depth. Try different counts: 500-1000 for sparse elegant looks, 1500-2000 for dense cosmic atmospheres. **Mouse Interaction** — Enable mouse effect for interactive hero sections and banners. Disable for cleaner, non-distracting backgrounds. ## Credits Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/). ## Why Designers Love This Transform any website into a cosmic experience with stunning 3D shooting stars. Built with Three.js for smooth 60fps performance, this component adds professional-grade visual effects to your Framer projects without any code. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Scroll Image Reveal | FramerHub - **Source:** https://framerhub.io/components/scroll-image-reveal - **Description:** Create cinematic scroll-triggered image reveals with organic displacement effects and smooth animations. Premium Framer component for client sites,. # **Scroll Image Reveal ** Create cinematic scroll-triggered image reveals with organic displacement effects and smooth animations. One-time payment Lifetime updates Commercial license ## **Overview** Create cinematic scroll-triggered image reveals with organic displacement effects and smooth animations. - Four stunning reveal effects (Circle, Circle Morph, Circle Blur, Wave Path) - Scroll-triggered animations with smooth scrubbing - Full control over reveal timing and easing - Customizable displacement and filter effects - Optional transform animations (position, scale, rotation) - Performance-optimized with GPU acceleration - Works in any section or layout - Zero coding required ## Cinematic Image Reveals for Framer Transform static images into dynamic scroll experiences. Four organic reveal effects with full control over timing, easing, and visual impact. Built for designers who need portfolio-grade animations without touching code. ## Features**Four Reveal Effects** Circle, Circle Morph, Circle Blur, or Wave Path—each creates a unique organic reveal as users scroll.**Complete Animation Control** Set when reveals start and end, adjust smoothness, choose from 30+ easing curves, and add optional delays.**Advanced Visual Effects** Customize displacement intensity, blur amounts, morphology, and brightness transitions for your exact vision.**Transform Animations** Add position shifts, scaling, or rotation at the start and end of your reveal for extra dimension.**Performance First** GPU-accelerated animations run smoothly at 60fps. Lazy loading ensures fast page loads. ## Use Cases**Portfolio Hero Sections** — Make striking first impressions with images that reveal as visitors scroll**Product Photography** — Showcase products with cinematic reveals that feel premium and polished**Case Study Pages** — Draw attention to key visuals with dynamic scroll-based reveals**About Pages** — Add personality with images that come alive as users explore your story**Landing Pages** — Elevate conversion rates with engaging scroll interactions that feel modern![Scroll Image Reveal Preview](https://framerhub.io/framerhub/img/components/control/scroll-image-reveal.jpg) ## How to Use ### Installation After purchasing from FramerHub: 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Scroll Image Reveal in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization All settings are in Framer's properties panel:**Image & Display**- Upload your image or paste an image URL - Set image dimensions and object fit (cover, contain, fill)**Reveal Effect**- Choose from 4 effects: Circle, Circle Morph, Circle Blur, Wave Path - Adjust final reveal size and displacement intensity - Control blur amount and morphology for enhanced effects**Animation Timing**- Set start and end scroll triggers - Adjust smoothness (lower = smoother scrubbing) - Choose from 30+ easing options - Add optional animation delay**Transform (Optional)**- Set starting position, scale, and rotation - Define ending position, scale, and rotation - Create complex multi-dimensional animations ### Quick Tips**Timing Matters** — Start reveals early (top bottom) for gradual builds, or late (center bottom) for impact**Easing Choice** — Use "none" for smooth linear reveals, or "power2.out" for snappier finishes**Image Size** — Larger images need higher final radius values (800+) for complete reveals**Layering** — Place text or overlays above the component for rich, layered compositions ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Choose This Four ready-to-use effects give you a professional starting point, then every parameter is yours to control. From subtle reveals to dramatic transformations, you get the exact animation you envision—all through Framer's familiar properties panel. Perfect for designers building portfolio sites, agencies delivering premium client work, and freelancers who want standout scroll experiences. --- ### **Scroll Image Reveal - $12** Create cinematic scroll-triggered image reveals with organic displacement effects and smooth animations.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Smart Breadcrumbs - **Source:** https://framerhub.io/components/smart-breadcrumbs ## Smart Breadcrumbs A powerful breadcrumb component that improves both user navigation and SEO. It automatically generates breadcrumbs based on your Framer project structure or allows manual overrides, while silently injecting JSON-LD schema data to help Google understand your site structure. ## Features **SEO Optimized** Automatically injects `BreadcrumbList` Schema.org structured data into the head of your page, improving search engine visibility. **Auto or Manual Modes** Let the component generate links automatically based on the URL path, or switch to Manual mode to define custom labels and links. **Flexible Styling** Customize every aspect: spacing, colors, fonts, separators (Chevron, Slash, Arrow, or Custom SVG), and hover states. Supports per-side padding for precise control. ## Use Cases **Blog Navigation** — Help readers understand their position in your content hierarchy while boosting article SEO. **E-commerce Sites** — Guide shoppers through product categories with clear, clickable paths. **Documentation Sites** — Provide context in multi-level documentation structures. **Portfolio Sites** — Navigate between project categories and case studies seamlessly. ![Smart Breadcrumbs Preview](/framerhub/img/components/control/smart-breadcrumbs.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Smart Breadcrumbs in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Configure the component through the properties panel: **Mode Settings** - Auto: Automatically generates breadcrumbs from URL path - Manual: Define custom labels and links **Separator Options** - Chevron, Slash, Arrow, or Custom SVG - Adjustable size and color **Styling** - Container: padding (per-side support), background, border, shadow - Links: font, padding (per-side support), colors, hover/active states ### Quick Tips **Canvas Preview** — In Auto mode, use the "Preview Path" setting to simulate different URL paths while designing. **Custom Separators** — Paste any SVG code into the Custom option for unique separator icons. **Hover States** — Configure distinct hover colors to improve interactivity and user feedback. **Performance** — The JSON-LD schema is only injected in Preview/Live mode, not on the canvas. **Per-Side Padding** — Toggle padding controls to set individual values for top, right, bottom, and left sides. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Smart Breadcrumbs combines beautiful, customizable navigation with built-in SEO benefits. No need for separate schema plugins or manual JSON-LD coding—just drop it in and your breadcrumbs work for both users and search engines. --- - **Page:** Soft Body Physics - **Source:** https://framerhub.io/components/soft-body-physics ## Soft Body Physics A mesmerizing soft body physics simulation that creates organic, fluid-like interactions using advanced raymarching shaders. Unlike standard CSS or 2D canvas effects, this uses a pseudo-3D distance field to create true "blobby" merging effects. ## Features **Metaball Rendering** Uses signed distance functions (SDFs) to create perfectly smooth blends between objects, making them look like droplets of liquid merging and separating. **Interactive Controls** Engage users with mouse interactions. Set objects to "Follow" the cursor for playful navigation or "Repel" to clear a path. **Material & Shape** From matte clay to shiny plastic. Choose from Spheres, Cubes, Toruses, or Capsules and adjust their "Shininess" to get the perfect finish. **Wobble Effects** Add a layer of organic noise to the surface with customizable frequency and strength, making the objects feel alive and breathing. ## Use Cases **Hero Backgrounds** — Create an immersive, organic backdrop. **Loading Indicators** — A mesmerizing animation to keep users engaged. ![Soft Body Physics Preview](/framerhub/img/components/control/soft-body-physics.jpg) ## How to Use ### Installation 1. Copy the component. 2. Paste it into your Framer project. ### Customization **Visual** - **Shape**: Switch between Sphere, Cube, Torus, Capsule. - **Size & Radius**: Fine-tune the dimensions of your chosen shape. - **Smoothness**: Control how "gooey" the objects are when they touch. - **Shininess**: Adjust surface reflectivity from 0 (Matte) to 1 (Glassy). **Colors** - **Color Mode**: - **Dual**: Gradient mix between two colors. - **Solid**: Flat single color. - **Multi**: Assign a unique color to each of the 3 objects. **Creative (Wobble)** - **Strength**: Add surface distortion. - **Frequency**: Scale of the noise pattern. - **Speed**: How fast the surface ripple animates. **Animation & Interaction** - **Speed**: Global simulation speed. - **Interaction**: Enable mouse Follow or Repel behaviors. ### Quick Tips **Performance** — The component automatically reduces quality on the Framer canvas to save performance while designing. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Soft Body Physics adds that coveted "high-end 3D" look to your site without needing Spline or heavy 3D files. It's performant, lightweight, and completely customizable directly in Framer, letting you create everything from abstract art to playful interactive backgrounds. --- - **Page:** Sprite Video ASCII - **Source:** https://framerhub.io/components/sprite-video-ascii ## Transform Video into ASCII Motion Sprite Video ASCII turns ordinary video into a live typographic effect inside Framer. Use it for retro interfaces, cinematic hero sections, experimental portfolios, or looping motion backgrounds that need a more distinctive look than standard video. ## Features **Real-Time Video Conversion** Render moving video as animated ASCII art with responsive behavior and live control updates in Framer. **Flexible Source Options** Use either uploaded Framer video files or direct `.mp4`, `.webm`, `.ogg`, or `.mov` URLs when the host allows cross-origin access. **Advanced Visual Tuning** Shape the final look with density, character ramps, brightness, contrast, saturation, framing, colors, and background styling. **True Color Mode** Preserve source color in the ASCII output and push it further with a Color Boost control for stronger results. **Retro Scanline Styling** Add a CRT-inspired overlay with adjustable opacity and spacing for a sharper analog-display feel. **Playback and Quality Controls** Tune speed, looping, autoplay, and rendering quality to get the right balance between fidelity and performance. ## Use Cases **Portfolio Heroes** - Build memorable landing sections with animated ASCII visuals that feel custom and technical. **Retro-Futuristic Interfaces** - Perfect for terminal-inspired, cyberpunk, and archival visual directions. **Looping Background Systems** - Turn short clips into repeatable animated textures behind copy or UI. **Campaign and Promo Pages** - Stylize motion assets for music, fashion, editorial, or event microsites. ![Sprite Video ASCII Preview](/framerhub/img/components/control/sprite-video-ascii.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Sprite Video ASCII in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Configure the source and visual treatment based on the kind of motion you want. **Source Setup** - Use `Source > Upload` for the most reliable workflow - Use `Source > URL` only with direct video file links - External video URLs must allow cross-origin access - YouTube and Vimeo page or embed links are not supported for ASCII frame sampling **Visual Controls** - Density changes how fine or chunky the ASCII grid feels - Characters lets you define your own tonal ramp - Fit gives you `Contain`, `Cover`, or `Stretch` - Brightness, Contrast, and Saturation adjust the source before ASCII conversion - True Color keeps sampled video color, while Color Boost increases intensity - Scanlines can be styled further with Line Opacity and Line Spacing **Playback Controls** - Speed adjusts playback rate - Loop repeats the video - Autoplay starts motion automatically when the browser allows it ### Quick Tips **Best Performance** - Start with Density around `8-12` for a strong balance between clarity and performance. **Best Source Type** - Uploaded files are the most dependable option. For URL mode, use direct CDN-hosted video files with proper CORS headers. **Stronger Contrast** - Videos with clearer light and dark separation create more readable ASCII structure. **Canvas Editing** - Framer canvas can resize while editing. If the framing looks off during editing, switching Fit or Quality can force a clean recalculation. ## License **Single Use License** - Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Sprite Video ASCII combines live motion with a recognizable graphic language that feels both nostalgic and modern. It gives designers a fast way to turn simple video assets into stylized, high-character visuals without building a custom rendering pipeline from scratch. --- --- - **Page:** Snow Overlay | FramerHub - **Source:** https://framerhub.io/components/snow-overlay - **Description:** Add realistic falling snow particles to create stunning winter and seasonal effects. Premium Framer component for client sites, portfolios, and product. # **Snow Overlay ** Add realistic falling snow particles to create stunning winter and seasonal effects. One-time payment Lifetime updates Commercial license ## **Overview** Add realistic falling snow particles to create stunning winter and seasonal effects. - Realistic falling snow animation with canvas rendering - Multiple particle shapes (Circle, Square, Star, Snowflake) - Adjustable particle count and fall speed - Wind direction control for natural movement - Customizable snow color and size range - Variable opacity for depth perception - Optional background color overlay - Performance-optimized 60fps animation - No coding required ## Create a Winter Wonderland Add a magical snow effect to your Framer website with the Snow Overlay component. Perfect for seasonal campaigns, holiday themes, or any winter-inspired design. ## Features**Multiple Shapes** Choose from circles, squares, stars, or detailed snowflakes for your particles.**Full Control** Adjust particle count, fall speed, wind direction, and more with intuitive controls.**Smooth Animation** Optimized canvas rendering for buttery-smooth 60fps animation.**Overlay Mode** Automatically covers the entire viewport in preview/live mode. ## Use Cases**Holiday Websites** — Add festive charm to landing pages during winter holidays.**Seasonal Promotions** — Create atmosphere for winter sales and campaigns.**Portfolio Pieces** — Showcase creative, dynamic design capabilities.![Snow Overlay Preview](https://framerhub.io/framerhub/img/components/control/snow-overlay.jpg) ## How to Use ### Installation 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Snow Overlay in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization**Particle Settings**- Count: Number of snow particles (20-500) - Speed: Fall speed (0.5-10) - Wind: Horizontal drift (-3 to 3)**Appearance**- Shape: Circle, Square, Star, or Snowflake - Snow Color: Any color for particles - Back Color: Background overlay color - Min/Max Size: Particle size range (0.1-50) - Min/Max Opacity: Transparency range (0-1) ### Quick Tips**Best Performance** — Use 100-200 particles for optimal performance. Reduce count on mobile.**Shape Selection** — Snowflake shapes are more detailed but use slightly more resources.**Layering** — Place your content above the Snow component for best effect. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Add instant visual magic to any project. The Snow Overlay transforms ordinary pages into immersive winter experiences with zero coding required. --- ### **Snow Overlay - $5** Add realistic falling snow particles to create stunning winter and seasonal effects.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Star Warp - **Source:** https://framerhub.io/components/star-warp ## Star Warp Add a dynamic, sci-fi inspired starfield warp effect to your website. Perfect for hero sections, loading screens, or backgrounds that need a sense of motion and depth. ## Features **Customizable Density** Adjust the number of stars to create anything from a sparse void to a dense galaxy. **Speed Control** Control the speed of the warp effect to match the energy of your site. **Themeable** Warp speed ahead with custom colors for both the stars and the background canvas. ## Use Cases **Hero Backgrounds** — Create an immersive first impression. **Loading States** — Keep users engaged while content loads. **Creative Portfolios** — Show off a modern, tech-forward aesthetic. ![Star Warp Preview](/framerhub/img/components/control/star-warp.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Star Warp in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization You can customize the appearance and behavior of the Star Warp effect using the property controls in Framer. **Controls** - **Stars**: Set the number of stars (50-500). - **Warp**: Adjust the speed of the stars (1-20). - **Star Color**: Choose the color of the stars. - **Background**: Set the background color of the canvas. - **Star Size**: Adjust the maximum size of the stars. - **Center X / Y**: Move the warp's vanishing point to create steering effects. - **Mouse Control**: Enable this to make the warp center follow your mouse cursor. - **Rotation**: Rotate the entire starfield for a vortex effect. - **Depth Fade**: Smoothly fade distant stars to black for a realistic "fog" effect. ### Quick Tips **Best Performance** — Keep the star count moderate (around 200) for the best balance of visual impact and performance, especially on mobile devices. **Color Combinations** — High contrast works best. Try bright stars on a dark background for a classic space look, or get creative with colored backgrounds. **Layering** — Place text or other content on top of the starfield. Ensure your text has sufficient contrast against the background color. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It's a "plug-and-play" way to add a high-quality, coded animation to a site without needing to write any code yourself. The 3D depth effect is instantly engaging. --- - **Page:** Swirl Sphere - **Source:** https://framerhub.io/components/swirl-sphere ## Swirl Sphere - 3D Kinetic Typography Create captivating 3D text effects with the Swirl Sphere component. Text swirls across a rotating sphere, creating a mesmerizing visual experience. ## Features **3D Sphere Geometry** Your text is dynamically mapped onto a sphere using Three.js shaders, creating stunning swirl effects. **Transparent Background** Seamlessly overlays on any background in your Framer project. **Smooth Animation** Watch text flow across the sphere with adjustable animation speed. **Auto Rotation** Enable automatic rotation for a constantly evolving 3D display. ## Use Cases **Hero Sections** — Create immersive 3D headlines. **Brand Experiences** — Elevate your brand with premium 3D visuals. **Creative Portfolios** — Showcase innovative typography. **Landing Pages** — Make a lasting first impression. ![Swirl Sphere Preview](/framerhub/img/components/control/swirl-sphere.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component (Cmd/Ctrl + V) ### Customization **Content** - Text: Your display text - Font: Extended font controls **Colors** - Text Color: Color of the text (default: white) - Sphere Color: Color of the rotating sphere (default: blue) **Animation** - Animation Speed: Swirl speed - Camera Distance: View distance - Auto Rotate: Toggle rotation ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- --- - **Page:** Swirl - **Source:** https://framerhub.io/components/swirl ## Swirl Add dynamic motion with Swirl. Particles flow across the screen following noise-based patterns, leaving glowing trails that create organic, ever-changing compositions. ## Features **Noise-Based Flow** Particles follow simplex noise patterns, creating natural, unpredictable movement paths. **Trail Lines** Each particle leaves a glowing trail, building up intricate visual patterns over time. **Customizable Colors** Set a base color and variation range to create your perfect palette. ## Use Cases **Hero Backgrounds** — Create dynamic, flowing visual interest. **Music/Audio Sites** — Perfect for representing sound waves and rhythm. **Creative Portfolios** — Add artistic flair to your work showcase. **Event Pages** — Create energy and excitement. ![Swirl Preview](/framerhub/img/components/control/swirl.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Swirl in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Customize the appearance and behavior using Framer's property controls. **Intensity** - Controls the number of particles **Base Color** - Primary color of the swirl particles **Color Variation** - Hue spread from base color ### Quick Tips **Best Performance** — Keep intensity at 1 or below for smooth animation. **Color Combinations** — Purple/pink hues create dreamy effects. Cyan/green feels digital. **Layering** — Component has transparent background. Layer content above. **Dark Backgrounds** — Works best on dark backgrounds for maximum glow effect. ## License **Free Component** — Use freely in personal and commercial projects. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Credits [Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743). --- --- - **Page:** Tag Splitter - **Source:** https://framerhub.io/components/tag-splitter ## Tag Splitter Turn any comma-separated list into stylish tag pills instantly. Perfect for displaying categories, skills, or features without manually creating dozens of text layers. ## Features **Auto-Split Logic** Simply type your tags separated by commas (e.g., "Design, Code, Art") and watch them transform into individual pills. **Flexible Layouts** Choose between a wrapping layout that flows naturally or a horizontal scroll layout for compact spaces. **Custom Styling** Full control over colors, typography, spacing, and hover effects to match your brand perfectly. ## Use Cases **Blog Categories** — Display post categories or tags. **Skill Lists** — Showcase skills on a portfolio or resume. **Feature Lists** — List product features in a compact, readable format. ![Tag Splitter Preview](/framerhub/img/components/control/tag-splitter.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Tag Splitter in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Tags List** Enter your tags here. By default, use commas to separate them. You can change the separator if needed. **Layout** - **Wrap**: Tags will flow to the next line when they run out of space. - **Scroll**: Tags will stay in a single line and scroll horizontally if they overflow. **Styling** Customize the gap, padding, border radius, and colors. Enable "Hover Effect" to add interactivity. ### Quick Tips **Custom Separator** — You can use any character as a separator, such as "|" or ";". Just update the "Separator" control. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It saves time! Instead of creating 10 separate text layers and auto-layout frames, just drop this component and type your list. It's that simple. --- **Need Help?** Visit framerhub.io/support for documentation and video tutorials. --- - **Page:** Text 3D - **Source:** https://framerhub.io/components/text-3d ## Text 3D Create stunning 3D text effects with depth and lighting using HTML5 Canvas. No WebGL required—works everywhere. ## Features **3D Depth Effect** Text layers create a realistic 3D extrusion effect with customizable depth. **Dynamic Lighting** Adjust the light angle to change where shadows and highlights appear. **Custom Colors** Set both the front face color and the depth/shadow color. **Full Typography** Extended font controls for complete customization. **Animations** Built-in light rotation and floating effects to bring your text to life. ## Use Cases **Headlines** — Create impactful 3D headings. **Logos** — Add depth to text-based logos. **CTAs** — Make buttons and calls-to-action pop. **Decorative Text** — Add visual interest anywhere. ![Text 3D Preview](/framerhub/img/components/control/text-3d.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component (Cmd/Ctrl + V) ### Customization **Content** - Text and font settings **Colors** - Front color and depth color **Effect** - Depth amount and light angle **Animation** - Spin light and floating effects ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Text Glitch - **Source:** https://framerhub.io/components/text-glitch ## Text Glitch Add eye-catching glitch effects to your text. The component periodically triggers a glitch animation with RGB color separation. ## Features **Periodic Glitch** Text glitches at customizable intervals for attention-grabbing effects. **RGB Split** Two color layers offset from the main text create that classic glitch aesthetic. **Custom Timing** Control how often glitches occur and how long they last. **Adjustable Intensity** Set how far the RGB channels offset during glitch. ## Use Cases **Headlines** — Create attention-grabbing hero text. **Gaming Sites** — Perfect for esports and gaming aesthetics. **Tech Projects** — Add that digital, edgy feel. **Creative Portfolios** — Show off your design skills. ![Text Glitch Preview](/framerhub/img/components/control/text-glitch.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component (Cmd/Ctrl + V) ### Customization **Content** - Text and font settings **Colors** - Main color and two glitch colors **Animation** - Intensity, interval, and duration ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Text Pressure - **Source:** https://framerhub.io/components/text-pressure ## Interactive Variable Font Typography Create stunning cursor-responsive text effects with TextPressure. Each character dynamically adjusts its font weight, width, and style based on cursor proximity, creating an engaging and interactive typographic experience. ## Features **Cursor Proximity Detection** Characters respond to mouse/touch position with smooth interpolation. The closer the cursor, the more dramatic the effect on each letter. **Variable Font Variations** Support for multiple font axes including weight (wght), width (wdth), and italic (ital). Toggle each variation independently for complete control. **Alpha & Stroke Effects** Add depth with opacity variation based on cursor distance. Enable stroke effects for a distinctive outlined look with customizable colors. **Flexible Layout** Choose between flex layout (justified spacing) or standard inline display. Scale to fit option fills the container height. ## Use Cases **Hero Sections** — Create memorable first impressions with interactive headlines that respond to user movement. **Portfolio Headers** — Stand out with typography that captures attention and showcases creativity. **Landing Pages** — Increase engagement with dynamic text that encourages cursor exploration. **Brand Websites** — Reinforce brand identity with custom variable fonts and unique interactions. ![Text Pressure Preview](/framerhub/img/components/control/text-pressure.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Text Pressure in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Configure your text and font settings, then enable the effects you want. **Text Settings** - Text: The display text - Font Family: Variable font family name - Font URL: URL to your variable font file (.woff2) - Min Font Size: Minimum font size in pixels **Appearance** - Text Color: Main text color - Stroke Color: Color for stroke effect (when enabled) **Effects** - Width Variation: Animate font width axis - Weight Variation: Animate font weight axis - Italic Variation: Animate italic axis - Alpha Variation: Animate opacity based on distance - Flex Layout: Use flexbox for justified spacing - Stroke Effect: Add colored outline behind text - Scale to Fit: Scale text to fill container height ### Quick Tips **Use Variable Fonts** — This component requires a variable font with wght, wdth, and ital axes. The default Compressa VF font works great, or use Google Variable Fonts. **Dark Backgrounds** — Light text on dark backgrounds creates the most dramatic effect. Try white text with subtle stroke colors. **Container Size** — The text automatically sizes to fit the container width. Use Scale to Fit for full container coverage. **Performance** — The animation runs at 60fps using requestAnimationFrame. Longer texts with many characters may impact performance on mobile devices. ## License **Free Component** — Use in unlimited personal and commercial projects. No attribution required. ## Refund Policy This is a free component. No purchase required! ## Why Designers Love This TextPressure transforms static headlines into living typography. The smooth, physics-based interpolation creates a satisfying interaction that users can't resist exploring. Perfect for modern websites that prioritize user engagement and memorable experiences. --- --- - **Page:** Text Rotate - **Source:** https://framerhub.io/components/text-rotate ## TextRotate Create stunning animated text rotations for hero sections, landing pages, and creative displays. Drop in a list of words or phrases and watch them cycle with beautiful motion effects. ## Features **Multiple Animation Effects** Choose from 7 unique effects: Slide, Blur Slide, Scale Rotate, Wave, Glitch, Bounce, and Flip. Each creates a distinct personality for your text. **Staggered Character Animation** Animate each character or word individually with customizable stagger direction (first, last, center, or random). **Dynamic Color Modes** Apply solid colors or smooth gradients across characters. **Background Styling** Optional background with customizable color, padding, and border radius for a polished look. ## Use Cases **Hero Sections** — Rotate through your key value propositions with eye-catching animations. **Landing Pages** — Highlight product features or benefits that cycle automatically. **Creative Headers** — Add motion and personality to static headlines. ![Text Rotate Preview](/framerhub/img/components/control/text-rotate.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find TextRotate in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Add your rotating texts (one per line) and choose your animation effect: **Animation** - Interval between rotations - Animation speed - Stagger direction (First, Last, Center, Random) & duration - Split text by characters or words **Effects** - 7 unique styles: Slide, Blur Slide, Scale Rotate, Wave, Glitch, Bounce, Flip - Customize direction, blur amount, scale, rotation, and intensity **Appearance** - Color modes: Solid or Gradient - Typography settings (Font family, size, weight, etc.) **Background** - Type: None, Solid, Gradient, or Image - Full control over colors, gradient angles, and opacity - Adjustable padding and border radius ### Quick Tips **Smooth Animations** — Start with default animation speed (0.5s). Slower speeds create elegance, faster speeds add energy. **Character Split** — Use character animation for single words, word animation for longer phrases. **Stagger Direction** — "Last" creates a satisfying cascade effect. "Center" works well for centered headings. **Color Gradients** — Gradient mode looks best with contrasting start and end colors. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This TextRotate brings life to static hero sections with zero coding. Just paste your words and watch the magic happen—it's the fastest way to add premium motion typography to any Framer site. --- --- - **Page:** The Digital Horizon - **Source:** https://framerhub.io/components/the-digital-horizon ## The Digital Horizon Create a stunning, infinite digital landscape. This component renders a 3D terrain made of code and particles that undulates like a digital ocean. ## Features **Matrix-Inspired Aesthetics** Choose from 6 different character sets including Binary, Hex, and Glyphs to render your terrain. **Interactive Wave** The terrain ripples with an automated wave animation and reacts to mouse movement, creating ripples where the user hovers. **Cinematic Quality** Includes built-in bloom and depth-of-field effects to give the scene a polished, high-end look. ## Use Cases **Hero Backgrounds** — Perfect for tech-focused landing pages or futuristic web designs that need an eye-catching animated background. **Presentation Slides** — Ideal backdrop for slides about data, AI, cybersecurity, or digital transformation topics. **Creative Portfolio** — Add dynamic visual interest to developer or designer portfolios with a modern, tech-inspired aesthetic. **Loading Screens** — Create engaging loading or transition screens that keep users entertained with mesmerizing wave patterns. ![The Digital Horizon Preview](/framerhub/img/components/control/digital-horizon.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find The Digital Horizon in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Grid Settings** - **Density**: Control the number of particles (50-200). Higher density creates a more detailed landscape but may impact performance. - **Spacing**: Adjust the distance between particles for a closer or more spread-out grid. - **Scale**: Control the visual size of the particles. Larger scale makes them more prominent. **Animation Controls** - **Scroll Speed**: How fast the terrain moves toward you (0-20). Higher values create a faster-moving effect. - **Wave Speed**: Controls the speed of the undulating wave motion. - **Wave Height**: Adjust how tall the waves get. More dramatic waves create more visual impact. - **Pause**: Toggle animation on/off for static screenshots or performance testing. **Colors** - **Peak Color**: The color at the highest points of the wave. - **Base Color**: The color at the lowest points of the wave. Creates a gradient effect. - **Background**: Scene background color. Works best with dark colors. - **Transparent BG**: Toggle to enable transparent background for layering over other content (disables bloom effect). **Character Sets** - Choose from 6 different particle styles: Dots, Circles, Squares, Binary, Hex, or Glyphs for different visual aesthetics. **Bloom Effects** - **Strength**: Controls the intensity of the glow effect (0-3). - **Radius**: How far the glow spreads. - **Threshold**: Minimum brightness required to create bloom. - **Note**: Bloom is disabled when Transparent BG is enabled. **Camera** - **FOV**: Field of view (30-120). Wider FOV shows more of the landscape. - **Height (Y)**: How high the camera is positioned above the grid. - **Distance (Z)**: How far back the camera is positioned. **Interaction** - **Enabled**: Toggle mouse interaction on/off. - **Radius**: How large the ripple effect area is when hovering. - **Strength**: How intense the mouse-based deformation is. ### Quick Tips **Best Performance** — Use density between 80-120 for smooth animation on most devices. Reduce to 60-80 on mobile for optimal performance. **Color Combinations** — Dark backgrounds (#020204 or deep blue) work best with bright peak colors (#00ffff, #ff00ff). The gradient between peak and base colors creates depth. **Character Sets** — Binary and Hex give a classic "Matrix" feel, while Dots and Circles are more subtle and modern. Experiment to match your design aesthetic. **Bloom for Drama** — Increase bloom strength (1.5-2.0) on dark backgrounds for a dreamy, cinematic effect. Reduce to 0 for clean, crisp visuals on light backgrounds. **Camera Angles** — Lower camera height (10-15) creates a more immersive "flying through" effect. Higher positions (25-35) give a bird's-eye view of the landscape. **Interaction** — Mouse interaction adds engaging polish. If performance is a concern, disable it or reduce the radius/strength. **Transparent Background** — Enable "Transparent BG" to layer the component over images, videos, or other content. Note that bloom effects are disabled in transparent mode. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Transform your designs with a captivating digital landscape that brings depth and motion to any project. The Digital Horizon combines stunning 3D visuals with smooth WebGL performance, offering six unique character sets and extensive customization options. Whether you're building a tech portfolio, a data visualization dashboard, or a futuristic landing page, this component delivers that "wow" factor that keeps users engaged. --- - **Page:** Time To Read - **Source:** https://framerhub.io/components/time-to-read ## Time To Read Add a helpful "Read time: 5 min" label to your blog posts automatically. This component scans your page content and calculates the estimated reading time based on a customizable WPM speed. ## Features **Automatic Word Count** Just drop it on your CMS page. It automatically counts the words in the document body and converts them to minutes. **Custom Reading Speed** Adjust the Words Per Minute (WPM) to match your audience's reading pace. Default is 200 WPM. **Fully Customizable Labels** Change the prefix and suffix text to match your design style (e.g., "Read time:", "5 min read", "Estimated: 3 minutes"). **Zero-Config Setup** Works out of the box with no additional configuration required. ## Use Cases **Blog Posts** — Display estimated reading time on article pages to set reader expectations. **Documentation** — Help users gauge the length of tutorials and guides. **News Sites** — Show quick-read indicators for different article lengths. ![Time To Read Preview](/framerhub/img/components/control/time-to-read.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Time To Read in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Config Section** - WPM: Set your preferred words per minute (1-1000) - Prefix: Text before the number (e.g., "Read time:") - Suffix: Text after the number (e.g., "min") **Container Section** - Padding: Inner spacing - Background Color: Container background - Border Radius: Corner rounding - Border: Width, style, and color - Shadow: Box shadow effect **Text Styles Section** - Font: Full typography controls - Color: Text color ### Quick Tips **Best Placement** — Position the component near your article title or byline for maximum visibility. **Reading Speed** — 200 WPM is average. Use 150 WPM for technical content, 250 WPM for casual reading. **Minimal Styling** — The component works great with transparent background, letting it blend with your existing design. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Set it and forget it. This simple utility component adds professional polish to any blog or content-heavy site, giving your readers a helpful estimate before they dive in. --- --- - **Page:** Variable Font Hover - **Source:** https://framerhub.io/components/variable-font-hover ## Interactive Typography That Responds Transform your text into an interactive experience with Variable Font Hover – each letter responds to mouse hover with smooth weight transitions, creating elegant ripple effects across your typography. ## Features **Letter-by-Letter Animation** Each character animates independently, creating a fluid wave effect as users hover over the text. The animation smoothly transitions between font weights for a premium feel. **Variable Font Support** Leverage the power of variable fonts to animate weight and optionally slant. The smooth interpolation between font weights creates animations that traditional fonts simply can't achieve. **Stagger Patterns** Choose how the animation flows through the text: from the first letter, last letter, center outward, or random for organic movement. **Dual Trigger Modes** Use hover mode for desktop experiences or toggle mode for click-based interactions that work great on mobile devices. **Layout Stability** Built-in layout reservation ensures your text never "shakes" or causes layout shifts, even when transitioning between extreme font weights. ## Use Cases **Navigation Items** — Create engaging nav links that respond to hover with elegant weight changes. **Call-to-Action Buttons** — Add subtle interactivity to text-based CTAs for higher engagement. **Headings** — Make section headings interactive for a more dynamic page feel. **Menu Items** — Perfect for dropdown menus or sidebar navigation with hover feedback. ![Variable Font Hover Preview](/framerhub/img/components/control/variable-font-hover.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Variable Font Hover in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization Configure the component through intuitive grouped controls: **Font Variation** - Set default and hover font weights - Enable slant axis for italic-style effects - Configure slant values for both states **Animation** - Adjust transition speed - Choose spring or ease timing - Configure stagger direction and delay **Colors** - Set default text color - Enable color change on hover - Choose hover text color **Background** - Enable optional background - Set color, padding, and border radius ### Quick Tips **Weight Contrast** — For maximum impact, use a weight range of at least 300 (e.g., 400 to 700 or 300 to 900). Subtle changes (like 400 to 500) may not be noticeable. **Stagger Timing** — A 0.03s delay creates smooth waves. Increase to 0.05-0.08s for more dramatic sequential effects. **Toggle Mode** — Use "Click to Toggle" for mobile-friendly interactions where hover isn't available. **Accessibility** — The component includes screen reader text for accessibility. The animated text is marked aria-hidden. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Variable Font Hover brings micro-interactions to typography in a way that feels natural and premium. The letter-by-letter animation creates an engaging experience that encourages exploration while the variable font technology ensures buttery-smooth transitions. --- --- - **Page:** Type Orbit - **Source:** https://framerhub.io/components/type-orbit ## Type Orbit Create mesmerizing 3D text animations with Type Orbit. This component maps your text onto a complex torus knot geometry, creating an endless loop of kinetic typography that grabs attention. ## Features **3D Text Mapping** Your text is rendered into a texture and wrapped seamlessly around a 3D torus knot. **Kinetic Motion** The text scrolls endlessly along the geometry, creating a hypnotic flow effect. **Interactive 3D** Includes auto-rotation that can be adjusted or combined with mouse interactions. **Customizable Styling** Full control over text colors, background colors, and typography to match your brand. ## Use Cases **Hero Headlines** — Create a bold, sculptural statement piece above the fold. **Feature Highlights** — Use keywords that orbit around a central point. **Creative Footers** — Add depth and movement to the bottom of your page. ![Type Orbit Preview](/framerhub/img/components/control/type-orbit.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component (Cmd/Ctrl + V) ### Customization **Text & Font** Enter your text and select any font. Thicker, bolder fonts (like Arial Black or Inter Black) tend to read better on the 3D geometry. **Colors** - **Text Color**: The color of the letters. - **Torus Color**: The "background" color of the torus knot itself. **Animation** - **Scroll Speed**: How fast the text moves along the path. - **Auto Rotate**: Enable/disable global rotation. - **Rotate Speed**: How fast the object spins in space. ### Quick Tips **Font Choice** — Bold, uppercase fonts work best to maintain legibility when wrapped around the 3D shape. **Contrast** — Ensure good contrast between Text Color and Torus Color for readability. **Performance** — This component uses Three.js. It's optimized, but avoid having too many complex 3D instances on a single mobile page. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Variable Font Rotate - **Source:** https://framerhub.io/components/variable-font-rotate ## Animate Your Typography **Variable Font Rotate** brings your text to life with smooth variable font weight transitions. Each character animates individually with staggered timing, creating mesmerizing text rotation effects perfect for hero sections, headlines, and creative displays. ## Features **Variable Font Animation** Animate font weight from light to bold (or any weight range) as text rotates, creating a dynamic typographic experience. **Staggered Character Animation** Each character animates independently with customizable stagger direction—from first, last, center, or random. **Multiple Slide Directions** Choose from up, down, left, or right slide directions to match your design's flow. **Spring & Ease Transitions** Select between bouncy spring physics or smooth ease transitions for different visual effects. ## Use Cases **Hero Headlines** — Create eye-catching animated headlines that captivate visitors on landing pages. **Feature Highlights** — Rotate through product features or benefits with engaging typography. **Creative Portfolios** — Add dynamic text elements to showcase creative work and personal branding. **Marketing Pages** — Draw attention to key messages with animated text transitions. ![Variable Font Rotate Preview](/framerhub/img/components/control/variable-font-rotate.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Variable Font Rotate in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Content Settings** - Add multiple text lines (one per line) to rotate through - Choose any variable font for weight animation support **Animation Controls** - Adjust rotation interval and transition speed - Select slide direction and stagger pattern - Enable/disable auto-rotation and looping ### Quick Tips **Use Variable Fonts** — For best results, use a variable font that supports the weight axis (wght). Popular choices include Inter, Roboto Flex, and Source Sans Variable. **Stagger Effects** — Try "center" stagger for a wave-like effect, or "random" for playful animations. **Speed Tuning** — Slower transition speeds (0.8-1.2s) feel more elegant, while faster speeds (0.3-0.5s) add energy. **Contrast Matters** — Larger weight differences (100 to 900) create more dramatic effects than subtle changes. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Variable Font Rotate combines the power of variable fonts with smooth character-by-character animation. It's the perfect way to add sophisticated motion to your typography without complex code or video files. --- --- - **Page:** VFX Image Duotone - **Source:** https://framerhub.io/components/vfx-image-duotone ## VFX Image Duotone Transform your images with a classic duotone effect, powered by Three.js WebGL for smooth performance and stunning visuals. ## Features **Custom Duotone Colors** Map the shadows and highlights of your image to any two colors for complete creative control. **Smooth Animation** Add subtle movement to the effect with the Speed control for dynamic, living visuals. **Multiple Image Fit Modes** Choose from Cover, Contain, or Fill to control how your image displays within the component. **Interactive Triggers** Enable hover-based activation with optional invert logic for creative interaction patterns. ## Use Cases **Brand Consistency** — Tint images to match your brand's color palette across your entire site. **Artistic Direction** — Create a cohesive look across a grid of disparate images. **Hero Sections** — Add dramatic duotone effects to hero images for visual impact. **Portfolio Galleries** — Apply consistent color grading to showcase work professionally. ![VFX Image Duotone Preview](/framerhub/img/components/control/vfx-image-duotone.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VFX Image Duotone in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Image Settings** - Image: Choose your image source - Image Fit: Select Cover, Contain, or Fill display mode **Color Settings** - Color 1: Set the shadow/dark tones color - Color 2: Set the highlight/light tones color **Animation & Trigger** - Trigger: Choose Always or On Hover activation - Invert Hover: Flip the hover logic when trigger is set to Hover - Speed: Control animation speed (0 for static, up to 5 for fast) ### Quick Tips **Best Colors** — High contrast between Color 1 and Color 2 creates the most dramatic duotone effect. Try complementary colors for bold results. **Static vs Animated** — Set Speed to 0 for a clean, static duotone. Increase speed for subtle color shifts that add life. **Hover Effects** — Use Hover trigger with Invert to reveal the original image on hover while showing duotone by default. **Image Quality** — Use high-resolution images for best results with the WebGL shader. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This VFX Image Duotone gives you the power to apply professional-grade color grading with zero design software required. The WebGL-powered effect runs smoothly on all devices, and the intuitive controls make it easy to achieve stunning results in seconds. --- --- - **Page:** VFX Image Glitch - **Source:** https://framerhub.io/components/vfx-image-glitch ## VFX Image Glitch A high-performance, customizable glitch effect for Framer that adds a cyber-punk or retro-tech aesthetic to your site. ## Features **Smooth Hover Transitions** Unlike basic CSS filters, this uses WebGL for a fluid, high-end feel. **Fully Responsive** Works perfectly on all device sizes. **Highly Customizable** Control when the glitch happens to match your user experience. ## Use Cases **Hero Sections** — Create impactful, edgy hero images that grab attention immediately. **Interactive Cards** — Reveal the effect only when a user hovers, encouraging exploration. **Portfolios** — Add a creative touch to project thumbnails with a unique visual style. ![VFX Image Glitch Preview](/framerhub/img/components/control/vfx-image-glitch.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VFX Image Glitch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Image Settings** - Image: Choose your image - Image Fit: Select Fill, Cover, or Contain **Effect Controls** - Speed: Adjust glitch animation speed (0.1-10) - Strength: Control distortion intensity (0-3) - RGB Shift: Chromatic aberration amount (0-10) - Scanlines: CRT scanline intensity (0-2) - Block Glitch: Enable random block color swapping **Trigger Options** - Trigger: Choose "Always" or "On Hover" - Invert Hover: Flip the hover logic ### Quick Tips **Best Performance** — Default settings work great. For subtle effects, use Speed 0.5-1.0. For intense glitching, try Speed 3.0+. **Retro Feel** — Increase Scanlines to 1.5+ for that classic CRT monitor look. **Hover Interactions** — Set Trigger to "On Hover" for interactive reveals that engage users. **RGB Shift** — Higher values (5+) create dramatic chromatic aberration effects. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Instantly add a premium, interactive layer to your images without writing code. Perfect for portfolios, hero sections, and creative agency sites where you want to stand out. --- - **Page:** VFX Image Liquid - **Source:** https://framerhub.io/components/vfx-image-liquid ## VFX Image Liquid Create a mesmerizing liquid distortion effect that brings your static images to life with smooth, organic wave-like motion. ## Features **Fluid Motion** Simulates a realistic liquid surface with adjustable wave patterns and organic secondary waves for a natural feel. **Customizable Intensity** Control the strength of the distortion from subtle ripples to dramatic warping effects. **Flexible Triggers** Set the effect to run continuously or reveal on hover with optional invert mode. **Image Fit Options** Choose how your image displays: Fill stretches to fit, Cover maintains aspect ratio and fills the container, Contain fits the entire image within bounds. ## Use Cases **Abstract Art** — Turn ordinary photos into abstract, moving art pieces. **Hero Sections** — Create dynamic, eye-catching hero backgrounds. **Product Showcases** — Add visual interest to product images on hover. **Portfolios** — Make portfolio images interactive and memorable. ![VFX Image Liquid Preview](/framerhub/img/components/control/vfx-image-liquid.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VFX Image Liquid in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Image Settings** - Image: Upload your image or connect to CMS - Image Fit: Choose Fill, Cover, or Contain **Effect Settings** - Strength: Control distortion intensity (0-10) - Speed: Adjust animation speed (0-5) - Scale: Set wave pattern scale (1-50) **Trigger Settings** - Trigger: Choose "Always" for constant effect or "On Hover" for interactive - Invert Hover: Flip the hover logic (effect on mouseout) ### Quick Tips **Subtle Effects** — Use strength 1-3 for elegant, subtle liquid motion. **Dramatic Distortion** — Use strength 5+ for bold, eye-catching effects. **Wave Size** — Lower scale values create tighter, faster waves. Higher values create larger, slower waves. **Hover Interactions** — Pair with "On Hover" trigger for engaging user interactions. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Instantly transform static images into dynamic, attention-grabbing visuals. The liquid effect adds a modern, premium feel to any project without complex setup or coding required. --- --- - **Page:** VFX Image Pixelate - **Source:** https://framerhub.io/components/vfx-image-pixelate ## VFX Image Pixelate A retro-inspired pixelation transition for modern, high-impact reveals. Combines nostalgia with WebGL-powered performance. ## Features **Smooth Transitions** A fluid transition from pixelated to clear (or vice versa) using spring physics. **Retro Aesthetic** Adds a digital, 8-bit feel to your image reveals. **Performance Optimized** Uses efficient shaders to ensure 60fps animations. **Fully Responsive** Adapts seamlessly to any container or screen size. ## Use Cases **Product Reveals** — Start pixelated and reveal the sharp product image on hover. **Gallery Transitions** — Add a unique texture to your grid layouts. **Retro Themes** — Perfect for 8-bit or brutalist design aesthetics. **Feature Highlights** — Draw attention to key visuals as the user interacts. ![VFX Image Pixelate Preview](/framerhub/img/components/control/vfx-image-pixelate.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VFX Image Pixelate in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Image Settings** - Image: Choose your image source - Image Fit: Select Fill, Cover, or Contain **Effect Settings** - Strength: Effect intensity (0-2) - Pixel Size: Size of pixels (1-100) **Trigger Options** - Trigger: Choose "Always" or "On Hover" - Invert: Flip the hover logic ### Quick Tips **Subtle Reveals** — Use strength 0.5 and large pixel size (50+) for elegant reveals. **8-Bit Feel** — Small pixel size (5-10) creates that classic retro gaming look. **Hover Interactions** — Set trigger to "On Hover" for interactive image reveals. **Performance** — Larger pixel sizes render faster on mobile devices. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Combines nostalgia with modern performance. Great for revealing product shots or adding character to image galleries without sacrificing load times. --- --- - **Page:** Volumetric Galaxy - **Source:** https://framerhub.io/components/volumetric-galaxy ## Volumetric Galaxy Add a stunning cosmic touch to your site with this volumetric galaxy component. It renders a 3D spiral galaxy using raymarching for a true sense of depth and volume. ## Features **True Volumetric Rendering** Uses advanced raymarching techniques to create a galaxy that isn't just a flat image, but a volume you can peer into. **Performance Optimized** Includes automatic quality scaling to ensure smooth performance on all devices, from high-end desktops to mobile phones. **Fully Customizable** Control everything from the spiral tightness and density to the rotation speed and colors. ## Use Cases **Hero Sections** Create an immersive first impression with a galaxy background that draws users in. **Creative Portfolios** Showcase your appreciation for modern web graphics with this high-end effect. **Space-Themed Projects** Perfect for sci-fi, astronomy, or future-tech related websites. ![Volumetric Galaxy Preview](/framerhub/img/components/control/volumetric-galaxy.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Volumetric Galaxy in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization **Appearance** - **Spiral Tightness**: Adjust how wound up the arms are. - **Density**: Control how "thick" the galaxy fog looks. **Animation** - **Speed**: Make it a slow, majestic swirl or a fast-spinning vortex. - **Rotation**: Add subtle 3D rotation on X and Z axes. ### Quick Tips **Best Performance** — Leave the Quality setting on "Auto" for the best balance of visuals and speed. **Dark Mode** — This component shines best on dark backgrounds where the additive blending can really pop. **Layering** — Place text with a generic drop-shadow over it for excellent readability against the stars. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Volumetric Galaxy brings a cinematic, high-end feel to any project with zero effort. It’s not just a background; it’s an experience that captivates users instantly, making it perfect for landing pages that need to make a bold statement. --- - **Page:** Warp Tunnel - **Source:** https://framerhub.io/components/warp-tunnel ## Warp Tunnel A classic high-speed visual effect. Perfect for loading screens, tech backgrounds, or retro-futuristic themes. ![Warp Tunnel Preview](/framerhub/img/components/control/warp-tunnel.jpg) ## Features **Infinite Loop** Seamlessly loops to create the illusion of endless forward motion. **Wireframe Style** Uses a clean wireframe aesthetic that sits well behind content without being distracting. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. --- - **Page:** Wave Type - **Source:** https://framerhub.io/components/wave-type ## Wave Type Add a calming, fluid motion to your text with Wave Type. This component maps your typography onto a 3D plane that ripples and flows like fabric or water. ## Features **3D Text Mapping** Your text is rendered into a high-quality texture and draped over a 3D plane geometry. **Wave Animation** A smooth sine-wave distortion ripples through the text, creating a hypnotic relaxing effect. **Interactive 3D** Includes auto-rotation that can be adjusted or combined with mouse interactions. **Customizable Styling** Full control over text colors, background colors, and typography branding. ## Use Cases **Hero Sections** — Create a sophisticated, abstract background for your landing page. **Mood Setters** — Perfect for wellness, spa, or creative portfolio sites. **Typography Showcases** — Display fonts in a unique, dimensional way. ![Wave Type Preview](/framerhub/img/components/control/wave-type.jpg) ## How to Use ### Installation 1. Copy the component URL 2. Open your Framer project 3. Paste the component (Cmd/Ctrl + V) ### Customization **Text & Font** Enter your text and select any font. Bold, typographic fonts work best for the wave effect. **Colors** - **Text Color**: The color of the letters. - **Plane Color**: The background color of the 3D plane itself (fills the gaps). **Animation** - **Wave Speed**: How fast the ripples move. - **Auto Rotate**: Enable/disable slow rotation of the plane. - **Rotation Speed**: Speed of the rotation. ### Quick Tips **Matching Colors** — Set the **Plane Color** and **Background** to the same hex code to make the text appear floating in space without visible edges. **Font Looping** — Use repetitive text (e.g., "RELAX RELAX RELAX") to create a seamless pattern effect. **Performance** — This uses Three.js. It is performant, but keeps an eye on CPU usage if you have multiple instances. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! --- - **Page:** Wire Terrain - **Source:** https://framerhub.io/components/wire-terrain ## Wire Terrain The quintessential synthwave background. This flying grid landscape instantly gives your site a retro-futuristic 80s vibe. ## Features **Customizable Terrain** Adjust the grid color to match your brand or theme perfectly. The background is transparent, making it easy to layer over any content. **Retro Vibes** Perfect for music sites, retro portfolios, or any project that needs a touch of digital nostalgia. ## Use Cases **Hero Sections** — Use it as a dynamic background for your main landing page to grab attention immediately. **Music Portfolios** — Perfect for synthwave, electronic, or retro-style music artist websites. **Tech Landing Pages** — Add a "cyber" feel to crypto, blockchain, or futuristic tech product pages. ![Wire Terrain Preview](/framerhub/img/components/control/wireterrain.jpg) ## How to Use ### Installation **VIDEO PLACEHOLDER: Installation Tutorial** 1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find Wire Terrain in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization You can fully customize the look and feel of the terrain. **Appearance** - **Terrain Color**: Change the grid lines to any color. - **Speed**: Adjust how fast the terrain moves towards the camera. ### Quick Tips **Layering** — Since the background is transparent, place a dark gradient or solid color behind this component for the classic "glowing grid in space" look. **Depth** — Add a subtle vignetting overlay or fade-out gradient at the top of the component to hide the horizon line smoothly. **Performance** — The component automatically adjusts quality based on the device, but you can force specific quality settings if needed. ## License **Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This It captures the nostalgia of 80s computer graphics in a lightweight, modern package that works seamlessly in Framer. No complex 3D setup required—just drag and drop for instant retro vibes. --- - **Page:** Image Slit Scan | FramerHub - **Source:** https://framerhub.io/components/image-slit-scan - **Description:** Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions. Premium Framer component for client sites, portfolios, and. # **Image Slit Scan ** Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions. One-time payment Lifetime updates Commercial license ## **Overview** Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions. - Smooth slit-scan distortion effect - Hover or always-on trigger modes - Adjustable strength and frequency controls - Overflow settings for edge effects - Works with any image or aspect ratio - Lightweight and performance-optimized - Zero coding required ## VFX Image Slit Scan A futuristic, sci-fi inspired distortion effect for unique visual storytelling. Uses Three.js WebGL shaders for high-performance slit-scan animations. ## Features**Three.js Powered** High-performance shader-based effect using Three.js WebGL renderer.**Smooth Transitions** Spring-based animation for fluid hover and trigger states.**Customizable Effect** Adjust strength and frequency for subtle or chaotic distortions.**Trigger Options** Always active or hover-triggered with invert option. ## Use Cases**Tech Landing Pages** — Reinforce a "future-forward" brand identity.**Experimental Portfolios** — Showcase your willingness to break design norms.**Music & Event Sites** — Create a glitchy, high-energy visual atmosphere.**Product Launches** — Reveal new tech products with a matching aesthetic.![Image Slit Scan Preview](https://framerhub.io/framerhub/img/components/control/image-slit-scan.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find VFX Image Slit Scan in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization**Image Settings**- Image: Select your image (responsive image support) - Image Fit: Choose Fill, Cover, or Contain**Effect Settings**- Strength: Intensity of the distortion (0-2) - Frequency: Wave frequency of the slit-scan (1-200)**Trigger Options**- Trigger: Always or On Hover - Invert: Flip the hover logic ### Quick Tips**Subtle Effects** — Use strength 0.3-0.5 for elegant, professional distortions.**High Energy** — Increase frequency (100+) and strength (1.5+) for chaotic, glitchy effects.**Hover Reveal** — Set trigger to Hover with Invert enabled to show effect on mouseover. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This Creates a sense of motion and depth that static images can't match. Ideal for tech brands, experimental layouts, and music event sites where you need a cutting-edge vibe. --- ### **Image Slit Scan - $9** Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub. --- - **Page:** Framer Plugins: The 14 Best for 2026 (Picked by a Plugin Builder) - **Source:** https://framerhub.io/blog/best-framer-plugins - **Description:** A curated list of the best Framer plugins in 2026. CMS filtering, forms, components, tables, scheduling, and more. Accurate plugin details, no invented features. The best Framer plugins for most projects are CMS Filter for search and filtering, Form Kit for advanced forms, FramerSync for pulling Notion, Airtable or Google Sheets data into the CMS, and FrameWoo for selling through WooCommerce. Below are 14 plugins worth installing, with prices and honest limits. > **Key Takeaways** > > - Plugins fill Framer's gaps: advanced CMS filtering, multi-step forms, external data sync, e-commerce and bulk CMS edits. > - Install them from the Plugins panel inside Framer; many have free tiers or are free outright. > - Our own tools are on this list where they solve the problem, alongside third-party picks we'd use ourselves. > - For forms that write to Google Sheets, Framer's built-in form already does it natively. Framer's built-in tools cover a lot. But once you're building real client projects, you hit limits. CMS filtering that breaks when you have 30+ items. Forms with no validation. Tables that only work in CMS Rich Text. Scheduled publishing that requires you to be online and click Publish manually. That's where Framer plugins come in. The right ones save hours per project. The wrong ones add noise. I build [Framer plugins](/plugins) used by 2,000+ Framer users. This list includes our own tools where they genuinely solve the problem, alongside strong third-party picks. You'll also find honest notes about where competitors have bigger install bases or different strengths. --- ## Quick comparison: best Framer plugins by category
Plugin Category Price Best For
CMS Filter CMS / Filtering Free / $79 / $179 Directory sites, real estate, job boards
Form Kit Forms Free / $99 / $189 Multi-step forms, validation, conditional logic
FramerHub Components Design workflow 20+ free, $99 one-time for all 90+ Agencies building multiple client sites
FrameWoo E-commerce Free / $119 / $279 one-time Selling WooCommerce products from a Framer site
Table Creator Tables Free Pricing tables, product specs, documentation
CMS Scheduler CMS Free / $49 per year / $99 per year Scheduled publishing, content calendars
CMS Find & Replace CMS Free Bulk CMS edits, rebranding, URL migrations
Asset Vault Workflow Free Organizing and sharing component URLs
Superfields CMS Paid Broad CMS power-ups and field types
FramerForms Forms Free + Paid High install base, straightforward forms
FramerSync CMS / Productivity Paid subscription Notion, Airtable, Google Sheets sync
Lummi Design / Assets Free + Paid Stock photos, illustrations, 3D assets
Shades & Tints Design / Color Free Color palette generation
Google Search Console SEO Free Live SEO metrics inside Framer
--- ## CMS and filtering plugins CMS plugins solve one of Framer's most common friction points: displaying and filtering dynamic content at scale without building hundreds of variants or writing custom code. ### CMS Filter (FramerHub) ![CMS Filter plugin for Framer showing realtime filtering on a directory site with price slider and category chips](/framerhub/img/blog/best-framer-plugins/framer-cms-filter.webp) **The problem it kills**: You're building a real estate site, a job board, or a product catalog. Your client needs users to filter by location, price range, and type at the same time. Native Framer Dynamic Filters handle one dropdown. That's where they stop. **What it does**: CMS Filter adds realtime search across multiple CMS fields, range sliders with dual handles, active filter chips, result counts, sort controls, and 3-level composable AND/OR query logic. Cross-breakpoint sync means the same filter works in different UI layouts on desktop, mobile, and overlay. Drag in the component, connect your CMS collection, configure in about five minutes. **Unique to this plugin**: Multi-field search (title + description + tags + author in one input), option counts per filter choice, single and multi-reference field filtering, and auto-schema detection for CMS enum fields. These don't exist in native Framer. **Best for**: Real estate listings, car marketplaces, job boards, resource libraries, template directories. Any site where visitors need to narrow down more than 30 items. **Price**: Free tier (basic filtering), $79 Personal lifetime, $179 Agency lifetime. One-time, unlimited client projects. **Honest note**: Superfields has more total users across its broader set of CMS features. CMS Filter is purpose-built for filtering depth specifically. [Browse CMS Filter](/plugins/framer-cms-filter) | [Live demos at framercmsfilter.com](https://framercmsfilter.com) --- ### CMS Scheduler (FramerHub) ![CMS Scheduler plugin for Framer](/framerhub/img/blog/best-framer-plugins/cms-scheduler.webp) **The problem it kills**: You manage a blog for a client. A post needs to go live Tuesday at 9am. You have to be online to click Publish. For anyone coming from WordPress, this feels like a step backwards. **What it does**: Connect a project, choose a collection, pick a date and time. The post publishes automatically. Track pending and failed runs. View logs without leaving Framer. Backend runs on Cloudflare Workers. **Important caveat**: A scheduled publish also pushes any other unpublished site changes at that moment. If you have WIP edits, use a separate production project or avoid scheduling until those are ready. **Best for**: Marketers scheduling campaign posts, founders shipping announcements on a timed basis, agencies handling client content calendars, anyone batch-writing content in advance. **Price**: Free tier holds 3 posts in the queue at once on one connected project. Pro $49/year (unlimited queue, one project). Unlimited $99/year (unlimited queue and projects). [Browse CMS Scheduler](/plugins/cms-scheduler) --- ### CMS Find & Replace (FramerHub) ![CMS Find and Replace plugin for Framer](/framerhub/img/blog/best-framer-plugins/cms-find-replace.webp) **The problem it kills**: A client rebrands. Their company name appears in 200 blog posts. Or a URL pattern changes across a CMS collection. In native Framer, you edit each item one by one. **What it does**: Search and replace across an entire CMS collection in one pass. Filter by field scope and item status. Case sensitive, whole word, and regex matching. Preview matches before applying. Export a CSV report. Undo the last replace action. **Best for**: Rebranding projects, URL migrations, fixing repeated errors across large collections. This is a CMS hygiene tool. Infrequent, but when you need it, nothing else does it cleanly. **Price**: Free. [Browse CMS Find & Replace](/plugins/cms-find-replace) --- ### FramerSync **What it does**: Syncs Notion databases, Airtable bases, and Google Sheets directly into Framer CMS collections. Changes in your source update in Framer automatically. **Best for**: Projects where clients manage content in Notion or Airtable and want the Framer site to reflect changes without re-publishing. SaaS sites where product data lives in a spreadsheet. **Price**: Paid subscription. Free trial available. **Honest note**: FramerSync is the established option for multi-source CMS sync. It works well for data-heavy projects. --- ## Forms plugins Framer's native forms work for the simplest contact forms. The moment a client needs multi-step flow, conditional logic, file uploads, or validation that shows errors inline, you need more. ### Form Kit (FramerHub) ![Form Kit plugin for Framer showing multi-step form with inline validation and file upload](/framerhub/img/blog/best-framer-plugins/framer-form-kit.webp) **The problem it kills**: "I need a multi-step form like Typeform but inside Framer, not as an iframe." Embedding Typeform or Tally breaks design consistency. The form stops looking like the site. Form Kit solves this natively inside Framer. **What it does**: 35+ form components with real validation, multi-step flows, conditional logic, file uploads, star ratings, signature pads, date pickers, and more. Validation runs on blur with inline error messages. Conditional logic shows or hides fields based on prior answers. Multi-step navigation validates the current step before advancing. Auto-saves to localStorage. **What's in each tier**: - Free (10 components): Text, Email, Number, Phone, URL, Textarea, Select, Checkbox, Submit. Full validation engine, conditional logic, and auto-save included. - $99 Premium (21 more): Radio groups, toggles, date/time pickers, sliders, star ratings, NPS, file uploads, hidden fields, reCAPTCHA, multi-step navigation, progress bars, and more. - $189 Pro (5 more): Signature pad, rich text editor, color picker, image button, country selector with flags. **What's not in Form Kit yet**: Webhooks and Stripe payments have not shipped. Don't build flows that depend on those if you need them today. **Best for**: Client onboarding forms, lead capture, job applications with file uploads, multi-step questionnaires, any form where the design needs to match the site. **Price**: Free tier, $99 Premium lifetime, $189 Pro lifetime. **Honest note**: FramerForms has a significantly larger marketplace install base than Form Kit — it has been around longer and is a solid choice. Form Kit's differentiation is the 3-tier structure, 40+ components, and no-iframe native integration. [Browse Form Kit](/plugins/framer-form-kit) | [Live demos at framerformkit.com](https://framerformkit.com) --- ## Design and component plugins ### FramerHub Components ![FramerHub Components plugin inside Framer showing 90+ searchable code components](/framerhub/img/blog/best-framer-plugins/framerhub-components.webp) **The problem it kills**: You buy components from five different sellers on Gumroad, Lemon Squeezy, and Polar. They arrive via email. You track updates manually. One breaks after a Framer update and the seller is unresponsive. On the next client project you start over. **What it does**: 90+ code components in one searchable plugin inside Framer. Search and filter without leaving the editor. Drag and drop into any project. Auto-updates from the server when fixes ship. 20+ components are free. 1-2 new pro components added weekly. **Key point**: Most of these are code components, meaning functional behavior beyond design layouts. That's the differentiator vs. design-only libraries. **Best for**: Agencies and freelancers building three or more client projects per year who need a consistent, updateable component library. **Price**: 20+ free components. Individual components $5–$29. All 90+ components in the plugin: $99 one-time. **Honest note**: Flowbase has 3,500+ components. Cosmoe has over 1,000. FramerHub Components competes on code depth and operational efficiency, not quantity. The value is 90 components you'll actually use, auto-updating, in one place. [Browse Components](/components) --- ### Shades & Tints **What it does**: Generates a full color palette, all shades and tints, from any color you select inside Framer. Apply the palette to your project in one click. **Best for**: Building a complete color system quickly, especially for client projects where brand colors need multiple weight variants. **Price**: Free. **Why it's on this list**: Color consistency across a large project is tedious to manage manually. This handles it in seconds. --- ### Clonify **What it does**: A library of pre-built design sections and full page layouts you can drop into any Framer project. Hero sections, feature blocks, pricing tables, footer templates. **Best for**: Moving faster on initial page structure. Freelancers building multiple similar sites where starting from pre-built sections saves 30 to 60 minutes per project. **Price**: Freemium. Core sections free, premium sections behind a paid tier. **Honest note**: Clonify sections have a distinct style. They work well as starting points but usually need customization to match a client's brand. --- ## E-commerce plugins ### FrameWoo (FramerHub) **The problem it kills**: Framer has no native cart or checkout. Stores end up on a separate platform, or behind "Buy" buttons that leave the site. **What it does**: Connects a WooCommerce store to Framer. Display products, keep prices, stock and variations in sync with WooCommerce, and run cart logic on your Framer site. Our Orlea store template is built on it. **Best for**: Brands that already run WooCommerce, or want WooCommerce's commerce back end with a Framer front end. **Price**: Free plan, then Launch $119 or Scale $279, one-time. [See FrameWoo](/plugins/woocommerce) --- ## Table plugins Framer's native tables only work inside CMS Rich Text fields. That's a hard limit. You can't put a pricing comparison table on a landing page, a product spec table on a product page, or a data table on a dashboard. ### Table Creator (FramerHub) ![Table Creator plugin for Framer showing interactive pricing comparison table outside CMS Rich Text](/framerhub/img/blog/best-framer-plugins/table-creator.webp) **The problem it kills**: You need a pricing comparison table on a landing page. Native Framer says no unless you're in a CMS Rich Text field. **What it does**: Open the plugin, set columns and rows, pick a theme, hit Create. Edit data inline or paste from a spreadsheet. CSV import supported. Tables work on any page. Interactive sorting, filtering, and pagination are toggleable. Configure items per page and pagination style. Three built-in themes: Minimal Light, Soft Grid, and Dark Pro. **Best for**: Pricing comparison tables, product spec pages, documentation tables, dashboard data, feature comparison tables. Anywhere you need structured data outside of CMS Rich Text. **Price**: Free. [Browse Table Creator](/plugins/table-creator) --- ## Asset management plugins ### Asset Vault (FramerHub) ![Asset Vault plugin for Framer](/framerhub/img/blog/best-framer-plugins/asset-vault.webp) **The problem it kills**: You collect reusable Framer component URLs and Remix links across client work, experiments, and template research. They end up scattered across bookmarks, Slack messages, and browser tabs. **What it does**: Save component module URLs and Framer Remix links in one organized vault inside Framer. Organize with libraries, categories, tags, thumbnails, and favorites. Search and filter saved assets. Shared libraries let you invite team members by email and set per-user add/edit/delete permissions. **Best for**: Agencies with multiple team members. Prolific builders who accumulate reusable assets across projects. **Price**: Free. Note: Asset Vault just launched. No user reviews yet. [Browse Asset Vault](/plugins/asset-vault) --- ## SEO plugins Framer handles SEO basics well: meta tags, sitemaps, Open Graph. These plugins add visibility you don't get from the native editor. ### Google Search Console ![Google Search Console plugin for Framer showing live SEO data inside the design canvas](/framerhub/img/blog/best-framer-plugins/google-search-console.webp) **What it does**: Connects to your Google Search Console account and displays live SEO metrics directly inside Framer's canvas. Impressions, clicks, average position, and top performing keywords per page. **Best for**: Teams who want to monitor site performance without switching between Framer and Google Search Console. Useful for client reporting when you need to show ranking progress. **Price**: Free. --- ## Productivity plugins ### Lummi ![Lummi stock asset plugin for Framer showing photography and 3D asset search](/framerhub/img/blog/best-framer-plugins/lummi.webp) **What it does**: A curated library of stock photos, illustrations, and 3D assets, searchable directly inside Framer. Drop assets without leaving the canvas. Lummi focuses on distinctive visuals that don't look like the same five Unsplash photos everyone uses. **Best for**: Designers who need high-quality visuals during the build phase without the context switch to external stock sites. **Price**: Free tier. Paid tier for full asset library. --- ### CMS Export **What it does**: Exports Framer CMS collections as CSV files, and imports CSV data back in. No configuration required. **Best for**: Migrating CMS data from other platforms (Webflow, Airtable), backing up content before major changes, seeding a new CMS collection from a spreadsheet. **Price**: Free. **Honest note**: This is a utility plugin. You won't use it every day. When you need it, nothing else does the job as cleanly. --- ## How to pick the right Framer plugins Not every project needs every plugin. Here's how to approach the decision. (Starting from scratch? Pick a base from our [Framer templates roundup](/blog/best-framer-templates) first, then add plugins for the gaps.) **Start with the project, not the plugin.** Does your client need filtering? CMS Filter. Does the form need validation and multi-step flow? Form Kit. Are you rebuilding the same UI patterns across five client sites? Components. Match the tool to the actual project need. **Check what Framer handles natively first.** Framer has improved fast. Dynamic Filters cover basic category filtering. The native form handles simple contact forms. Plugins earn their place when native tools hit their ceiling. **One-time vs recurring cost matters.** Most FramerHub plugins are one-time purchases. For a freelancer billing $3,000-$8,000 per client site, a $79 plugin that saves two hours is clear ROI on the first project. If you're building multiple sites per year, check whether the [All Access plan](/all-access) makes more sense than individual purchases. **Install base is a signal, not the whole story.** FramerForms has 12,600+ installs. Superfields has more users than CMS Filter. These are real facts. A larger install base usually means more community answers, more tutorials, and more battle-tested usage. Factor that in. Newer or smaller products sometimes solve narrower problems better, but they carry more uncertainty. **Creator reachability matters more than it sounds.** A purchased plugin that breaks after a Framer update and has no support is worse than not buying it. Check that the creator is active and responsive before spending money. ![Decision flowchart for choosing the right Framer plugin for your project type](/framerhub/img/blog/best-framer-plugins/decision-flowchart.webp) --- ## FramerHub plugin ecosystem: what's accurate For transparency, here's the real state of FramerHub's plugin lineup as of October 2026: **Strongest products**: CMS Filter has the clearest differentiation and the most traction of anything we ship. Form Kit is further along than its install base suggests: 35 components across 3 clear tiers. **Newer, smaller tools**: Table Creator, CMS Scheduler, CMS Find & Replace, and Asset Vault are free utilities. They solve real problems but do not have the install base the older products do yet. **Live now**: CMS Filter, Form Kit, Components, FrameWoo (WooCommerce), CMS Scheduler, Table Creator, CMS Find & Replace and Asset Vault. **Coming soon, not shipped yet**: Gallery Kit, Shopify, Notion Sync and Membership have pages on our site, but they aren't available to install. Don't plan a project around them until they launch. All FramerHub plugins use one-time pricing (no subscriptions), include free tiers, are licensed for unlimited client projects, and have a 14-day refund policy. [Browse all FramerHub plugins](/plugins) --- ## FAQ ### What are the best free Framer plugins in 2026? The best free Framer plugins in 2026 include Lummi (stock photos, illustrations, 3D assets), Shades and Tints (color palette generation), Google Search Console (live SEO metrics inside Framer), and CMS Export (CSV import/export for CMS collections). FramerHub ships five free plugins: Table Creator, CMS Find and Replace, Asset Vault, and the free tiers of CMS Filter and CMS Scheduler. ### What is the best Framer CMS plugin for filtering and search? CMS Filter by FramerHub handles realtime search, multi-field filtering, range sliders, sort controls, active filter chips, and cross-breakpoint sync. Free tier available. $79 Personal or $179 Agency, both one-time. Superfields is a broader alternative with more total users across a wider set of CMS features. [See CMS Filter](/plugins/framer-cms-filter). ### What's the best Framer form tool that syncs with Google Sheets? Framer's built-in form. It can send submissions straight to a Google Sheet (or email, or a webhook) without a plugin. Use Form Kit when you need multi-step flows, validation or advanced fields; it doesn't add third-party integrations of its own. For syncing existing Sheets data into the CMS, FramerSync covers Google Sheets, Notion and Airtable. ### Are Framer plugins free? Many are. Color tools, SEO dashboards, asset libraries, and utility plugins typically have free tiers or are completely free. Plugins that solve complex workflow problems, advanced CMS filtering, full form systems, component libraries, are usually paid as one-time purchases. Most FramerHub plugins have free tiers. [Browse all plugins](/plugins). ### How do I install a Framer plugin? Open your Framer project. Click the plugin icon in the left sidebar (or press P). Search for the plugin by name in the Framer Marketplace. Click Install. The plugin appears in your sidebar immediately and is available across all your projects on that account. ### What is the difference between FramerHub plugins and other Framer plugins? FramerHub focuses on specific problems and solves them deeply. All products use one-time pricing with no subscriptions, include free tiers, and are licensed for unlimited client projects. Superfields has more total users. FramerForms has a larger form plugin install base. FramerHub differentiates on code component depth, focused problem-solving, one-time pricing, and a creator who is directly reachable for support. ### Can I use Framer plugins on client projects? Yes. All FramerHub plugins are licensed for unlimited client projects with a single purchase. Check individual plugin licenses for third-party tools, most are similarly structured but confirm before purchasing. --- ## Bottom line The best Framer plugins in 2026 are the ones that solve the specific problem you're hitting on your current project. For most client work, a short stack does most of the work. CMS Filter for any directory or listing site with multi-field filtering needs. Form Kit if you need multi-step or conditional forms inside Framer. The Components plugin if you're building multiple sites and want a consistent, auto-updating library. Free tools like Table Creator, Lummi, and Google Search Console on every project. Be honest about what Framer already handles. Check your options, including competitors. Buy what solves the actual problem. [Browse the full FramerHub plugin catalog](/plugins) to see what's available. *Last updated: June 2026* --- - **Page:** Framer Templates: Where to Find the Best Free and Paid Ones (2026) - **Source:** https://framerhub.io/blog/best-framer-templates - **Description:** Where to find Framer templates in 2026: the Framer Marketplace, free template lists, paid template shops, and how to pick, use and customise one. The best place to find Framer templates is the official Framer Marketplace. It has free and paid templates across about 50 categories, and paid templates in the listing we reviewed in October 2026 cost $29 to $149. For more free options, use curated lists; for more paid ones, template shops like Creative Market and Flowbase sell Framer templates too. We build Framer plugins and components used by 2,000+ Framer users, and we've started publishing our own templates as well, so we look at a lot of them. This guide lists where to find Framer templates, what free ones leave out, how to install one, and how to tell a good template from a pretty screenshot. > **Key Takeaways** > > - The Framer Marketplace is the main source: around 50 categories, a free filter, and paid templates from about $29 to $149. > - Free templates open straight into your account; paid ones are bought on the creator's checkout and arrive as a remix link. > - Framer doesn't handle template payments or refunds. The creator sets the licence and refund policy, so read them before buying. > - Judge a template by its CMS structure and mobile layouts, not its hero section. > - Directory, real estate and store templates need more than looks: filtering and commerce decide whether they work. ## Where to find Framer templates
Source Free templates Paid templates Best for
Framer Marketplace Yes, with a price filter From ~$29 to ~$149 Everything; the widest choice
VictorFlow free list 40 free templates, linked to Framer No Browsing free options in one page
Creative Market None seen in the Framer category Visible listings $9–$80 Budget paid templates from independent designers
Flowbase None seen $24 each Low-cost premium templates
Craftwork Not labelled Not shown on listing Design-led templates alongside UI kits
FramerHub templates 1 (Orlea) $49–$69 Store and real estate sites that need commerce or filtering
### 1. Framer Marketplace Framer's own [template marketplace](https://www.framer.com/marketplace/templates/) is where most people should start. It's organised into roughly 50 categories, from Portfolio, SaaS and Agency to Real Estate, Restaurants and Weddings, and you can sort by price to surface the free ones. The workflow is the simplest of any source. Free templates have a "Use for Free" button that opens the template in Framer and adds it to your account. Paid templates link to the creator's checkout, and the remix link arrives by email after you buy. ### 2. Free templates on the Marketplace A few of the free templates on the Marketplace's free listing when we checked in October 2026, by name and creator: - **Tabfolio** by Sebastian - **Powder** and **Makro** by Nick Stepuk - **Kern** by Aathif Thajudeen - **Nina Park** by Akriti Jaiswal - **Coska** by Pixasquare - **Formo** by Kadir Calik - **ProLab** by Green Yang The free listing changes as creators publish and reprice, so treat this as a starting point and sort the Marketplace by price for the current set. ### 3. Curated free template lists If you'd rather scan one page than click through categories, curated lists help. VictorFlow's [free Framer templates roundup](https://www.victorflow.com/blog/best-free-framer-templates) links 40 free templates directly to Framer, and the templates are free to duplicate and edit. Creators also share free templates on their own sites and in Framer's community space, which Framer relaunched with Framer 3.0 in June 2026. ### 4. Paid template shops outside Framer Some designers sell Framer templates on general template marketplaces too: - **Creative Market** has a large Framer category. The listings we saw ran from $9 to $80. - **Flowbase** sells Framer templates at $24 each. - **Craftwork** lists Framer templates next to its UI kits and design assets. Check how each one delivers the template. Framer templates are installed with a remix link, so make sure the listing includes one rather than only a design file. ### 5. FramerHub templates We publish templates for the site types where looks alone aren't enough, because the site has to sell or search: - **Orlea** (free): a fine-jewelry store template that runs on FrameWoo, our WooCommerce plugin for Framer, with a live cart, checkout and customer accounts. - **Aurelle** ($49): a jewelry and luxury boutique store, also on FrameWoo. - **Mercato** (included with our plugins): a multi-category store with search, wishlist, cart and account pages. - **Terrane** ($69): a real estate template with a price range slider and filters for status, bedrooms, bathrooms and property type across a CMS listing catalogue. ## Free vs paid Framer templates Free templates are a good way to learn Framer or launch a simple site. The difference with paid ones shows up after launch:
Free templates Paid templates
CMS Often minimal or hard-coded content Usually CMS-driven blogs, projects or listings
Pages Often a single page or a short set Full sites: home, about, pricing, blog, contact
Mobile layouts Variable Usually tuned per breakpoint
Support and updates Rarely Depends on the creator; check before buying
Licence Set by the creator Set by the creator; check client-use terms
For freelancers and agencies, licence terms decide whether a template can go on a client site. Framer's help centre doesn't define one licence for every template, so client use, multiple sites and resale depend on each creator's terms. The same goes for refunds: Framer [doesn't process template payments](https://www.framer.com/help/articles/how-templates-work/), so the creator handles them. ## How to use a Framer template 1. **Free template:** click "Use for Free". It opens in Framer and is added to your account. 2. **Paid template:** click "Buy", complete checkout on the creator's site, then open the remix link from your email to copy the project into your workspace. 3. **Edit it like any project.** A template is a normal Framer project once copied, so you can change content, styles, layout and components. 4. **Swap in your content through the CMS** if the template uses collections. This is faster and safer than editing pages one by one. 5. **Publish.** You can publish on a free Framer subdomain; a custom domain needs a paid site plan, from $10/month as of October 2026. ## How to pick the right template Most template regret comes from choosing on the hero section. Check these before you commit:
Site type What to check Watch out for
SaaS / startup Pricing table, changelog or blog via CMS, clear signup CTA Feature sections hard-coded into the page
Portfolio CMS-driven projects, a strong project detail page Case studies built as separate static pages
Agency Services, case studies and team as CMS collections A beautiful home page with thin inner pages
Store A real cart and checkout, not just product cards "Shop" pages that link out to nowhere
Directory / real estate Listing template page plus search and filters Native filters that can't do ranges or multiple fields
Open the template's preview on your phone before buying. Mobile layouts are where cheap templates cut corners, and they're slow to fix after the fact. ## When a template isn't enough Templates handle layout. They don't add features Framer lacks. The two gaps we see most: - **Search and filtering.** Framer's native filters cover simple dropdowns and checkboxes. Listing sites need multi-field search, price ranges and result counts, which is what [CMS Filter](/plugins/framer-cms-filter) adds to any CMS collection. - **Sections the template doesn't have.** Galleries, sliders, effects and CMS layouts can be added from [FramerHub Components](/components) without rebuilding the template. If you build templates yourself, the Marketplace is also a place to sell them. Framer's creators page says it takes a 0% cut of Marketplace sales, and our [guide to the Framer affiliate program](/blog/framer-affiliate-program-guide) covers how template sales and referral commissions stack. ## FAQ ### Are Framer templates free? Many are. The Framer Marketplace has a price filter, and free templates open straight into your account with "Use for Free". Paid templates in the listing we reviewed in October 2026 ranged from $29 to $149. ### Where can I find free Framer templates? Start with the Framer Marketplace sorted by price, then curated lists such as VictorFlow's roundup of 40 free templates. Creators also share free templates on their own sites and in the Framer community. ### How do I use a Framer template? Click "Use for Free" on a free template and it opens in Framer as a normal project. For a paid template, buy it on the creator's checkout, then open the remix link they email you. ### Can I use a Framer template for a client project? It depends on the creator's licence. Framer doesn't set one licence for all templates, so check the terms on the template's detail page or at checkout before using it for client work. ### Who handles refunds for paid Framer templates? The template creator. Framer doesn't process template payments or manage refunds; if you can't reach the creator, Framer suggests emailing [creators@framer.com](mailto:creators@framer.com). ### Can I sell my own Framer templates? Yes, on the Framer Marketplace. Framer says it takes a 0% cut of Marketplace sales, and templates are the only product type that also earns referral commission. ## Choosing your template Start with the Framer Marketplace, sort by price if budget matters, and shortlist two or three templates. Open each preview on your phone, check that the content you'll update most lives in the CMS, and read the creator's licence before client work. If the site needs to sell or search, pick a template built for that, or plan the plugin you'll add before you start customising. --- - **Page:** Framer Affiliate Program (2026): Commission, Payouts and Rules - **Source:** https://framerhub.io/blog/framer-affiliate-program-guide - **Description:** Framer's affiliate program sits inside the Creator Program. Here's how both payout channels work, what each pays, and which one is worth your time. If you went looking for the Framer affiliate program expecting a standalone sign-up page, there isn't one. Affiliate links are a feature inside the Framer Creator Program, and if you have ever published a template, plugin, component or vector set in the Marketplace, Framer enrolled you in that program automatically. The same is true if you are a verified Framer Expert. Everyone else applies manually from the Links tab. We build and sell plugins on the Framer Marketplace, so this is paperwork we deal with. Below: the two channels the Creator Program pays through, what each one is worth, the four rules that fence in the referral half, and how the money gets from a sale to a bank account. ## The Framer affiliate program sits inside the Creator Program The Framer Creator Program is the umbrella. Underneath it sit two separate earning mechanics that share one dashboard: 1. **Marketplace sales.** You publish a paid template, plugin, component or vector set. Someone buys it. You keep 100% of the revenue. Framer's creators page puts it plainly: Framer takes a 0% cut of your work. 2. **Referral commissions.** Someone signs up for Framer through your link, later upgrades to a paid subscription, and you earn up to 50% of that subscription for 12 months. Both show up in the **Links** tab of your Framer Community profile settings, which is also where the manual application lives if you have not published anything yet. One program, two revenue lines, one dashboard. If you searched for a Framer partner program and landed on a page about creators, that shared dashboard is the reason. The referral half carries a product restriction the sales half does not. Framer's Creator Program help article states that only templates are eligible for referral commissions, and that plugins, components and vector sets do not generate affiliate earnings. If you build plugins, as we do, the referral channel is closed to your products. You still keep every cent of the sale price, and the recurring subscription commission stays a template-seller's line of income. ## Where the two channels leave you
What you have Channel that pays you What it pays Where to start
A template in the Marketplace Both 100% of the sale, plus up to 50% of a referred subscription for 12 months Publish the template; enrolment is automatic
A plugin, component or vector set Marketplace sales only 100% of the sale; no referral commission Publish it, then price it properly
An audience but no product yet Referral links only Up to 50% of a referred subscription for 12 months Apply from the Links tab
A freelance or agency client base Referral links, as a side effect of work you already do Same rate, but only on brand-new Framer accounts Apply, then use it on new client sign-ups
Framer Expert verification Both Same as above; enrolment is automatic Already done
Marketplace sales are the more controllable line. You decide what to build, what to charge, and how hard to market it. Referral commissions depend on somebody else's upgrade decision landing inside an attribution window you have no say over. ## Channel one: keeping 100% of Marketplace sales Framer does not take a platform cut on Marketplace products. Set that against the 30% the mobile app stores take and the deal is unusually good for the seller. Framer keeps the distribution instead, which is the expensive half for a new listing with no audience behind it. What actually moves revenue here is the same set of things that moves any product page. A precise scope, a listing that shows the thing working, a price that reflects support you will genuinely provide, and enough search visibility that people find the product outside Framer's own gallery. If you are starting on templates specifically, our [SEO checklist for Framer templates](/blog/seo-checklist-for-framer-templates) covers the visibility half, and the guide to selling Framer templates covers the listing and pricing half. One first-hand note from running this channel: Marketplace revenue is lumpy and support-heavy in a way referral income is not. A referral link earns in the background. A product you sell brings questions, refunds, edge-case bugs and version updates with it. We sell CMS, form and component plugins on the Framer Marketplace to 2,000+ Framer users, and the support load scales with the user count whether or not the revenue does that month. Budget the hours before you budget the income. ## Channel two: the Framer affiliate program at up to 50% for 12 months Framer's creators page states the referral terms directly: up to 50% of their subscription for 12 months when they upgrade. The commission recurs with their billing rather than paying once at sign-up, so at the full 50% rate the arithmetic is half their monthly spend, twelve times: a referral paying $20 a month is worth $120 across the year, one paying $40 a month is worth $240. Four rules fence it in, and they matter more than the headline percentage. **New users only.** Framer's affiliate help article is explicit that sign-up links only work for new users, and that existing Framer accounts cannot be attributed. Every designer in your audience who already has a free Framer account is already spent. That rule undercuts most affiliate plans built on a Framer-focused audience, since such an audience is by definition mostly on Framer already. **The commission triggers on the upgrade, not the sign-up.** A free account that never converts pays nothing. Your referral income is a function of how many of your referrals need a custom domain, more pages, or a team seat, which is a function of whether you are reaching people with real projects or people browsing tools. **Template purchases outrank sign-up referrals.** If a referred user buys a template, Framer's help article says the template creator receives the commission. Two people can plausibly claim credit for the same user, and the template seller wins that tie. Worth knowing if you are sending traffic to a template you did not make. **No paid advertising.** Framer states that paid advertising which uses affiliate links is not permitted, and that violating program rules can result in removal from the program. That rules out buying traffic and arbitraging the commission, so the channel only really works on an audience you already own. Those four rules narrow the channel to one situation: you introduce Framer to people who are not on it yet and who have a project big enough to need a paid plan. Agency onboarding, client handovers, a tutorial series aimed at Webflow or WordPress refugees. Posting the same link into a community of people who already have accounts pays close to nothing. ## How Framer creator payouts actually reach you Framer runs affiliate tracking on [**Dub**](https://dub.co/), reachable from the Links tab in your Community profile settings. Payouts are processed through **Stripe**, so your payout details live in [Dub framer program](https://partners.dub.co/programs/framer/) and need to stay current. The flow, per Framer's Dub help article: 1. A referral upgrades. The commission is logged as **Pending**. 2. It stays pending for **30 days** after the upgrade, so refunds can be netted out before anything is confirmed. 3. Your eligible balance has to reach **$200** before a payout can be issued. 4. Payouts run **monthly**, and each one covers commissions earned **two months earlier**. 5. Status moves to **Processing** for roughly four business days, then lands as **Completed**. Add those up and a commission earned in the first week of March is not in your account until some time in May, assuming you cleared $200 by then. If you did not, it waits for the month you do. So a handful of referrals a month can feel like nothing is happening for a full quarter while the balance is still accumulating normally. Framer also does not withhold tax. Reporting the income is on you, according to wherever you file. ## What the ceiling looks like Framer publishes its own creator payout totals on the creators page: $6.5M paid to creators across 2025, and $753,000 in November alone. Those are aggregate numbers across every creator on the platform, so treat them as evidence the program pays real money rather than as a benchmark for your listing. The distribution behind a number like that is always long-tailed. A small number of template sellers with catalogues and audiences take most of it. The honest read for someone starting now: - **A first template with no audience** is a few sales a month at best until it has visibility. The referral commissions attached to it are a rounding error at that volume. - **A plugin or component** can outperform a template on revenue per unit because the buyer is solving a specific problem rather than shopping for a look, but it earns zero referral commission and carries the heavier support load. - **A creator with a genuine audience of non-Framer users** is the only profile where the referral line alone is worth planning around, and even then it compounds over months as content accumulates search visibility. - **Freelance client work** still out-earns both channels for most people in year one. If that is your situation, our guide to [pricing Framer freelance projects](/blog/how-to-price-framer-freelance-projects) is the more useful read, and the referral link is a small bonus on top of sign-ups you were creating anyway. Nothing stops you from running all of these at once. The Creator Program is one enrolment, and the Links tab tracks both channels whether you are actively working them or not. What you are really deciding is where the next 40 hours of work go. ## Practical next steps 1. **Check whether you are already enrolled.** Open the Links tab in your Framer Community profile settings. If you have published anything in the Marketplace, your affiliate link and dashboard are already sitting there. 2. **Connect payouts before you earn anything.** Dub holds the payout details that Stripe uses. Setting this up after you have a balance just delays the first payment. 3. **Pick the channel that matches what you can actually ship.** If you can build a genuinely useful template, you get both revenue lines from one piece of work. If you build plugins or components, ignore the referral maths and put the effort into the listing. Our [best Framer plugins](/blog/best-framer-plugins) roundup shows what a strong plugin listing solves. 4. **Re-read the terms before you plan around a number.** Commission rates, the 12-month window, the $200 floor and the eligibility rules are all Framer's to change, and this article is a snapshot. Framer's own [creators page](https://www.framer.com/creators) and the help articles on [how the Creator Program works](https://www.framer.com/help/articles/how-the-creator-program-works/) and [how affiliate links work](https://www.framer.com/help/articles/how-affiliate-links-work/) are the live source. 5. **Give it two quarters before you judge it.** Between the 30-day pending window, the $200 threshold and the two-month payout lag, the first three months of data tell you almost nothing about whether the channel works for your audience. If your plan is Marketplace-first, the guide to selling on the Framer Marketplace covers submission, review and listing mechanics in more detail than fits here. ## FAQ **Is the Framer affiliate program separate from the Creator Program?** No. Affiliate links are a feature inside the Framer Creator Program. Framer's help centre says you are enrolled automatically when you publish a template, plugin, component or vector set in the Marketplace, or when you join as a verified Framer Expert, and both marketplace sales and referral commissions are tracked from the same Links tab. **How much does the Framer affiliate program pay?** Framer's creators page states you get up to 50% of a referred user's subscription for 12 months when they upgrade to a paid plan. Marketplace sales are separate: Framer takes a 0% cut and you keep 100% of what you sell. Terms are set by Framer and can change, so check framer.com/creators before you plan around the number. **Do plugins and components earn affiliate commissions?** No. Framer's Creator Program help article states that only templates are eligible for referral commissions, and that plugins, components and vector sets do not generate affiliate earnings. You still keep 100% of the revenue when someone buys them. **How do Framer creator payouts actually work?** Affiliate tracking runs on Dub and payouts are processed through Stripe. Conversions stay pending for 30 days to cover refunds, your eligible balance has to reach $200, and payouts run monthly covering commissions earned two months earlier. Framer does not withhold tax. **Can I run paid ads to my Framer affiliate link?** No. Framer's affiliate help article states that paid advertising using affiliate links is not permitted, and that breaking the program rules can get you removed. Sign-up links also only attribute new users, so existing Framer accounts never count. **Does FramerHub have an affiliate program?** Only for CMS Filter at the moment, run through LemonSqueezy. You can sign up from framercmsfilter.com. Our other plugins bill through Polar, which has no built-in affiliate system, so there is nothing to join for those yet. --- - **Page:** The Framer API: What You Can Build - **Source:** https://framerhub.io/blog/framer-api-guide - **Description:** Framer actually has three distinct developer surfaces. Here's what the Plugin API, Server API, and Code Components each let you build — with real limits. "Framer API" is one search term hiding at least three different developer surfaces, plus one common mix-up with an entirely different product. Before you go looking for documentation, it helps to know which one you actually need. ## The Three (Real) Framer Developer Surfaces **1. The Plugin API** is what powers everything in the Framer Marketplace, CMS Filter, Components, Gallery Kit, and every other plugin you've installed inside the editor. It lets developers build tools that run inside Framer's canvas: reading and writing CMS data, manipulating layers, building custom UI panels, and reacting to what's selected on the canvas. If you want to build something a user installs and interacts with *inside* Framer, this is the API. **2. The Server API** is a newer, separate surface for automating operations at the site and project level, publishing, managing projects, and other operations that happen outside the visual editor entirely. Framer publishes example code for this on GitHub, and it's aimed at teams who want to script or integrate Framer project management into their own tooling, rather than build an in-editor plugin. **3. Fetching external APIs from inside Framer** is the third, most common case for regular site builders: using `fetch` inside a code component or override to pull data from a third-party API (weather, exchange rates, a custom backend) and render it on a live Framer site. This isn't a "Framer API" in the sense of Framer exposing something, it's standard JavaScript `fetch`, running inside Framer's code component environment, hitting whatever external API you point it at. Framer's own academy has a lesson specifically on this pattern because it's such a common first question for builders moving from no-code to code components. ## Framer API vs. Framer Motion, Clear This Up First If you searched "framer api" hoping to find animation documentation, you likely want a different product. **Framer Motion**, now rebranded simply as **Motion**, is a widely used open-source animation library for React, originally built by the Framer team but functioning as its own independent product with its own docs and API. It shares a name with Framer the website builder for historical reasons, not because they're the same system. If you're building animations with code (in React, Vue, or elsewhere) and searching for spring physics, gesture handling, or animation orchestration APIs, you want Motion's documentation, not Framer's developer/plugin docs. If you're building *inside* the Framer website builder and want to automate, extend, or integrate with it, you want one of the three surfaces above. Conflating these is the single most common source of confusion in this search term, so it's worth the one paragraph of disambiguation before diving into either. ## What You Can Realistically Build With the Plugin API The Plugin API is the surface most people actually mean when they ask "what can I build with the Framer API." Realistic plugin categories include: - **CMS tools**, import, sync, filter, and audit tools that read or write collection data. (Covered in depth in our [Framer CMS API guide](/blog/framer-cms-api-guide).) - **Design system utilities**, plugins that enforce spacing, color, or typography consistency across a project by inspecting and adjusting selected layers. - **Content component libraries**, like FramerHub's own [Components](/plugins) plugin, which lets you search, drag, and drop pre-built elements directly inside the editor without leaving Framer. - **Workflow accelerators**, bulk-renaming layers, exporting design tokens, or generating boilerplate structure for a new page type. The constraint to plan around: everything runs inside the editor, scoped to the user actively running the plugin. There's no background execution, no server-side cron job, and no access outside the project the user has open. If your idea requires automation independent of someone actively using Framer, you're looking at the Server API instead, or a hybrid architecture where an external service does the automation and a lightweight plugin handles the in-editor side. ## What the Server API Actually Covers The Server API is aimed at a narrower, more technical audience: teams managing many Framer projects who want to script operations rather than click through the UI for each one. Based on Framer's own example repository, realistic Server API use cases include: - **Scripted publishing workflows**, triggering a publish as part of a broader CI/CD-style process rather than manually clicking "Publish" in the editor. - **Project provisioning at scale**, useful for agencies spinning up many similar client projects from a template pattern. - **Integrating Framer project state into internal tooling**, surfacing project status, ownership, or metadata inside an internal dashboard instead of manually checking Framer's own interface. This is genuinely new territory for Framer as a platform, and documentation is still maturing relative to page builders or CMSs that have had server-side APIs for a decade. If you're evaluating whether it can support a specific automation, the most reliable path is testing against the official example repository rather than assuming parity with more mature server API ecosystems. ## Fetching Data Into a Live Framer Site For the majority of people who land on "framer api" without meaning to build a plugin at all, the actual need is simpler: showing dynamic, external data on a page. This is handled with standard `fetch` calls inside a code component or code override, no special Framer-specific API required. Common real examples: - Displaying live pricing or exchange-rate data - Pulling reviews or ratings from a third-party service - Rendering a custom calculator or configurator backed by an external calculation service The pattern is the same as fetching data in any React-based frontend: call the endpoint, handle loading and error states, and render the response. Framer's constraint here isn't really about an "API", it's about making sure the fetch happens in a code component (which supports arbitrary JavaScript) rather than trying to do it through native, no-code Framer elements, which don't support arbitrary network calls. ## Common Mistakes People Make Scoping "Framer API" Projects After enough client conversations that start with "can we just use the Framer API for this," a few recurring mistakes stand out: - **Assuming plugin access means server access.** A plugin that can read and write CMS data cannot, on its own, expose that data to an external app over HTTP. If the actual requirement is "our internal dashboard needs to read Framer CMS content," the plugin is one half of the architecture, you still need a place for that data to land that your dashboard can query, whether that's a database the plugin pushes to or a scheduled export. - **Underestimating how "in-editor only" changes an automation plan.** Plugin API workflows require a human to have Framer open and the plugin running. If a workflow needs to run unattended overnight, that's a Server API or external-service problem, not a Plugin API one, and realizing this after scoping the project as a simple plugin build is an expensive mistake to catch late. - **Treating the Server API as feature-complete with mature platforms.** Because it's newer, don't assume it has parity with the server APIs of platforms that have supported headless operations for a decade. Verify specific operations against Framer's current example repository before committing to a timeline. - **Confusing "code component" with "API."** A code component using `fetch` to call a weather API isn't using anything Framer-specific, it's plain JavaScript running in a supported environment. This matters because the troubleshooting path is different: bugs here are usually standard fetch/CORS/async issues, not Framer API quirks, and treating them as the latter wastes debugging time. ## Choosing the Right Surface for Your Project A simple way to sanity-check which surface actually fits: ask who or what triggers the action, and where it needs to run.
Trigger Runs where Surface
User clicks something inside Framer's editor Inside the editor Plugin API
A scheduled job or external system, no human involved Outside the editor Server API
A visitor loads the live published site On the live site fetch inside a code component
You want animation/gesture code, not a Framer integration Anywhere in a React/Vue app Motion (unrelated library)
If you can't cleanly place your idea in one row, it's usually a sign the project needs two of these working together, most commonly a Plugin API tool feeding data to an external service, with a Server API or scheduled job handling the unattended half. ## Where to Start If you're trying to figure out which of these applies to your project: 1. **Building something a Framer user installs and runs inside the editor?** → Plugin API. 2. **Automating site or project operations from outside the editor entirely?** → Server API. 3. **Displaying external, dynamic data on a live site you're building?** → Standard `fetch` inside a code component. 4. **Looking for animation code, not a Framer-specific integration?** → You want Motion, not Framer's developer docs. For most freelancers and agencies, the practical answer is usually "I don't need to build any of these, I need a plugin that already solved this." Browse the [plugin directory](/plugins) before committing engineering time to a custom Plugin API or Server API build; it's very likely someone has already shipped the specific integration you're trying to build. ## FAQ **What does 'the Framer API' actually refer to?** It's not one thing. Framer exposes a Plugin API for building in-editor tools, a Server API for automating site and project operations, and support for fetching external APIs inside code components and overrides. Which one you need depends on what you're building. **Is Framer API the same as Framer Motion?** No, and this is the most common confusion. Framer Motion (now just "Motion") is a popular open-source animation library for React, unrelated to the Framer website builder's own developer APIs. If you're searching for animation code, you likely want Motion's docs, not Framer's developer API reference. **Can I use the Framer API to automate publishing a site?** That's what the Server API is for, programmatic site and project operations rather than in-editor tools. Framer publishes example code on GitHub for common Server API workflows. **Do I need to be a developer to use any of this?** To build a plugin or use the Server API directly, yes. To benefit from what these APIs enable, no, plugins like CMS Filter or Components already do the API-level work, so you get the result without writing code. **Where do I start if I want to build a Framer plugin?** Start with Framer's official developer docs and the CMS Starter plugin as a reference implementation, then scope a small, single-purpose plugin before attempting anything broad, narrow plugins ship faster and are easier to get approved on the marketplace. --- - **Page:** Framer CMS API: A Developer's Guide - **Source:** https://framerhub.io/blog/framer-cms-api-guide - **Description:** What the Framer CMS API actually is, how plugins read and write CMS data, and what you can (and can't) build with it. A practical developer guide. Search "framer cms api" and you'll land on a mix of official docs, a Reddit thread asking if it even exists, and a community post literally titled "Shipped: CMS API (via Plugins)." That title is the answer. There is a Framer CMS API, but it isn't a public REST endpoint you can hit from an external server. It's a programmatic interface exposed to plugins running inside the Framer editor, and that distinction decides what you should try to build. ## What "Framer CMS API" Actually Means When people search for a "CMS API," they usually picture something like a headless CMS: an API key, a REST or GraphQL endpoint, and the ability to `curl` your content from anywhere. Framer's CMS doesn't work that way, and you should know that before you scope a project around it. What Framer *does* provide is a Plugin API with CMS-specific methods, `getCollections()`, methods to read collection fields and items, and methods to add or update items programmatically. This API runs inside the context of a plugin operating within the Framer editor, authorized by the person using it. It's the same interface that powers marketplace plugins that sync, import, or manage CMS content, including the official CMS Starter plugin Framer ships as a reference implementation. There is also a second surface, the Server API, which you call from your own infrastructure using a project-scoped API key you create inside the Framer project's settings. It reaches collections and their items, item draft state, and site publish and deploy. We know that one first-hand rather than from documentation. [CMS Scheduler](/plugins/cms-scheduler) is our product, and its backend runs against the Server API in production: connect a project with its URL and an API key, load the collections and their draft items, and at the scheduled minute flip the item out of draft and publish. Framer still describes the Server API as open beta, so treat every endpoint and signature as movable, and do not sell a client an integration on the assumption it will stay put. So the split is: **Plugin API** for anything that happens with the editor open and a person present, **Server API** for anything that has to happen while nobody is looking. This guide covers CMS data on both. The wider developer surface, the plugin system itself, canvas APIs, what a plugin can do beyond the CMS, is covered in our [Framer API guide](/blog/framer-api-guide). ## What You Can Actually Build With It Because the API is plugin-scoped, the realistic use cases look like this: - **Bulk import/export tools**, a plugin that reads a spreadsheet or external database and writes items into a CMS collection, saving the one-by-one manual entry that native Framer CMS requires. - **Content sync plugins**, reading from Notion, Airtable, or a custom backend and pushing updates into a Framer collection, either on-demand or on a schedule triggered from within the plugin's UI. - **Content audit and QA tools**, scanning a collection for missing fields, broken references, or inconsistent formatting before a client site goes live. - **Enhanced editing UIs**, a custom plugin panel that presents CMS fields differently than Framer's native property panel, useful for non-technical clients managing complex collections. - **Filtering and search layers**, reading collection data and building richer query logic (multi-field, price ranges, realtime search) than Framer's native single-condition filter supports. This is the exact mechanism [CMS Filter](/plugins/framer-cms-filter) is built on. - **Scheduled publishing**, the one that genuinely needs the Server API rather than the Plugin API, because it has to run when the editor is closed. Our own scheduler holds a queue, checks it every minute, and un-drafts and publishes when an item comes due. ## What You Can't Do (Yet) **Verified as of August 2026.** The Server API is in open beta, and open betas move. Check each of these against Framer's current developer documentation before you quote a client on it. - **No unauthenticated public endpoint.** There is nothing you can `curl` anonymously to read a Framer collection the way you can point a browser at a headless CMS's public content API. Access is always authenticated, either as the editor user (Plugin API) or with a project API key (Server API). - **No stability guarantee.** Framer lists the Server API as open beta. That is not a reason to avoid it, we run a product on it, but it is a reason to write your integration so a changed signature is a small fix rather than a rebuild. - **No native webhook on CMS item change.** If you need "the moment this item changes, tell my system," you are polling or triggering it yourself. We have not found a native subscription for this. - **No item-level publish.** The next section covers what that does to your architecture. If the client requirement is "our content syncs with our internal system overnight, unattended," that is now buildable against the Server API rather than impossible. It is still a build, not a setting. ## Publishing is a project-level operation We learned this from running a product on the API rather than from the documentation. A publish triggered through the Server API is a **site** operation, not an item operation. The flow our scheduler runs is: take the item out of draft, then publish and deploy the project. There is no way to publish only that item, everything else sitting unpublished in the project goes live in the same deploy. Two consequences worth designing around: 1. **Keep work in progress somewhere else.** If a project holds half-finished pages, an automated publish will ship them. A separate staging project is the honest answer, and it is the caveat we put on our own product page rather than in the small print. 2. **Batch, don't loop.** Three items due at 10:00 should become one publish and one deploy, not three. Our scheduler groups everything due per project, un-drafts them all, and then publishes once. If you write the naive loop instead, you pay for three full site deploys and the client watches the site rebuild three times. ## The Permission Model Because the CMS API runs inside a plugin rather than as a standing external service, the permission model looks different than what a headless-CMS developer expects. There's no API key to leak, rotate, or scope down, access is tied to the user actively running the plugin inside their own Framer project. When someone installs a plugin that touches CMS data, they're granting it the access that plugin's manifest declares, for as long as it's running. The Server API has the opposite shape: there **is** a key, it is created inside the Framer project's settings, and it is scoped to that project. That makes it a real secret with real handling obligations. In CMS Scheduler we store it encrypted, decrypt it only server-side at the moment of use, and delete it when the user disconnects the project. If you build against this API, budget for that work, it is not optional and it is not glamorous. That changes how you scope a build: - **You can't build a background job that runs independently of the editor.** If a plugin needs to sync data nightly, it needs the user to open Framer and trigger it (or you need a separate, non-Framer backend that pushes updates some other way that doesn't rely on the CMS Plugin API at all). - **Multi-user teams share plugin access at the project level**, not per-seat. If a plugin can write to a collection, anyone on the project with edit access can trigger that write. - **There's no granular field-level permission inside the CMS API itself.** A plugin that can write to a collection can generally write to any field in it, scoping down to "this plugin can only touch the `status` field" is something you'd enforce in the plugin's own logic, not something Framer restricts natively. None of this makes the API unsafe, it's a reasonable model for an in-editor tool. It just means "build an automated sync pipeline" and "build a plugin the user runs to sync on demand" are different projects with different architectures, and conflating them is where CMS API projects go over budget. ## Common Developer Questions From the Community A running Reddit thread titled simply "API for CMS" is a good proxy for what real builders get stuck on, and the pattern repeats across Framer's community forum too: - **"Can I query my Framer CMS from an external app?"** Not directly, you'd build a plugin that reads the CMS and separately pushes that data somewhere your external app can reach, rather than pointing your app at Framer directly. - **"How do I bulk-add hundreds of items without clicking through the UI?"** This is the single most common CMS API use case in practice, a small import plugin (or an existing marketplace plugin built for this) that loops through a spreadsheet or JSON file and calls the item-creation methods. - **"Can two Framer sites share one CMS?"** Not natively. Each site's CMS collections are scoped to that project. Sharing content across sites means syncing between them via a plugin or an external source of truth, not a native shared-collection feature. ## How to Start Building Against It If you're building a plugin that touches CMS data, the practical path is: 1. **Read Framer's official developer docs for the CMS surface**, start at `framer.com/developers/cms` for the current method reference, since plugin APIs evolve and this guide won't stay pinned to specific method signatures. 2. **Study the CMS Starter plugin.** Framer ships this as a reference implementation specifically so plugin developers have a working example to build from rather than starting from empty documentation. 3. **Scope your plugin's permission model early.** Decide whether it needs read-only access (an audit tool) or read/write (a sync tool), this affects both the API calls you'll use and how you explain the plugin's access to end users installing it. 4. **Test against a real collection with realistic field types early**, not a toy example. Reference fields, multi-line rich text, and image fields all behave differently than a simple text field, and that's where most plugin bugs surface. ## Where This Fits Into a Bigger Project Most people asking about the Framer CMS API aren't planning to build a plugin from scratch, they're trying to solve a specific content problem: filtering, syncing, or bulk-managing a collection. If that's you, it's usually faster to reach for a plugin already built on this API than to build your own. [CMS Filter](/plugins/framer-cms-filter) uses the CMS API to add multi-field filtering, realtime search, and price-range sliders without you writing a line of plugin code. If your problem is specifically an external tool syncing into Framer CMS, look for a sync-focused plugin in the [plugin directory](/plugins) before committing engineering time to a custom build. For a broader look at where Framer's CMS runs into walls, collection caps, filtering, code component access, our [Framer CMS limitations guide](/blog/framer-cms-limitations) covers the rest of the picture beyond the API layer specifically. ## FAQ **Does Framer have a public REST API for the CMS?** Not in the traditional headless-CMS sense. There is no anonymous public endpoint. CMS content is reachable two ways: the Plugin API, running inside the editor with the user present, and the Server API, which your own server calls using a project-scoped API key created in the project settings. Framer lists the Server API as open beta. **How do plugins read Framer CMS data?** Plugins use the Framer Plugin API's CMS methods to get collections, list fields, and read or write items. This runs in the context of the Framer editor with the user's permission, not as an unauthenticated public endpoint. **Can I sync an external database to Framer CMS automatically?** There is no native two-way sync with Airtable, Notion or anything else. You either build a plugin the user runs in the editor, or you drive the Server API from your own backend with a project API key. Both are integrations somebody builds; neither is a switch you flip. **What's the difference between the CMS API and the Server API?** The Plugin API runs inside the editor, authorised by the person using the plugin, with no API key involved. The Server API runs from your own infrastructure against a project-scoped API key and reaches collections, items, draft state, publish and deploy. Publishing through it is project-level, not item-level. **Do I need to know JavaScript to use the Framer CMS API?** Yes. Plugins are built with the Framer Plugin SDK in TypeScript/JavaScript. If you're not building a plugin yourself, you can still benefit from the CMS API indirectly through plugins that already use it, like CMS Filter or a CMS-to-spreadsheet sync tool. --- - **Page:** Framer Gallery: How to Build a CMS Image Gallery (2026) - **Source:** https://framerhub.io/blog/framer-cms-gallery-guide - **Description:** How to build an image gallery in Framer: a native CMS grid step by step, where it stops, and how to add lightbox, masonry, sliders and category filters from your CMS. To build a gallery in Framer, put your images in a CMS collection, add a Collection List to the page and design one image card. That gives you a working grid in a few minutes. Framer doesn't do lightbox or masonry natively, so for a full-screen viewer, varied-height layouts or thumbnail sliders you add a gallery component connected to the same collection. We build Framer components used by 2,000+ Framer users, including the CMS gallery components covered below, so this guide starts with what Framer does natively and only reaches for a component where native stops. > **Key Takeaways** > > - A native Framer gallery is a CMS collection plus a Collection List; it's the right choice for small, uniform grids. > - Framer has no native lightbox or masonry layout. Both need a component or hand-built overlay states. > - Framer's built-in Slideshow and Carousel cover simple sliders; CMS-driven sliders with thumbnails need a dedicated component. > - Pick the layout by content: masonry and lightbox for photography, uniform grid for products, slider for before/after work. > - Galleries are the easiest pages to make slow: compress before upload and lazy-load below the fold. ## Step 1: Set up your CMS collection Open the CMS panel and create a collection (or add fields to an existing one): - **Image field**: the photo itself. One image per item is the simplest setup. - **Title field**: used for alt text and captions. - **Category field** (optional): if you'll filter or group the gallery. - **Order or date field**: to control the display sequence. If each item needs several images, such as a project with ten photos, use a gallery-style field that holds multiple images per item. The slider and popup components below read that kind of field directly. Keeping images in the CMS means adding a photo later is filling in a form, not rebuilding a layout. ## Step 2: Build a native Collection List grid Drag a Collection List onto the canvas and connect it to the collection. Design the card: usually the image, cropped to a consistent aspect ratio, with the title as alt text. Set the list to a grid with fixed columns and adjust the columns per breakpoint. For a small, uniform gallery (team photos, a short list of past projects, logo walls) this native grid may be all you need. ## Step 3: Where the native grid stops Four gaps show up once the gallery is the point of the page. ### No lightbox Clicking an image in a native Collection List does nothing. Visitors expect a thumbnail to open a full-screen view with next/previous navigation and keyboard support. Building that by hand means wiring overlay states, click handlers and key events yourself. ### No masonry layout Native stacks and grids use fixed rows, so images either get cropped to the same shape or leave uneven gaps. A masonry layout, where each image keeps its natural aspect ratio and the columns flow around different heights, isn't something Framer's layout tools produce. It's the look most photography and visual portfolios want. ### Simple sliders only Framer's built-in Slideshow and Carousel components work for a basic swipe-through. They don't read a multi-image CMS field per item or give you a thumbnail strip, which product pages and project galleries usually need. ### Basic category filtering For a gallery split into categories ("Weddings", "Portraits", "Events"), Framer's native Dynamic Filters on the Collection List handle simple single-category filtering. Our [Dynamic Filters guide](/blog/framer-dynamic-filters-guide) covers the setup and where native filtering runs out. ## Step 4: Add the layout you need with a CMS gallery component Each of these connects to the CMS collection you built in Step 1, so content stays editable in the CMS:
Component Layout What it adds Price
CMS Masonry Lightbox Masonry, 1–12 columns Lightbox for images and video, category filter pills (single or multi-select), 4 hover effects $29
CMS Gallery Lightbox Masonry or fixed-height grid GLightbox viewer with CMS-driven captions; can extract images from a custom component slot $18
CMS Gallery Slider Slider with thumbnails CMS gallery-field or manual mode, thumbnails on any side, 5 transitions $14
CMS Gallery Popup Lightbox popup with thumbnails Thumbnail strip on any side, keyboard and swipe navigation $18
All of them are also included in the Components plugin, which has 90+ components for $99 one-time. ### Setting one up 1. Add the component to the page (from its component page, or from the Components plugin inside Framer). 2. Connect it to your gallery collection and map the image field, plus the title for alt text and captions. 3. Set columns, gaps and breakpoints in the properties panel. 4. Turn on the extras you need: lightbox, category pills, thumbnails or hover effects. 5. Preview on a phone and test the swipe and close gestures before publishing. ## Which gallery layout fits your project?
Project Layout Why
Photography portfolio Masonry + lightbox Photos have different aspect ratios, and visitors want full-screen viewing
Product gallery Slider with thumbnails Several images per product, browsed one at a time
Before/after or process work Slider The sequence matters more than an overview
Agency case studies Grid + popup lightbox A tidy overview, with detail on click
Team photos or logos Native grid Small, uniform sets don't need more
Add a component when the project needs lightbox, masonry or thumbnail behaviour. A small uniform set is fine on the native grid. ## Optimising gallery performance Galleries are among the easiest pages to make slow. - **Compress before upload.** Uploading a 12 MB photo and letting the layout shrink it still sends 12 MB to the visitor. Resize and compress before adding images to the CMS. - **Serve thumbnail-sized images in the grid.** Let the lightbox load the larger version only when it opens. - **Lazy-load below the fold.** Images far down the page shouldn't load until the visitor scrolls near them. Confirm your component does this rather than assuming. - **Cap what renders at once.** For collections with hundreds of images, use pagination, a "load more" pattern or a featured subset. ## Captions, alt text and accessibility **Alt text does two jobs.** It's an accessibility requirement and it earns image-search traffic. Map the CMS title (or a dedicated alt field) to alt text instead of leaving filenames. **Captions give context.** For portfolios and case studies, a short caption (project, location, one line of description) helps visitors who skim. **Keyboard support in the lightbox.** Arrow keys should move between images and Escape should close the viewer. Test it before launch. ## Common Framer gallery mistakes - **Mixed aspect ratios in a fixed grid.** Either crop consistently or switch to masonry. - **No lightbox on a photography site.** Visitors expect to click through to the full image. - **Full-resolution files as thumbnails.** The gallery becomes the slowest page on the site. - **No phone testing.** Sliders and lightboxes depend on swipe feel; test on a real device. - **No empty state for filters.** If a category has no items, say so instead of showing a blank section. For structuring image-heavy CMS content in general, see the [Framer CMS complete guide](/blog/framer-cms-complete-guide). ## FAQ ### Can you build an image gallery with Framer's CMS? Yes. Create a collection with an image field, add a Collection List, connect it and design one card. Every item becomes a gallery tile. ### Does Framer have a native lightbox? No. A native Collection List doesn't open a full-screen viewer. Build overlay states by hand or use a gallery component with a lightbox built in. ### How do I make a masonry gallery in Framer? Native stacks and grids use fixed rows, so a true masonry layout needs a masonry gallery component connected to your CMS collection. ### Does Framer have a carousel or slideshow? Yes. The built-in Slideshow and Carousel components handle simple sliders. For CMS-driven sliders with thumbnails, use a dedicated slider component. ### How do I filter a Framer gallery by category? Use Framer's native Dynamic Filters for simple single-category filtering. CMS Masonry Lightbox also has built-in category pills with single or multi-select. ### What's the best gallery setup for a photography portfolio in Framer? Photos in a CMS collection, a masonry layout so aspect ratios aren't cropped, and a full-screen lightbox. ## Build order Start native: collection, Collection List, one card. Publish it and look at it on a phone. If the content is photography or the images vary in shape, switch the grid to a masonry component with a lightbox; if each item has several images, use a slider with thumbnails. Then compress your images and check the page speed before you call it done. --- - **Page:** Framer Dynamic Filters Guide: Where Native Filtering Stops - **Source:** https://framerhub.io/blog/framer-dynamic-filters-guide - **Description:** How to set up Framer's native Dynamic Filters step by step, where they fall short for real CMS sites, and when the CMS Filter plugin becomes the better tool. You got the brief. Real estate listings. A car marketplace. A job board. A directory with 200+ items. The client wants filtering like Amazon. Price range slider. Filter by location. Filter by type. All at once. Remove one filter without clearing the rest. You open Framer, find **framer dynamic filters** in the CMS panel, and start wiring things up. For one dropdown, it works great. Then you try to combine search, sort, and a price range at the same time. That's where things stop. This guide covers what native Framer Dynamic Filters actually do well, how to set them up step by step, and what to reach for when your project needs more than a single dropdown. ![Real Estate Listing with Framer Dynamic Filters](/framerhub/img/blog/framer-dynamic-filters-guide/real-estate-listing-framer-dynamic-filters.webp) --- ## What are Framer Dynamic Filters? Framer Dynamic Filters are native filtering controls that shipped in early 2026. They let you connect CMS fields to page variables. When a visitor clicks a tab or types in a search box, the collection list updates instantly without a page reload. The core idea is simple: 1. A CMS field (category, tag, location, price) binds to a page variable 2. A filter control (dropdown, tab, search input) updates that variable when a visitor interacts 3. The collection list re-renders showing only items that match the variable value The key shift from older Framer filtering: no variants. Before Dynamic Filters, showing filtered states meant creating a separate variant for each filter combination. Five categories times four price tiers equals 20 variants to build and maintain. One CMS update meant touching 20 frames. Dynamic Filters eliminated that entirely. Filter controls are also not tied to the collection list's position. You can place a search bar in the header, tabs in a sticky nav, and a checkbox group in a sidebar. All of them control the same collection. That layout flexibility matters for real site designs. ![Framer Dynamic Filters configuration panel](/framerhub/img/blog/framer-dynamic-filters-guide/framer-dynamic-filters-config-panel.webp) For a deeper look at how Framer's CMS system works overall, the [Framer CMS complete guide](/blog/framer-cms-complete-guide) covers collections, schemas, and content structure from the ground up. --- ## The 5 native filter types in Framer Framer ships five filter control types. Each covers a different interaction pattern. ![Five native Framer Dynamic Filter types shown side by side: search, tabs, dropdown, checkboxes, and toggle](/framerhub/img/blog/framer-dynamic-filters-guide/framer-dynamic-filters-types.webp) ### Search field A text input that filters the collection as the visitor types. Matches against one CMS text field (title, name, or description). Real-time updates, no submit button needed. Works well for: blog archives, team directories, simple resource libraries. ### Dynamic tabs Horizontal pill or tab-style buttons. Each button represents one value from a CMS option field. Clicking filters to that value. Works well for: category switching on portfolios, product type filters on simple sites, "All / Beginner / Advanced" on course libraries. ### Dropdowns A select menu. Visitor picks one value from a CMS option field. Works well for: location filters, single-value attribute selectors, industry or sector filters. ### Checkboxes Multi-select. Visitors pick several values and see results matching any selected option. OR logic within the filter. Works well for: tag filters, feature filters, multi-category filtering where OR logic is acceptable. ### Toggles Boolean control. Shows or hides items based on a true/false CMS field. Think "Remote only," "Featured," or "Available now." Works well for: availability states, featured-item highlights, boolean attribute filtering. --- ## How to set up Framer Dynamic Filters: step by step Setting up native filters takes under ten minutes on a clean project. **Step 1: Build your CMS collection** Open the CMS panel. Create or select a collection. Confirm you have the right field types: option fields for tabs, dropdowns, and checkboxes; text fields for search; boolean fields for toggles. ![Framer CMS collection setup with option and text fields](/framerhub/img/blog/framer-dynamic-filters-guide/framer-cms-collection-setup.webp) **Step 2: Add a Collection List to your canvas** Drag a Collection List onto your page. Connect it to your collection. Design the item card. ![Framer Collection List on canvas](/framerhub/img/blog/framer-dynamic-filters-guide/framer-collection-list-on-canvas.webp) **Step 3: Open the Filters panel** Select the Collection List. Open the right sidebar and find the Filters tab. ![Framer Filters panel open for a Collection List](/framerhub/img/blog/framer-dynamic-filters-guide/framer-filters-panel.webp) **Step 4: Add a filter** Click "Add Filter." Pick a type. Select the CMS field it should operate on. Framer creates a filter control and a page variable automatically. ![Add Filter button in Framer Filters panel](/framerhub/img/blog/framer-dynamic-filters-guide/add-filter-button.webp) **Step 5: Place the filter control** The control appears as a layer. Move it wherever your design needs it: above the collection, in a sidebar, in the header. It's decoupled from the collection list. ![Framer filter control on canvas](/framerhub/img/blog/framer-dynamic-filters-guide/framer-filter-control-on-canvas.webp) **Step 6: Add more filters** Repeat Steps 4 and 5 for each filter field. Multiple filters stack as AND logic by default. Each active filter narrows the collection further. ![Multiple filters in Framer Filters panel](/framerhub/img/blog/framer-dynamic-filters-guide/multiple-filters.webp) **Step 7: Preview and test** Use Preview mode (Cmd+P or Ctrl+P). Click your filter options, type in the search field, confirm the collection updates correctly. ![Framer Dynamic Filters preview mode](/framerhub/img/blog/framer-dynamic-filters-guide/framer-dynamic-filters-preview-mode.webp) That's the full native setup. For a single-filter use case on a small collection, this is all you need. --- ## Where native Framer Dynamic Filters work well Native filters are the right tool when your use case is genuinely simple. **Blog with category tabs.** Ten posts, five categories. Visitors click a tab to see posts in that category. One filter, one option field, done. **Portfolio with project type filter.** A designer's portfolio with a dropdown to filter by industry. Clean, fast, no maintenance. **Team page with department filter.** Department tabs on a small team directory. One filter dimension. **Simple resource library.** A collection of 30-50 resources with a category dropdown. In all these cases, native Dynamic Filters do the job. Adding a plugin would introduce unnecessary complexity. Use the simpler tool. ![Simple blog page using native Framer Dynamic Filters with category tab navigation](/framerhub/img/blog/framer-dynamic-filters-guide/simple-blog-page-using-native-framer-dynamic-filters.webp) --- ## Where native filters fall short for real CMS sites This is where the gap becomes visible. These are not edge cases. They're standard requirements for directories, job boards, real estate listings, car marketplaces, and any serious listing site. I've seen Framer designers hit this same wall. You start with one dropdown, it works great. Then the client says "I want a price range filter like Amazon." Or "users need to filter by location AND property type AND bedrooms all at once." Or you try to build a desktop sidebar that stays in sync with a mobile drawer. That's where native filtering stops. ![Comparison of native Framer filtering versus Framer CMS Filter plugin for a real estate directory site](/framerhub/img/blog/framer-dynamic-filters-guide/comparison-of-native-framer-filtering-versus-framer-cms-filter-plugin.webp) ### Multi-field search Native search matches against one CMS text field. If your job board has a title, description, company name, and tags, visitors can only search one field. They type "product designer" and only the title is searched. Matching descriptions and tags are invisible. The [CMS Filter plugin](/plugins/framer-cms-filter) runs search across multiple fields simultaneously: title, description, tags, and author in one query. ### Sorting Native Dynamic Filters have no built-in sorting. Visitors can't sort by price, date, relevance, or name. For any collection where order matters to the visitor, this is a hard gap. ### Active filter chips users can remove When a visitor applies three filters, native Framer shows nothing that tells them what's active. No chips. No "you're viewing: Remote / Design / London." They can't remove one filter without clearing everything. Active filter chips are standard UX on any real filtering experience. They communicate what's applied and let visitors refine without starting over. That's the "filter by location, price, and type all at once, then remove just the price filter" experience clients ask for. ### Result counts Knowing there are "14 results" before clicking a filter helps visitors make better decisions. Native Dynamic Filters don't display a result count. The [CMS Filter plugin](/plugins/framer-cms-filter) includes a `CMSCount` component that updates in real time as filters change. ### Clear-all Native filters don't ship a coordinated clear-all control. You can wire one manually via page variable resets, but it's custom work. The plugin includes a `CMSClearAll` component that resets all active filters in one click. ### Synchronized filter groups across layouts This is the one native filters can't solve. Real responsive sites often need: - A top bar with Location and Category filters on desktop - A sidebar with Price Range and Bedrooms - A mobile drawer with all of the above in a different layout Native page variables can drive one control per filter. They can't keep a sidebar checkbox and a mobile drawer checkbox synchronized when they both represent the same filter. The CMS Filter plugin is built around a shared-state architecture: multiple controls coordinate through a `storeKey`. Desktop sidebar and mobile drawer stay in sync automatically. ### Price range sliders Native Framer supports option fields, text, and booleans. Range filters (price: $500k to $1M, area: 1,000 to 2,500 sq ft) require a range slider with dual handles. Native filtering doesn't provide that. The plugin includes dual-handle range sliders with min/max values and unit formatting. ### Filtering on reference fields Real CMS models use reference fields. A job board where each posting references a Company item. A directory where each listing references a Category item. Native Dynamic Filters work cleanly with option fields. Filtering on single-reference and multi-reference fields is where the native system runs thin. The plugin handles both. ## Native vs CMS Filter plugin: comparison table
Capability Framer Native CMS Filter Plugin
Search (single field) Yes Yes
Multi-field search No Yes ( CMSSearch , debounced across several fields)
Tabs, dropdowns, checkboxes, toggles Yes (5 types) Yes
Match operators (contains, starts with, is set, and so on) No Yes (8 text, 8 number operators)
Number and price range filtering No Yes (dual input and slider)
Date range filtering No Yes ( CMSDateRangeToggle )
Sorting No Yes ( CMSSort , CMSSortToggle )
Facets with option counts No Yes ( CMSFacets , auto-detected from CMS enum fields)
Active filter chips users can remove No Yes
Active filter count No Yes ( CMSActiveFilterCount )
Result count display No Yes ( CMSCount )
Clear-all button No (manual workaround) Yes ( CMSClearAll )
Pagination / prev-next No Yes ( CMSPagination , CMSPrevNext )
Saved favourites No Yes ( CMSFavoriteButton , CMSFavoriteItems )
Synchronized filter groups No Yes (top bar, sidebar, mobile share one store)
AND/OR logic across filters AND only Composed at three levels: per filter, per builder, per collection
Single-reference field filtering Limited Yes
Multi-reference field filtering Unpredictable Yes
Shareable URL parameters for a filtered state Yes, driven by the page variables behind each filter Yes, one urlSync toggle on CMSCollection
For small collections with simple filter needs, native is the right starting point. For directories, real estate listings, job boards, marketplaces, and resource libraries, the plugin covers what native doesn't. --- ## Real projects that need more than native filtering These are the project types where native filtering hits its limits fast. They're also the exact use cases where the CMS Filter plugin was built to deliver. ![Four project types requiring advanced Framer CMS filtering: real estate, cars, job board, resource library](/framerhub/img/blog/framer-dynamic-filters-guide/four-project-types-requiring-advanced-framer-cms-filtering.webp) ### Real estate listings You need: price range slider, location, bedrooms (3 OR 4 OR 5), property type, and amenity checkboxes. Desktop shows a top bar with location and type, a sidebar with price range and bedrooms. Mobile shows a drawer with everything. Both layouts need to share filter state. Try this live: [framercmsfilter.com/demo?demo=real-estate](https://framercmsfilter.com/demo?demo=real-estate) That synchronized layout is what the plugin's `storeKey` system solves. One key, multiple filter groups, shared state automatically. ### Car marketplace You need: make, model, year range, mileage range, fuel type, and transmission. "I tried the variant workaround and hit a wall past 30 items" is the exact feedback from Framer designers who built car sites before this existed. Six filters on 200+ listings is not a variant problem. It's a filter system problem. Try this live: [framercmsfilter.com/demo?demo=cars](https://framercmsfilter.com/demo?demo=cars) ### Job board You need: role, location, remote/hybrid/on-site toggle, department, and seniority. Visitors apply three filters, then want to see "12 jobs match" and remove just "Seniority: Senior" without clearing everything else. That's active filter chips, result count, and clear-all working together. None of those ship with native Dynamic Filters. ### Directory and listing sites A local business directory needs: category, city, price range, and tags. Four simultaneous filters. Active chips. A clear-all button. A result count. Native handles one of those cleanly. The rest need the plugin. For more on structuring CMS content for complex sites, the [Framer CMS complete guide](/blog/framer-cms-complete-guide) covers collections, reference fields, and layout patterns in detail. A long filtered listing also lives or dies on load time, which is covered in [optimising a Framer site](/blog/optimize-framer-site-performance). --- ## Setting up the CMS Filter plugin The setup follows a similar pattern to native filters, with a broader component set. **Step 1.** Install from [framerhub.io/plugins/framer-cms-filter](/plugins/framer-cms-filter) or directly from the [Framer Marketplace](https://www.framer.com/marketplace/plugins/framer-cms-filter/). **Step 2.** Replace your Collection List with a `CMSCollection` component. Connect it to your CMS collection. Set a `storeKey` (a string that names this filter group, e.g., `"listings"` or `"jobs"`). **Step 3.** Add a `CMSFilters` component. Set the same `storeKey`. Configure each filter: pick the type, select the CMS field, set display options. **Step 4.** Add `CMSSearch` for multi-field search. Configure which fields to search across. **Step 5.** Add `CMSSort` to give visitors sorting controls (newest, price: low to high, alphabetical, etc.). **Step 6.** Add `CMSCount` to show "X results" and `CMSClearAll` to reset all active filters. **Step 7.** For synchronized layouts, duplicate the `CMSFilters` block for your mobile layout. Set the same `storeKey`. Both filter groups share state automatically. Select a location on desktop. The mobile drawer reflects it. Full documentation lives at [framercmsfilter.com](https://framercmsfilter.com). --- ## Pricing and access Framer CMS Filter is a one-time purchase. No subscription.
Plan Price Who it's for
Free $0 Basic filtering, try before buying
Personal $79 one-time Freelancers, single-site use
Agency $179 one-time Unlimited client projects
The Agency tier covers unlimited client projects. Trusted by 2,000+ Framer users. If you build more than one or two client sites per year, the Agency plan covers everything for the cost of a few hours of work. --- ## FAQ ### Does Framer have built-in filtering? Yes. Framer ships native Dynamic Filters that let you bind CMS fields to page variables. You can add search, tabs, dropdowns, checkboxes, and toggles without writing code. It works well for basic single-field filtering. For multi-field search, sort, active filter chips, result counts, and synchronized filter groups across layouts, a dedicated plugin is the practical next step. ### What are the limitations of Framer's native Dynamic Filters? Native Dynamic Filters are page-variable-driven and work cleanly for simple use cases. They don't cover multi-field search, built-in sorting, active filter chips users can remove, result counts, a clear-all button, price range sliders, or synchronized filter groups across desktop and mobile layouts. For directories, job boards, real estate listings, and marketplaces, you'll hit those limits fast. ### What is the difference between Framer Dynamic Filters and the CMS Filter plugin? Framer's native Dynamic Filters let you bind one field to one page variable. The [CMS Filter plugin](/plugins/framer-cms-filter) is a full filtering system: multi-field search, 8+ filter types, sort, active filter chips, result counts, clear-all, AND/OR logic, and filter groups that stay synchronized across top bar, sidebar, and mobile layouts. Native is the baseline. The plugin is the advanced layer for real CMS sites. ### Do Framer Dynamic Filters work on mobile? Framer Dynamic Filters render and function on mobile because they sit outside the collection list and can be placed anywhere on the canvas. However, native filters don't support synchronized duplicate filter groups. Building a desktop sidebar and a mobile drawer that share state isn't possible natively. The CMS Filter plugin supports synchronized filter groups across layouts. ### When should I use the CMS Filter plugin instead of native Dynamic Filters? Use native filters when you need one or two simple dropdowns or tabs on a small collection. Upgrade to the [CMS Filter plugin](/plugins/framer-cms-filter) when you need: multi-field search, sorting, active filter chips users can remove, result counts, a clear-all button, price range sliders, reference-aware filtering, or filter groups that stay in sync across desktop and mobile layouts. --- ## Bottom line Framer's native Dynamic Filters solved the variant hell problem. For simple sites, one or two dropdowns on a small collection, they're all you need. For real CMS sites, native is the starting point, not the finish line. Multi-field search, sorting, filter chips users can remove, result counts, synchronized filter groups, and reference-aware filtering are what turn a CMS list into a real discovery experience. If your project needs any of those, the [CMS Filter plugin](/plugins/framer-cms-filter) is the dedicated tool for that gap. Browse the [live real estate demo](https://framercmsfilter.com/demo?demo=real-estate) or the [cars demo](https://framercmsfilter.com/demo?demo=cars) to see it in a real project context. If that's what your client needs, the setup takes about 15 minutes. Browse the full [plugin catalog at FramerHub](/plugins), or our [round-up of Framer plugins](/blog/best-framer-plugins), to see what else extends Framer's native capabilities. *Last updated: August 2026* --- - **Page:** Framer CMS Limitations (and How to Work Around Them) - **Source:** https://framerhub.io/blog/framer-cms-limitations - **Description:** Framer CMS has real limits on collections, filtering, and code access. An honest breakdown of what you'll hit and how to work around each one. If you've built more than one CMS-driven site in Framer, you've hit a wall. Maybe it was a "you currently have more CMS collections than your plan allows" warning. Maybe it was realizing you can't filter a directory by category *and* price at the same time. Maybe it was a code component that couldn't read the CMS data you assumed it could. Framer's CMS is genuinely good for what it's built for: structured content, dynamic pages, and clean editor workflows for non-technical clients. But it has real limitations. We build plugins that patch these exact gaps for 2,000+ Framer users, so we see the pain points daily. Here's the honest rundown, what actually limits you in Framer CMS, and what to do about each one. ## 1. Plan-Based Collection and Page Caps The wall people hit first is collection and published-page limits tied to your Framer plan rather than to the CMS itself. Framer's help docs and community forum both confirm that CMS-generated pages count toward your site's total published page limit, so a collection with 400 items can quietly eat your entire page budget on lower tiers. The fix is planning ahead: - Check your current plan's page and collection limits at [Framer's pricing page](https://www.framer.com/pricing) before you scope a CMS-heavy project. - If you're close to the ceiling, archive unused collections or unpublish draft items, they still count if they're live. - For agencies managing multiple client sites, budget plan tier into your quote up front. This is the single most common surprise we see freelancers hit mid-project. This one bites experienced builders as often as beginners, because the limit isn't obvious until you're deep into a build. A five-page marketing site with one small collection never gets close. A directory, catalog, or listings site with hundreds of items generates hundreds of dynamic pages behind the scenes, and every one of those counts against your published-page limit, even though you only "built" a handful of templates. If a client's project is going to scale past a few hundred CMS items over its lifetime, price the higher plan tier into the proposal now rather than explaining a surprise upgrade later. ## 2. Visible Items and Large Collection Performance Framer has a documented pattern for [limiting the number of visible CMS items](https://www.framer.com/help/articles/limiting-the-number-of-visible-cms-items/) on a page. In our own builds, rendering hundreds of CMS items in a single collection list without pagination is where mobile page speed starts to suffer. Measure it on the project rather than taking a rule of thumb from an article, including this one. Native Framer gives you: - A max item count per collection list - Basic pagination (previous/next) What it doesn't give you natively: infinite scroll with lazy loading, "load more" patterns tied to filter state, or numbered pagination that stays SEO-crawlable while filtered. If your directory, blog, or product catalog is going to grow past a couple hundred items, plan the pagination pattern before you build the layout, retrofitting it later means rebuilding your list component. ## 3. The Real Limitation: Filtering This is the one that actually changes what you can ship. Framer's native Dynamic Filters bind a search field, a dropdown, a checkbox group or a set of tabs to a page variable, and for one condition at a time that is a perfectly good baseline. The moment a client asks for category *and* price range *and* location together, with chips a user can remove and a result count next to them, you are past what the native model expresses, and the fallback, a design variant per filter combination, explodes exponentially (three filters with four options each is 64 states to maintain). Filtering is a big enough subject to have its own article: [Framer CMS filtering: native filters and where they stop](/blog/framer-dynamic-filters-guide) walks through the native setup step by step and marks the exact point it runs out. ## 4. Collection Relations Are Shallow Framer supports reference fields, linking one collection item to another (a blog post referencing an author, a product referencing a category). What it doesn't do well is deep or many-to-many relations. A single reference field points to one collection. If you need a product that belongs to multiple categories, or a project that references multiple team members with per-relation metadata, you're working around the data model rather than with it, usually by duplicating reference fields or flattening relations into tag-style multi-select fields. Workaround: model your content as flat as possible before you build. If a relation genuinely needs to be many-to-many with extra metadata, a plugin-level or external-database approach (like a lightweight Airtable or Notion sync) will save you more time than fighting Framer's native reference fields. ## 5. Code Components Have Restricted CMS Access Code components can read CMS data, but not with the same freedom you'd get in a typical headless CMS setup. There are [documented limitations when accessing the CMS with code](https://www.framer.com/help/articles/issues-with-code-components-accessing-the-cms/), timing issues between what's available at design-time in Framer's canvas versus what's actually rendered on the live site, and gaps in what collection metadata is exposed to a component versus a native CMS list element. Practically, this means: - Simple "pull this collection and render cards" logic works fine with a code component. - Cross-collection filtering, search, or sort logic inside a code component gets fragile fast, you're fighting the same constraints a plugin author has already solved for. If you're building something that needs to manipulate CMS data programmatically beyond basic display, it's worth understanding what Framer's plugin and CMS APIs actually expose before you invest engineering time in a custom component. Our [Framer CMS API guide](/blog/framer-cms-api-guide) covers both surfaces and what each one permits. ## 6. Bulk Import and Field-Type Gaps Getting existing content *into* Framer CMS used to be a real pain point. Framer now ships an official CSV Import plugin (with a companion CMS Export plugin for the reverse direction), which covers most bulk-migration needs. It's not without limits, though: reference fields between collections don't always resolve automatically on import, image fields expect a public URL rather than an uploaded file, and very large datasets still run into the plan-tier collection caps covered above. See our CSV import walkthrough for the full step-by-step process and the gotchas that actually trip people up. Certain field types also have narrower configuration options than dedicated CMS platforms offer, structured video fields are a common example. If you're migrating an existing catalog, listings database, or blog archive into Framer, plan the import path before you plan the design. It's the part of the project most likely to blow your timeline if you leave it for last. The same applies to media-heavy fields. If a client wants embedded video per CMS item, property walkthroughs, product demos, testimonial clips, the configuration options on native video fields are narrower than what a dedicated video CMS gives you. Test the exact field type with real client content early, not with placeholder data, so you find configuration gaps while there's still time to route around them. ## 7. What Actually Solves Each Limitation
Limitation What native Framer gives you What actually closes it
Collection and page caps Plan-tier limits Nothing plugin-shaped. Scope the tier up front and archive what you are not using
Large list performance Max item count, previous/next pagination Design the pagination pattern before the layout. CMS Filter adds numbered pagination and prev/next components
Multi-field filtering One condition at a time CMS Filter : match operators, number and date ranges, facets with option counts, active-filter chips and count, clear-all, AND/OR composition
Multi-field search One field, no debounce CMS Filter's search component queries several fields at once
Shareable filtered URLs Query params, driven by the page variables behind each filter CMS Filter adds one URL-sync toggle on the collection
Deep collection relations Shallow reference fields Flatten the data model, or hold the relation in an external source
Code component CMS access Timing and exposure limits Use native CMS elements where the component only needs to render
Bulk import Official CSV Import plugin, with limits Test on a small batch and verify reference fields resolved
Bulk text edits across a collection Item-by-item editing CMS Find & Replace : one collection per run, preview every match before applying, one-step undo. Free
Two honest notes on that last column. CMS Filter is our product, so read the filtering rows with that in mind, the native baseline is real and worth using first. And CMS Find & Replace works on plain text, rich text and link fields only; it leaves slugs alone and runs one collection at a time. ## 8. Search Doesn't Scale Past a Handful of Fields Framer's native CMS search, where it exists on a collection list, typically matches against a single text field, usually the title. That's fine for a blog. It breaks down fast for a directory where a user expects to search across title, description, category, and location in one query. There's no native fuzzy matching, no relevance ranking, and no debounced realtime results as you type; you get exact or partial string matches against whatever field you wired up, evaluated on every keystroke without any performance guardrails. For small collections (under 50 items) this is barely noticeable. Past a few hundred items, unoptimized search starts to feel sluggish, and users bail before results resolve. If search quality is core to the product, a job board, a marketplace, a resource directory, this is a second angle on the same underlying gap as filtering: Framer's CMS list component wasn't built for compound queries. Realtime, debounced, multi-field search is one of the reasons directory builders reach for CMS Filter alongside the filter and sort controls, rather than trying to patch native search with a code override. ## 9. Choosing a Plan Tier for CMS-Heavy Sites Because so many of these limitations trace back to plan tier, page counts, collection counts, item visibility, it's worth treating "which Framer plan" as a scoping decision, not an afterthought you handle at checkout. A few practical rules we've settled on scoping CMS-heavy client sites: - **Estimate final item count, not launch-day item count.** A real estate site launching with 20 listings will have 200 within a year if it's working. Price the plan for where the collection is headed, not where it starts. - **Count CMS-generated pages separately from static pages.** A blog with 300 posts and five marketing pages needs headroom for 305+ published pages, not five. - **Re-check limits before every major re-scope.** Framer's plan tiers and included limits change over time, what applied when you built the site a year ago may not match current allowances. Confirm against the live [pricing page](https://www.framer.com/pricing) rather than working from memory or an old quote. - **Build the filtering and search layer assuming growth.** If you're adding CMS Filter for a 30-item collection today, you're not over-engineering, you're avoiding a rebuild when it's 300 items in a year. None of this is unique to Framer. Every hosted CMS platform ties some capability to a plan tier. The difference is that Framer's limits are less visible upfront than, say, a headless CMS's published API docs, you tend to discover them mid-build rather than during initial research. Scoping conversations with clients that explicitly name "collection growth" as a variable will save you the awkward mid-project upgrade conversation almost every time. ## The Bottom Line None of these limitations mean Framer CMS is a bad choice, for the vast majority of marketing sites, blogs, and portfolios, you'll never hit most of them. They matter when you're building something with real data density: directories, listings, catalogs, job boards. Know the walls before you scope the project, not after the client demo. If filtering is the wall you're hitting, that's the one we built [CMS Filter](/plugins/framer-cms-filter) specifically to solve, and it's the limitation most people search for when they land on this page. For the broader CMS setup, our [complete Framer CMS guide](/blog/framer-cms-complete-guide) covers collections, fields, and dynamic pages from scratch. ## FAQ **Does Framer CMS have a hard limit on collections?** Framer limits collections and published pages based on your plan tier, not a universal cap. If you see a "you currently have more CMS collections than your plan allows" warning, check [framer.com/pricing](https://www.framer.com/pricing) for your tier's current limit or archive collections you no longer need. **Why can't I filter by more than one field in Framer CMS?** Native Framer CMS lists support a single active filter condition. Combining filters (category + price + location) requires either manual variant states, which don't scale, or a plugin like CMS Filter. **Can I limit how many CMS items show on a page?** Yes, Framer supports item limits and basic pagination on CMS-connected lists, which helps performance on large collections. It doesn't add filter chips, sort controls, or shareable filtered URLs on top of that. **Can code components read Framer CMS data directly?** Code components can access CMS data, but with real constraints around what's exposed at build time versus render time. For filtering, search, or cross-collection logic, a purpose-built plugin is more reliable than a custom component. **Is Framer CMS good enough for a directory or listings site?** The data model works well for directories, real estate listings, and job boards. The actual gap is filtering, multi-field search, price ranges, and shareable filtered URLs aren't native, which is exactly what CMS Filter adds. --- - **Page:** Framer CMS: How It Works and Where It Stops (2026) - **Source:** https://framerhub.io/blog/framer-cms-complete-guide - **Description:** Everything you need to know about Framer CMS: collections, fields, CMS pages, CSV import, dynamic filtering, SEO, and real limitations. Updated 2026. You're building a client site in Framer. It needs a blog. Or a property directory. Or a job board where users can search and filter listings. You've heard about Framer CMS, but you're not sure how far it goes, where it stops, and what you need to extend it. This guide is your reference. What **Framer CMS** is, how collections and fields work, reference fields, CMS-powered pages, CSV import, the API, scheduled publishing, filtering, SEO setup, and the real limits you'll hit in production. I built the FramerHub CMS plugins. I work in Framer CMS daily. Here's everything I know. --- ## What is Framer CMS? Framer CMS is built around two things: **collections** and **items**. A **collection** is a structured set of content. Think of it as a spreadsheet tab. Each collection has fields that define the shape of the content: a title field, a date field, an image field, a rich text field, and so on. An **item** is one row in that collection. One blog post. One team member. One job listing. One property. When you connect a collection to a design component in Framer, every item gets its own version of that component, populated with its own data. Add a new item to the CMS, and a new page or card appears. Remove one, and it disappears. No manual duplication. No copy-pasting. Design once. The structure scales to however many items you have. **What Framer professionals use CMS for:** - Client blogs and content sites - Team member and about pages - Portfolio case studies - Product or service listings - Job boards - Property directories (real estate, rentals) - Resource libraries - Testimonials and customer stories ![Framer CMS structure: collections and items](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-complete-guides.webp) --- ## Collections: the foundation of Framer CMS Every CMS project starts with a collection. Here's how to create one and set it up. A collection is created from the CMS icon in the left sidebar, either empty, from a CSV, or from Framer's sample blog structure. Name it with a plural noun (`Blog Posts`, `Properties`, `Job Listings`) because that name follows you into the design panel and into the URL structure for CMS pages. That is the whole setup, and it is deliberately short here: the step-by-step build, field by field, lives in the Framer CMS collections tutorial. What matters for the rest of this guide is the field model. ### Collection field types Each collection supports up to 30 fields.
Field Type What It Stores Best Used For
Text Short strings Titles, names, labels, slugs
Rich Text Formatted HTML content Blog body, descriptions
Image Image file or URL Cover photos, avatars, thumbnails
URL Web address External links, social profiles
Date Date/time value Publish dates, event dates
Number Integer or decimal Prices, ratings, counts
Boolean True/False toggle Featured flag, active status
Color Hex/RGB value Category color coding
File Downloadable file PDFs, downloads
Reference Link to another collection item Author on a Blog Post
Multi-Reference Link to multiple items Tags on a Blog Post
The last two, **reference** and **multi-reference** fields, are worth understanding in depth. ![Framer CMS field types](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-field-types.webp) --- ## Reference fields: connecting collections Reference fields create relationships between collections. **Example**: You have a `Blog Posts` collection and an `Authors` collection. Each blog post has one author. Instead of typing the author's name into every post manually, you create an `Author` field in `Blog Posts` as a **Reference** to the `Authors` collection. When you write a post, you pick an author from a dropdown. When an author's photo or bio changes, it updates everywhere automatically. **Multi-reference fields** allow selecting multiple items. Common uses: - Tags (a post can have multiple tags) - Categories (a product can belong to multiple categories) - Team members on a project ### Setting up a reference field 1. In your collection, click **Add Field** 2. Choose **Reference** or **Multi-Reference** 3. Select the target collection 4. Save. The field now shows a picker when editing items. When you bind this field in your design, you can pull any field from the referenced collection. An author reference on a blog card can display the author's name, photo, and bio, all from the `Authors` collection. ![Framer CMS reference fields](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-reference-fields.webp) ## CMS pages and slugs CMS items can have their own dedicated pages. A blog post collection generates a `/blog/[slug]` page for each item. A job listings collection generates a `/jobs/[slug]` page. Here's how it works. ### Creating a CMS detail page 1. In Framer, create a new page 2. In the page settings, switch the **Page Type** to **CMS** 3. Select the collection this page should pull from 4. Design your layout using bound fields from that collection 5. Set the URL structure using the slug field Every item in the collection now has its own URL and its own rendered version of that page. ### Slug field setup The **slug** is the URL-safe identifier for each item. Framer generates slugs automatically from the title (spaces become hyphens, special characters are stripped). You can also set slugs manually. **Best practices for slugs:** - Keep them short and descriptive - Use lowercase and hyphens only - Avoid dates in slugs if you want evergreen URLs - Make them readable: `/blog/framer-cms-guide` not `/blog/12345` ### Index pages Beyond the detail page, you'll usually want an **index page** that lists all items. This is a regular Framer page where you place a **Collection List** component and bind it to your collection. The Collection List renders one instance of your card design for each CMS item. This is your blog index, your team page, your property grid. ![Framer CMS index and detail pages](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-index-detail-pages.webp) --- ## Importing content via CSV Framer CMS supports bulk content import via CSV. Useful when: - Migrating from WordPress, Webflow, or Notion - Managing content in a spreadsheet and pushing updates to Framer - Bootstrapping a large collection quickly ### How to import a CSV 1. Open your collection in the CMS panel 2. Click the **three-dot menu** and then **Import CSV** 3. Upload your `.csv` file 4. Map each CSV column to a collection field 5. Click **Import** ### CSV format tips - First row must be headers - Date fields: use ISO format (`2026-06-09`) - Boolean fields: `true` / `false` - Image fields: use a public URL (Framer fetches and hosts the image) - Rich text: Framer accepts basic HTML in rich text fields via CSV **Limitation**: CSV import does not support reference fields. Set those manually after import, or use the Framer CMS API to automate it. ![Framer CMS CSV import](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-csv-import.webp) --- ## Dynamic content with Collection Lists The **Collection List** is the design component that pulls CMS data into your canvas. Add it to any frame, bind it to a collection, design one card, and Framer replicates it for every item. ### Adding a Collection List 1. In Framer, go to **Insert**, then **CMS**, then **Collection List** 2. Drag it onto your canvas 3. In the properties panel, select your collection 4. Design the item card inside the Collection List 5. Bind each element to its field: text element to `Title`, image to `Cover Image`, and so on ### Sorting and limiting In the Collection List properties: - **Sort by**: Any field (date descending for blogs, name ascending for directories, price for listings) - **Limit**: Show only the first N items (useful for "Latest 3 Posts" on a homepage) - **Filter**: Show items matching specific field values (only items where `Published = true`) This built-in filtering is good for static conditions. For visitor-driven interactive filtering, you need Dynamic Filters or a plugin. The same Collection List pattern powers image galleries; our [Framer gallery guide](/blog/framer-cms-gallery-guide) covers lightbox, masonry and slider layouts on top of it. ![Framer CMS Collection List properties](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-collection-list-properties.webp) --- ## Framer CMS API Framer provides a REST API for reading and writing CMS collection items. Useful for: - Syncing content from Notion, Airtable, or your own database - Automating content updates (pull fresh job listings nightly) - Integrating with Zapier, Make, or n8n ### How the Framer CMS API works The API is REST-based. Endpoints follow a consistent pattern: - `GET /collections`, list all collections in a project - `GET /collections/{id}/items`, list all items in a collection - `POST /collections/{id}/items`, create a new item - `PATCH /collections/{id}/items/{itemId}`, update an existing item - `DELETE /collections/{id}/items/{itemId}`, delete an item Authentication uses an **API token** generated from your Framer project settings. Include it as a Bearer token in request headers. **Official documentation**: [Framer CMS API Docs](https://www.framer.com/developers/api) --- ## Scheduled publishing in Framer CMS Here is something Framer does not have natively: scheduled publishing. If you manage a client blog, you know the pain. You write a post in advance but Framer has no "go live at 9am Tuesday" option. You either publish it early or set an alarm to click Publish at the right time. If you're coming from WordPress, this is the first thing you miss. The real-world scenario: a client wants three posts a week, queued up during one work session, publishing on a schedule. That is not possible with native Framer CMS. **CMS Scheduler** is the plugin that fills this gap. Write your CMS items now, set a publish date and time, walk away. The plugin handles the rest. - Free: 3 posts can sit in the queue at once, on one connected project. When one publishes, its slot frees up. - Pro, $49/year: unlimited queued posts, still one connected project. - Unlimited, $99/year: unlimited queued posts and unlimited connected projects. It runs on Framer's Server API, which Framer still lists as open beta, and it schedules **drafts** — an already-published item is not a scheduling target. **Important caveat**: scheduled publish pushes any other unpublished site changes at the same time. If you have work in progress, use a separate production project or hold off on scheduling until those edits are ready. For agencies and content-heavy clients, this is the WordPress scheduling you're missing in Framer. [CMS Scheduler on Framer Marketplace](https://www.framer.com/marketplace/plugins/framer-cms-scheduler/) · [CMS Scheduler on FramerHub](/plugins/cms-scheduler) ![CMS Scheduler on Framer Marketplace](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-scheduler.webp) ## Native Dynamic Filters: what they cover Framer added native **Dynamic Filters** to the CMS in early 2026. They work well for simple cases. Here's what they do and when they're enough. ### What Dynamic Filters do Dynamic Filters let you bind a page variable to a Collection List filter. The visitor selects a value, the page variable updates, and the Collection List re-renders to show only matching items. **Works well for:** - Single-field category filtering (show only "Design" posts) - Boolean toggles (show only "Featured" items) - Simple dropdown selections on small collections ### Where native Dynamic Filters fall short
Requirement Native Dynamic Filters
Single-field filter Yes
Combine search + category + location at once No
Real-time text search No
Price or number range slider No
URL parameters (shareable filter state) No
Show result counts per filter option No
Active filter chips users can remove No
Filter sync across desktop and mobile layouts No
For a blog with three categories, native Dynamic Filters are the right tool. For a real estate directory with price range, location, bedrooms, and property type, you will run into the limits quickly. The real signal: if a client asks "can users filter by price range and location at the same time?", that is where native filtering stops. ![Framer Dynamic Filters](/framerhub/img/blog/framer-cms-complete-guide/framer-dynamic-filters.webp) --- ## Advanced filtering with CMS Filter When a client needs filtering that native Dynamic Filters cannot deliver, [CMS Filter](/plugins/framer-cms-filter) is the system built for it. We build and sell it, and it is used by Framer teams shipping directory, listing and catalogue sites. The ICP describes the need in project terms: "I'm building a real estate site with price, location, and property type filters." Or "a car listing site with 6 filters." Or "a job board where users can search by role and filter by location." Native Dynamic Filters handle one condition at a time. CMS Filter handles all of them together. **What CMS Filter adds:** - Real-time text search across multiple fields at once (title, description, tags, and more in one input) - 8+ filter types: dropdowns, checkboxes, toggle buttons, range sliders, tag clouds - URL parameters so filter state persists and is shareable - Result counts and active filter count badges - Active filter chips users can remove individually - Clear all controls - Filter sync across breakpoints (sidebar on desktop, drawer on mobile, both stay in sync) - Reference-aware filtering (filter by author, category, or any linked collection) - Sort controls integrated with filter state **Setup**: Drag in the CMS Filter component, connect your collection, configure filter fields in the properties panel. No custom code. Under five minutes for a basic setup. **Pricing**: Free tier for basic setups. $79 Personal, $179 Agency, both one-time. Licensed for unlimited client projects. This is the tool for directory sites, real estate listings, job boards, product catalogs, and any CMS page where users need to find specific items from a large collection. For a deeper walkthrough, see our [guide to Framer Dynamic Filters](/blog/framer-dynamic-filters-guide). [CMS Filter on Framer Marketplace](https://www.framer.com/marketplace/plugins/framer-cms-filter/) ![Framer CMS Filter](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-filter.webp) --- ## Bulk editing CMS content: CMS Find and Replace One more CMS pain that comes up in real project work: bulk text edits. A client rebrands. A URL changes across 200 blog posts. A product name is misspelled in 50 listing items. In native Framer, you edit each item manually, one by one. **CMS Find and Replace** handles this in a single pass. Search across an entire collection, preview matches before applying, and update in bulk. Free, no paid tier. - Case-sensitive, whole word, and regex matching - Filter by field and item status (All, Draft, Published) - Preview grouped matches before applying - Export a CSV report - Undo the last replace This is a CMS hygiene tool. You don't use it daily, but when you need it, it saves an hour of manual work. Free, so install it and have it ready. [CMS Find and Replace on FramerHub](/plugins/cms-find-replace) --- ## The FramerHub CMS toolkit Three plugins that cover what native Framer CMS leaves out:
Plugin What it adds Pricing
CMS Filter Filtering, search, sort for discovery-driven pages Free / $79 / $179 one-time
CMS Scheduler Scheduled publishing (the WordPress scheduling you're missing) Free / $49 per year / $99 per year
CMS Find and Replace Bulk text editing across entire CMS collections Free
CMS Filter and the component library are one-time purchases; CMS Scheduler is a yearly subscription. Trusted by 2,000+ Framer users. --- ## SEO for Framer CMS pages CMS detail pages can rank well in search, if they're set up correctly. ### Page titles and meta descriptions In Framer's page settings for your CMS detail page, use **template variables** pulled from your CMS fields: ```text Title: {{Title}} | Your Site Name Meta Description: {{Excerpt}} ``` Every blog post, every property, every listing automatically gets a unique title and meta description from its CMS data. No manual settings per item. **Best practice**: add a dedicated `Meta Description` field to every collection you want to rank. Keep it under 160 characters. ### Slug structure and URLs - `/blog/framer-cms-guide`, good. Readable, keyword-relevant. - `/blog/abc123`, bad. No keyword signal. Use keyword-relevant slugs for CMS pages you want to rank. One of the lowest-effort, highest-impact SEO moves. ### Image alt text Add an `Image Alt Text` field (type: text) to your collection. Bind it to the `alt` attribute of your image elements. Every image in every CMS item now has a unique alt attribute automatically. Without this, all CMS images share a static alt text or have none. Both are bad for SEO and accessibility. ### Open Graph and social sharing Set the Open Graph fields on your CMS detail page to pull from CMS fields: ```text OG Image: {{Cover Image}} OG Title: {{Title}} OG Description: {{Excerpt}} ``` Every CMS page gets its own social card, pulled automatically from its content. ### Structured data For blog posts, add Article schema markup. For property listings, add Product or RealEstateListing schema. Framer doesn't inject schema automatically. You'll need a custom code component or a script in the site's custom code section. The same JSON-LD block is what makes a CMS page quotable by AI search, which is covered in [llms.txt for Framer](/blog/framer-site-chatgpt-ai-discovery). For a full SEO setup checklist for Framer sites, our [Framer SEO guide](/blog/framer-seo-guide) covers every technical and on-page element to check before launch. ![Framer CMS SEO](/framerhub/img/blog/framer-cms-complete-guide/framer-cms-seo.webp) --- ## Real Framer CMS limitations (honest) Framer CMS is solid for small-to-medium content sites. Here's where it hits real walls. ### Item and field limits
Plan CMS Items per Collection Collections per Site
Free Not available
Mini 50 items 1 collection
Basic 250 items 2 collections
Pro 1,000 items Unlimited
Scale 10,000 items Unlimited
For a blog with 200 posts or a directory with 500 listings, Pro is enough. For large product catalogs or high-volume content sites, Scale is the ceiling. Beyond Scale, a headless CMS (Contentful, Sanity, Hygraph) connected to Framer via the API makes more sense. ### No scheduled publishing (native) As covered above, Framer has no native way to schedule a CMS item to publish at a specific time. [CMS Scheduler](/plugins/cms-scheduler) fills this gap. If you're managing a content calendar for a client, plan for this before the project starts. ### No versioning or drafts workflow Framer CMS has no version history for content. If you overwrite a field, it's gone. There's no per-item drafts and approval workflow. For content-heavy teams where writers, editors, and reviewers all touch the same content, this is friction. ### No user-generated content Framer CMS is editor-only. Visitors cannot submit content to your collections from a form. You can connect a form to push data to Framer CMS via the API, but it's not built-in. ### No built-in search There's no native search bar that queries CMS content by text. Dynamic Filters handle category-style filtering, but a free-text search box that finds items across title, body, and tags requires a plugin. ### Relational depth Reference fields work one level deep cleanly. Multi-level relationships can get complicated and slow page render if you're pulling deeply nested referenced data. ### Framer CMS vs Webflow CMS
Feature Framer CMS Webflow CMS
Max items (top plan) 10,000 10,000
Native filtering Dynamic Filters (basic) More capable natively
Scheduled publishing Plugin required Native
CMS API Yes Yes
Drafts/versioning No Limited
Rich text editor Yes Yes
Reference fields Yes Yes
CSV import Yes Yes
Full-text search Plugin required Plugin/code required
For a detailed comparison of the full platforms, see our [Framer vs Webflow guide](/blog/framer-vs-webflow). --- ## Putting it together: CMS for real projects Here's how the pieces connect for common project types. **Client blog**: One collection (`Blog Posts`) with Title, Slug, Date, Author (reference to Authors), Cover Image, Excerpt, Body (rich text), Tags (multi-reference to Tags). CMS detail page with template variable SEO. Index page with Collection List sorted by date descending. Native Dynamic Filters for category. CMS Scheduler if the client wants to queue posts in advance. **Property directory**: One collection (`Listings`) with Name, Location, Category (reference), Price, Images, Description, Tags. Index page with CMS Filter for category, location, and price range. Detail page per listing. SEO meta variables on detail page. CMS Find and Replace ready for any client rebranding. **Job board**: One collection (`Jobs`) with Title, Company, Location, Salary Range, Job Type, Description, Apply URL, Published Date. Index page with CMS Filter for location, job type, and salary range. Detail page for each listing. CSV import from job aggregator. --- ## FAQ ### What is Framer CMS? Framer CMS is the built-in content management system inside Framer. It lets you create collections of structured content, blog posts, team members, products, listings, and display them dynamically across your site without rebuilding pages manually. ### What are the limitations of Framer CMS? Framer CMS limits you to 1,000 items per collection on the Pro plan (10,000 on Scale). Collections max out at 30 fields. There is no native scheduled publishing, no versioning, no user-generated content, and no built-in full-text search. Native Dynamic Filters handle basic filtering but cannot combine search, price ranges, and multiple filter types at the same time. ### Can I import content into Framer CMS? Yes. Framer supports CSV import directly from the CMS panel. Map your CSV columns to collection fields, and Framer populates your items in bulk. Useful for migrating from another platform or managing content in a spreadsheet externally. ### Does Framer CMS have an API? Yes. Framer provides a REST-based CMS API that lets you read and write collection items programmatically. You can fetch items from external apps, push content from third-party tools, or sync Framer CMS with an external data source. API access requires a paid plan. See the [official Framer API documentation](https://www.framer.com/developers/api) for endpoint reference and authentication setup. ### How do I add advanced filtering to Framer CMS? Framer's native Dynamic Filters handle simple, single-field filtering. For multi-field search, price range sliders, active filter chips, result counts, and URL parameters, you need a dedicated plugin. [CMS Filter](/plugins/framer-cms-filter) adds all of this with a drag-and-drop setup, no custom code required. Free tier available, paid plans from $79 lifetime. ### How do I schedule blog posts in Framer CMS? Framer has no native scheduled publishing. To publish a post at a specific time, you either click Publish manually or use a plugin. CMS Scheduler handles this: connect your project, pick a collection, set a date and time. The free tier holds 3 posts in the queue at once on one project; Pro is $49/year and Unlimited $99/year. A scheduled publish deploys the whole project, not just that post. --- ## Bottom line Framer CMS handles most small-to-medium content projects well. Collections, reference fields, CMS pages, CSV import, and the API cover the fundamentals. Native Dynamic Filters work for simple category filtering. Where it runs short: no scheduled publishing, no versioning, no built-in search, and native filtering that can only handle one condition at a time. The FramerHub CMS toolkit fills those gaps. CMS Filter for multi-field filtering and search. CMS Scheduler for the scheduled publishing you're missing. CMS Find and Replace for bulk edits when a client rebrands or a URL changes across hundreds of items. Build with native Framer CMS where it's enough. Reach for plugins when the project needs more. *Last updated: June 2026* --- - **Page:** Framer SEO: The Complete Guide (2026) - **Source:** https://framerhub.io/blog/framer-seo-guide - **Description:** Everything you need to rank a Framer site in 2026. Meta settings, semantic HTML, CMS slugs, redirects, structured data, and the honest answer on whether Framer is good for SEO. You built the site in Framer. Now you need it to rank. Framer is good for SEO for most sites. But the platform does not rank pages for you. The fundamentals still fall on you. And there are a handful of caveats around canonicals, hreflang and robots.txt that are worth knowing before you launch. This guide covers all of it. Meta settings, semantic HTML, image optimization, CMS SEO, sitemap and robots.txt, what actually happens to your rankings when you migrate to Framer, structured data, the mistakes I see over and over, and a pre-launch checklist you can run through before every site goes live. If you want the short version, we have a [Framer SEO checklist for templates](/blog/seo-checklist-for-framer-templates). For performance specifically, Core Web Vitals and Framer-specific speed fixes are covered in detail at [Framer site performance optimization](/blog/optimize-framer-site-performance). And if you are using Framer CMS for blog or collection pages, the full CMS setup guide is at [Framer CMS complete guide](/blog/framer-cms-complete-guide). Start here, then follow those links when you need the detail on one topic. --- ## Is Framer good for SEO? Short answer: yes, for most client and agency projects. Here is what Framer gets right without any configuration: - **Clean semantic HTML output.** Framer renders standard HTML rather than JavaScript-dependent content that crawlers struggle to process. - **Auto-generated sitemap and robots.txt.** Every published site gets a `sitemap.xml` automatically. No plugin needed. - **Global CDN hosting.** Fast TTFB by default. Framer serves from edge locations worldwide. - **Free SSL.** HTTPS on every custom domain. No configuration required. - **Mobile-responsive layouts.** Framer's breakpoint system produces mobile-ready pages. This matters for Google's mobile-first indexing. Where Framer has real limitations: - **Custom canonical URLs** require the Enterprise plan or the reverse-proxy add-on. On Basic and Pro, Framer sets canonicals automatically from your connected domain. This works for most sites but removes control when you need it. - **hreflang tags** for multilingual sites need custom code injection. - **robots.txt customization** is limited. You cannot fully control crawl directives at a granular level. - **Structured data** has no built-in UI. You add JSON-LD via custom code. For freelancers and agencies building client sites, the foundation is solid. You are not fighting the platform. The gaps matter at enterprise scale or for specific multilingual use cases. For a standard business site, portfolio, or CMS-driven blog, none of the limitations above will stop you from ranking. --- ## Framer SEO settings: meta titles, descriptions, and OG tags Every Framer site has two levels of SEO settings: site-wide and per-page. Most builders set the site-wide defaults and never come back to per-page settings. That is a mistake. ### Site-wide settings Go to **Site Settings > SEO**. Set: - **Site title.** Used as a fallback for pages without their own title. Also used for OG title on shared links if no per-page OG is set. - **Meta description.** Default description for pages without custom descriptions. - **Open Graph image.** The image shown when your site is shared on social. Ideal size: 1200x630px. These are fallbacks. Do not rely on them for pages that matter. ### Per-page settings Click anywhere on the canvas to deselect everything, then open the right panel and go to the **SEO tab**. Set: - **Page title.** Keep under 60 characters. Include the primary keyword naturally. One keyword, not five. - **Meta description.** Under 155 characters. Summarize the page, include the keyword, give a reason to click. - **Indexing toggle.** Must be ON for every page you want indexed. A common mistake is leaving key pages set to noindex after design iteration. - **Custom OG image.** Override the site-level OG for specific pages. ### What to avoid Do not duplicate meta titles across pages. Do not leave pages at Framer's "Untitled" default. Do not write meta descriptions over 160 characters; they get truncated in search results. Check the [official Framer SEO documentation](https://www.framer.com/help/seo/) before publishing. Framer updates their settings panel regularly and UI locations shift. --- ## Semantic HTML and headings in Framer Google reads page structure to understand what the page is about. A page built from nested divs tells Google nothing. Semantic HTML tells Google what is a heading, what is navigation, what is the main content. In Framer, every frame can be assigned an HTML tag, and most designers leave everything as `
`. Setting the tags correctly takes a few minutes per page, and it is the framer seo optimization step that gets skipped most often. ### How to set HTML tags Select any frame in the canvas, open the right panel, and find **HTML Tag** in the element settings. Assign tags based on function:
Element Tag to Use
Navigation wrapper
Main page heading

, one per page only

Section headings

Sub-headings inside sections

Footer wrapper
Main content area
Blog post or article content
### Heading hierarchy One `

` per page. It should contain your primary keyword. Do not use `

` on multiple elements for visual styling. Even if it looks correct visually, it breaks the structure for crawlers. `

` covers the main topics of the page. `

` goes inside `

` sections. Never skip levels. Do not jump from `

` directly to `

`. If you are building templates and selling them, correct heading structure is especially important. Buyers inherit your structure. We cover this in the [Framer SEO checklist for templates](/blog/seo-checklist-for-framer-templates), where it is item one. --- ## Image optimization and performance Site speed is a Google ranking factor. Framer sites can be fast or slow depending on how you handle images and animations. ### Image best practices - **Use WebP.** Framer accepts WebP. Significantly smaller file sizes than PNG or JPEG at comparable quality. - **Compress before uploading.** Target under 200KB per image. Hero images can go up to 400 to 500KB if needed. - **Set explicit dimensions.** Undefined image dimensions cause layout shifts (CLS). Google penalizes high CLS. Set fixed width and height on every image frame. - **Write descriptive alt text.** Every content image needs alt text. Include the keyword naturally where it fits. Do not stuff keywords into every alt tag. - **Name files before uploading.** `framer-seo-settings-panel.webp` ranks better than `image-1.webp`. ### Animations and performance Entrance animations on above-the-fold content push up your Largest Contentful Paint (LCP). An LCP over 4 seconds is a failing score. Keep scroll-triggered animations and heavy effects below the fold. Heavy blur effects, large embedded videos, custom fonts loading multiple weights, and deeply nested frames all add to render time. Target: LCP under 2.5 seconds, CLS below 0.1. For the full performance breakdown, lazy loading, font subsetting, and Framer-specific speed fixes, read the dedicated guide: [Framer site performance optimization](/blog/optimize-framer-site-performance). --- ## CMS page SEO: slugs, collection pages, and sitemaps If your Framer site uses the CMS for blog posts, product listings, or any collection-based content, there are specific things to get right. ### CMS slugs Each CMS item has a slug field. This becomes the URL: `yourdomain.com/blog/your-slug`. Slugs should be: - Lowercase, hyphenated, no spaces or special characters - Keyword-rich but short: `/blog/framer-seo-guide` not `/blog/post-12345-june-2026` - Evergreen: avoid dates in slugs. URLs with dates look stale in search results. - Set correctly at creation. Changing slugs later breaks existing URLs and loses link equity unless you redirect. ### CMS collection page indexing In Framer's CMS settings, each collection template has an indexing toggle. Verify it is enabled. Check that the collection template pulls a unique `` and meta description dynamically from CMS fields. Add a dedicated SEO title field and SEO description field to your CMS collection. This lets you control what appears in search results without changing what displays on the page itself. ### Sitemaps and CMS Framer automatically includes CMS pages in the sitemap. After publishing new CMS content, submit the sitemap URL manually in Google Search Console. New CMS pages can take days to weeks to crawl without that push. ### Pagination and infinite scroll If your CMS collection has pagination, use Framer's built-in numbered pagination. Infinite scroll pages are largely invisible to search engines. Crawlers do not simulate scrolling. Numbered pagination creates discrete, indexable URLs. ### Filtered listing pages and crawlability If you are building a directory site, job board, or real estate listing with advanced filtering, the filters you show users do not automatically create indexable URLs. For basic discovery, that is fine. For sites where category combinations have real search volume, you need filtered pages to be accessible via URL. Framer's native Dynamic Filters (added in early 2026) cover simple cases. For multi-field filtering, range filters, and multi-reference field filtering on larger catalogs, [FramerHub CMS Filter](/plugins/framer-cms-filter) handles the advanced cases, including URL-synced filter state so a filtered view has its own crawlable address. --- ## Does migrating to Framer hurt SEO? This is the question everyone asks before switching platforms. Migration itself does not hurt SEO. Poor execution does. Sites that handle migration correctly stabilize within 2 to 4 weeks. Sites that get it wrong can take 6 to 12 months to recover. The difference comes down to three things. ### 1. Redirects are non-negotiable Every URL that changes needs a 301 redirect from the old URL to the new one. Without redirects, you lose the link equity every backlink to that URL had built up. Rankings tied to those URLs drop. Before migrating: 1. Export all current URLs. Use Screaming Frog or pull the URL report from Google Search Console. 2. Identify which pages have backlinks. Check Google Search Console or Ahrefs. 3. Map old URLs to new URLs. Match slugs exactly where possible. 4. Set up 301 redirects in Framer at **Site Settings > Redirects**. WordPress URLs with dates (`/2023/04/post-name/`) and query-based URLs (`? p=123`) cannot be replicated in Framer's clean URL structure. These need explicit redirect mapping before you launch. If you skip this step and your old site goes offline first, you have no recovery path. The backlinks point to 404 errors. Rankings drop. Building them back up takes months. ### 2. Metadata does not transfer automatically When you rebuild in Framer, your meta titles and descriptions do not come with you. Launch without setting them and Framer will use default or blank values. Missing titles are a crawl quality issue Google flags directly. Before launch, verify every key page has a unique title under 60 characters and a description under 155 characters. Check the indexing toggle is ON for all pages. A page accidentally set to noindex goes invisible to search engines immediately. ### 3. Do not gut your content for aesthetics Design-minded rebuilds often trim copy to make pages look cleaner. If you remove content that contained keywords your site was ranking for, you lose the topical coverage Google was rewarding. Redesign the presentation. Keep the substance. If a section needs to be shorter, tighten the writing. Do not delete the topic coverage. <table> <thead> <tr> <th> Risk </th> <th> What Happens Without It </th> <th> Fix in Framer </th> </tr> </thead> <tbody> <tr> <td> Missing 301 redirects </td> <td> Link equity lost, rankings drop </td> <td> Site Settings > Redirects (Pro+) </td> </tr> <tr> <td> No metadata on rebuilt pages </td> <td> Duplicate or blank titles, crawl issues </td> <td> Set per-page SEO tab before launch </td> </tr> <tr> <td> Content removed for design </td> <td> Lost keyword coverage, ranking drops </td> <td> Keep topical depth, tighten writing </td> </tr> <tr> <td> Pages set to noindex </td> <td> Pages invisible to Google </td> <td> Check indexing toggle on every page </td> </tr> <tr> <td> Accidental URL changes </td> <td> 404 errors, broken backlinks </td> <td> Match slugs exactly, redirect anything that changes </td> </tr> </tbody> </table> --- ## Structured data (schema markup) in Framer Structured data helps Google understand your content. It can unlock rich results in search: FAQ dropdowns, article bylines, breadcrumbs, product ratings. Framer does not have a built-in schema UI, but adding it is straightforward. ### How to add JSON-LD schema Go to **Site Settings > Custom Code**. Add schema in the `<head>` section. For per-page schema, use the page-level custom code inject: click on the page in the pages panel, then open Custom Code. Example for a blog post: ```json <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Your Article Title", "author": { "@type": "Person", "name": "Author Name" }, "datePublished": "2026-06-09", "dateModified": "2026-06-09" } </script> ``` ### Which schema types to use <table> <thead> <tr> <th> Page Type </th> <th> Schema Type </th> </tr> </thead> <tbody> <tr> <td> Blog posts </td> <td> Article or BlogPosting </td> </tr> <tr> <td> FAQ sections </td> <td> FAQPage </td> </tr> <tr> <td> Local business </td> <td> LocalBusiness </td> </tr> <tr> <td> Product pages </td> <td> Product </td> </tr> <tr> <td> Site navigation </td> <td> BreadcrumbList </td> </tr> <tr> <td> How-to guides </td> <td> HowTo </td> </tr> </tbody> </table> ### FAQ schema is worth the effort FAQ schema adds expandable question-and-answer dropdowns directly in search results. It increases click-through rate. For any page with a FAQ section, add FAQPage schema. Test your schema at [Google's Rich Results Test](https://search.google.com/test/rich-results) before publishing. If the schema is malformed, it will not show in search results and you will not know unless you test. For a deeper reference on implementing schema, see [Google's structured data documentation](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data). --- ## Common Framer SEO mistakes These come up constantly across Framer sites, from small portfolios to high-traffic client builds. **Multiple H1 tags.** Designers use `<h1>` on several elements because they look prominent. One H1 per page. Make the others H2 or lower, regardless of visual size. **Leaving noindex on published pages.** Pages duplicated during design iteration often stay noindex after launch. Check every page before publishing. **No alt text on images.** Fast to add, skipped constantly. Every content image should have a description. Decorative images can have an empty alt attribute (`alt=""`). **No meta descriptions.** Framer will not add these for you. Without a custom description, Google writes its own, often poorly, and the click-through rate suffers. **Duplicate meta titles on CMS collection pages.** If your CMS template uses a static title rather than pulling from a dynamic field, every collection page gets the same title tag. Google flags this as a crawl quality issue in Search Console. **Heavy above-the-fold animations.** Entrance animations on hero sections push up LCP. Keep complex animations below the scroll threshold. **Infinite scroll on CMS collections.** Crawlers see page one. Everything after the initial load is invisible. Use numbered pagination. **Sitemap not submitted to Search Console.** Framer generates it automatically. You still need to submit `yourdomain.com/sitemap.xml` in Google Search Console for timely crawling. --- ## Getting your Framer site cited by AI search Search is no longer only Google's ten blue links. A growing share of research now happens inside ChatGPT, Perplexity and Gemini, where the model reads a handful of sources and synthesises one answer. If the model does not name your page, the reader never sees it. Most of that work overlaps with what is above. Semantic HTML, unique metadata, JSON-LD, and content that states its claims plainly are the same signals an answer engine uses to decide what a page is and whether it can be quoted. The one new file is `llms.txt`, a Markdown file describing your site in your own words, which Framer will serve for you at `/llms.txt` once you upload it under Site Settings → Hosting → Files. We run this on framerhub.io, and the full setup, the file itself, the well-known path, and the schema that makes CMS pages extractable, is written up in [llms.txt for Framer](/blog/framer-site-chatgpt-ai-discovery). --- ## Framer SEO checklist Run this before every site launch. For a version specifically for templates, see the [Framer SEO checklist for templates](/blog/seo-checklist-for-framer-templates). **Technical foundation** - Sitemap submitted to Google Search Console - SSL active (automatic in Framer) - All pages set to indexable (check each page's SEO tab) - robots.txt accessible at `yourdomain.com/robots.txt` - 301 redirects set for any changed URLs **On-page SEO** - One H1 per page containing the primary keyword - H2/H3 hierarchy follows logical order, no skipped levels - Nav tagged as `<nav>`, footer as `<footer>`, main content as `<main>` - Meta title under 60 characters, unique per page - Meta description under 155 characters, unique per page - OG image set at site level and overridden for key pages **Images and performance** - All images under 500KB, WebP preferred - Explicit dimensions set on all image frames - Alt text on every content image - Heavy animations placed below the fold - LCP under 2.5 seconds (test with PageSpeed Insights) **CMS (if using)** - CMS slugs are keyword-rich, lowercase, no dates - CMS template pulls dynamic title and description from CMS fields - Collection pages set to indexable - Numbered pagination (not infinite scroll) **Schema and structured data** - JSON-LD schema injected for primary page types - FAQPage schema on any page with a FAQ section - Tested with Google's Rich Results Test **The short version.** Clean HTML output, automatic sitemaps, CDN hosting and SSL give you a strong foundation without any setup work, and the gaps only matter at enterprise scale or on multilingual builds. What moves rankings is the basics done consistently: semantic HTML, unique meta titles and descriptions, correct heading order, image alt text, and page speed. None of it is complicated in Framer. It does mean setting SEO up as you design rather than fixing it afterwards. If you are migrating, plan your redirect map before launch day. That single step is the difference between a smooth transition and months of ranking recovery. <blog-cta button-link="/newsletter" button-text="Join the newsletter" description="What we changed on framerhub.io, what Search Console did afterwards, and the Framer settings that turned out not to matter. No weekly filler." title="One Framer SEO email, when we have something worth sending" variant="blue"> </blog-cta> ## FAQ ### Is Framer good for SEO? Yes, for most sites. Framer outputs clean semantic HTML, auto-generates sitemaps and robots.txt, serves over a global CDN, and includes free SSL. Where it falls short: custom canonical URLs require an Enterprise plan or the reverse-proxy add-on, hreflang tags need workarounds, and robots.txt customization is limited. For freelancers and agencies, the built-in foundation is solid. ### Does migrating to Framer hurt SEO? Migration does not hurt SEO. Poor execution does. The two biggest risks are URL changes without 301 redirects and missing metadata after migration. Sites that set up redirects, preserve metadata, and keep content depth typically stabilize within 2 to 4 weeks. Sites that skip redirects can take 6 to 12 months to recover. ### Where do I set meta titles and descriptions in Framer? Open Site Settings > SEO for site-wide defaults. For per-page settings, click the page canvas, open the right panel, and navigate to the SEO tab. Set a unique title under 60 characters and a description under 155 characters for each page. ### Does Framer auto-generate a sitemap? Yes. Framer automatically generates a sitemap.xml and robots.txt for every published site. Submit the sitemap URL (`yourdomain.com/sitemap.xml`) to Google Search Console after publishing. ### Can I add structured data (schema markup) to a Framer site? Yes, via custom code injection. Add JSON-LD schema to the page `<head>` through Framer's custom code panel at Site Settings > Custom Code, or use per-page code inject. Works for Article, FAQPage, LocalBusiness, BreadcrumbList, and other schema types. --- - **Page:** llms.txt for Framer: Get Cited by ChatGPT and AI Search - **Source:** https://framerhub.io/blog/framer-site-chatgpt-ai-discovery - **Description:** Add llms.txt to a Framer site through Site Settings, then wire schema and content structure so ChatGPT, Perplexity and Gemini can quote you. AI tools like **ChatGPT**, **Perplexity**, and **Gemini** are already reading your Framer website. But do they *understand* it the way you want them to? On a Framer site that mostly comes down to one small file, `llms.txt`, and to whether the rest of the page is structured so a model can quote it. Most designers still think SEO stops at Google. It doesn't. Search is increasingly AI-mediated, a user asks a question, and an AI model synthesizes an answer from a handful of sources instead of showing ten blue links. If your Framer site isn't structured for AI discovery, you're invisible to that entire layer of traffic, even if you rank fine in traditional Google search. This guide covers the concrete techniques to make your **Framer site discoverable by ChatGPT** and other large language models, what's changed recently, what actually works, and how to verify it's working. ## Why AI Search Is a Different Game Than Google When someone asks ChatGPT "best Framer templates for SaaS," it doesn't guess from memory alone for anything time-sensitive, modern AI search tools (ChatGPT with browsing, Perplexity, Gemini) actively crawl the live web, read structured data, and synthesize an answer from what they find. If your site doesn't emit the right signals, you're excluded from that answer entirely, not ranked lower, simply absent. **The core building blocks for AI visibility:** 1. **llms.txt**, tells AI models who you are and how to talk about you. 2. **JSON-LD structured data**, gives AI unambiguous, machine-readable facts about your content. 3. **Clear, extractable content structure**, AI models favor content that states claims directly, rather than burying them in marketing fluff. 4. **Crawler access**, your robots.txt has to actually allow the AI crawlers you want visiting. ## Part 1: Add llms.txt to Your Framer Site Think of `llms.txt` as the **AI-era equivalent of robots.txt**, but focused on interpretation rather than access control. While `robots.txt` tells search engines what they're *allowed* to crawl, **llms.txt** tells AI models how to *interpret and credit* your content once they've read it. ### What Happens Without llms.txt? Without it, AI tools can: - Misrepresent what your product or content actually does - Miss important context about your positioning or offering - Skip your site entirely in AI-generated answers, defaulting to competitors who *do* provide this context ### What Happens With llms.txt? With a well-written llms.txt, you can: - Define, in your own words, how AI should describe your brand - Point AI models toward your most important pages directly - Improve your odds of being cited in **AI search optimization** results, rather than paraphrased incorrectly ### How to add llms.txt to Framer in Site Settings (5 minutes) 1. **Create a plain text file** named `llms.txt`. 2. **Add your brand info, links, and usage rules.** Example: ```text # FramerHub - Premium Framer Components and Plugins ## About FramerHub provides high-quality code components and plugins for Framer designers and agencies. ## Links - Home: https://framerhub.io - Components: https://framerhub.io/components - Blog: https://framerhub.io/blog ## Usage Rules - Attribution required for content quotes - Commercial use allowed with proper credit ``` 1. **Upload it in Framer:** Go to `Site Settings → Hosting → Files` and upload `llms.txt`, Framer serves it at `/llms.txt`. 2. **Publish your site.** 3. **Test it:** Visit `yourdomain.com/llms.txt`, if you see your file rendered as plain text, you're done. ### Keeping llms.txt Useful Over Time Treat it like a lightweight sitemap for AI models, not a set-and-forget file: - Update the Links section when you launch a major new page, product, or collection. - Keep the "About" section current if your positioning changes, an AI model reading a two-year-old description of your product will describe you inaccurately today. - Avoid over-stuffing it with marketing copy. AI models parsing llms.txt respond better to direct, factual statements than to sales language. <blog-cta button-link="/newsletter" button-text="Join the newsletter" description="We write up what we learn running framerhub.io: llms.txt, schema, CMS structure and the Framer SEO settings that actually move something." title="Get the next Framer SEO teardown" variant="blue"> </blog-cta> ## Part 2: Add JSON-LD Schema to Framer CMS Pages **Structured data** is how you tell both AI and Google what your content *is*, unambiguously. Is a page a blog post? A product? An FAQ? Without schema, every crawler has to guess from surrounding text, and guesses are frequently wrong, especially on pages with mixed content types. ### The Mechanism: CMS Variables in JSON-LD Framer lets you embed [CMS field values](/blog/framer-cms-complete-guide) into custom JSON using the `{{FieldName | json}}` syntax. This means you can add **BlogPosting**, **Product**, or **FAQPage** schema to every CMS detail-page template once, and it applies automatically to every item in that collection, making each page readable by both humans and machines without per-page manual work. ### Step-by-Step: Add Schema to Blog Posts 1. In your Framer project, open your **CMS Collection** (e.g., "Blog"). 2. Confirm you have fields like `Title`, `Description`, `ImageURL`, `DatePublished`, and ideally `AuthorName`. 3. On the **CMS Detail Page** template, open `Page Settings → Custom Code (Head or End of Body)`. 4. Paste this JSON-LD script: ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BlogPosting", "headline": {{Title | json}}, "description": {{Description | json}}, "datePublished": {{DatePublished | json}}, "image": {{ImageURL | json}}, "author": { "@type": "Person", "name": "Your Name" } } </script> ``` 1. **Publish and test** via [Google's Rich Results Test](https://search.google.com/test/rich-results). ### Extending Schema to FAQ and Product Pages The same pattern works for other content types. For an FAQ section, use `FAQPage` schema with a `mainEntity` array of question/answer pairs. For a product or component listing page, use `Product` schema with `name`, `description`, `offers`, and `image` fields mapped to your CMS variables. The principle is identical each time: map your existing CMS fields into the corresponding schema.org properties, once, on the shared template. ### Why This Works When ChatGPT or another AI crawler reads your blog post, it doesn't just see plain text. With schema in place, it sees: - `"@type": "BlogPosting"` → "This is a blog post, not a product page or a forum thread." - `"headline": "How to Build..."` → "This is the definitive title, not a random heading." - `"datePublished": "2026-01-26"` → "This has a known publish date" (and freshness matters for time-sensitive queries). This context makes your content meaningfully more likely to be surfaced and cited accurately by AI, compared to an equivalent page with no structured data at all. ## Part 3: Write Content AI Can Actually Extract Structure alone doesn't guarantee citation, the *content itself* needs to be extractable. A few practical habits: - **State the answer directly, early.** If the page answers "how much does X cost," say the number plainly in the first few sentences, not buried three paragraphs in after a story. - **Use real headings that match likely questions.** "How much does a Framer site cost" as an H2 is more extractable than a vague "Pricing Thoughts." - **Avoid burying facts in marketing language.** "Our industry-leading solution delivers unparalleled value" contains zero extractable facts. "Framer plans start at $5/month for a Mini site" does. - **Keep FAQ answers self-contained.** An AI model often lifts a single Q&A pair verbatim, write each answer so it makes sense without the surrounding paragraphs. - **Update dates when content changes meaningfully.** AI models weigh freshness signals (schema `dateModified`, visible "last updated" text) when a query is time-sensitive, a page claiming to be current but carrying a two-year-old timestamp is a weaker citation candidate than one with a recent, accurate date. - **Prefer concrete numbers over vague qualifiers.** "Significantly faster" is not extractable. "Loads in under 1.5 seconds" is a fact an AI model can quote with confidence. ## Part 4: Confirm AI Crawlers Can Actually Reach Your Site None of the above matters if your robots.txt is silently blocking the crawlers you want. The crawler names below were checked on 23 August 2026. Vendors add and rename agents often, so re-check them against each vendor's own crawler documentation before you write a rule around one. - Check your robots.txt (`yourdomain.com/robots.txt`) for `Disallow` rules that might catch `GPTBot`, `PerplexityBot`, `ClaudeBot`, or `Google-Extended`. - If you're using Cloudflare in front of a custom domain, verify its bot-management settings aren't blocking these agents by default, some "Block AI bots" toggles are on by default and will silently undo everything above. - Periodically check server or Cloudflare analytics logs for hits from these user agents to confirm you're actually being crawled, not just correctly configured on paper. - If you see no AI crawler traffic after several weeks, double-check nothing upstream, a firewall rule, a bot-fight-mode setting, or an overly broad `Disallow`, is quietly filtering these agents out before they ever reach your pages. ## Traditional SEO vs. AI Search Optimization The two disciplines overlap heavily but aren't identical. Understanding the difference helps you prioritize effort correctly. <table> <thead> <tr> <th> Factor </th> <th> Traditional SEO (Google) </th> <th> AI Search Optimization (AEO/GEO) </th> </tr> </thead> <tbody> <tr> <td> Goal </td> <td> Rank in a list of results </td> <td> Be one of the few sources synthesized into a direct answer </td> </tr> <tr> <td> Key signal </td> <td> Backlinks, keyword relevance, Core Web Vitals </td> <td> Structured data, clear extractable claims, freshness </td> </tr> <tr> <td> Content style </td> <td> Keyword-optimized headings and copy </td> <td> Direct, self-contained factual statements </td> </tr> <tr> <td> Access control </td> <td> robots.txt </td> <td> robots.txt + llms.txt + CDN bot settings </td> </tr> <tr> <td> Citation format </td> <td> A clicked link </td> <td> A quoted or paraphrased answer, often with no click at all </td> </tr> </tbody> </table> In practice, you don't choose one over the other, solid traditional SEO (semantic HTML, [fast Core Web Vitals](/blog/optimize-framer-site-performance), genuine backlinks) is still the foundation everything else builds on. AEO/GEO signals are additive on top of that existing foundation, not a wholesale replacement for the fundamentals you've already invested in. ## Tools to Verify Your AI Discovery Setup A handful of free checks confirm whether your setup is actually working, rather than just configured correctly on paper: - **llms.txt validator sites**, several community tools check your file's syntax against the emerging spec. - **Google's Rich Results Test**, confirms your JSON-LD schema parses correctly and shows which rich result types it qualifies for. - **Schema Markup Validator (schema.org)**, a stricter check against the full schema.org vocabulary, useful for catching typos in property names. - **Direct AI queries**, periodically ask ChatGPT or Perplexity a question your site should be able to answer, and see whether you're cited, paraphrased incorrectly, or absent entirely. This is the most honest signal you have, since it reflects real crawling and synthesis behavior rather than a syntax check. Re-run these checks after any major content or schema change, a small JSON-LD typo can silently invalidate an entire structured-data block, and you may not notice for months if you only check once at launch and never again. ## Combining Everything for Maximum AI Visibility Here's the full stack, in order of what each piece does: 1. **llms.txt** tells AI *who you are*. 2. **JSON-LD schema** tells AI *what your content is*. 3. **Extractable writing** gives AI *a clean fact to quote*. 4. **Open crawler access** makes sure AI *can actually get in* to read all of the above. Skip any one of these four, and the other three lose most of their effect, schema on a page an AI crawler can't reach does nothing. ## Real-World Use Case Imagine a potential client asks ChatGPT: *"What are the best Framer component libraries?"* If you have all four pieces in place, an `llms.txt` explaining your offerings, structured data on your product pages, direct extractable claims, and open crawler access, ChatGPT can confidently respond: *"FramerHub offers premium Framer components for agencies and freelancers, focused on performance and CMS integration."* Without these signals, you're not part of that answer at all, you simply don't come up, regardless of how good your site looks to a human visitor. ## Conclusion The web is no longer read only by humans. AI models are actively crawling, indexing, and citing Framer sites right now, and that channel will only grow as a share of how people find products and information. By adding **llms.txt**, structured data, and writing content built to be quoted directly, you future-proof your Framer site for a search landscape that increasingly bypasses the traditional results page entirely. **Next steps:** 1. Add `llms.txt` to your Framer site today via Site Settings → Hosting → Files. 2. Add JSON-LD schema to every CMS detail-page template. 3. Confirm your robots.txt and any CDN bot settings aren't blocking AI crawlers. 4. Test with Google's Rich Results Test, and periodically check your logs for AI crawler activity. Want to build a Framer site that ranks in both Google *and* ChatGPT? Start with these four pieces, then pair them with the broader tactics in our [complete Framer SEO guide](/blog/framer-seo-guide) and our [Ultimate SEO Checklist for Framer Templates](/blog/seo-checklist-for-framer-templates) for a full ranking strategy across both traditional and AI-driven search. If you're building on top of [FramerHub's plugins and components](/plugins), most of the CMS structure needed for clean schema markup is already in place, you're mainly adding the JSON-LD layer on top of data you're already collecting. --- - **Page:** How to Add Code Components to Framer (Complete Guide for Beginners) - **Source:** https://framerhub.io/blog/getting-started-framer-components - **Description:** Learn how to install and customize Framer code components in minutes. A beginner-friendly guide to adding advanced functionality without writing code. If you're new to **Framer code components**, you're probably wondering: *"How hard is it to actually add these to my site?"* The honest answer: it's easier than duplicating a frame. This guide walks through exactly how to **add code components to Framer**, customize them without touching code, troubleshoot the handful of things that commonly go wrong, and unlock functionality a raw Framer frame simply can't do on its own. ## What Are Framer Code Components? **Framer code components** are pre-built React components you drop directly into your Framer project, the same way you'd drag in a native frame or shape. Think of them as a level up from regular design elements: - **Regular frames** = static shapes, text, and images with Framer's built-in interactions. - **Code components** = interactive elements with real logic underneath — filterable galleries, CMS carousels, animated counters, form validation, scroll-triggered effects. They're built by developers using React and TypeScript, but the entire point is that they're *designed for designers* — every meaningful option is exposed as a control in the Properties Panel, no code editing required. ## Why Use Code Components in Framer? Here's what a good code component unlocks that native Framer layers generally can't: ### 1. Advanced Functionality Without Code Want a filterable CMS gallery with multi-field filtering? A countdown timer with a real backend-synced deadline? An animated pricing table with plan comparison logic? Code components give you these instantly, instead of hacking together a workaround with overrides and states. ### 2. Save Real Hours of Build Time Instead of spending an afternoon figuring out how to build a custom accordion with the exact animation curve you want, you install a tested one in two minutes and spend that afternoon on the client's actual design instead. ### 3. Professional-Looking Sites, Faster High-quality components are already tested across breakpoints, accessibility basics, and performance — you inherit that quality instead of re-deriving it from scratch on every project. ## Code Components vs. Code Overrides vs. Native Layers Beginners often conflate three different things Framer offers. They solve different problems: <table> <thead> <tr> <th> Approach </th> <th> What it is </th> <th> Best for </th> </tr> </thead> <tbody> <tr> <td> <strong> Native layers </strong> </td> <td> Frames, text, images, Framer's built-in interactions </td> <td> Standard layouts, simple hover/tap states, basic scroll effects </td> </tr> <tr> <td> <strong> Code overrides </strong> </td> <td> Small React snippets applied <em> on top of </em> an existing layer to modify its behavior </td> <td> Tweaking one specific interaction (e.g., custom easing, conditional visibility) </td> </tr> <tr> <td> <strong> Code components </strong> </td> <td> Standalone React components with their own internal logic and property controls </td> <td> Complex, reusable functionality (galleries, filters, forms, carousels) </td> </tr> </tbody> </table> If you're not sure which you need: if a native frame with variants and interactions can do it, use that — it's simpler to maintain. If you need logic (filtering, data fetching, complex state), you need a code component. If you just need to tweak how an existing layer behaves in one specific way, a code override is often the lighter-weight fix. ## How to Add Code Components to Framer (Step-by-Step) ### Step 1: Get the Component URL After purchasing a component from **FramerHub** (or any marketplace), you'll receive a **component URL**. It looks like this: ```text https://framer.com/m/ComponentName-XyZ1.js ``` Copy this URL to your clipboard — you won't need to download or upload any files manually. ### Step 2: Add the Component to Your Framer Project 1. **Open your Framer project.** 2. Click the **"+" button** in the toolbar (or press `Cmd/Ctrl + K`). 3. Select **"Code Component"** from the menu. 4. **Paste the component URL** into the field. 5. Hit **Enter**. That's it — the component now appears in your project's **Assets panel**, ready to use on any page. ### Step 3: Drag It Onto Your Canvas Just like any other layer: 1. Find the component in the **Assets panel** (left sidebar). 2. **Drag it onto your canvas**, wherever you need it. 3. Resize and reposition it like a normal frame. ### Step 4: Customize the Component Most **Framer code components** ship with a full set of customizable properties in the **Properties Panel** (right sidebar). Typical controls include: - **Colors** — primary, secondary, background, text. - **Text** — headings, labels, button copy. - **Sizing** — padding, spacing, width/height, corner radius. - **Animation** — speed, easing curve, trigger (on load, on scroll, on hover). - **CMS connections** — if the component supports it, a dropdown to connect a collection and map fields. No code required at any point — just point, click, and adjust. ## Common Setup Mistakes (And How to Fix Them) Even a two-minute install has a few predictable failure points: - **Pasting the wrong URL format.** The component URL must end in `.js` and come directly from the marketplace listing — pasting a marketing page URL instead of the actual component file URL will fail silently. - **Forgetting to connect CMS fields.** A CMS-ready component installed without connecting the collection will show placeholder/demo content. Check the Properties Panel for a "Collection" or "Data Source" dropdown. - **Stacking too many heavy components on one page.** Each code component adds some JavaScript weight. A page with 8-10 heavy animated components can start to feel sluggish — see our guide on [optimizing Framer site performance](/blog/optimize-framer-site-performance) if you notice lag. - **Not testing responsive behavior.** Some components have separate mobile/tablet property overrides — always check the Breakpoints panel after installing, don't assume desktop settings carry over perfectly. - **Using an outdated component URL after a marketplace update.** If a component gets a major version update, older embed URLs may be deprecated — check the marketplace listing for the current URL if something stops working after months of no changes on your end. ## Updating a Code Component After Install Code components installed via URL update automatically when the developer ships a new version to that same URL — you don't need to reinstall manually in most cases. That said, a few habits keep updates from surprising you mid-project: - **Check the changelog before a client handoff.** If a component received a major update recently, verify your specific property configuration still looks right before delivering the final site. - **Screenshot key pages before a known update window.** If a marketplace announces a breaking change to a component you rely on heavily, a quick before/after comparison saves debugging time later. - **Don't panic over minor visual shifts.** A well-maintained component library treats visual changes as intentional improvements (better default spacing, refined animation curves), not bugs — check the release notes before assuming something broke. ## Common Questions About Framer Code Components ### Q: Do I need to know React to use code components? **A:** No. Code components are designed to be used by designers. You customize them through the Properties Panel, just like regular frames — React knowledge is only relevant if you choose to edit the underlying code. ### Q: Can I edit the code inside a component? **A:** Yes, if you want to. You can "Unlink" a component and edit the code directly. But most users never need to do this — the exposed controls cover nearly every customization a typical project needs. ### Q: Will code components slow down my site? **A:** Not if they're built well. High-quality components (like those from **FramerHub**) are optimized for performance, using memoization and minimal bundle size so they don't add noticeable load time. ### Q: Can I use code components with Framer CMS? **A:** Absolutely. Many components are *designed* for CMS integration — filterable galleries, dynamic cards, CMS-connected carousels are common use cases. ## Pro Tips for Using Framer Code Components ### 1. Use Component Variants Many components have built-in **variants** (Light/Dark, Small/Large, Compact/Expanded). Use these to match your design system instead of manually restyling every instance. ### 2. Create Master Components If you use the same code component across multiple pages, wrap it in a **Master Component** so changes sync everywhere it's used. This is the foundation of [scalable agency architecture](/blog/scalable-framer-architecture-for-agencies) — one place to update, not a dozen. ### 3. Test on Mobile Early, Not Last Always preview on mobile *before* you've finished the whole page. Some components expose separate responsive properties you'll want to adjust per breakpoint, and catching this early avoids a rebuild pass at the end. ### 4. Start with a Library, Not One-Off Purchases Instead of buying components one at a time as you hit each need, start with a **component library** (like FramerHub's bundles) to get a broad toolkit at once — it's almost always cheaper per-component and means you're not searching mid-project for a specific piece. ## A Real Example: Adding a CMS-Connected Gallery To make this concrete, here's what installing a real CMS-connected component looks like end to end, using a gallery component as the example. 1. **Install the component** via its URL, following Steps 1-2 above. It appears in the Assets panel as `Gallery Kit / CMS Gallery`. 2. **Drag it onto a page** where you want the gallery — typically a portfolio or case-studies page. 3. **Open the Properties Panel** and look for a "Collection" dropdown. Select the CMS collection you want to display (e.g., "Projects"). 4. **Map the fields.** Most gallery components ask you to map the collection's image field, title field, and optionally a category field for filtering. This takes 30 seconds if your CMS fields are already named sensibly. 5. **Choose a layout variant** — masonry, grid, or carousel are common options exposed directly in the Properties Panel. 6. **Preview and adjust spacing/sizing** for your specific page width, then publish. Building the equivalent from scratch — a responsive masonry layout with a lightbox, connected dynamically to a CMS collection — would typically take an experienced Framer developer several hours. Installing a tested one takes minutes, and you inherit browser and accessibility testing you didn't have to do yourself. ## When *Not* to Use a Code Component Code components solve real problems, but they're not always the right tool. Reach for a native Framer layer instead when: - **The interaction is genuinely simple** — a basic hover color change or a fade-in on scroll doesn't need a code component; Framer's native Hover/Tap variants and Scroll Transform handle it with zero added weight. - **You need pixel-perfect control over a one-off layout** that won't repeat elsewhere — a component's abstraction can get in the way when you need to hand-tune something unique to a single page. - **Performance is already tight** and the component would add meaningful weight for a marginal visual improvement — weigh the interaction's value against its cost on a page that's already near your performance budget. The rule of thumb: reach for a code component when you need real logic or a proven, reusable pattern. Reach for native layers when the interaction is simple enough that a component would be over-engineering it. ## Where to Find High-Quality Framer Code Components Not all components are built to the same standard. Before installing one, check for: - ✅ **Performance-tested** — loads fast, doesn't introduce jank on scroll. - ✅ **Well-documented** — clear instructions and labeled property controls, not cryptic abbreviations. - ✅ **Regularly updated** — bug fixes and ongoing compatibility with new Framer releases. - ✅ **Real support** — a way to reach the developer directly if something breaks. [FramerHub](/plugins/framer-components) offers a curated library of premium components built specifically for **Framer freelancers and agencies**. Every component is tested, optimized, and ready for client work out of the box. ## Conclusion Adding **code components to Framer** is one of the fastest ways to level up a project without writing a single line of code yourself. Instead of spending hours building a custom interaction from scratch, you get a battle-tested component running in minutes — and your clients get a more polished, more interactive site as a result. **Next steps:** 1. Browse the [FramerHub component library](/components). 2. Pick a component that solves a real pain point in your current build. 3. Install it, connect any CMS fields it needs, and see how much build time it saves you. Ready to build faster? [Explore FramerHub Components →](/components) and see for yourself how much time a tested library saves on your very next client project. --- - **Page:** How to Build Forms in Framer (That Actually Work) - **Source:** https://framerhub.io/blog/how-to-build-forms-in-framer - **Description:** How to build forms in Framer: what the native Form element covers, where it runs out, and how to add validation, multi-step flows, conditional fields and file uploads. Every Framer site needs at least one form. A contact form, a lead capture, a quote request. Does Framer have forms? Yes. Framer ships a native Form element, it handles submission itself, and for a straightforward contact form you need nothing else. That native element is the starting point for framer forms, so this guide starts there. The second question is the one that brings people here: what happens when the client asks for a three-step intake form with a file upload and fields that appear based on earlier answers. That's where the native form runs out, and this guide covers exactly which piece does what, including where our own plugin stops. --- ## How native Framer forms work Drag a Form element onto the canvas from the Insert panel. Add input fields, connect a submit button, and configure where the submission goes in the element's settings. Framer handles the submission path. There is no backend to write, no service to sign up for, and no plugin to install. That covers more than people assume: - **Over ten input types**, including text, email, message (textarea), name, number, phone, date, time and location, plus checkboxes, radio buttons and dropdown menus. - **A submit button** wired to the form, with success and error states you can design. - **Basic required-field and email-format checking**, so an empty required field or an obviously malformed address doesn't sail through. - **Submission handling**, owned by Framer and configured on the form itself, with email, Google Sheets and custom webhook destinations, plus spam protection and rate limiting. ### Setting up a native Framer contact form 1. Drag a Form element onto your page from the Insert panel. 2. Add the fields you need: name, email, message. 3. Set each field's type correctly, an email field should be the email type, not plain text, so the built-in format check applies. 4. Open the form's settings and configure where submissions should go. 5. Style the submit button and design the success and error states. A form with no visible confirmation is the most common self-inflicted conversion bug on any site. 6. Preview and submit a test entry. 7. Publish and test again on the live URL, not just in preview. For an early-stage site with a single contact form, stop here. This is a genuinely good baseline and reaching past it costs you money and complexity you don't need yet. --- ## Where native Framer forms run into real limits These aren't hypothetical. They're what shows up the moment a client asks for something past "name, email, message". ### Field depth The native set is broader than people expect, and it still runs out. Date, time, phone and number inputs are there. What isn't: a rating, an NPS scale, a signature pad, a country selector, a rich text input, or a repeatable field group. On a quote request or an application form, that gap is a real part of the form. ### Validation depth Required and email-format are the extent of it. There's no minimum length, no maximum length, no phone or URL format rule, no regex pattern, and no way to write the error message yourself. "This field is required" is fine; "Enter a UK postcode, like SW1A 1AA" is what actually reduces abandonment. ### No conditional fields Every field is always visible. A form that asks "are you an agency or a freelancer?" and then shows different follow-up questions isn't possible natively, you either show everything to everyone or split it into separate pages. ### No file uploads There's no upload field type. Job applications, quote requests with reference images, and support forms needing a screenshot all stop here. ### No multi-step Long forms convert better broken into steps with a progress indicator. The native form is single-step, so a fifteen-field form is a fifteen-field scroll. ### Spam handling Any public form on any platform attracts bots eventually. Native Framer gives you basic protection; a captcha you choose and configure is a different level of control. Submission itself is *not* on that list. Framer's submission handling works. Sending limits, wherever they apply, belong to your Framer plan, no component plugin can raise them, and any article claiming a plugin removes them is describing a feature that doesn't exist. --- ## Adding the missing fields with Framer Form Kit Plugin [Framer Form Kit](/plugins/framer-form-kit) is our plugin: a collection of field components that live inside Framer's native form. It doesn't replace the form, wrap it, or take over submission. You keep the native Form element and swap the fields inside it. That also draws the boundary around what it fixes. It can solve everything in the list above. It cannot solve anything on the submission side, and it doesn't try to. **Field components, free.** Text, email, number, phone, URL, textarea, select, checkbox, and the submit button. That's the working set for most forms, and it costs nothing. **Validation, free.** Required rules, email/phone/URL format checks, minimum and maximum length, custom regex patterns, and your own error message per rule, shown inline when the field loses focus rather than after a failed submit. **Conditional logic, free.** Show, hide, enable, or disable a field based on another field's value, with eight comparison operators and AND/OR grouping. Hidden fields skip validation, which is the detail that makes conditional forms actually usable, a hidden required field that silently blocks submit is the classic bug here. **Multi-step, premium.** Split one form into steps, with a progress indicator, validation on each step before the reader can advance, and autosave to the browser so a half-filled form survives a reload. **File upload, premium.** Single file, multiple files, or image-only, with preview and upload progress. **Captcha, premium.** reCAPTCHA, hCaptcha, or Turnstile, you pick which, rather than getting whichever one the plugin author preferred. **URL parameter prefill and UTM capture, premium.** Read values out of the URL into fields, visible or hidden, so campaign attribution rides along with the submission. **Specialised inputs, premium and Pro.** Signature pad, rich text, colour picker, country selector with flags, NPS, rating, scale, slider, repeater, reset button. **One honest note about the free tier:** the free submit button renders a small "Powered by Framer Form Kit" credit. It's not hidden in the settings, and you'd rather hear it here than discover it after you've built the form. What Form Kit does not do matters just as much, because other pages on this topic will tell you otherwise. It does not send email. It does not post webhooks, and there is no Zapier, Make, or n8n connector. There is no Google Sheets, Notion, HubSpot, Airtable, or Mailchimp integration, and no payment collection. If a form you're scoping depends on any of those, that's a plan-and-tooling conversation before you build, not something to discover at handover. <blog-cta button-link="/plugins/framer-form-kit" button-text="See Form Kit" description="Validation, conditional logic, multi-step, file upload and captcha, all inside Framer's native form. Free tier available." title="The fields Framer's form doesn't ship" variant="blue"> </blog-cta> ## Where your submissions actually go **Framer owns submission.** The Form element you dragged onto the canvas is still the thing that submits. Form Kit's submit button asks that native form to submit; it does not open its own connection to anywhere. **So submissions follow whatever you configured in Framer**, and the place to check whether one arrived is Framer, not the plugin. **Any sending limits are Framer's.** They're a function of your Framer plan. Adding field components changes nothing about them, in either direction. **One exception, and it's narrow.** Uploaded files can't travel inside a normal form submission, so the file upload component uploads the file to Form Kit's own storage and puts the resulting file URL into the form. What reaches your submission is a link to the file, not the file itself. Worth knowing when you're deciding whether that's acceptable for the kind of documents your client's form will receive. That's the entire architecture, and it tells you where to look when something goes wrong. --- ## Setting up Form Kit: step by step 1. Open the Framer Form Kit plugin from [the Framer form kit plugin page](https://www.framer.com/marketplace/plugins/framer-form-kit/). 2. Keep your native Framer Form element. Add Form Kit's field components inside it. 3. Replace the native inputs with the matching Form Kit fields, and give each one a name, that name is what identifies the value in the submission. 4. Configure validation per field in the properties panel: required, format, length, custom pattern, and the message the reader sees. 5. Add conditional rules where a field should only appear based on an earlier answer, and confirm the hidden branch doesn't block submit. 6. For a long form, group fields into steps and add the progress and next/back components. 7. Add a captcha before launch if the form is publicly reachable. 8. Confirm the submission destination on the native Form element, since that is still where submissions are handled. 9. Test the whole flow, including a deliberately invalid submission and one on a phone, and confirm the entry arrives where you expect. --- ## Common form types and what they actually need **Simple contact form.** Name, email, message. Native Framer handles this. Don't add a plugin to a form this size. **Quote request form.** Needs more fields and conditional branching, show a budget range only after a project type is picked, so incomplete requests stop reaching sales. Conditional logic is the piece doing the work here, and it's on the free tier. **Job application form.** Needs a file upload for the CV, plus enough fields that multi-step is usually worth it. This is the clearest case where native Framer can't do the job at all. **Multi-step intake or onboarding form.** Progress indication and per-step validation are what stop a long form feeling long. Autosave matters more than people expect, because readers do reload. **Event registration.** A select for ticket type, a date field, and a captcha, because public registration forms are a spam magnet. **Support or bug report form.** File upload for screenshots plus structured fields (severity, page URL, browser) so the report arrives usable instead of starting a five-email thread. Multi-step forms, file upload, conditional logic, and the submissions question each deserve more room than one paragraph. We're writing a proper guide for each of the four, and this page will link to them as they go up. --- ## Designing the rest of the page around your form A form rarely lives alone. Contact, quote, and application pages usually need a short trust-building intro, an FAQ block, some social proof, and clear next-step messaging after submission. Rather than custom-building those per project, [FramerHub Components](/components) covers the accordions, testimonial sliders, and stat blocks that surround a form, so the page comes together while you spend your time on the form logic. The full [plugin catalog](/plugins) covers what else pairs with a form-driven page. The state after submit gets less attention than it deserves. "Thanks, we'll be in touch" is a wasted screen. Say who will respond and roughly when, and the same form starts feeling like a business rather than a void. --- ## Testing checklist before you launch a form - Submit a valid entry and confirm it arrives where you configured it - Submit an invalid entry, missing required field, malformed email, and confirm the inline error is clear and specific - Trigger every conditional branch, and confirm a hidden required field never blocks submit - On a multi-step form, confirm each step validates before advancing, and reload mid-form to check autosave - If using file upload, test an oversized file and confirm the limit is communicated rather than silently failing - Test on a real phone, since field spacing and keyboard behaviour differ from desktop - Confirm the captcha doesn't block a legitimate submission - Confirm the success state actually renders, rather than leaving a blank screen --- ## Choosing the right approach for your project **Use native Framer forms when** it's a straightforward contact form, you don't need file uploads or conditional fields, and the field types you need are already there. This is more projects than plugin vendors like to admit. **Use Form Kit when** the form needs real validation, conditional fields, multiple steps, a file upload, or an input type Framer doesn't ship, and you want it to look like part of the page rather than an embed. **Use Tally or Typeform when** the form itself is the product: a long survey, a quiz, complex logic and reporting, or a workflow your team will manage without a designer. Tally's free tier is genuinely generous and the embed works. What it costs you is design control, the form arrives in an iframe with its own layout rules, and on a carefully designed page it reads as a widget. There's no universal right answer here. The question is whether the form is a piece of your page or a system of its own. --- ## FAQ ### Does Framer have forms? Yes. Framer ships a native Form element with input fields, a submit button, and its own submission handling, and it needs no plugin. It covers a straightforward contact form well. What it doesn't cover is field depth: multi-step flows, file uploads, conditional fields, and validation with custom messages. ### Where do Framer form submissions go? Framer handles submission itself, so submissions follow whatever destination you configure on the native Form element inside Framer. A component plugin like [Form Kit](/plugins/framer-form-kit) adds fields and validation inside that same native form; it does not take over the submission path, and any sending limits are Framer's, not the plugin's. ### Can Framer forms have file uploads? Framer's native form has no file upload field. Form Kit's premium file upload component adds one, with single, multiple, and image-only modes plus preview and progress. The file is uploaded to Form Kit's own storage and the resulting file URL is what gets stored with the submission. ### How do I add validation to a Framer form? Native Framer forms validate required fields and basic email format. Form Kit's free field components add required rules, email, phone and URL format checks, minimum and maximum length, custom regex patterns, and custom error messages shown inline when a field loses focus. ### Can I build a multi-step form in Framer? Not with the native Form element alone, which is single-step. Form Kit's premium multi-step components split one form into steps with a progress indicator, validation per step before the reader can advance, and autosave so a partly filled form survives a reload. ### What's the difference between Framer's native form and Form Kit? Framer's native form owns submission. Form Kit is a collection of field components that live inside that native form, adding validation, conditional logic, multi-step flows, file upload, captcha, and specialised inputs like signature, rating and NPS. You use both together, not one instead of the other. --- ## Bottom line Native framer forms are the right answer more often than the internet suggests. A contact form on a small site needs nothing more, and adding a plugin to it is work you'll maintain for no gain. What native forms don't give you is field depth: validation you can word yourself, fields that appear based on earlier answers, steps, uploads, and the specialised inputs that a real intake form is mostly made of. That's the gap [Form Kit](/plugins/framer-form-kit) fills, inside Framer's own form rather than around it. Setup docs and live demos are at [framerformkit.com](https://framerformkit.com). Whichever you pick, decide once and standardise across projects. Knowing the validation behaviour, the upload limits, and where submissions land before you start is worth more than re-litigating the choice on every build. *Last updated: August 2026* --- - **Page:** How to Price Framer Freelance Projects (The Definitive Guide) - **Source:** https://framerhub.io/blog/how-to-price-framer-freelance-projects - **Description:** Stop undercharging. Learn the exact strategies to price your Framer projects, from hourly rates to value-based pricing. One of the most common questions in the Framer community is: *"How much should I charge for this?"* Price too low, and you burn out delivering agency-quality work for hobbyist rates. Price too high without communicating value, and you lose the lead before the conversation even starts. This guide breaks down exactly how to price **Framer freelance projects** — the three pricing models, real rate ranges by project type, how to scope a project so it doesn't quietly grow past what you quoted, and how to raise your prices without losing clients. ## The 3 Pricing Models for Framer Designers There are three fundamentally different ways to price your work. Understanding when to use each is the difference between a sustainable freelance business and one where you're always slightly underwater. ### 1. Hourly Billing **Best for:** Maintenance retainers, small tweaks, or genuinely undefined scopes where you can't estimate total effort upfront. This is where most beginners start — trading time directly for money. - **Pros:** You get paid for every hour of work, with no risk of underestimating a project. - **Cons:** You're penalized for getting better. As you get faster at Framer, you earn *less* for the same output, since the client is paying for hours, not results. **Recommended rate:** Don't go below $50/hr if you're proficient with Framer's CMS, responsive breakpoints, and basic code overrides. Experienced Framer developers who handle custom components and complex animations charge $100-$200/hr. ### 2. Project-Based (Fixed) Pricing **Best for:** Standard websites, landing pages, and any project with a well-defined scope. This is the standard model for most **Framer website pricing**. You agree on a scope and a total price upfront, before work starts. - **Pros:** You profit from your own efficiency. If you use a template or component library (like FramerHub) to finish in half the time, you keep the extra profit instead of "losing" billable hours. - **Cons:** Scope creep can quietly kill your margins if the contract isn't specific about what's included. **Typical ranges (2026):** <table> <thead> <tr> <th> Project type </th> <th> Typical price range </th> <th> What's usually included </th> </tr> </thead> <tbody> <tr> <td> Landing page (1 page) </td> <td> $500 – $2,500 </td> <td> Single page, basic animations, no CMS </td> </tr> <tr> <td> 5-page marketing site </td> <td> $2,500 – $8,000 </td> <td> Nav/footer, 3-5 pages, light CMS (blog or team) </td> </tr> <tr> <td> Complex site (CMS + animation) </td> <td> $8,000 – $20,000+ </td> <td> Multiple CMS collections, custom components, filtering, integrations </td> </tr> <tr> <td> Ongoing maintenance retainer </td> <td> $300 – $1,500/mo </td> <td> Content updates, small fixes, monitoring </td> </tr> </tbody> </table> ### 3. Value-Based Pricing **Best for:** High-revenue clients, SaaS companies, and e-commerce brands where the site directly drives revenue. This is the model experienced freelancers graduate into. You price based on the *value* you create, not the hours it takes. If a landing page will generate $100,000 in incremental sales for a client, a $10,000 fee is an easy decision for them — even if it only takes you 10 hours of actual work. The value, not your time, sets the price. **How to introduce value-based pricing:** Ask about the client's numbers before quoting — conversion rate, average deal size, monthly traffic. A concrete "this page needs to convert X% of Y visitors to hit your revenue target" reframes the conversation away from "how many hours will this take." ## Factors That Influence Your Rates When determining your **Framer freelance rates**, weigh these variables on every quote: 1. **Complexity.** Does it need complex CMS filtering, custom code overrides, or advanced scroll-linked animation? Each of these adds real build and QA time beyond a standard page. 2. **Timeline.** Rush jobs should always carry a 25-50% premium — you're reprioritizing other client work to accommodate them. 3. **Client budget and stage.** A funded startup with a marketing budget has a fundamentally different willingness to pay than a local bakery — price accordingly, without underselling either. 4. **Asset readiness.** Do they have branding, copywriting, and photography ready, or do you need to source/create them? Missing assets should be a separate line item, not absorbed into your design fee. 5. **Revision scope.** How many rounds of revisions are included? Unlimited revisions (a common beginner mistake) turns a fixed-price project into an open-ended one. ## How to Scope a Project So It Doesn't Creep Scope creep is the single biggest margin-killer in fixed-price freelancing. Before you quote, get specific, in writing, on: - **Exact page count** — list the pages by name, not "a few pages." - **Number of CMS collections** and roughly how many fields each has. - **Number of unique animation/interaction treatments** (not "some animations" — is it 3 hover effects or 15?). - **Revision rounds** — 2 rounds is standard; anything beyond that is billed separately. - **What's explicitly excluded** — copywriting, stock photography licensing, ongoing hosting/maintenance, SEO work beyond basic setup. Put this in a one-page scope document the client signs before the deposit. When a client asks for something outside it mid-project, you're not negotiating from scratch — you're pointing to a line they already agreed to and pricing the addition as a change order. ## How to Increase Your Prices Want to charge more on your next project? Here's the practical playbook: ### 1. Specialize Don't be a generic "Framer Designer." Be a "Framer Expert for SaaS Startups" or a "High-Converting Landing Page Specialist." Specialists command higher rates than generalists because clients believe (often correctly) that a specialist has already solved their specific problem before. ### 2. Use a Documented System Agencies and serious clients pay for reliability, not just aesthetics. If you have a [scalable Framer architecture](/blog/scalable-framer-architecture-for-agencies) — naming conventions, a component library, a repeatable process — you read as lower-risk. Lower risk justifies a higher premium, because the client isn't betting on you figuring it out as you go. ### 3. Speed of Delivery Clients consistently pay for speed. If you can deliver a high-quality site in 3 days instead of 3 weeks, that speed itself is worth a premium — especially for time-sensitive launches (product hunt, funding announcements, event pages). *Tip: Pre-built components and templates reduce build time significantly without sacrificing quality — the time saved becomes either extra margin or a faster turnaround you can charge a premium for.* ### 4. Show Outcomes, Not Just Screenshots A portfolio that says "built 40 Framer sites" is weaker than one that says "redesigned X's landing page, increased signup conversion by 22%." If you have access to before/after metrics from past projects, lead with them in proposals — outcomes justify price far more than visual polish alone. ## The "Reusable Components" Advantage One of the most underused levers in profitable freelancing is **reusability**. Stop building the same navbar, FAQ accordion, and pricing table from scratch for every client. Build your own internal library over time, or start faster with a resource like [FramerHub's component library](/plugins/framer-components). By using tested, high-quality components instead of building from zero each time, you: 1. **Deliver faster** — skip the boring, low-differentiation build phase (navs, accordions, standard cards). 2. **Focus your time on impact** — spend hours on unique branding, copy, and high-value interactions instead of rebuilding commodity UI. 3. **Increase your effective margin** — fixed price + less time invested = a higher real hourly rate, even though you quoted the same fee. ## Sample Quote Walkthrough: A 6-Page SaaS Site Numbers are more useful with a real example attached. Say a SaaS client wants a 6-page marketing site: Home, Features, Pricing, Blog (CMS), Case Studies (CMS), and Contact. - **Estimated hours:** 45-55 hours (design + build + CMS setup + responsive QA), based on similar past projects. - **Hourly baseline:** At $80/hr, that's $3,600-$4,400 as a pure time estimate. - **Complexity multiplier:** Two CMS collections with filtering and a handful of custom hover/scroll interactions push this to a 1.3x multiplier — roughly $4,700-$5,700. - **Value check:** The client expects the site to support a funding round and a paid acquisition push. If it's expected to influence six figures in pipeline, a $6,000-$8,000 fixed price is easily justified relative to that outcome, not just the hours behind it. - **Final quote:** $6,500, positioned as a fixed price with 2 revision rounds, copywriting excluded, a 50% deposit, and the remainder due on launch. Walking through this exercise on paper — even roughly — stops you from anchoring on a number that just "feels right" and instead ties the quote to actual effort, actual complexity, and the actual business value the client expects to get from the finished site. ## Deposits, Contracts, and Getting Paid on Time Pricing correctly doesn't help if you're chasing invoices for six weeks after launch. A few non-negotiables for any fixed-price Framer project: - **Always take a deposit** — 50% is standard, due before any design work begins. This filters out non-serious leads and protects your time if a client disappears mid-project. - **Milestone payments on larger projects.** For anything above $5,000, split into three payments (deposit, mid-project milestone, final payment on launch) rather than one lump sum at the end. - **Put the scope document inside the contract**, not just in a Slack message or email thread. If a dispute happens, "we agreed on 5 pages" needs to be in a signed document, not buried in chat history. - **Define what "done" means.** Is it "site launched," or "site launched and indexed in Google"? Vague completion criteria are a common source of payment delays. ## Common Pricing Mistakes to Avoid - **Quoting off a gut feeling instead of the framework above.** A number that isn't tied to hours or value is hard to defend if the client pushes back. - **Including unlimited revisions "to be nice."** This is the single fastest way to turn a profitable fixed-price project into an unprofitable one — cap rounds explicitly. - **Discounting immediately when a client says "that's high."** Ask what budget they had in mind first; you may be closer than you think, or you may be talking to the wrong client entirely. - **Charging the same rate regardless of project complexity.** A single landing page and a CMS-heavy directory site with filtering are not the same job, even if both are "one website." - **Skipping a written scope entirely for "simple" projects.** Small projects are exactly where scope creep sneaks in unnoticed, because nobody bothered to write down what "simple" meant on day one. - **Never revisiting your rates.** If you haven't raised your prices in the last six months while your portfolio and speed have improved, you're very likely underpricing relative to your current skill level. ## A Simple Quoting Framework When you're staring at a blank quote, work through this order instead of guessing a number: 1. **Estimate hours** for the full scope as if billing hourly, using your honest hourly rate. 2. **Add a complexity multiplier** (1.0x for standard work, 1.3-1.5x for heavy custom code or unusual CMS structures). 3. **Compare against the value the site creates** for the client, if you have enough information to estimate it (traffic × conversion lift, or revenue tied directly to the page). 4. **Quote the higher of the two**, not the average. If value-based pricing suggests a number well above your hourly estimate, that's the number — don't discount yourself back down to "fair" hourly pay. ## Conclusion Pricing is closer to a negotiated skill than a fixed formula. Start with a rate that makes you slightly uncomfortable to say out loud, and raise it with every new project that comes in without pushback. Remember: clients aren't buying "a Framer site." They're buying a solution to a business problem — more leads, more signups, a credible-looking brand for their next raise. Sell the solution, price around the value it creates, and the exact number becomes secondary to how confidently you present it. Want to reduce your own build time so more of every fixed-price project turns into margin? [Browse FramerHub's component library](/plugins/framer-components) — or see how much Framer freelancers realistically earn once pricing, speed, and specialization all click into place. The freelancers who charge the most aren't necessarily the most talented designers in the room — they're the ones who've turned pricing into a repeatable process instead of a guessing game they redo from scratch on every single lead. --- - **Page:** How to Contact Framer Support (2026): Chat, Email and Response Times - **Source:** https://framerhub.io/blog/how-to-contact-framer-support - **Description:** How to reach Framer support: in-app Contact Support, the contact page, support@framer.com for billing, the Emergency button, response times by plan, and what support won't cover. To contact Framer support, open the quick actions menu in the Framer editor, search for "Contact Support", and send your question to Framer's Product Experts. On paid plans the first reply comes within 24 hours. You can also use the form at [framer.com/contact](https://www.framer.com/contact/) (up to 72 hours), and for billing or login problems email **support@framer.com**. If your site is down, use the Emergency button on the contact page and check [framerstatus.com](https://framerstatus.com). We build Framer plugins used by 2,000+ Framer users, so we see which questions end up with Framer and which end up with plugin makers like us. This guide covers every Framer support channel, what each one handles, and how to get a useful answer the first time. > **Key Takeaways** > > - Product questions: editor quick actions → "Contact Support" (first reply within 24h on paid plans) or framer.com/contact (within 72h). > - Billing and login problems: [support@framer.com](mailto:support@framer.com), which Framer says is staffed around the clock. > - Site down: the Emergency button on framer.com/contact, plus framerstatus.com for outages. > - Framer support doesn't edit projects, debug custom code or support third-party plugins and components. > - Free plan users rely on the help centre and community; product-expert support is for paid plans. ## Where to go for each Framer problem <table> <thead> <tr> <th> Problem </th> <th> Where to go </th> <th> Response time </th> </tr> </thead> <tbody> <tr> <td> Product question or bug (paid plan) </td> <td> Editor → quick actions → "Contact Support" </td> <td> Up to 24 hours for first response </td> </tr> <tr> <td> Product question by email </td> <td> <a href="https://www.framer.com/contact/" rel="nofollow"> framer.com/contact </a> </td> <td> Up to 72 hours </td> </tr> <tr> <td> Billing, failed payment, can't log in </td> <td> <a href="mailto:support@framer.com"> support@framer.com </a> or the contact page </td> <td> Billing team works around the clock </td> </tr> <tr> <td> Site is down </td> <td> Emergency button on the contact page, <a href="https://framerstatus.com" rel="nofollow"> framerstatus.com </a> </td> <td> Urgent channel </td> </tr> <tr> <td> Abuse, spam or a scam site </td> <td> <a href="mailto:abuse@framer.com"> abuse@framer.com </a> </td> <td> Not stated </td> </tr> <tr> <td> Enterprise </td> <td> Slack, Microsoft Teams or email per your contract </td> <td> Contract SLA </td> </tr> <tr> <td> A third-party plugin or component </td> <td> The creator of that plugin or component </td> <td> Depends on the creator </td> </tr> </tbody> </table> Response times are from Framer's [support explained](https://www.framer.com/help/articles/support-explained/) help article as of October 2026. ## How to contact Framer support from the editor This is the fastest route for paid plans: 1. Open your project in Framer. 2. Open the quick actions menu and search for **"Contact Support"**. 3. Describe the problem and send it to Framer's Product Experts. 4. Watch for the reply in the app or your email. Framer lists up to 24 hours for the first response. Contacting support from inside the project matters because the team can see which project you're asking about. ## Framer support email **support@framer.com** is Framer's address for billing and account issues: failed payments, invoices and login problems. For product questions, Framer routes you to in-app Contact Support or the contact page form, which replies by email. The other published address is **abuse@framer.com**, for reporting abuse, spam or policy violations on sites hosted by Framer. ## Framer support by plan <table> <thead> <tr> <th> Plan </th> <th> Support </th> </tr> </thead> <tbody> <tr> <td> <strong> Free </strong> </td> <td> Help centre and community; billing and login help via <a href="mailto:support@framer.com"> support@framer.com </a> </td> </tr> <tr> <td> <strong> Paid plans </strong> </td> <td> Product Experts via in-app Contact Support (24h) or the contact page (72h) </td> </tr> <tr> <td> <strong> Enterprise </strong> </td> <td> Product Specialists and, when needed, Engineering over Slack, Teams or email; onboarding, training and SLAs by contract </td> </tr> </tbody> </table> Framer reports a median first response under 10 minutes for Enterprise over the past 90 days, per its help centre. ## What Framer support won't help with Framer's support article lists three things it doesn't cover: - **Changing your project for you.** Support explains how to do something; it won't build it. - **Code-related issues.** Custom code components and overrides are yours to debug. - **Third-party tools.** Plugins and components from the Marketplace are supported by whoever made them. For those, go to the creator. Every Marketplace plugin and component lists its creator, and most link to a support page or email. If you need hands-on help with a build, Framer's community has a directory of Framer Experts you can hire. If the problem is with a FramerHub plugin, such as CMS Filter or Form Kit, [contact us](/contact) directly. We support our own plugins. <blog-cta button-link="/plugins" button-text="Browse Plugins" description="Framer support doesn't cover third-party plugins. We support ours directly: CMS Filter, Form Kit, Components and more." title="Using a FramerHub plugin?" variant="blue"> </blog-cta> ## Before you contact support A complete first message saves a round of back-and-forth: - **Check framerstatus.com first.** If there's an outage, there's nothing to fix on your side. - **Republish and hard-refresh.** Many "my change isn't live" issues are an unpublished change or a cached page. - **Include the project link** and the exact page or breakpoint where the problem appears. - **Write the steps to reproduce it**, what you expected and what happened instead. - **Attach a screen recording or screenshot.** - **Mention plugins or code components on the page.** If removing one fixes the problem, it belongs with that creator. ## Common Framer problems and where they get fixed Most support tickets fall into a handful of patterns. Knowing which channel owns each one saves a day of waiting. ### "My changes aren't showing on the live site" Framer only updates the live site when you publish. Check that you published after your last edit, then hard-refresh the page or open it in a private window. If the published version still looks wrong, it's a product question for Contact Support; include the page URL and a screenshot of the editor next to the live page. ### "My custom domain won't connect" Domain connection depends on DNS records at your registrar, and changes can take time to propagate. Framer's domain settings show the records it expects. Compare them with what your registrar shows, then wait before retrying. If the records match and it still fails, send support the domain, the registrar and a screenshot of both screens. ### "Form submissions aren't arriving" Start with the form's own settings: where submissions are sent (email, Google Sheets or a webhook) and whether the latest version is published. Check spam folders for email delivery. If the form is a plugin or code component rather than Framer's native form, the plugin's creator supports it, not Framer. ### "I've hit a plan limit" Pages, CMS items, bandwidth and editors are capped per plan, and some caps can be raised with add-ons on [Framer's pricing page](https://www.framer.com/pricing). Plan and billing questions go to [support@framer.com](mailto:support@framer.com). If the limit is on what Framer can do rather than how much, such as filtering a large CMS collection, a plugin is usually the answer. ### "A payment failed or I can't log in" These go straight to [support@framer.com](mailto:support@framer.com) or the billing option on the contact page. Framer says its billing team works around the clock. <blog-cta button-link="/plugins/framer-cms-filter" button-text="See CMS Filter" description="CMS Filter adds multi-field search, range sliders, facets with counts and sorting to Framer CMS collections. Support comes from us, the team that builds it." title="Hit a CMS filtering limit, not a bug?" variant="blue"> </blog-cta> ## A support message template Copy this into Contact Support and fill it in: ```text Project: <project link> Page / breakpoint: <URL or page name, desktop/tablet/phone> What I did: <steps, in order> What I expected: <one line> What happened: <one line, plus screenshot or screen recording> Plugins or code components on this page: <names, or "none"> Plan: <Basic / Pro / Enterprise> ``` The last two lines matter most. They tell support straight away whether the issue is theirs or a third party's, and whether your plan includes the feature you're asking about. ## Free help that's often faster - **Framer help centre** ([framer.com/help](https://www.framer.com/help/)): official articles for most setup questions. - **Framer community**: other designers answer questions, often the same day. - **Framer Experts**: paid help from experienced Framer builders when you need someone to do the work. Common how-to questions have long-form answers too. Our [Framer CMS guide](/blog/framer-cms-complete-guide) and [guide to building forms in Framer](/blog/how-to-build-forms-in-framer) cover two of the areas people most often ask support about. ## FAQ ### What is Framer's support email? [support@framer.com](mailto:support@framer.com), for billing and account issues. Product questions go through Contact Support in the editor or the contact page. ### How long does Framer support take to reply? Up to 24 hours for a first response through in-app Contact Support and up to 72 hours through the contact page, on paid plans. Enterprise runs on contract SLAs. ### Does Framer have phone support? No phone number is listed on Framer's contact page. Support runs through in-app chat, the contact page and email. ### Can free plan users contact Framer support? Product-expert support is for paid plans. Free users can use the help centre and community, and can email [support@framer.com](mailto:support@framer.com) about billing or login problems. ### Does Framer support help with plugins and code? No. Framer doesn't modify projects, resolve code-related issues or support third-party plugins and components. Contact the creator instead. ### How do I contact a business whose website is on Framer? Use the contact details on that business's own site. Framer hosts it but doesn't run the business, so Framer support can't connect you. To report a scam or abuse, email [abuse@framer.com](mailto:abuse@framer.com). ## Quickest route Paid plan with a product problem: the editor, quick actions, "Contact Support". Billing or login: [support@framer.com](mailto:support@framer.com). Site down: framerstatus.com, then the Emergency button. Plugin problem: the plugin's creator. --- - **Page:** Scalable Framer Architecture for Agencies (Stop Building from Scratch) - **Source:** https://framerhub.io/blog/scalable-framer-architecture-for-agencies - **Description:** Learn how to structure large Framer projects for scale. Naming conventions, component systems, and CMS strategies for agencies. If you're an agency building **scalable Framer websites**, you know the pain. A project starts clean. By the time you hand it off to the client, it's a mess of unnamed layers, detached components, and one-off styles nobody remembers the reasoning behind. Then the client asks for a new page, or a rebrand, and every shortcut you took in week one becomes a full afternoon of untangling. To scale an agency past a handful of projects at a time, you need a system: **Framer component-based architecture** that holds up under real client work, not just a portfolio piece. It's also how you justify [higher freelance rates](/blog/how-to-price-framer-freelance-projects) — clients pay more for teams that deliver consistently, not just teams that design well once. This is the architecture we use (and recommend) for every multi-page, multi-client Framer build. ## 1. The "Atomic" File Structure Don't dump everything into one page and duplicate styles as you go. For **Framer enterprise website development**, organization has to happen before the first pixel. ### Global Styles First Before you draw a single rectangle, define: - **Color Styles:** Primary, Secondary, Surface, Text, Border, and at least one Accent. - **Text Styles:** H1–H6, Body, Caption, Button, Overline. - **Effects:** Shadows (sm/md/lg), Blurs, Border radii as reusable values where possible. *Pro Tip: Use semantic naming, not literal naming.* Instead of "Blue," call it "Primary Action." If the client rebrands from blue to red six months later, you change the *value* of "Primary Action" once — you don't hunt through 60 layers looking for every instance of blue. ### Component Organization Group components logically in the Assets panel from day one: - `UI/Buttons` - `UI/Inputs` - `UI/Badges` - `Sections/Hero` - `Sections/Features` - `Sections/Testimonials` - `Sections/Pricing` - `Layout/Nav` - `Layout/Footer` A flat, ungrouped Assets panel with 80 components is unusable by month three. A grouped one scales to hundreds without anyone getting lost. ## 2. Naming Conventions That Don't Suck Your client — and your future self, six months from now — will thank you for clean naming. - **Bad:** `Frame 123`, `Group 4`, `Rectangle 8`, `Copy of Copy of Hero` - **Good:** `Hero Section`, `Feature Card`, `Background Image`, `CTA Button — Primary` Use "Slash Naming" for variants to keep the Properties panel readable and searchable: - `Button / Primary / Default` - `Button / Primary / Hover` - `Button / Secondary / Default` - `Card / Feature / With Icon` - `Card / Feature / With Image` The rule of thumb: if you can't tell what a layer is from its name alone, without clicking on it, rename it. This sounds tedious in the moment. It saves hours during every future edit, and it's the difference between a handoff a client can actually use and one that generates a support ticket a week later. ## 3. CMS Architecture for Scale **Framer CMS integration for scale** requires planning before you create your first collection, not after you've already built three pages around it. ### The "Single Source of Truth" Rule If a team member's profile appears on the "About" page *and* on individual "Blog Post" pages as an author card, do **not** manually rebuild it in both places. 1. Create a dedicated `Authors` (or `Team`) CMS collection with fields for name, photo, bio, role, and social links. 2. Reference that collection from the `Blog Posts` collection using a CMS reference field. 3. Build one `Author Card` component that pulls from the reference. When an author updates their headshot, it updates everywhere that reference is used — the About page, every blog post, any team-listing widget. No manual find-and-replace across a dozen pages. ### Common CMS Relationships Worth Setting Up <table> <thead> <tr> <th> Relationship </th> <th> Example </th> <th> Why it matters </th> </tr> </thead> <tbody> <tr> <td> Author → Posts </td> <td> Team collection referenced by Blog collection </td> <td> One profile update propagates everywhere </td> </tr> <tr> <td> Category → Items </td> <td> Category collection referenced by Products/Posts </td> <td> Enables clean <a href="/plugins/framer-cms-filter"> CMS filtering </a> without duplicating category text </td> </tr> <tr> <td> Location → Listings </td> <td> Location collection referenced by Directory items </td> <td> Keeps address/map data consistent across listings </td> </tr> <tr> <td> Testimonial → Client </td> <td> Client logo collection referenced by Testimonials </td> <td> Logo updates once instead of per-testimonial </td> </tr> </tbody> </table> Planning these relationships up front is the difference between a CMS that scales to 500 items cleanly and one that needs a manual data-migration project at 100 items. ## 4. The "Master Component" Workflow Never build a page from raw, one-off frames. Build it from components — even ones you think you'll only use once. (New to code components specifically? See our [beginner's guide to adding code components to Framer](/blog/getting-started-framer-components).) Even a section you're sure is a one-off — a specific "About Us" hero, say — should be a component. Three reasons: 1. **Version control:** Components have edit history in Framer. Raw frames don't give you the same visibility into what changed and when. 2. **Safety:** It's much harder to accidentally break a component instance than to accidentally nudge, resize, or delete part of a raw frame tree. 3. **Responsiveness:** Breakpoint management is cleaner inside the component editor — you set responsive behavior once, in one place, instead of managing overrides scattered across every page that uses the layout. ### Variants Over Duplicates When a section needs a slightly different look on different pages (a hero with a video background vs. one with a static image), add it as a **variant** of the same component instead of duplicating the component entirely. This keeps your Assets panel from ballooning into 40 near-identical "Hero" components that all need separate maintenance. ## 5. Building a Reusable Starter Kit The highest-leverage thing an agency can do is stop rebuilding the same 20 components for every new client. Build (or buy) a starter kit once: - 3–5 button/input variants matching common design patterns - 5–6 section templates (hero, features, testimonials, pricing, FAQ, CTA) - A nav and footer component with slots for logo, links, and social icons - A CMS-connected card component for blog/portfolio/product grids Store this as a **duplicate-and-customize** starting project, or maintain it as a shared component library your whole team pulls from. This is exactly what [FramerHub's component library](/plugins/framer-components) is built for — pre-tested, documented components an agency drops in and re-skins per client, instead of building each piece from zero every time. ## 6. Handing Off to Clients The whole point of **Framer site architecture best practices** is a handoff the client can actually use without breaking things. - **Lock layers:** Lock anything the client shouldn't touch — background structure, spacing containers, anything purely presentational. - **Simplify exposed properties:** Hide complex component internals. Give the client simple toggles like "Show Image" or "Dark Mode," not raw access to every layer. - **Document with a hidden page:** Create a `_Documentation` page (unpublished, or with `noindex`) with short Loom videos on how to edit text, swap images, and add CMS items. - **Test the handoff yourself:** Before sending it over, try editing the site as if you were the client, using only the exposed controls. If you get stuck, they will too. ## Shared Component Libraries vs. Per-Client Duplication Agencies typically land on one of two models for managing components across multiple clients. Neither is universally "correct" — the right choice depends on how similar your clients' needs are. **Model 1: Shared Master Library.** One Framer project (or a set of published components) holds every core component. Each client project imports from it. Updates to the button component roll out everywhere at once. - **Pros:** Fastest to update, most consistent quality, easiest for new team members to learn one system. - **Cons:** A breaking change to the shared library can ripple into every active client project if you're not careful with versioning. **Model 2: Duplicate-and-Diverge.** Each client project starts as a duplicate of a starter template, then evolves independently. - **Pros:** Zero risk of one client's changes affecting another's live site. - **Cons:** Fixes and improvements don't propagate — you fix the same bug in five different projects instead of once. Most agencies land on a hybrid: a shared library for genuinely universal patterns (buttons, form inputs, layout containers), and duplicate-and-diverge for anything client-specific (hero sections, unique page layouts). This is also the model [FramerHub's component library](/plugins/framer-components) is designed around — pull in the shared, tested pieces, then customize freely on top without touching the underlying logic. ## Handling Client Edit Requests Without Breaking the System The real test of an architecture isn't how it looks on delivery day — it's what happens six months later when the client asks for a change themselves, or asks you for a small update under a tight deadline. A few rules that keep the system intact under pressure: 1. **Never edit inside a locked or shared component to fix a one-off issue.** If page 4 needs something slightly different, detach that instance or add a variant — don't modify the master component just to patch one page, or every other instance silently changes too. 2. **Route small client requests through exposed properties, not layer edits.** If a client wants to change a headline, they should use the CMS field or exposed text property you set up, not go digging through locked layers (which they can't access anyway, and which you shouldn't need to touch for a text change). 3. **Log structural changes somewhere the whole team can see.** Even a simple changelog inside the `_Documentation` page — "changed Primary color from #2D5BFF to #1B47D6 on 2026-06-02" — saves confusion when a second team member picks up the project later. 4. **Re-test the handoff after any structural change.** If you added a new component or changed a CMS relationship, click through the site as the client would before calling the update done. Agencies that skip these steps don't feel the cost immediately — they feel it three client-requests later, when nobody remembers why a component looks different on one page than the rest of the site. ## Signs Your Architecture Isn't Scaling Watch for these warning signs on any active project: - You're duplicating a component instead of adding a variant, because "it's faster right now." - Color or text values are typed manually instead of pulled from a style. - A simple client request (change one color) requires editing more than one place. - New team members take more than a day to find where something lives in the layer tree. Any one of these, on its own, isn't a crisis. All of them together mean the project has drifted away from the system, and it's worth a half-day cleanup before it compounds. ## Auditing an Existing Client Project Before You Scale It Agencies rarely start with a clean slate — you inherit projects, or your own early work predates the system you've since adopted. Before applying this architecture retroactively, run a quick audit: - **Layer names:** Spot-check three random pages. If you see `Frame 47` or `Group 12`, the naming pass hasn't happened yet. - **Color usage:** Open Color Styles and count how many are actually referenced versus how many one-off hex values exist on individual layers. A high ratio of one-off colors means a rebrand will be painful. - **Component count vs. duplicate count:** If you have 60 "components" in the Assets panel but many are near-identical copies of each other, you're duplicating instead of using variants. - **CMS structure:** Check whether related data (authors, categories, locations) lives in its own collection or is retyped as plain text on every item. Retrofitting an existing project doesn't need to happen all at once — prioritize the pages that get edited most often, since that's where an inconsistent system costs the most time. ## Conclusion Scalability isn't about complexity — it's about simplicity enforced consistently. A strict, boring system (semantic naming, master components, planned CMS relationships) reduces decision fatigue on every project, speeds up delivery, and produces handoffs clients can actually use without calling you back in a week. Want to skip the systems-building phase entirely? [FramerHub](/components) provides a pre-built library of scalable, agency-ready components. Start from an architecture that's already solid, and spend your time on the design and client relationship instead of rebuilding the same button component for the fortieth time. --- - **Page:** Framer Site Performance Optimization (10x Faster Load Times) - **Source:** https://framerhub.io/blog/optimize-framer-site-performance - **Description:** Complete guide to optimizing your Framer website for speed. Learn image optimization, Core Web Vitals, and performance best practices. Your **Framer site performance** directly impacts your bounce rate, your conversions, and your SEO ranking — all three, simultaneously, from the same root cause. A site that loads in 1 second converts meaningfully better than one that loads in 5 seconds; Google's own research on this gap has been consistent for years, and it hasn't gotten more forgiving as user expectations have risen. In this guide, you'll learn the exact, practical steps to **optimize Framer site performance** and hit fast load times consistently, even with animations, images, CMS collections, and custom code components in play. ## Why Framer Performance Matters Google uses **Core Web Vitals** as a ranking factor. If your Framer site is slow, you're losing on three fronts at once: - 🚫 **SEO rankings** — Google measurably deprioritizes slow, unstable pages in competitive results. - 🚫 **Conversions** — users bounce before they ever see your CTA, no matter how good it is. - 🚫 **Client trust** — agencies need demonstrably performant sites for client handoff; a slow demo undercuts a strong design. The good news: Framer is fast by default relative to most page builders. But "by default" has limits — the ten tactics below are what push a Framer site from "fine" to genuinely fast. ## 1. Image Optimization (The Biggest Performance Killer) Images account for **50-70%** of most pages' total weight. Optimize them first, before anything else on this list — it's the highest-leverage fix available. ### Use WebP Format (Automatic in Framer) Framer automatically converts uploaded images to **WebP**, a modern format that's typically 25-35% smaller than PNG/JPEG at equivalent visual quality. Don't disable this feature — there's essentially no reason to. ### Compress Before Uploading Don't upload 10MB source images and rely on Framer's conversion to fix it — conversion changes format, it doesn't fix an oversized source file. Compress first using: - **TinyPNG** (free, browser-based) - **ImageOptim** (Mac app) - **Squoosh** (Google's free web app, works cross-platform) **Target file size:** Under 500KB for most images, under 200KB for anything appearing below the fold. ### Use Correct Dimensions If you're displaying an image at 500px wide, don't upload a 4000px source. **Rule of thumb:** upload at roughly 2x the display size (for retina screens), but no larger — a 4x oversized image adds load weight with zero visible quality benefit. ### Lazy Load Off-Screen Images Framer automatically lazy-loads images below the fold. But your hero image is almost always the **Largest Contentful Paint (LCP)** element — it loads immediately, so it needs to be the single most aggressively optimized image on the page. ## 2. Minimize Code Components & Overrides ### Only Use What You Actually Need Every code component adds JavaScript to your page. Before installing one, ask: *"Do I really need this, or can native Framer layers achieve the same result?"* (New to code components? Read our [beginner's guide to adding code components to Framer](/blog/getting-started-framer-components).) ### Remove Unused Variants If a component ships with 5 variants but you only use 2 on this project, duplicate the component and delete the unused variants where possible. This trims dead weight from the bundle. ### Optimize Code Overrides If you're using **Framer code overrides**, follow these rules: - ✅ Use `useMemo` and `useCallback` to prevent unnecessary re-renders. - ✅ Avoid heavy calculations inside the render path. - ✅ Keep overrides simple and single-purpose. **Bad override (causes lag):** ```javascript export function HeavyOverride(Component): ComponentType { return (props) => { // Runs on every single render const data = expensiveCalculation() return <Component {...props} data={data} /> } } ``` **Good override (optimized):** ```javascript export function OptimizedOverride(Component): ComponentType { return (props) => { // Only recalculates when dependencies actually change const data = useMemo(() => expensiveCalculation(), []) return <Component {...props} data={data} /> } } ``` The difference looks small in code but compounds fast — an override re-running an expensive calculation on every scroll or resize event can measurably tank your INP score. ## 3. Reduce Animation Complexity Animations are a huge part of what makes Framer sites feel premium, but done wrong, they tank performance fast. ### Use Transforms (Not Position Changes) **Bad (janky):** Animate raw X/Y position values directly. **Good (smooth):** Animate `translateX`/`translateY` and `scale` instead of raw position or width/height. Transforms run on the GPU and skip layout recalculation entirely; animating position or size properties forces the browser to recompute layout on every single frame. ### Limit Simultaneous Animations Don't animate 50 elements at once on page load. Stagger them, or reduce the total count — a burst of simultaneous animations is one of the most common causes of visible jank on first load. ### Reduce Animation Complexity on Mobile Mobile devices generally have less processing headroom than desktop. Use Framer's **Breakpoint** feature to simplify, shorten, or disable heavier animations specifically on mobile, rather than shipping the desktop animation set unchanged. ## 4. Optimize Fonts ### Use System Fonts When Possible System fonts (`-apple-system`, `Segoe UI`, and similar) load instantly because they're already installed on the user's device — zero network request required. ### Limit Font Weights If you're using Google Fonts or a similar web-font service, don't import all 9 weights when you only use 2-3. ```text // Bad — loads 9 separate font files @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900'); // Good — loads 3 font files @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700'); ``` ### Preload Critical Fonts In Framer, add a `<link rel="preload">` tag in **Site Settings → Custom Code (Head)** to load your primary font earlier in the page's request waterfall, reducing the "flash of unstyled text" some browsers show while fonts load. ## 5. Optimize Framer CMS Queries If you're using **Framer CMS**, large collections can slow a page down in ways that aren't obvious from a quick glance. ### Limit CMS Items Per Page Don't render 100 blog posts on a single page load. Use pagination or "load more" patterns and render 9-12 items initially. ### Use Filters Wisely CMS filters are powerful, but filtering hundreds of items entirely client-side (in the browser) is slow, especially on mobile. If you have large datasets — hundreds or thousands of items — a purpose-built solution like a [CMS filtering plugin](/plugins/framer-cms-filter) handles this far more efficiently than a naive client-side filter built from scratch. ## 6. Test Your Framer Site Performance Use these tools to measure your **Framer site speed** — don't guess, measure: ### Lighthouse (Chrome DevTools) Open your site in Chrome, right-click → **Inspect** → **Lighthouse tab**, run the audit for **Performance**. **Target scores:** <table> <thead> <tr> <th> Metric </th> <th> Target </th> <th> What it measures </th> </tr> </thead> <tbody> <tr> <td> LCP (Largest Contentful Paint) </td> <td> Under 2.5s </td> <td> Time until the biggest visible element renders </td> </tr> <tr> <td> INP (Interaction to Next Paint) </td> <td> Under 200ms </td> <td> Responsiveness to clicks and taps </td> </tr> <tr> <td> CLS (Cumulative Layout Shift) </td> <td> Under 0.1 </td> <td> Visual stability as the page loads </td> </tr> </tbody> </table> ### WebPageTest Go to [webpagetest.org](https://webpagetest.org) and test from multiple geographic locations — a site fast from a US test location can be noticeably slower from other regions if your CDN setup isn't configured well. ### Framer's Built-In Preview Use the **Preview** feature to spot-check across devices before publishing, but don't treat it as a substitute for a real Lighthouse or PageSpeed audit — preview mode doesn't always reflect real-world network conditions. ## Diagnosing a Slow Page: A Quick Framework When a specific page is slow and you're not sure why, work through these in order — they're ranked by how often they're the actual cause: 1. **Check the hero image size.** Open DevTools' Network tab, reload, and sort by size. If the largest single file is an unoptimized hero image, that's your LCP problem, solved by re-compressing it. 2. **Count code components on the page.** More than 6-8 heavy interactive components on one page is a common source of unexplained lag — audit whether each one is pulling its weight. 3. **Check for layout shift sources.** Images or embeds without a reserved aspect ratio are the most common CLS culprit — set explicit dimensions so the browser reserves space before the asset loads. 4. **Review third-party scripts.** A chat widget, an old analytics snippet, or an embedded video player can each add hundreds of milliseconds independently of anything in your Framer build itself. ## 7. Additional Performance Tips ### Enable Cloudflare (If Using a Custom Domain) Cloudflare's CDN can cache your Framer site and serve it from the server nearest to each visitor, reducing latency meaningfully for a global audience. ### Minimize Third-Party Scripts Every analytics script, chat widget, and tracking pixel adds load time. Audit what you *actually* use regularly — it's common to find scripts from tools nobody's checked in months. ### Use `loading="lazy"` on Iframes If you embed YouTube videos or maps, add `loading="lazy"` so they don't load until the user actually scrolls near them. ## Framer's Built-In Performance Advantages vs. What You Control It's worth being clear about where Framer's platform-level performance ends and where your build decisions take over — this is where most confusion about "why is my site slow if Framer is fast" comes from. <table> <thead> <tr> <th> Handled by Framer automatically </th> <th> Still your responsibility </th> </tr> </thead> <tbody> <tr> <td> WebP image conversion </td> <td> Compressing/resizing images before upload </td> </tr> <tr> <td> CDN-backed hosting </td> <td> Choosing whether to add Cloudflare on top for a custom domain </td> </tr> <tr> <td> Below-the-fold lazy loading </td> <td> Optimizing the hero image specifically (it's not lazy-loaded) </td> </tr> <tr> <td> Reasonably clean base HTML/CSS output </td> <td> How many code components and overrides you stack on one page </td> </tr> <tr> <td> SSL and basic security headers </td> <td> Third-party script bloat (chat widgets, trackers, embeds) </td> </tr> </tbody> </table> Understanding this split matters because it tells you where to actually spend your optimization time. Chasing platform-level settings that are already handled wastes effort; the real gains almost always come from the "your responsibility" column. ## Monitoring Performance Over Time, Not Just at Launch A site that scores well in Lighthouse at launch can quietly degrade over months as content, images, and third-party scripts accumulate. A few habits keep performance from silently regressing: - **Re-run Lighthouse quarterly**, not just once at launch. CMS collections grow, marketing adds a new tracking pixel, someone uploads an unoptimized hero image during a content refresh — all of these erode performance gradually. - **Set a rough performance budget** before you start adding new sections or components — for example, "hero section stays under 300KB total" — and check new additions against it instead of only noticing after the page feels slow. - **Audit third-party scripts on a recurring basis.** Marketing and sales teams add tracking snippets and chat widgets over time; few teams ever remove old ones. A yearly script audit routinely finds two or three that are no longer used. - **Watch for CMS growth specifically.** A blog that launches with 10 posts and grows to 500 needs pagination and filtering strategies revisited — what worked at 10 items can become the slowest part of the site at 500. ## Real Numbers: What "Fast" Actually Looks Like To make the targets above concrete, here's what a well-optimized Framer marketing site typically achieves versus one that hasn't had any performance pass: <table> <thead> <tr> <th> Metric </th> <th> Unoptimized typical </th> <th> Well-optimized target </th> </tr> </thead> <tbody> <tr> <td> Total page weight </td> <td> 4-8 MB </td> <td> Under 2 MB </td> </tr> <tr> <td> LCP </td> <td> 3.5-6s </td> <td> Under 2.5s </td> </tr> <tr> <td> Lighthouse Performance score </td> <td> 40-65 </td> <td> 90+ </td> </tr> <tr> <td> Time to Interactive </td> <td> 4-7s </td> <td> Under 3s </td> </tr> </tbody> </table> The gap between these two columns is almost never one big architectural problem — it's the accumulation of unoptimized images, unused code components, and unmonitored third-party scripts covered throughout this guide, each shaving off a little more speed until the page quietly crosses from "fast" to "fine" without anyone noticing exactly when it happened. ## Conclusion **Framer site performance optimization** isn't one big fix — it's stacking a dozen smaller, deliberate improvements that compound. By optimizing images first, trimming component and override bloat, using GPU-friendly animations, and testing with real tools instead of guessing, you can consistently hit sub-1-second load times, even on mobile, even with CMS collections and custom components in the mix. **Quick Wins Checklist:** - ✅ Compress all images under 500KB (200KB below the fold) - ✅ Remove unused components and variants - ✅ Use transforms, not position changes, for animations - ✅ Limit Google Fonts to 2-3 weights - ✅ Test with Lighthouse and PageSpeed Insights, not just Framer Preview Want components that are already built with performance in mind? [FramerHub's components](/components) are optimized from the start, so speed isn't something you have to retrofit later. [Browse Performance-Optimized Components →](/components) --- - **Page:** The Ultimate SEO Checklist for Framer Templates (Increase Your Sales) - **Source:** https://framerhub.io/blog/seo-checklist-for-framer-templates - **Description:** Want to sell more Framer templates? Make them SEO-ready. Here is the complete checklist to optimize your templates for search engines. If you're selling **Framer templates**, design is only half the battle. Buyers judge templates two ways: how they look in the preview, and whether they hold up as a real, working website. Increasingly, buyers check the second one before paying — running a quick Lighthouse audit, viewing page source, or testing the demo on mobile. A template that scores 100% on Lighthouse and follows **Framer template SEO** best practices sells more, gets fewer refund requests, and earns better reviews. A template that doesn't reads as unfinished, no matter how good the design is. This is the complete **Framer SEO checklist** we use before shipping any FramerHub template or component — the exact items, the "why" behind each one, and exactly how to implement it inside Framer. Work through it in order before your next template goes live. ## Why SEO-Readiness Is a Sales Feature, Not Just a Ranking Factor Most template creators think about SEO as something the *buyer* deals with after purchase. That's backwards. A template's SEO foundation — its heading structure, its metadata fields, its Core Web Vitals — is baked into the build. The buyer inherits whatever you shipped. That means SEO readiness is a product feature you can market, the same way you'd market "fully responsive" or "CMS-connected." It's also a trust signal: agencies buying templates for client work need to know the foundation is solid before they hand it off, because they're the ones who'll answer for it if the client's site doesn't rank. Here's the full checklist, broken into the seven areas that actually move the needle. ## 1. Semantic HTML Structure Framer lets you change the HTML tag of any frame — this is the single most under-used SEO feature in the editor, and it costs nothing to set correctly. - **Nav:** Set the top navigation frame to `<nav>` - **Hero heading:** Set to `<h1>` — **only one per page** - **Section headings:** Set to `<h2>` - **Sub-headings inside sections:** Set to `<h3>` - **Main content wrapper:** Set to `<main>` where applicable - **Footer:** Set to `<footer>` **Why it matters:** Google's crawlers (and AI crawlers, which read structure even more literally) use HTML tags to understand what a page *is*, not just what it says. A page built entirely from `<div>` layers with no semantic tags forces the crawler to guess at hierarchy — and it often guesses wrong, which shows up as poor featured-snippet eligibility and weaker topical relevance. **How to check it:** In Framer, select each frame and look at the **Tag** dropdown in the right panel (under Layout or Accessibility, depending on the frame type). Go through the layer tree top to bottom on every unique page template — not just the homepage. It's common to catch a second `<h1>` hiding in a footer CTA or a testimonial block. **Common mistake:** Setting *every* bold heading-looking text to `<h1>` because it "looks important." One H1 per page, full stop. Everything else cascades down from `<h2>`. ## 2. Text Styles & Hierarchy Don't manually style text block by block. Use Framer's **Text Styles** panel to define a real hierarchy once, and reuse it everywhere. - Define `H1`, `H2`, `H3`, `H4`, `Body`, `Caption`, `Link` as named text styles. - Set a consistent type scale (e.g., H1 at 48–64px, H2 at 32–40px, H3 at 24px, Body at 16–18px). - Ensure `Body` text is at least **16px** — Google flags small mobile text as a usability issue, and it directly hurts readability scores. - Set adequate line-height (1.4–1.6 for body copy) so text doesn't feel cramped on mobile. **Why it matters:** Beyond readability, a defined text-style system means every page in your template inherits the same hierarchy automatically. If you (or a buyer) ever rebrand, you change the style definition once instead of hunting through 40 manually-styled text layers. **How to check it:** Open the **Assets → Text Styles** panel. If you see more than 8–10 one-off text styles for a template with 4-5 pages, you're not using the system — you're recreating it per-instance. ## 3. Image Optimization **SEO-optimized Framer templates** load fast, and images are the most common cause of a slow one. - **Alt text:** Add descriptive, specific alt text to every image — "Dashboard screenshot showing revenue chart" beats "image1." This matters for accessibility, image search, and increasingly for AI crawlers summarizing your page. - **WebP conversion:** Framer converts uploaded images to WebP automatically — don't disable this. It's roughly 25–35% smaller than PNG/JPEG at equivalent visual quality. - **Pre-compress before uploading:** Framer's auto-conversion doesn't fix a 12MB source file into a small one — it just changes format. Run images through **TinyPNG**, **Squoosh**, or **ImageOptim** first. Target under 500KB per image, under 200KB for anything below the fold. - **Correct dimensions:** If an image displays at 600px wide, upload at roughly 1200px (2x for retina), not 4000px. Oversized source images bloat page weight even after compression. - **Hero image priority:** Your hero image is almost always the **Largest Contentful Paint (LCP)** element. It needs to be the most aggressively optimized image on the page, since everything below the fold is already lazy-loaded by Framer. For a deeper technical breakdown of image and asset optimization, see our full guide on [optimizing Framer site performance](/blog/optimize-framer-site-performance). ## 4. Meta Data & Social Sharing Go to `Site Settings → General` (and per-page **SEO** panel) and set up: - **Title Template:** `{{title}} | {{site.title}}` — this way every page gets a consistent, branded title without you retyping the site name each time. - **Meta Description:** Write a unique, compelling description for every page — not just the homepage. Aim for 150–160 characters that include the page's core keyword naturally. - **Social Image (OG Image):** Design a dedicated 1200×630px Open Graph image. A broken or missing OG image is one of the fastest ways a template reads as unfinished when shared on Slack, X, or LinkedIn. - **Favicon:** Small detail, frequently skipped. Upload a proper favicon and touch icon set — it's one of the first things buyers notice in a browser tab. **Common mistake:** Leaving every CMS detail page (blog posts, product pages) with the *same* generic meta description inherited from a template default. Each CMS item needs its own title and description pulled from CMS fields, not a static fallback. ## 5. Technical SEO Settings Framer makes **Framer technical SEO** easy, but the settings still have to be checked, not assumed. - **Sitemap:** Enable "Generate Sitemap" in Site Settings — Framer builds and serves `sitemap.xml` automatically once this is on. - **Robots.txt:** Confirm it isn't blocking search engines. Framer generates a sensible default, but double-check if you've added custom rules for a staging or demo subdomain — it's common to accidentally leave a `Disallow: /` from a demo environment in place after launch. - **Canonical URLs:** Framer handles these automatically for most cases, but verify manually if the template supports custom domains or has duplicate content across CMS category filters. - **Redirects:** If the template replaces an older site structure, set up 301 redirects in Site Settings rather than letting old URLs 404. *Tip: Don't stop at traditional search engines. AI crawlers (ChatGPT, Perplexity, Gemini) read your site differently — see our guide on making a Framer site discoverable by ChatGPT and AI search for the llms.txt and structured-data setup.* ## 6. Performance (Core Web Vitals) Run your template demo through **PageSpeed Insights** or Chrome DevTools' Lighthouse tab before listing it anywhere. <table> <thead> <tr> <th> Metric </th> <th> What it measures </th> <th> Target </th> <th> Common fix </th> </tr> </thead> <tbody> <tr> <td> <strong> LCP </strong> (Largest Contentful Paint) </td> <td> Time until the biggest visible element loads </td> <td> Under 2.5s </td> <td> Compress and prioritize the hero image </td> </tr> <tr> <td> <strong> CLS </strong> (Cumulative Layout Shift) </td> <td> Visual stability as the page loads </td> <td> Under 0.1 </td> <td> Reserve space for images/embeds before they load </td> </tr> <tr> <td> <strong> INP </strong> (Interaction to Next Paint) </td> <td> Responsiveness to clicks/taps </td> <td> Under 200ms </td> <td> Simplify heavy code overrides and animations </td> </tr> <tr> <td> <strong> TTFB </strong> (Time to First Byte) </td> <td> Server response speed </td> <td> Under 0.8s </td> <td> Use Framer's CDN-backed hosting, avoid heavy redirects </td> </tr> </tbody> </table> A template with animations that shift layout on load, or a hero video that delays LCP by 4 seconds, will fail Core Web Vitals even if the design is excellent. For the full tactical breakdown, including code overrides, font loading, and CMS query optimization, read our complete guide on [optimizing Framer site performance](/blog/optimize-framer-site-performance). ## 7. Structured Data for CMS Pages If your template includes a CMS collection (blog, portfolio, products), add JSON-LD schema to the detail page template using Framer's CMS variables in Custom Code: ```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BlogPosting", "headline": {{Title | json}}, "description": {{Description | json}}, "datePublished": {{DatePublished | json}}, "image": {{ImageURL | json}} } </script> ``` **Why it matters:** Structured data is what turns a plain blue link into a rich result — star ratings, FAQ dropdowns, article dates — in Google's results. It's also increasingly how AI answer engines decide what a page *is* before deciding whether to cite it. Since this is added once to the CMS detail-page template, it automatically applies to every item in the collection — one setup, infinite pages covered. ## The "Template Seller" Secret: Make SEO a Selling Point When you list your template on a marketplace, don't bury SEO readiness in the fine print — lead with it: - ✅ SEO-Optimized Structure (single H1, proper H2–H4 hierarchy) - ✅ 90+ Lighthouse Performance Score - ✅ Automatic WebP Image Delivery - ✅ Semantic HTML5 Tags (nav, main, footer) - ✅ Pre-Configured Meta Titles & OG Images - ✅ Schema-Ready CMS Templates This tells buyers your template isn't just pretty — it's built to actually perform once it's live, which is exactly what an agency buyer needs to justify the purchase to their own client. ## SEO-Ready Template vs. Typical Marketplace Template <table> <thead> <tr> <th> Check </th> <th> SEO-Ready Template </th> <th> Typical Template </th> </tr> </thead> <tbody> <tr> <td> Heading structure </td> <td> One <code> <h1> </code> , clean <code> <h2> </code> –<code> <h4> </code> </td> <td> Multiple/missing H1s, generic <code> <div> </code> text </td> </tr> <tr> <td> Images </td> <td> Compressed, alt text on every image </td> <td> Unoptimized uploads, missing alt text </td> </tr> <tr> <td> Meta data </td> <td> Unique title/description per page </td> <td> Same title copied across pages </td> </tr> <tr> <td> Core Web Vitals </td> <td> LCP < 2.5s, CLS < 0.1 </td> <td> Untested, often fails on mobile </td> </tr> <tr> <td> CMS pages </td> <td> JSON-LD schema on detail template </td> <td> No structured data </td> </tr> <tr> <td> Sitemap/robots </td> <td> Verified and enabled </td> <td> Left on defaults, sometimes misconfigured </td> </tr> </tbody> </table> ## Quick Pre-Launch Audit (5 Minutes, Every Template) Before you list a template, run this fast pass — it catches the mistakes above without re-reading the whole checklist: 1. **View page source** (Cmd/Ctrl + U) on the demo. Search for `<h1` — confirm there's exactly one, and it isn't empty. 2. **Run Lighthouse** (Chrome DevTools → Lighthouse tab, Performance + SEO categories). Anything below 90 on either needs a fix before listing. 3. **Share the demo URL** in a private Slack channel or Notes app and check the link preview. If the OG image is broken or missing, buyers will see it too. 4. **Visit /sitemap.xml and /robots.txt** directly in the browser. Confirm the sitemap lists your real pages and robots.txt isn't blocking `Disallow: /`. 5. **Resize to mobile width** in DevTools and check that body text is legible without zooming and nothing shifts as it loads. This five-minute pass won't catch everything on the full checklist, but it catches the specific mistakes that make an otherwise well-designed template look unfinished to a buyer scanning it for thirty seconds before deciding whether to purchase. ## Conclusion SEO isn't magic. It's a checklist, and it's one most template creators skip because it isn't visible in a marketplace screenshot. By making your **Framer templates** SEO-ready — clean semantic structure, real metadata, compressed images, and verified Core Web Vitals — you give your customers a head start on their own marketing, which translates directly into fewer refunds, better reviews, and repeat buyers. For the broader ranking strategy beyond templates (content, backlinks, keyword targeting), read our full [Framer SEO guide](/blog/framer-seo-guide). And if you'd rather start from a foundation that's already built this way, browse [FramerHub's plugin and component library](/plugins) — every product ships with this checklist already applied. --- - **Page:** 10 Framer Design Trends Dominating 2026 (With Code Examples) - **Source:** https://framerhub.io/blog/top-10-framer-design-trends-2025 - **Description:** Discover the hottest Framer design trends for 2026. From 3D effects to AI-powered layouts, learn what's working in modern web design. **Framer design trends** evolve fast, and 2026's landscape has shifted further from 2025's already-more-interactive baseline. What worked in 2024 (minimal, flat design) gave way to richer, more dimensional experiences in 2025 — and 2026 has pushed that further, with AI tools moving from a novelty add-on into an actual part of the design workflow. If you're a **Framer freelancer** or agency, staying ahead of these trends isn't optional — it's how you justify premium rates and win pitches against competitors still shipping 2022-era layouts. Here's the full breakdown of the **10 Framer design trends** dominating 2026, with real implementation tips and code you can use immediately. ## 1. 3D and WebGL Effects (The New Hero Standard) **What it is:** Three-dimensional elements and WebGL animations replacing flat hero sections as the default for premium sites. **Why it's trending:** Tools like **Spline** and **Three.js** make embedding real 3D graphics into a Framer site accessible without being a dedicated 3D artist — export a scene, drop it in as an embed, and it just works. **How to implement:** - Use **Spline** to design a 3D scene, export as an embed, and drop it directly into Framer. - Or use pre-built 3D components (interactive product viewers, particle fields) available in component marketplaces. - Keep the 3D asset itself under a reasonable file-size budget — a beautiful hero scene that adds 3 seconds to LCP defeats its own purpose. *Note: 3D effects can be heavy on page weight. Make sure to optimize your site performance to keep load times reasonable, and consider a simpler fallback on mobile.* **Best for:** SaaS landing pages, creative portfolios, tech startups. ## 2. Bento Grid Layouts (Apple-Inspired Modularity) **What it is:** Asymmetric, card-based layouts where each "tile" holds a single feature, image, or stat — popularized by Apple's product pages and now standard across SaaS marketing sites. **Why it's trending:** Bento grids are highly scannable and feel inherently modern; they also make it easy to show 5-8 distinct pieces of information without a wall of text. **How to implement:** - Use Framer's native **Grid** or **Flexbox** layout — no code components required. - Mix large and small cards (2x2, 1x1, 2x1) to create visual rhythm instead of a uniform grid. - Add subtle hover effects (scale, border glow) to each card for interactivity. **Best for:** Feature sections, portfolios, SaaS product pages. ## 3. Glassmorphism 2.0 (Frosted Glass, Refined) **What it is:** The frosted-glass effect, refined with better contrast and accessibility than the original 2020-era wave of glassmorphism. **Why it's trending:** It adds visual depth without overwhelming the content underneath, and it works cleanly in both light and dark modes when contrast is handled correctly. **CSS reference:** ```css background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); ``` **How to implement in Framer:** - Create a frame with a semi-transparent background fill. - Add a **Backdrop Blur** effect from Framer's effects panel. - Add a subtle 1px border for definition against busy backgrounds. - Test contrast against both light and dark background images — this is where the original glassmorphism trend often failed accessibility checks. **Best for:** Navigation bars, cards, pricing tables. ## 4. Micro-Interactions Everywhere **What it is:** Small, deliberate animations that respond directly to user actions — button hover, scroll position, clicks, form focus. **Why it's trending:** They make a site feel *alive* and responsive, and they measurably increase perceived quality even when the underlying content is unchanged. **Examples:** - Buttons scale slightly (1.02-1.05x) on hover. - Icons animate in when they scroll into view. - Form inputs glow or shift border color when focused. **How to implement:** - Use Framer's **Hover** and **Tap** variants for click/touch feedback. - Add **Scroll Transform** effects to trigger animations as elements enter the viewport. - Keep durations subtle — 0.2-0.3s is the sweet spot; longer feels sluggish, shorter can feel jarring. **Best for:** CTAs, navigation menus, interactive dashboards. ## 5. AI-Generated Gradients and Backgrounds **What it is:** Complex, AI-generated gradient patterns replacing flat solid-color backgrounds. **Why it's trending:** Tools like **Midjourney** can generate unique, organic gradient textures that feel more distinctive than a standard two-stop CSS gradient. **How to implement:** - Generate a gradient/texture pattern in an AI image tool. - Export as a compressed image (WebP, ideally under 300KB). - Set as a section background with reduced opacity or a blend mode layered underneath your actual content. **Best for:** Hero sections, section dividers, testimonial backgrounds. ## 6. Dark Mode as the Default **What it is:** Designing for **dark mode first**, then adapting down to light mode, rather than the reverse. **Why it's trending:** Developer- and technical-audience segments have consistently preferred dark mode for years, and it reduces eye strain during extended sessions. **How to implement in Framer:** - Use Framer's built-in **Dark Mode** feature. - Define color variables for both modes so switching is a value swap, not a manual redesign. - Test your entire site in dark mode *first*, then verify light mode — building dark-first surfaces contrast issues you'd otherwise miss. **Best for:** Developer tools, SaaS apps, content-heavy technical sites. For consumer or brand-forward sites, test both — dark-first isn't universally the safer default outside technical audiences. ## 7. Typography as the Hero Element **What it is:** Oversized, bold typography (100px+) carrying the entire hero section as the primary visual element, with minimal supporting imagery. **Why it's trending:** It loads fast (text is cheap compared to images or 3D scenes), it's inherently accessible, and it makes a confident visual statement without relying on stock photography. **Best practices:** - Use **variable fonts** for smooth weight transitions across breakpoints. - Pair bold headings with minimal supporting body text — let the typography carry the visual weight. - Add subtle entrance animations (letter-spacing shifts, staggered fade-ins) without overdoing it. **Best for:** Agency sites, portfolios, brand-focused landing pages. ## 8. Scroll-Linked Animations (Parallax 2.0) **What it is:** Animations tied directly to scroll *position*, not just scroll speed or a simple fade trigger — creating a genuine sense of depth as the user scrolls. **Why it's trending:** It makes long-form pages feel interactive and directional instead of static, which is especially valuable for storytelling-heavy case study or product pages. **How to implement in Framer:** - Use **Scroll Transform** on individual frames. - Tie **Y position**, **scale**, or **opacity** to scroll progress rather than a fixed trigger point. - Stagger multiple elements' transforms slightly for a layered, dimensional effect instead of everything moving in lockstep. **Best for:** Storytelling pages, product showcases, case studies. ## 9. Component-Based Design Systems **What it is:** Building entire sites from reusable, modular components instead of one-off page layouts assembled from scratch each time. **Why it's trending:** Agencies need **scalable systems** for client handoffs at volume, and freelancers need speed to stay competitive on price without cutting quality. **How to implement:** - Create **Master Components** for buttons, cards, and section templates. - Use Framer **Variants** for different states (Primary/Secondary, Light/Dark, Default/Active). - Store components logically in the Assets Panel, grouped by type, for fast reuse across projects. For the full architecture behind this — naming conventions, CMS relationships, handoff workflows — see our guide on [scalable Framer architecture for agencies](/blog/scalable-framer-architecture-for-agencies). **Best for:** Agencies, multi-page sites, template sellers shipping multiple products. ## 10. AI as a Practical Design Workflow Tool **What it is:** AI tools moving beyond generating one-off images into an actual part of the layout and content-structuring workflow — suggesting section orders, generating placeholder copy variants, or flagging accessibility issues in a draft layout. **Why it's trending:** This is the clearest shift from 2025 to 2026 — AI assistance has moved from novelty backgrounds toward genuinely useful drafting and review help inside the design process itself. **How to use it practically:** - Ask an AI assistant to suggest a hero layout structure for a specific audience (e.g., "SaaS landing page for a project-management tool"), then build the winning structure in Framer with your own branding and content. - Use AI to generate several headline/subhead variants quickly for A/B testing, rather than staring at a blank page. - Have an AI tool review a finished layout for obvious accessibility gaps (contrast, missing alt text patterns) before final handoff. **Best for:** Rapid prototyping, client pitches, A/B testing headline variants. ## Bonus: SEO- and AI-Search-First Design **What it is:** Designing with both traditional search engines and AI answer engines (ChatGPT, Perplexity) in mind from the very first page structure decision, not retrofitted after launch. **Why it's trending:** Sites that aren't discoverable by AI search are increasingly invisible to a growing share of how people find products and information in 2026. **How to implement:** - Add JSON-LD schema to CMS-driven pages (blog posts, products, FAQs). - Use genuine semantic HTML — `<h1>`, `<h2>`, `<nav>`, `<footer>` — not a page built entirely from unlabeled `<div>` layers. - Add `llms.txt` for AI discovery alongside your standard `robots.txt`. (See our full guide: [How to Make Your Framer Site Discoverable by ChatGPT](/blog/framer-site-chatgpt-ai-discovery).) ## Trend Adoption at a Glance <table> <thead> <tr> <th> Trend </th> <th> Build effort </th> <th> Performance risk </th> <th> Best-fit site type </th> </tr> </thead> <tbody> <tr> <td> 3D/WebGL hero </td> <td> High </td> <td> High if unoptimized </td> <td> SaaS, portfolios, tech startups </td> </tr> <tr> <td> Bento grids </td> <td> Low </td> <td> Low </td> <td> Feature sections, SaaS </td> </tr> <tr> <td> Glassmorphism 2.0 </td> <td> Low </td> <td> Low </td> <td> Nav bars, cards, pricing </td> </tr> <tr> <td> Micro-interactions </td> <td> Low-Medium </td> <td> Low </td> <td> Almost any site </td> </tr> <tr> <td> AI-generated backgrounds </td> <td> Low </td> <td> Medium (image weight) </td> <td> Hero sections, dividers </td> </tr> <tr> <td> Dark mode default </td> <td> Medium </td> <td> Low </td> <td> Dev tools, SaaS </td> </tr> <tr> <td> Oversized typography </td> <td> Low </td> <td> Low </td> <td> Agency, portfolio, brand sites </td> </tr> <tr> <td> Scroll-linked animation </td> <td> Medium </td> <td> Medium </td> <td> Storytelling, case studies </td> </tr> <tr> <td> Component systems </td> <td> Medium (upfront) </td> <td> Low </td> <td> Agencies, multi-page sites </td> </tr> <tr> <td> AI workflow tools </td> <td> Low </td> <td> None (workflow, not runtime) </td> <td> Any team drafting layouts </td> </tr> </tbody> </table> Use this table to prioritize: if you're on a tight timeline, bento grids, micro-interactions, and typography-led heroes deliver the most visual impact for the least build and performance risk. ## What Changed Since 2025 A few honest notes on what's held up and what's shifted since this list was first written: - **3D/WebGL hero sections** have gone from "cutting edge" to genuinely mainstream on SaaS and startup sites — the risk now isn't standing out, it's blending in with everyone else who adopted it too. - **AI-generated backgrounds** are more common but also more scrutinized — audiences have gotten better at spotting generic AI-gradient patterns, so distinctive execution matters more than it did in 2025. - **Component-based systems** have shifted from "agency best practice" to close to a baseline expectation — clients increasingly ask directly whether a build uses a real component system before signing off on a proposal. - **AI as a workflow tool** (trend #10) is the newest addition to this list — in 2025 AI's role in Framer design was mostly generative backgrounds and layout inspiration; by 2026 it's become a genuine part of the drafting and review process itself. Trends that didn't make this year's list but were notable in 2025 — heavy skeuomorphism and maximalist color-blocking — have cooled significantly in favor of the more refined, restrained aesthetic reflected in the ten trends above. ## Conclusion: Stay Ahead of Framer Design Trends The **Framer design trends** of 2026 are defined by interactivity, dimensional depth, and AI woven into the actual workflow rather than bolted on as a gimmick. If you're still shipping sites that look like 2022 — flat, static, no motion — you're leaving money on the table against competitors who've adopted even two or three of the trends above. **Action steps:** 1. Pick 2-3 trends from this list that fit your next project's audience and timeline. 2. Implement them deliberately, checking performance impact as you go rather than after launch. 3. Show before/after examples to clients, and price the upgrade accordingly. Want components that already follow these trends? [FramerHub](/components) offers modern, trend-forward components built for 2026 — from bento-ready card layouts to scroll-linked reveal components, so you're not building each pattern from scratch. Explore the broader library at [FramerHub's plugins and components hub](/plugins) as well. [Browse Trending Components →](/components) --- - **Page:** What Is Framer? The Website Builder Explained (2026) - **Source:** https://framerhub.io/blog/what-is-framer - **Description:** Framer is a visual website builder: you design on a canvas and publish a fast, responsive site without writing code. How it works, what Framer 3.0 changed, pricing, and who it suits. Framer is a visual website builder. You design pages on a canvas, much like in Figma, and Framer turns that design into a fast, responsive website you can publish with one click, no code required. Since Framer 3.0 (June 2026) it also has AI agents that can build and edit pages inside your project. We build Framer plugins and components used by 2,000+ Framer users, so we spend most of our week inside Framer projects, including the parts that don't make it into the marketing videos. This guide covers how Framer works, what it costs, what changed in 3.0, and where it stops being the right tool for your next site. > **Key Takeaways** > > - Framer is a no-code website builder. You design visually and publish a hosted, responsive site with built-in SEO basics. > - Framer 3.0 (June 16, 2026) added AI agents that design pages, set breakpoints, create components and connect the CMS inside your existing project. > - There's a free plan for non-commercial sites; paid plans start at $10/month (Basic) and $30/month (Pro) as of October 2026. > - It fits designers, startups, freelancers and marketing teams; it's a weaker fit for large online stores, very large CMS catalogues and app-like products. > - When native features run out (filtering, forms, galleries), the Marketplace fills the gap with plugins and components. ## What is Framer? Framer is a design-first website builder made by Framer B. V., a company based in Amsterdam. It started as a prototyping tool for interface designers and became a full website builder in 2022. Today it's used for marketing sites, landing pages, portfolios and content sites that need to look custom without a developer. Here's Framer at a glance: <table> <thead> <tr> <th> </th> <th> </th> </tr> </thead> <tbody> <tr> <td> <strong> Type </strong> </td> <td> Visual website builder with hosting </td> </tr> <tr> <td> <strong> Code needed </strong> </td> <td> No (optional React code components) </td> </tr> <tr> <td> <strong> Built for </strong> </td> <td> Designers, startups, freelancers, agencies, marketing teams </td> </tr> <tr> <td> <strong> Includes </strong> </td> <td> Canvas editor, responsive breakpoints, animations, CMS, hosting, SEO settings, analytics </td> </tr> <tr> <td> <strong> AI </strong> </td> <td> Framer Agents (since Framer 3.0) </td> </tr> <tr> <td> <strong> Price </strong> </td> <td> Free plan; paid from $10/month </td> </tr> </tbody> </table> Framer Motion is a different product. It's an open-source React animation library that started at Framer and now lives on as Motion. If you landed here looking for animation code for React, that's the one you want. Everything below is about Framer the website builder. ## How does Framer work? Framer works in three steps: design on the canvas, make it responsive, publish. ### 1. Design on the canvas You build pages from frames, text, images and stacks (Framer's auto-layout). If you've used Figma, the canvas feels familiar: drag, resize, set styles. You can also paste designs from Figma with a plugin, start from a template, or ask an agent to lay out a page for you. ### 2. Make it responsive Every page has breakpoints (desktop, tablet, phone by default). You adjust layout per breakpoint and Framer generates the responsive site. Animations, scroll effects and hover states are set visually in the same panel. ### 3. Publish Publishing pushes the site to Framer's hosting. You get a free `framer.website` subdomain, or connect a custom domain on a paid plan. Pages are served as static files from Framer's hosting. <blog-cta button-link="/components" button-text="Browse Components" description="90+ ready-made Framer components: effects, galleries, sliders and CMS layouts you can drop into any project." title="New to Framer? Start with the building blocks" variant="blue"> </blog-cta> ## What changed in Framer 3.0? [Framer 3.0](https://www.framer.com/updates/framer-3) shipped on June 16, 2026. Its headline feature is Agents, AI that works on the canvas inside your real project and uses your styles, components and CMS. According to Framer, agents can design entire pages, create breakpoints, add effects, build components, write code, connect content to the CMS and organise styles. Everything they produce stays editable like anything you'd built by hand. The release also added: - **Branching**: work on a copy of the site, compare changes and merge when they're approved. Useful when several people (or agents) edit the same site. - **Community**: a new space for creators to share and sell templates, components and plugins. - **A redesigned editor**. Since then, Framer has kept shipping on top of it, including **Skills** (September 2026), which save reusable instructions like your design system or writing style for the agent, and a **List field** for repeating content in the CMS. Agents run on monthly AI credits that come with each plan. ## What can you build with Framer? Framer is best at sites where design quality drives results: - **SaaS and startup marketing sites**: landing pages, pricing pages, changelogs. - **Portfolios**: designers, studios and photographers. - **Agency and freelance client sites**: fast to build, and clients can edit content themselves. - **Blogs and content sites**: the CMS handles posts, authors and categories. - **CMS-driven directories**: real estate listings, job boards, resource libraries. The last category is where we see most projects hit Framer's native limits. A directory lives or dies on search and filtering, and Framer's built-in filters cover simple cases only. We've written up exactly [where native filtering stops](/blog/framer-dynamic-filters-guide) and what to do about it. ## Do you need to know how to code? No. You can design, build and publish a complete site without writing a line of code. Code is there when you want it. Framer supports **code components** (React components you can drop on the canvas) and **code overrides** (small snippets that change how an element behaves). React knowledge helps here, but you only need it for custom behaviour. ## Is Framer the same as Figma? No. Figma designs interfaces and Framer publishes websites. Figma is where teams mock up and prototype; its files don't become live sites on their own. Framer outputs a hosted production website. A common setup is to design in Figma and build the production site in Framer. We compare the two in detail, including Figma Sites, in [Framer vs Figma](/blog/framer-vs-figma). ## Does Framer have a CMS? Yes. Framer's CMS stores content in **collections** (blog posts, team members, listings) with fields like text, images, dates, references and, since September 2026, lists. You design one template page and Framer generates a page per item. Limits depend on the plan. As of October 2026, Basic includes 2 collections and 1,000 items, and Pro includes 10 collections and 2,500 items, expandable with add-ons up to 40,000 items. Our [complete guide to the Framer CMS](/blog/framer-cms-complete-guide) covers how it works, the caps and the workarounds. ## Is Framer free? Yes, for non-commercial projects. Here's how the plans compare as of October 2026 (check [framer.com/pricing](https://www.framer.com/pricing) for current numbers): <table> <thead> <tr> <th> Plan </th> <th> Price </th> <th> Custom domain </th> <th> Pages </th> <th> CMS </th> <th> Bandwidth </th> <th> AI credits </th> </tr> </thead> <tbody> <tr> <td> <strong> Free </strong> </td> <td> $0 </td> <td> No (Framer subdomain) </td> <td> Limited </td> <td> Limited </td> <td> 1 GB </td> <td> 500 to try </td> </tr> <tr> <td> <strong> Basic </strong> </td> <td> $10/month </td> <td> Yes </td> <td> 30 </td> <td> 2 collections, 1,000 items </td> <td> 50 GB </td> <td> 1,000/month </td> </tr> <tr> <td> <strong> Pro </strong> </td> <td> $30/month </td> <td> Yes </td> <td> 150 </td> <td> 10 collections, 2,500 items </td> <td> 100 GB </td> <td> 3,000/month </td> </tr> <tr> <td> <strong> Enterprise </strong> </td> <td> Custom </td> <td> Yes </td> <td> Custom </td> <td> Custom </td> <td> Custom </td> <td> Custom </td> </tr> </tbody> </table> Extra editors cost $20/month each, and each translation locale is a $20 add-on. Pro adds redirects, a staging environment and branching, which matter once a site has real traffic. ## Who is Framer best for? <table> <thead> <tr> <th> Good fit </th> <th> Weaker fit </th> </tr> </thead> <tbody> <tr> <td> Designers who want to ship what they design </td> <td> Large online stores (no native cart or checkout) </td> </tr> <tr> <td> Startups that need a polished site fast </td> <td> Catalogues beyond 40,000 CMS items </td> </tr> <tr> <td> Freelancers and agencies building client sites </td> <td> Web apps with logins, dashboards or custom backends </td> </tr> <tr> <td> Marketing teams that want to edit without developers </td> <td> Teams that need to export and self-host the code </td> </tr> </tbody> </table> ### When Framer isn't the right choice Framer has **no native e-commerce**. Small shops connect an external checkout; anything bigger belongs on a dedicated store platform. Framer has no user accounts, databases or dashboards, so app-like products need other tools. And if your CMS is huge or needs advanced search and faceted filtering, plan for plugins from day one. If you're weighing alternatives, our [Framer vs Webflow](/blog/framer-vs-webflow) comparison goes deeper on those trade-offs. ## How do templates, components and plugins work? Framer's [Marketplace](https://www.framer.com/marketplace/) has three kinds of add-ons: - **Templates**: complete sites you duplicate and customise. The fastest way to launch. - **Components**: reusable pieces (sliders, galleries, effects) you drop onto any page. - **Plugins**: tools that run inside the editor and add features Framer doesn't have natively, like advanced CMS filtering, form handling or data import. This is the layer we work in. Our [CMS Filter plugin](/plugins/framer-cms-filter) adds multi-field search, range sliders, AND/OR logic, facets with counts and sorting by any field to Framer CMS collections, and our [best Framer plugins](/blog/best-framer-plugins) list covers the wider ecosystem, including tools we don't make. <blog-cta button-link="/plugins/framer-cms-filter" button-text="See CMS Filter" description="CMS Filter adds multi-field search, range sliders, facets with counts and sorting by any field to Framer CMS collections. No variants to manage." title="Hit Framer's filtering limits?" variant="blue"> </blog-cta> ## How to get started with Framer 1. **Pick a starting point.** A template if you want speed, a blank canvas if you want to learn, or an agent prompt if you want a first draft to edit. 2. **Learn stacks and breakpoints first.** They're the two concepts behind every responsive Framer layout. 3. **Set up the CMS early** if the site has repeating content like posts, case studies or listings. 4. **Publish on the free subdomain** while you build, then move to a paid plan when you connect your domain. 5. **Fill the gaps with the Marketplace** for features like advanced forms or filtering. ## FAQ ### What is Framer used for? Framer is used to design and publish websites: marketing sites, SaaS landing pages, portfolios, agency sites, blogs and CMS-driven directories. You design visually and Framer handles responsive layout, hosting, SEO basics and publishing. ### Is Framer free? Yes, for non-commercial projects. The free plan publishes to a Framer subdomain with 1 GB of bandwidth and no custom domain. Paid plans start at $10/month (Basic) and $30/month (Pro) as of October 2026. ### Do you need to know how to code to use Framer? No. You can build and publish a full site without code. React code components and overrides are optional for custom behaviour. ### Is Framer the same as Figma? No. Figma is a design tool for interfaces and prototypes; Framer is a website builder that publishes live sites. Many teams design in Figma and build in Framer. ### Is Framer good for SEO? Yes, for the basics: fast static hosting, editable titles and meta descriptions, clean URLs, sitemaps and Open Graph images. Redirects and staging need Pro. ### Can Framer be used for e-commerce? Not natively. There's no built-in cart or checkout. Small shops connect an external checkout; large catalogues are better on a dedicated e-commerce platform. ## Should you use Framer? Use Framer if you're building a marketing site, portfolio, client site or content site and you want design control without a developer in the loop. Skip it for large online stores, app-like products, or a CMS that will grow past 40,000 items. The cheapest way to decide is to try it: build one page on the free plan, set up its breakpoints, and publish it to the Framer subdomain. If the project needs filtering, advanced forms or galleries the native tools don't cover, check the Marketplace before you rule Framer out. <blog-cta button-link="/plugins" button-text="Browse Plugins" description="CMS filtering, forms and 90+ components, built by a team that works in Framer every day." title="Extend what Framer can do" variant="blue"> </blog-cta> --- - **Page:** Framer CMS Find & Replace — Bulk Edit CMS Text | FramerHub - **Source:** https://framerhub.io/plugins/cms-find-replace - **Description:** Free Framer plugin. Search and replace text across entire CMS collections. Preview matches, undo changes, export CSV. Regex and case-sensitive matching. Trusted by 1.5k+ Framer Pros # **The CMS tool **Framer didn't ship**. ** Update repeated text across hundreds of CMS items in one pass. No more editing each item one by one. Free forever. [**Get Started Free **](https://www.framer.com/marketplace/plugins/framer-cms-find-replace/) framer.com/plugins/cms-find-replace ## **Rebranding? New company name across 200 blog posts.** The math of manual data entry. **Without Plugin ** **Open item #1. Find text. Edit. Save. ****30s** **Open item #2. Find text. Edit. Save. ****30s** **Open item #3. Find text. Edit. Save. **30s **Open item #4. Find text. Edit. Save. **30s **... Repeat 196 more times ...** **Total Time****2+ hours** **Risk Factor****High (Typos, Inconsistency)** **With CMS Find & Replace ** **Step 1** ~~OldBrand~~** **→** **NewBrand **Step 2** **Preview all 200 matches** **Step 3** **Apply. Done.** **Total Time****30 seconds** **Risk Factor****Zero (Undo available)** ## **1 Click. 200 Items Updated. ** Review all your matches before committing. Catch typos across your entire site instantly and replace them with complete confidence. Follow us on ~~Twitter~~ <ins>~~X~~</ins> for more updates. **Post: "My First Blog"** Share this article to ~~Twitter~~ <ins>~~X~~</ins> right now. **Post: "Framer Updates"** ... and 212 more instances replaced. ## **When you need it** ### **1. Rebranding** Company name change across all CMS content, case-studies, and blog posts. ### **2. URL migration** Updating `OldDomain.com` to `NewDomain.io` in every hyperlink. ### **3. Typo cleanup** Fix repeated misspellings or grammar changes across hundreds of posts. ### **4. Product updates** Old product name → new product name. E.g. "StartupKit" to "GrowthKit". ### **5. Content audit** Find outdated terminology, replace with current industry standards. ### **Bulk Replace** Search and replace across an entire collection. Filter by field scope and item status — All, Draft, or Published. ### **Preview Before Apply** See grouped matches before changing anything. Review what will change, then apply. ### **Safety Built In** Undo the last replace. Export CSV reports for review. Case sensitive, whole word, and regex matching. ## **Use cases** Rebranding: change company name across 200+ CMS items Fixing typos across all blog posts Updating URLs site-wide (old domain → new domain) Replacing outdated terms or product names Cleaning up CMS data before launch ## **How it works** **1** ### **Select** Pick a collection. Choose which fields to search. **2** ### **Find** Enter search term. Use case sensitive, whole word, or regex matching. **3** ### **Replace** Preview matches. Apply changes. Undo if needed. ### **CMS Find & Replace ** Spend less time doing data-entry and more time designing. Add this completely free tool to your workflow. [**Install Free Plugin **](https://www.framer.com/marketplace/plugins/framer-cms-find-replace/) **100% Free Forever** ## **More from FramerHub ** [<h3>**CMS Scheduler**</h3>Schedule CMS drafts to publish Automatically.**cms****schedule****automation**](https://framerhub.io/plugins/cms-scheduler) [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**filtering****search****cms**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Table Creator**</h3>Data tables on any Framer page.**tables****data****ui**](https://framerhub.io/plugins/table-creator) --- - **Page:** Framer CMS Filter | FramerHub - **Source:** https://framerhub.io/plugins/framer-cms-filter - **Description:** Advanced CMS filtering for Framer. Range sliders, multi-field search, AND/OR logic, facets, result counts. 1k+ users. $79 one-time. No variants needed. Trusted by 1.5k+ Framer Pros # **When native Framer filtering **isn't enough**. ** Multi-field filters, range sliders, AND/OR logic, facets, result counts — all without variants or conditional visibility. Set up in 5 minutes. [**Get CMS Filter **](https://www.framer.com/marketplace/plugins/framer-cms-filter/) [**Try Live Demo **](https://framercmsfilter.com/demo?demo=template-store) framercmsfilter.com ## **Before vs After** See what changes when you add CMS Filter to your Framer site. **Without CMS Filter** One dropdown at a time — no multi-field filtering No range sliders for price, size, or numbers No AND/OR logic to combine filters No result counts — users guess what matches Variants required for every filter combination Filters don't survive page reload **Setup time: ****Hours** **With CMS Filter** Unlimited filters on one page, all connected Dual-thumb range sliders for any numeric field Three levels of AND/OR logic Live result + facet counts that update instantly Zero variants — everything runs at runtime URL parameter sync — shareable filtered views **Setup time: ****5 minutes** ## **Native vs CMS Filter** Framer's native filtering handles dropdowns, checkboxes, tabs, and basic search. That covers most portfolio sites and simple blogs. CMS Filter picks up where native stops — for directories, marketplaces, and job boards that need professional-grade filtering. | **Feature** | **Framer Native** | **CMS Filter** | | --- | --- | --- | | **Dropdown filters** | | | | **Checkbox filters** | | | | **Tab filters** | | | | **Search (single field)** | | | | **Multi-field search** | | | | **Range sliders (price, size)** | | | | **AND/OR logic (3 levels)** | | | | **Facets with counts** | | | | **Result count** | | | | **URL parameter sync** | | | | **Sort by any field** | | | | **Zero variant management** | | | **40%** ### **Native Framer handles this** Dropdowns, checkboxes, tabs, basic search. For most sites, this is enough. **60%** ### **We built this** Range sliders, multi-field search, AND/OR logic, facets, result counts, URL sync. For directories, marketplaces, and job boards. If native filtering covers your needs, use it. If you're building something more complex, CMS Filter is the upgrade. ## **Built for real use cases** Not just demos — real projects shipping with CMS Filter. ![Real Estate Directory](https://framerhub.io/framerhub/img/cms-filter-img/real-estate.png) **Live demo**### **Real Estate Directory** Filter listings by location, price range, bedrooms, bathrooms, amenities. Range sliders for price. Multi-select for features. URL parameters so users can share filtered views. Range sliderMulti-selectSearchURL sync [**~~ Try live demo ~~**](https://framercmsfilter.com/demo?demo=real-estate) ![Car Marketplace](https://framerhub.io/framerhub/img/cms-filter-img/cars.jpg) **Live demo**### **Car Marketplace** Filter vehicles by make, model, year, price, mileage. Dual range sliders for price and mileage. Faceted counts show available options per filter. Dual rangeFacetsSortMulti-field search [**~~ Try live demo ~~**](https://framercmsfilter.com/demo?demo=cars) ![Template Store](https://framerhub.io/framerhub/img/cms-filter-img/template-store.jpg) **Live demo**### **Template Store** Filter templates by category, price, features, tags. Sort by newest, price, popularity. Full-text search across all fields. CategoryPrice sortTagsSearch [**~~ Try live demo ~~**](https://framercmsfilter.com/demo?demo=template-store) ![Events](https://framerhub.io/framerhub/img/cms-filter-img/events.jpg) **Live demo**### **Events** Filter events by date, location, category. DateLocationCategorySearch [**~~ Try live demo ~~**](https://framercmsfilter.com/demo?demo=events) 14+ Components ## **Everything you need to filter ** ### **Range Slider** Dual-thumb for price, size, or any numeric CMS field. Formats as currency. Shows min/max labels. ### **Collection** Connect to any CMS Collection ### **Search** Multi-field keyword search ### **Filter Builder** AND/OR logic sets ### **Dropdown** Single/multi-select ### **Checkbox** Multi-select groups ### **Radio Button** Single-select ### **Buttons** Category filter buttons ### **Switch** Boolean toggle ### **Sort** Sort by any CMS field ### **Count** Live result counter ### **Facets** Active filter chips ### **Clear All** One-click reset ### **Slot Components** Custom UI override ## **Trusted by the Framer community** Used daily by professionals building real projects with advanced filtering needs. **1k+** Framer professionals **14+** Filter components **5 min** Average setup time ## **More from FramerHub ** [<h3>**Form Kit**</h3>Multi-step forms, validation, conditional logic. 35+ components.**forms****validation****conditional logic**](https://framerhub.io/plugins/framer-form-kit) [<h3>**Components**</h3>90+ code components in one plugin.**components****code****ui**](https://framerhub.io/plugins/framer-components) [<h3>**Table Creator**</h3>Data tables on any Framer page.**tables****data****ui**](https://framerhub.io/plugins/table-creator) --- - **Page:** FramerHub Components — 90+ Code Components for Framer | FramerHub - **Source:** https://framerhub.io/plugins/framer-components - **Description:** 90+ premium Framer code components in one plugin. Search inside Framer, drag and drop, auto-updates. $99 one-time. New components weekly. Trusted by 1.5k+ Framer Pros # **90+ code components.**** **One plugin**. Search, drag, drop. ** Stop buying components from 10 different sellers. One purchase. One plugin. Auto-updates. Search inside Framer while you work. [**Get All Access — $99 **](https://www.framer.com/marketplace/plugins/framerhub-components/) [**Browse Components **](https://framerhub.io/components/) 90+ Components ## **The full library** ![Aurora](https://framerhub.io/framerhub/img/components/aurora.jpg) ![Chromatic Aberration](https://framerhub.io/framerhub/img/components/chromatic-aberration.jpg) ![Nebula Hero](https://framerhub.io/framerhub/img/components/nebula-hero.jpg) ![Interactive Particles](https://framerhub.io/framerhub/img/components/interactive-particles.jpg) ![3D Credit Card](https://framerhub.io/framerhub/img/components/credit-card-3d-tilt.jpg) ![Liquid Chrome](https://framerhub.io/framerhub/img/components/liquid-chrome.jpg) ![Bubble Burst](https://framerhub.io/framerhub/img/components/bubble-burst.jpg) ![Dither Shader](https://framerhub.io/framerhub/img/components/dither-shader.jpg) ![Fluid Distortion](https://framerhub.io/framerhub/img/components/fluid-distortion.jpg) ![Motion Trail](https://framerhub.io/framerhub/img/components/motion-trail.jpg) ![Neural Network](https://framerhub.io/framerhub/img/components/neural-network.jpg) ![Text Glitch](https://framerhub.io/framerhub/img/components/text-glitch.jpg) ![Star Warp](https://framerhub.io/framerhub/img/components/star-warp.jpg) ![Digital Rain](https://framerhub.io/framerhub/img/components/digital-rain.jpg) ![Ribbon Wave](https://framerhub.io/framerhub/img/components/ribbon-wave.jpg) ![Electric Bolts](https://framerhub.io/framerhub/img/components/electric-bolts.jpg) ![Quantum Nebula](https://framerhub.io/framerhub/img/components/quantum-nebula.jpg) ![Swirl Sphere](https://framerhub.io/framerhub/img/components/swirl-sphere.jpg) ![Neon Trails](https://framerhub.io/framerhub/img/components/neon-trails.jpg) ![Cyberpunk City](https://framerhub.io/framerhub/img/components/cyberpunk-city.jpg) ![Image Glitch](https://framerhub.io/framerhub/img/components/image-glitch.jpg) ![Retro CRT](https://framerhub.io/framerhub/img/components/retro-crt.jpg) ![Physics Gravity](https://framerhub.io/framerhub/img/components/physics-gravity.jpg) ![Counter Number](https://framerhub.io/framerhub/img/components/counter-number.jpg) ![CMS Gallery](https://framerhub.io/framerhub/img/components/cms-gallery-popup.jpg) ![Text Rotate](https://framerhub.io/framerhub/img/components/text-rotate.jpg) ![Cipher Scramble](https://framerhub.io/framerhub/img/components/cipher-scramble.jpg) ![Dot Globe](https://framerhub.io/framerhub/img/components/dot-globe.jpg) ![Flowing Rivers](https://framerhub.io/framerhub/img/components/flowing-rivers.jpg) ![Fluid Noise](https://framerhub.io/framerhub/img/components/fluid-noise.jpg) ![Globe](https://framerhub.io/framerhub/img/components/Globe.jpg) ![Image Liquid](https://framerhub.io/framerhub/img/components/image-liquid.jpg) [**See all components with details **](https://framerhub.io/components/) ## **Why a Plugin?** You could buy components one by one from the Framer Marketplace. Here's why the plugin is better: | **Feature** | **Marketplace Buying** | **FramerHub Plugin** | | --- | --- | --- | | **Source** | 10+ different sellers | **One plugin** | | **Updates** | Manual — check each seller | **Auto-sync inside Framer ** | | **Search** | Leave Framer, browse websites | **Search inside Framer editor** | | **Access** | Email links, Remix URLs | **Drag and drop from plugin ** | | **Quality** | Variable | **Consistent code standards ** | | **Refunds** | Varies by seller | **14-Day Guaranteed** | ![Aurora component](https://framerhub.io/framerhub/img/components/aurora.jpg) **Most popular**### **Aurora** Animated aurora borealis background. Configurable colors, speed, and intensity from the property panel. Used by 30+ sites. Perfect for dark-mode hero sections and landing pages. BackgroundWebGLAnimatedConfigurable ![Chromatic Aberration component](https://framerhub.io/framerhub/img/components/chromatic-aberration.jpg) **Designer favorite**### **Chromatic Aberration** Apply chromatic aberration distortion to any image. Hover-activated or always-on. Control intensity, offset direction, and blend mode. Turns any static image into something that feels alive. Image FXShaderHoverCreative ![Interactive Particles component](https://framerhub.io/framerhub/img/components/interactive-particles.jpg) **Interactive**### **Interactive Particles** GPU-accelerated particle system that responds to mouse movement. Attract, repel, or connect particles. Configurable density, color, speed, and connection distance. WebGLInteractiveBackgroundPerformance ## **How it works** **1** ### **Install** Install the plugin from Framer Marketplace. **2** ### **Search** Open the plugin. Search or browse by category. **3** ### **Drag** Click a component. It drops onto your canvas. Configure from the property panel. **4** ### **Update** When we ship updates, one click syncs everything. ### **FramerHub Components ** One plugin. 90+ advanced components. Use on unlimited client projects and stop reinventing the wheel. [**Open in Framer **](https://www.framer.com/marketplace/plugins/framerhub-components/) **Free Library Included** ## **More from FramerHub ** [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**cms****filters****search**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Form Kit**</h3>Multi-step forms, validation, conditional logic.**forms****validation****conditional logic**](https://framerhub.io/plugins/framer-form-kit) [<h3>**Table Creator**</h3>Data tables on any Framer page.**tables****data****ui**](https://framerhub.io/plugins/table-creator) --- - **Page:** Framer Form Kit | FramerHub - **Source:** https://framerhub.io/plugins/framer-form-kit - **Description:** Advanced form components for Framer. Multi-step wizards, real validation, conditional logic, 40+ fields. Free tier available. No code required. Trusted by 1.5k+ Framer Pros # **The form system **Framer didn't ship**. ** 40+ form components. Drag and drop. Configure from properties. No code. Start free, upgrade when you need to. [**Get Started Free **](https://www.framer.com/marketplace/plugins/framer-form-kit/) **See All Components ** framer.com/plugins/form-kit **Text****Free** **Email****Free** **Select****Free** **Checkbox****Free** **Date Picker****Premium** **File Upload****Premium** **Rating****Premium** **Signature****Premium** **Slider****Premium** **Toggle****Premium** **Text****Free** **Email****Free** **Select****Free** **Checkbox****Free** **Date Picker****Premium** **File Upload****Premium** **Rating****Premium** **Signature****Premium** **Slider****Premium** **Toggle****Premium** **Text****Free** **Email****Free** **Select****Free** **Checkbox****Free** **Date Picker****Premium** **File Upload****Premium** **Rating****Premium** **Signature****Premium** **Slider****Premium** **Toggle****Premium** **Text****Free** **Email****Free** **Select****Free** **Checkbox****Free** **Date Picker****Premium** **File Upload****Premium** **Rating****Premium** **Signature****Premium** **Slider****Premium** **Toggle****Premium** ## **Every designer hits this wall ** ### **Before Form Kit** Client asks for a multi-step project intake form. Framer gives you a text input and a submit button. You try custom code overrides. They break on deploy. You embed a Typeform. The brand match is off. Loading speed tanks. Three meetings later, you're still duct-taping validation with code components that don't talk to each other. ### **After Form Kit** Open the plugin. Drag a Form Container. Add Text, Email, Phone, Select fields. Set validation from the property panel. Add a step break — now it's multi-step with a progress bar. Add conditional logic — fields show based on previous answers. Preview. It works. Publish. The form matches your design system perfectly because it IS your design system. 40+ Components ## **Component Gallery** #### **Text** **Free** Standard text input #### **Email** **Free** Email with format validation #### **Number** **Free** Numeric input with min/max #### **Textarea** **Free** Multi-line text #### **Phone** **Free** Phone with format validation #### **URL** **Free** URL with format validation #### **Select** **Free** Dropdown select #### **Checkbox** **Free** Single checkbox #### **Submit** **Free** Submit button with states #### **Checkbox Group** **Premium** Multiple checkboxes #### **Radio** **Premium** Styled radio buttons #### **Toggle** **Premium** On/off switch #### **Date Picker** **Premium** Calendar date selection #### **Time Picker** **Premium** Time selection #### **Date Time** **Premium** Date and time selection #### **File Upload** **Premium** File attachment #### **File Multi Upload** **Premium** Multiple file attachment #### **Image Upload** **Premium** Image upload #### **Slider** **Premium** Range slider input #### **Rating** **Premium** Star rating #### **Net Promoter Score** **Premium** NPS for numeric rating questions #### **Password** **Premium** Password with strength indicator #### **Button Group** **Premium** Grouped button choices with active states #### **hCaptcha** **Premium** Bot protection with hCaptcha verification #### **Hidden** **Premium** Hidden field for passing metadata silently #### **Phone Pro** **Premium** Advanced international phone input #### **reCAPTCHA** **Premium** Google reCAPTCHA protection for submissions #### **Repeator** **Premium** Repeatable field groups for nested inputs #### **Summary** **Premium** Review step that summarizes entered values #### **Turnstile** **Premium** Cloudflare Turnstile spam protection #### **Multi Step** **Premium** Split forms into multiple guided steps #### **Next** **Premium** Step navigation button for advancing forms #### **Previous** **Premium** Step navigation button for going back #### **Progress** **Premium** Current step indicator for multi-step forms #### **Progress Bar** **Premium** Visual progress bar for form completion #### **Reset Button** **Premium** Reset all fields back to their default values #### **Signature** **Pro** Draw signature #### **Rich Text** **Pro** Rich text input #### **Color Picker** **Pro** Color selection #### **Image Button** **Pro** Image as button #### **Country** **Pro** Country selection [**View All Components**](https://framerformkit.com/) ### **Multi-Step Forms** Break long forms into digestible steps. Progress bars. Step indicators. Navigation buttons. Next button validates current step before advancing. Auto-saves to localStorage so users never lose progress. ### **Real Validation** Required fields, email/phone/URL format checks, character limits, regex patterns, min/max ranges. Errors show inline on blur. Custom error messages that match your brand voice. ### **Conditional Logic** Show, hide, enable, or disable any field based on other field values. Eight operators: equals, not equals, contains, not contains, greater than, less than, is empty, is not empty. AND/OR matching. framer.com/plugins/form-kit ![Form Kit plugin interface showing drag-and-drop form builder](https://framerhub.io/framerhub/img/framer-form-kit.svg) ## **Setup in 60 seconds** **1** ### **Install** One-click from Framer Marketplace. 60 seconds. **2** ### **Drag** Works like native components. Drag fields onto your canvas. **3** ### **Configure** Validation, conditions, styling — all from the property panel. ### **Framer Form Kit ** Ready to impress your clients? Stop apologizing for missing features and build powerful, logic-driven forms today. [**Install Plugin **](https://framer.com/marketplace/plugins/framer-form-kit) **Free Tier Available** **27 Form Fields** ## **More from FramerHub ** [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**cms****filtering****search**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Components**</h3>90+ code components in one plugin.**components****code****ui**](https://framerhub.io/plugins/framer-components) [<h3>**CMS Scheduler**</h3>Schedule CMS drafts to publish automatically.**cms****scheduler****automation**](https://framerhub.io/plugins/cms-scheduler) --- - **Page:** Framer + WooCommerce Plugin — Connect WooCommerce to Framer | FramerHub - **Source:** https://framerhub.io/plugins/woocommerce - **Description:** FrameWoo connects your WooCommerce store to Framer. Display products, sync inventory, cart logic. Free plan, then $119 or $279 one-time. **Framer Plugin****Now Live****Zero Competitors** # **Framer +**WooCommerce.Finally. Connect your WooCommerce store to Framer. Display products, sync inventory, handle cart logic — all with Framer's design power. **Available now — free to start** [**Get FrameWoo **](https://framerwoo.com) Free · Launch $119 one-time · Scale $279 one-time Built by 10yr WooCommerce veterans $300K+ in WooCommerce products shipped **framerwoo.com** ![FrameWoo plugin connecting WooCommerce with Framer](https://framerhub.io/framerhub/img/plugins/framewoo.webp) ## **What FrameWoo does** - #### **Connect natively** Securely connect any Framer site to any WooCommerce store backend. - #### **Framer-native design** Display products using Framer's unbeatable design system and interactive components. - #### **Sync inventory & pricing** Keep your frontend perfectly synced with your backend source of truth. - #### **Real cart & checkout** End-to-end cart and checkout flow built for real agency workflow problems. *"We are still finalizing features based on early feedback. Our priority is solving the biggest pain points first. We're not trying to build feature parity with every single WooCommerce plugin in existence. We're building what Framer professionals actually need." * ## **Who is this for?** #### **Agencies** With WooCommerce clients wanting modern, high-performance, design-led frontends. #### **Freelancers** Looking to bridge older WordPress e-commerce infrastructure with bleeding-edge Framer design capabilities. #### **Established Businesses** Migrating storefronts to a better engine without the risk of abandoning their reliable WooCommerce backend. #### **Anyone who has had to say...** "Unfortunately, Framer can't do WooCommerce." ## **Why Native Sync?** Stop embedding clunky iFrames. Bring your WooCommerce data directly into Framer collections to design your store exactly how you want. ### **iFrames & Widgets** - Mismatched fonts and styling that you can't control from Framer. - Terrible SEO because content is loaded via javascript after page load. - Slow page speeds due to heavy third-party checkout scripts. ### **Framer WooCommerce Plugin** - **Design your product cards, grids, and detail pages natively in Framer. ** - **Perfect SEO with pre-rendered CMS pages. ** - **Prices, stock, and variations auto-update when changed in WooCommerce. ** ## **We're not learning WooCommerce to build this plugin.** **10+** Years building WordPress/WooCommerce products **$300K+** In WooCommerce theme/plugin sales (WPConfigurator) **Deep** Understanding of WooCommerce APIs and pain points **2,000+** Framer users across our plugins and components We know what breaks. We know what agencies need. We're building from experience, not from documentation. ## **Who it's for** Agencies with existing WooCommerce clients who want Framer's design tools Freelancers bridging WordPress e-commerce with modern web design Businesses migrating storefronts to Framer without abandoning WooCommerce backend Anyone who's told a client "Framer can't do WooCommerce" and wanted a better answer **Now Live** ### **Build better stores. ** FrameWoo is available now. Start free, then upgrade when your store grows. [**Get FrameWoo **](https://framerwoo.com) Free plan available. Launch $119 and Scale $279 are one-time payments. ## **More from FramerHub ** [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**filtering****search****cms**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Form Kit**</h3>Multi-step forms, validation, conditional logic. 35+ components.**forms****validation****conditional logic**](https://framerhub.io/plugins/framer-form-kit) [<h3>**Components**</h3>90+ code components in one plugin.**components****code****ui**](https://framerhub.io/plugins/framer-components) --- - **Page:** Image Palette — Extract Color Palettes in Framer | FramerHub - **Source:** https://framerhub.io/plugins/image-palette - **Description:** Free Framer plugin. Extract colors from images, generate semantic tokens, export as CSS/Tailwind/JSON, create Framer Color Styles. Install from marketplace. Trusted by 1.5k+ Framer Pros # **Extract color palettes from **any image** in Framer. ** Select image layers. Get semantic tokens — primary, secondary, accent, surface, text. Export as Framer Color Styles, CSS Variables, Tailwind config, or JSON. [**Install Free **](https://www.framer.com/marketplace/plugins/image-palette) **See How It Works ** **Free Forever****Export Color Styles ** framer.com/plugins/image-palette ## **How the magic happens** **Step 1**### **Select** Pick one or more image layers directly on your Framer canvas. High-res or low-res, doesn't matter. **Pri****Sec****Acc****Sur****Txt** **Step 2**### **Generate** The plugin extracts the dominant colors and intelligently maps them to proper semantic roles. **Primary Color** Style **Secondary Color** Style **Accent Color** Style **Step 3**### **Apply** Create Framer Color Styles, copy developer formats (CSS/Tailwind), or apply directly to canvas layers. ## **Not just colors. A color SYSTEM.** It doesn't just pull 5 random colors. It assigns them functional roles so your generated palettes are actually usable in UI design. | **Token** | **Typical Use** | | --- | --- | | **Primary** | **Headers, CTAs, primary links** | | **Secondary** | **Subheadings, secondary buttons** | | **Accent** | **Badges, active states, alerts** | | **Surface** | **Cards, sections, containers** | | **Text** | **Body text, captions** | #### **Locking individual colors ** Love the Primary color but hate the rest? Lock it. Click regenerate. The locked color stays while the rest adapt around it. ### **Everything you need.**- #### **Instant Generation** Processes images locally in your browser for immediate results without waiting. - #### **Native Color Styles** Colors map neatly to your Framer project's native style tokens for immediate use. - #### **Copy Hex Codes** Need colors somewhere else? Click any swatch to copy its HEX value instantly. ## **Palette to canvas in 3 steps. ** Stop using external tools and copy-pasting hex codes manually.**1**### **Drop an Image** Drag any product photo, illustration, or brand asset directly into the plugin window.**2**### **Smart Extraction** Our algorithm analyzes the pixel data to generate a cohesive, balanced 5-color palette instantly.**3**### **Save to Styles** Review the palette and save the colors directly to your Framer Color Styles with a single click. ### **Try it for free. ** Image Palette is the missing utility for Framer designers who care about cohesive branding. Try it out on your next client project. [**Install Plugin **](https://www.framer.com/marketplace/plugins/image-palette) ## **More from FramerHub **[<h3>**CMS Filter**</h3>The #1 most advanced CMS filter for Framer. Multi-select, active states, search, URL parameters, and beautiful animations.**CMS****Search**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Framer Form Kit**</h3>The #1 most advanced form builder for Framer. Multi-step, logic, validations, and more.**Forms****Logic****Multi-step**](https://framerhub.io/plugins/framer-form-kit) [<h3>**CMS Find & Replace**</h3>Find and replace text across your entire Framer CMS in one single click.**CMS****Utility**](https://framerhub.io/plugins/cms-find-replace) --- - **Page:** Framer CMS Scheduler — Schedule Drafts to Publish | FramerHub - **Source:** https://framerhub.io/plugins/cms-scheduler - **Description:** Free Framer plugin. Schedule CMS draft posts to publish automatically. Single or bulk scheduling. Track pending and failed runs. No manual publishing. Trusted by 1.5k+ Framer Pros # **Schedule Framer CMS posts to **publish on time**. ** Write content in advance. Set a publish time. Stop relying on reminders, timezone math, or being online at launch hour. [**Get Started Free **](https://www.framer.com/marketplace/plugins/framer-cms-scheduler/) framer.com/plugins/cms-scheduler ## **Built for peace of mind.** Every tool you need to manage your upcoming pipeline confidently. ### **Bulk Campaign Drops** Select dozens of draft items across your CMS collections and coordinate them to drop simultaneously at a single orchestrated time. ### **Clear Visibility** View all pending schedules in one clean queue interface inside the plugin. ### **Error Tracking** If something fails to publish (like a missing CMS field), get exact status logs. ### **Direct Framer API Integration** We don't hack around the system. CMS Scheduler talks directly to Framer's secure data layer, guaranteeing fast, compliant publishes without Zapier headaches. ## **Your publishing timeline** See everything scheduled at a glance CMS Scheduler **Product Launch Announcement** Blog Posts **9:00 AM** Mar 18 **Pending** **Weekly Newsletter Recap** Blog Posts **2:30 PM** Mar 18 **Pending** **Feature Update: Dark Mode** Changelog **6:00 PM** Mar 19 **Pending** **Case Study: Agency Workflow** Case Studies **10:00 AM** Mar 20 **Queued** ## **What it does** ### **Schedule Anything** Single posts or bulk batches. Pick a date and time. The scheduler handles the rest. ### **Track Everything** See pending, running, and failed schedules. Logs tell you exactly what happened. ### **Works With Your CMS** Connects to your Framer project. Reads your collections. Schedules from draft items already inside Framer. ## **Who it's for** Marketers scheduling campaign posts and launch content Founders shipping announcements without interrupting their day Publishers managing editorial calendars Freelancers handling client content updates Agencies coordinating multi-site content rollouts ## **Three steps. Done.** **1** ### **Connect** Open Settings. Paste your Framer project URL and API key. **2** ### **Schedule** Load a collection. Select draft items. Pick a publish time. **3** ### **Done** The scheduler publishes at the scheduled time. Track results in the plugin. Scheduled publish also pushes any other unpublished site changes. If you have WIP changes, use a separate production project. ### **Framer CMS Scheduler ** Take draft CMS items in Framer and publish them at exactly the time you choose. Less timezone math, fewer missed launches. [**Open Plugin in Framer **](https://framer.com/projects/new?plugin=4554iyqvx7hdhxe9xswvpu06t) ## **More from FramerHub ** [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**filtering****search****cms**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**CMS Find & Replace**</h3>Bulk edit CMS text in one pass.**cms****bulk edit****text**](https://framerhub.io/plugins/cms-find-replace) [<h3>**Form Kit**</h3>Multi-step forms, validation, conditional logic. 35+ components.**forms****validation****logic**](https://framerhub.io/plugins/framer-form-kit) --- - **Page:** Table Creator — Data Tables for Any Framer Page | FramerHub - **Source:** https://framerhub.io/plugins/table-creator - **Description:** Free Framer plugin. Create interactive data tables anywhere in Framer — not just CMS Rich Text. Sorting, filtering, pagination. 5 themes. CSV paste. Trusted by 1.5k+ Framer Pros # **Data tables on **any Framer page**. ** Framer's native tables only work inside CMS Rich Text fields. Table Creator works anywhere — landing pages, dashboards, documentation, pricing pages. [**Get Started Free **](https://www.framer.com/marketplace/plugins/table-creator/) framer.com/plugins/table-creator **Without Table Creator ** ### **Stuck in the CMS** - **×** Tables only work inside CMS Rich Text fields - **×** No tables on landing pages - **×** No tables on documentation pages - **×** No interactive sorting or filtering - **×** Can't paste from spreadsheets *"Want a comparison table on your pricing page? You're out of luck. You have to build it manually with stacks and frames." * **With Table Creator ** ### **Data Tables Anywhere** - **✓** Tables on ANY page — landing, docs, pricing, dashboard - **✓** 5 built-in themes (Light, Dark, Bordered, Striped, Custom) - **✓** Interactive sorting built in - **✓** Filtering built in - **✓** Pagination built in - **✓** Paste data directly from spreadsheets (CSV/Excel) **Sort** Filter... ## **5 Built-in Themes ** Toggle column headers, row headers, and zebra striping. Tables appear on canvas, styled and ready or completely customizable. #### **1. Minimal Light** **Header** **Data** Row 1 Value 1 Row 2 Value 2 Clean, light background, subtle borders. #### **2. Minimal Dark** **Header** **Data** Row 1 Value 1 Row 2 Value 2 Dark background, light text. #### **3. Bordered** **Header ** **Data** Row 1 Value 1 Row 2 Value 2 Clear cell borders, highly structured. #### **4. Striped** **Header** **Data** Row 1 Value 1 Row 2 Value 2 Row 3 Value 3 Alternating row colors for readability. #### **5. Custom** **Unstyled** **Bring Your Own Style** Full control via property panel Your own colors, fonts, borders, and spacing. ## **How It Works** **1** ### **Open** Open the Table Creator plugin directly inside your Framer canvas. **2** ### **Configure** Set rows, columns, pick a theme. Manually type data or instantly paste from a CSV file. **3** ### **Create** One click. The table appears on your canvas. Sorting, filtering, and pagination are already included. ### **Table Creator ** Free. Works on any Framer page. [**Install Free **](https://www.framer.com/marketplace/plugins/table-creator/) ## **More from FramerHub ** [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**filtering****search****cms**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**CMS Find & Replace**</h3>Bulk edit CMS text in one pass.**cms****bulk edit****text**](https://framerhub.io/plugins/cms-find-replace) [<h3>**Form Kit**</h3>Multi-step forms, validation, conditional logic. 35+ components.**forms****validation****logic**](https://framerhub.io/plugins/framer-form-kit) --- - **Page:** Asset Vault — Save & Share Framer Assets | FramerHub - **Source:** https://framerhub.io/plugins/asset-vault - **Description:** Free Framer plugin. Save component URLs and Remix links in one organized vault. Libraries, tags, search, team sharing. Install from marketplace. 1. [Home](https://framerhub.io/) 2. / 3. [Plugins](https://framerhub.io/plugins) 4. / 5. **Asset Vault** Trusted by 1.5k+ Framer Pros # **Your Framer assets. **One vault. Stop losing component URLs and Remix links across bookmarks, DMs, and old projects. Asset Vault keeps them organized inside Framer. [**Install Free **](https://www.framer.com/marketplace/plugins/framerhub-vault/) framer.com/plugins/asset-vault **Libraries**** Categories**** Tags**** Thumbnails**** Favorites**** Search**** Team Sharing**** Permissions** ## **Everything worth saving, saved ** Instead of searching old files, bookmarks, or messages — save useful Framer items once and reopen them from inside the editor. ### **Component Module URLs** Save component URLs from any Framer project. Organize by library and tag. Find them instantly next time. ### **Framer Remix Links** Templates, experiments, references — save Remix links with thumbnails so you never lose track of useful projects. ### **Organize Everything** Libraries, categories, tags, thumbnails, favorites. Structure your saved assets however you work. - Create unlimited libraries - Tag and categorize assets - Add thumbnails for visual browsing ![Organize Everything](https://framerhub.io/asset-vault-library-dropdown.png) ### **Search & Filter** Find any saved component or Remix link instantly. - Search by name or tag - Filter by library or category - Recent and favorites quick access ![Search & Filter](https://framerhub.io/asset-vault-browse-filters.png) ### **Share With Your Team** Share libraries with invited users. Manage access and permissions. - Invite team members - Set add, edit, delete permissions - Manage invitations and access ![Share With Your Team](https://framerhub.io/asset-vault-share.png) ## **Up and running in 30 seconds ** Simple setup to never lose a Framer asset again. **1** ### **Open** Open Asset Vault inside any Framer project. **2** ### **Save** Paste a component URL or Remix link. Add to a library. **3** ### **Reuse** Search your vault next time. Share with your team. ### **FramerHub Vault ** Stop searching old files and bookmarks. Organize and share all your essential Framer components efficiently. [**Open Plugin in Framer **](https://framer.com/projects/new?plugin=3mhdw6joegu3owp5vdejrqfu7) **Free Tier Available** **Pro Team Features** ## **More from FramerHub ** [<h3>**CMS Filter**</h3>Advanced CMS filtering. Range sliders, multi-field search.**filtering****search****cms**](https://framerhub.io/plugins/framer-cms-filter) [<h3>**Form Kit**</h3>Multi-step forms, validation, conditional logic. 35+ components.**forms****validation****conditional logic**](https://framerhub.io/plugins/framer-form-kit) [<h3>**Components**</h3>90+ code components in one plugin.**components****code****ui**](https://framerhub.io/plugins/framer-components) --- - **Page:** FramerHub Plugins — CMS Filtering, Forms, WooCommerce & Scheduling - **Source:** https://framerhub.io/plugins - **Description:** 8 Framer plugins for professionals. CMS filtering, multi-step forms, data tables, scheduling, and WooCommerce integration. Free and paid. Trusted by 1,500+ Framer Pros # **FramerHub Plugins ** Plugins that expand what you can do in Framer. Filtering, forms, scheduling, tables, e-commerce, and more. Free and paid. ### **CMS Filter** Advanced CMS filtering for Framer ### **Form Kit** Multi-step forms, validation, conditional logic ### **Components** 90+ code components in one plugin ### **Asset Vault** Save & share Framer assets ### **CMS Scheduler** Schedule CMS drafts to publish ### **Table Creator** Data tables on any Framer page ### **CMS Find & Replace** Bulk edit CMS text in one pass ### **WooCommerce** Connect WooCommerce to Framer ## **Hit a Framer limitation? Check here first.** FramerHub builds plugins that expand what Framer can do. Every plugin solves a real gap — filtering, forms, scheduling, data tools, e-commerce integrations, and more. New plugins ship regularly. [**Contact us **](https://framerhub.io/contact)