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

The Tab Gallery component lets you build an image-driven tabbed interface where each tab switches content with a sliding active pill and crossfade media transition.

About this Component

Turn a static gallery into a guided, interactive content block. Tab Gallery combines images, clickable labels, and per-tab descriptions in a clean horizontal navigation pattern that works across desktop and smaller breakpoints.

Image + Label Pairing

Each item in the array includes an image, title, and optional description. The selected tab shows its image in a fixed aspect-ratio frame, with a consistent media size across all tabs, including placeholders when no image is set.

Sliding Active Tab Animation

Tabs use a shared rounded active background that smoothly slides from label to label, instead of re-rendering separate backgrounds per button. This creates a polished segmented-control feel with minimal visual noise.

Responsive Horizontal Navigation

On tighter widths, the tab row becomes horizontally scrollable. The active tab auto-scrolls into view, edge fades indicate hidden content, and left/right arrows appear only when there are hidden items on that side.

Description Area per Tab

Each tab can show its own description below the navigation. Description text is fully styleable through a dedicated descriptionStyle object, including font, color, padding, and max width for readable long-form copy.

Full Visual Control

You can customize image container styling (border radius, border, aspect ratio) and tab styling (container background, borders, active background, hover state, typography, arrow color, spacing, and padding) directly from Framer property controls.

Refund Policy

All sales are final. Since our products are digital and provide instant access to the Framer code component, we cannot offer refunds, exchanges, or cancellations.

Please review all product details and previews before purchasing. If you have any questions, contact us, and we will be glad to assist before checkout.

By completing your purchase, you agree to this policy.

60:T9de,

Turn any image into an interactive experience with hotspots. The Image Spots component lets you place numbered markers anywhere on an image, each revealing a styled info box with smooth animations.

Flexible Spot Placement

Position up to 20 spots anywhere on your image using percentage-based coordinates. Each spot supports its own title, description, and info box placement direction, top, right, bottom, or left.

Click or Hover Interaction

Choose between click-to-reveal or hover-to-reveal modes. Info boxes animate in with smooth scale and fade transitions powered by Framer Motion, and automatically reposition on window resize.

Full Style Control Customize

Every detail, spot size, colors, border radius, borders, box shadows, backdrop blur, and fonts. Style the info box independently with its own background, padding, border radius, shadow, and typography.

Smart Info Box Positioning

Info boxes automatically position themselves relative to each spot based on your chosen direction, with configurable offset, width, and max height to fit your layout perfectly.

Refund Policy

All sales are final. Since our products are digital and provide instant access to the Framer code component, we cannot offer refunds, exchanges, or cancellations.

Please review all product details and previews before purchasing. If you have any questions, contact us and we will be glad to assist before checkout.

By completing your purchase, you agree to this policy.

61:T46c,

Bring your content to life with smooth, fully customizable list animations. The Animated List component makes it easy to design dynamic, engaging layouts that adapt to your project’s style and CMS content.

Flexible Content SourcesUse arrays for structured items or paste text as line-separated values, perfect for CMS-driven content.

Customizable AnimationsControl how each list item enters the screen with adjustable stagger delay, direction, start position, and offset. Built on Framer Motion, it delivers fluid, production-ready animations.

Full Style ControlEasily customize fonts, colors, spacing, and icons. Add custom icons for bullet points with adjustable size, color, and alignment.

CMS IntegrationConnect directly to your Framer CMS collections so your list content updates dynamically as your project scales.

62:T6ae,

Make it effortless for your users to save events directly to their calendar with a single click. This Add to Calendar component automatically adapts to the user’s device and integrates seamlessly into your Framer projects.

Smart Auto-Detection
The component detects if the user is on an Apple device and automatically provides an iCal file download. On any other device, it redirects them to Google Calendar.

Apple Calendar or Google Calendar
Prefer to choose manually? You can set the default to Apple Calendar, Google Calendar, or let the auto-select do the work.

Fully Customizable
Tailor the button to match your brand, adjust fonts, colors, backgrounds, borders, padding, and hover states. Add icons with adjustable size and spacing for a polished look.

CMS-Ready Integration
Event details like Name, Description, Location, Start Date, and End Date can be linked to CMS collections, making it easy to manage dynamic events at scale.

Flexible Interactions
Trigger Framer Events on Click or Calendar Add, opening up possibilities for animations, tracking, or connecting to other actions in your design.

Perfect for: event websites, webinars, product launches, meetups, or any experience where adding an event to a user’s calendar increases engagement.

