--- title: "Interactive Framer Components: Sliders, Physics & UI | FramerHub" canonical_url: "https://framerhub.io/components/category/interactive" last_updated: "2026-10-24T15:55:31.567Z" meta: description: "Interactive Framer components: before/after sliders, scratch-off coupons, animated counters, magnetic buttons, 3D tilt cards, physics tags and cursor image trails." "og:description": "Interactive Framer components: before/after sliders, scratch-off coupons, animated counters, magnetic buttons, 3D tilt cards, physics tags and cursor image trails." "og:title": "Interactive Framer Components: Sliders, Physics & UI | FramerHub" --- FramerHub home # **Interactive Framer Components** Interactive pieces for Framer that respond to the visitor: before/after sliders, scratch-off coupons, animated counters, magnetic buttons, 3D tilt cards, physics tags and cursor image trails. 13 components, 2 free. [

**Portfolio Reveal Hero**

Mesmerizing organic blob-mask reveal between two images.**WebGL****Canvas****Images**](https://framerhub.io/components/portfolio-reveal-hero) [

**Bouncing Image Trail**

Add an immersive, GSAP-powered bouncing image trail to your cursor.**GSAP****Mouse Effect****Cursor**](https://framerhub.io/components/bouncing-image-trail) [

**Gravity Bouncing Balls**

Interactive 2D physics simulation with gravity, collisions, and mouse repulsion.**Physics****Gravity****Collision**](https://framerhub.io/components/bouncing-balls) [

**Counter Number**

Animated number counter with custom formatting and easing.**Counter****Numbers****Animation**](https://framerhub.io/components/counter-number) [

**Credit Card 3D Tilt**

Premium 3D credit card with holographic glare and glassmorphism effects.**Credit Card****3D****Tilt**](https://framerhub.io/components/credit-card-3d-tilt) [

**Magnetic Buttons**

Interactive magnetic buttons that follow your cursor**Magnetic****Interactive****Hover**](https://framerhub.io/components/magnetic-buttons) [

**Exist Popup**

Capture leads before they leave with smart exit-intent popups that trigger at the perfect moment.**Popup****Modal****Exit Intent**](https://framerhub.io/components/exist-popup) [

**BubbleBurst**

Interactive 3D physics simulation with colorful bouncing bubbles.**3D****Physics****Animation**](https://framerhub.io/components/bubble-burst) [

**Before After Picture**

Showcase transformations with smooth, interactive image comparisons and arrow handles.**Picture****Images****Comparison**](https://framerhub.io/components/before-after-picture) [

**Tag Splitter**

Turn any comma-separated list into stylish tag pills instantly.**Tags****Pills****List**](https://framerhub.io/components/tag-splitter) [

**Interactive Particles**

Transform any image into an interactive 3D particle field that responds to mouse movement and touch.**Interactive****3D****Particles**](https://framerhub.io/components/interactive-particles) [

**Physics Tags**

Interactive 3D physics tags that react to gravity and collisions.**physics****tags****matter.js**](https://framerhub.io/components/physics-tags) [

**Scratch & Win Coupon**

Engage users with a realistic scratch-off coupon experience.**Scratch Card****Coupon****Gamification**](https://framerhub.io/components/scratch-and-win-coupon) ## Which interactive & ui component should you use? - [~~Before After Picture~~](https://framerhub.io/components/before-after-picture): A before/after image comparison slider - [~~Scratch & Win Coupon~~](https://framerhub.io/components/scratch-and-win-coupon): A scratch-off discount reveal - [~~Counter Number~~](https://framerhub.io/components/counter-number): Animated stats and key figures - [~~Magnetic Buttons~~](https://framerhub.io/components/magnetic-buttons): Buttons that follow the cursor - [~~Credit Card 3D Tilt~~](https://framerhub.io/components/credit-card-3d-tilt): A 3D card for pricing or checkout - [~~Physics Tags~~](https://framerhub.io/components/physics-tags): Skills or features as falling tags ## Interaction that earns attention These components give visitors something to do, which keeps them on a section longer. Before After Picture shows a transformation with a drag, click or hover divider. Scratch and Win Coupon turns a discount into a small game. Counter Number animates key figures with custom formatting. Use one interactive moment per section so it stays a surprise rather than noise. ## Small UI details Smaller components polish everyday UI. Magnetic Buttons pull toward the cursor, Credit Card 3D Tilt adds glare and depth to a pricing or checkout visual, Physics Tags drop skills or features into a playful pile, and Tag Splitter turns a comma-separated CMS field into tag pills. ## Interactive & UI FAQ ### Do interactive components work on touch screens? Drag and tap interactions work with touch. Hover-only effects have nothing to respond to on phones, so check the component's settings for a touch option, or show a static version at the mobile breakpoint. ### Can I connect them to the CMS? Tag Splitter is built for CMS text fields. On a CMS page you can bind most components' text and image properties to CMS fields, so each item gets its own content. ### Can I restyle them to match my site? Yes. Colors, sizes, radius and text are set in the properties panel, and each component page lists its settings. ### Are these Framer interactive & ui components free? Some are free with a FramerHub account, and the rest are one-time purchases with lifetime updates. Each card shows its price. ### How do I add one to my Framer project? Open the component page, get it (free or paid), then copy it from your FramerHub dashboard and paste it onto your Framer canvas. Its settings appear in the properties panel. ## Keep exploring [Backgrounds](https://framerhub.io/components/category/backgrounds) [3D & WebGL](https://framerhub.io/components/category/3d-webgl) [Text Effects](https://framerhub.io/components/category/text-effects) [Animations](https://framerhub.io/components/category/animations) [Visual & Image Effects](https://framerhub.io/components/category/visual-effects) [CMS & Galleries](https://framerhub.io/components/category/cms-galleries) [Getting started with Framer components](https://framerhub.io/blog/getting-started-framer-components) [Framer CMS guide](https://framerhub.io/blog/framer-cms-complete-guide) [All components](https://framerhub.io/components) ## Sitemap See the full [sitemap](/sitemap.md) for all pages.