59:["$","$L5e",null,{"value":{"fallback":{"$inf$activity-creator-48d8fe17-6048-4d09-94d7-5e6cedf057c5-all:/unified/creator/48d8fe17-6048-4d09-94d7-5e6cedf057c5/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:48d8fe17-6048-4d09-94d7-5e6cedf057c5:/unified/posts/?creator=48d8fe17-6048-4d09-94d7-5e6cedf057c5&with=reposts":[{"data":[{"id":"019cdd0c-524b-7d82-9a79-2c60dd75b101","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[],"resources":[{"id":"s7RHjZNrulsOggpRHEnz","resolved":true,"title":"Tab Gallery","body":"$5f","bodyJson":null,"introduction":"image tabs with responsive navigation","slug":"tab-gallery","author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/s7RHjZNrulsOggpRHEnz/tab-gallery-6DcgIEh596u1gpAGgnA5ZaSoHjkb45","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-04T17:28:58.024Z","updatedAt":"2026-03-11T11:17:13.187Z","publishedAt":"2026-03-11T13:18:18.187Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://big-office-310826.framer.app","price":"9","paymentUrl":"https://feuxacademy.lemonsqueezy.com/checkout/buy/a9e578b9-caac-4018-ac7c-0122fbac7453","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"vN28QGdGNqrmLjwSx3S2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-11T13:18:18.187Z","updatedAt":"2026-03-11T13:18:18.187Z"},{"id":"019cb928-24ad-7ba8-82f3-55c4e6b5ec61","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[],"resources":[{"id":"K9Hz8faWMczfmLXcMWoQ","resolved":true,"title":"Image Hotspots","body":"$60","bodyJson":null,"introduction":"Add interactive hotspots to any image","slug":"image-hotspots","author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/K9Hz8faWMczfmLXcMWoQ/image-hotspots-8ffp6uTI2RTe4jYfNWLcTQYvQeHGFT","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-21T10:21:10.290Z","updatedAt":"2026-03-04T09:56:56.092Z","publishedAt":"2026-03-04T14:02:21.741Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://technical-shares-802137.framer.app/","price":"12","paymentUrl":"https://feuxacademy.lemonsqueezy.com/checkout/buy/2ec559d3-a98e-411f-bbdd-683ebee95e68","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"gkqJgfY5sSmNq4A9zlqN","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-04T14:02:21.741Z","updatedAt":"2026-03-04T14:02:21.741Z"},{"id":"0199ea40-49b2-765e-8bfe-c5817c9bb06e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[],"resources":[{"id":"pK6XLmNQSypGYq4RQHZq","resolved":true,"title":"Staggered List","body":"$61","bodyJson":null,"introduction":"","slug":"staggered-list","author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/pK6XLmNQSypGYq4RQHZq/staggered-list-U1DUkTpehDqDAfQbWKZW0FUo3TNbon","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T17:18:00.996Z","updatedAt":"2025-10-14T04:33:26.907Z","publishedAt":"2025-10-15T23:41:45.778Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://incredible-pitch-625722.framer.app/","price":"9","paymentUrl":"https://feuxacademy.lemonsqueezy.com/buy/8eaf07aa-1559-497c-a374-7a0c19a9575f","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"VymUXLQU6xU6BVUPfbuR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-15T23:41:45.778Z","updatedAt":"2025-10-15T23:41:45.778Z"},{"id":"0199aa88-6892-7e11-ad90-c9c789597d8c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[],"resources":[{"id":"M3uKpM1JduUxQjtbsgRt","resolved":true,"title":"Add to Calendar","body":"$62","bodyJson":null,"introduction":"","slug":"add-to-calendar","author":{"framerUserId":"48d8fe17-6048-4d09-94d7-5e6cedf057c5","name":"Feux Design","slug":"feux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32149/d21bd8eaec590c2612961dde0baa181f-jIorK6c891UUckoIvbOTbUVr0J6FMW","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/M3uKpM1JduUxQjtbsgRt/add-to-calendar-zIUKTAEKFTyAWvSE81s7fSUo6ShcaM","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-24T13:44:07.863Z","updatedAt":"2025-10-03T17:47:11.149Z","publishedAt":"2025-10-03T14:44:50.450Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cyan-presentation-927092.framer.app/","price":"5","paymentUrl":"https://feuxacademy.lemonsqueezy.com/buy/ecf69470-b577-46d9-b221-286ce1b72ad5","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"2n73yQS41EY2n105dWBL","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-03T14:44:50.450Z","updatedAt":"2025-10-03T14:44:50.450Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]