50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T490,I've updated the code component - CardCarousel ONE Changelog: Version ONE.two — 11 August 2026 Static rendering Autoplay, the Ken Burns effect and all transitions are now switched off while Framer renders on the canvas or exports a page. Image preloading and the viewport observer are skipped there as well. Fixed: controls jumping on section change The card area could briefly be empty while switching sections, which collapsed the height and made the buttons and progress bar move. The outgoing card now stays visible outside the layout flow while the new one takes its place. Animation The Fade mode has been removed — it caused the height jump described above. Crossfade, Zoom and Swipe remain, available for the card, the image and the lightbox. Crossfade is the new default, and the card transition now runs at 0.6 s. New properties Control: Icon Size, Padding Overlay › Button: Padding Image › Arrows: Hover Effect Changed Overlay buttons use the same padding as the control buttons Image placeholder colour is now transparent instead of light grey Icon Size now sits directly after Icon Weight in Control, Image › Arrows and Lightbox › Close Button52:T7d4,

Sections Carousel

This framer code component is a deep customizable Multi-Image Sections Carousel, that presents content as a series of cards. Each card holds a title, subtitle, tags, a caption and its own image gallery. Visitors move between cards with buttons, a menu overlay, arrow keys or swipe gestures.

Suitable for timelines, product overviews, case studies and team profiles.

Content

Per section: button label, title, subtitle, tags, caption, filter values and any number of images. Text fields support bold, italic and line breaks. No limit on sections.

Navigation

Previous, next and menu buttons with an optional progress bar. A menu overlay lists all sections. Arrow keys, swipe gestures, image arrows and indicator dots included.

Lightbox

Opens images full screen, with arrows, dots, close button, backdrop, separate opening and closing transitions and optional page-scroll locking. Can be switched off.

Filter

Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages.

Autoplay

Steps through all images of a card before moving on. Pauses on hover, on hidden browser tabs, when scrolled out of view, and for a set delay after any manual step.

Animation

Fade, Crossfade, Zoom and Swipe, set separately for cards, images and the lightbox, each with Framer's transition editor. Optional Ken Burns effect.

Accessibility

Semantic HTML, ARIA labels, screen-reader announcements on card changes, focus handling in the lightbox, full keyboard navigation, and reduced-motion support.

Styling

Twelve property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, all through Framer's native controls.

Notes

Uses Framer's animation library and Phosphor Icons.

53:T7af,

CONTACT CAROUSEL - CHANGELOG

Version ONE.one - 2026-09-24

Fixed

Lightbox was clipped inside relative Framer overlays. Framer Motion applies a transform to the animated card, and a transformed element becomes the containing block for position: fixed descendants. The lightbox was therefore positioned against the card instead of the viewport. It is now rendered into document.body via createPortal, fully detached from the transformed tree.

Scroll lock stayed active after the first close. lightboxExiting was set on open but never reset. The outer AnimatePresence now calls onExitComplete={() => setLightboxExiting(false)}, so the state is clean after the exit animation.

Clicking the backdrop reliably closes the lightbox when dismissible: On.

Changed

Lightbox moved out of rootRef; it is now returned as a sibling via a lightboxPortal.

renderPhosphorIcon moved above the component (was only reachable through hoisting).

Added import { createPortal } from "react-dom".

Unchanged

All property controls, style groups, hooks, effects, types, and constants.

Error boundary, export default setup, autoplay, filter, live filter, panel overlay, keyboard navigation, and swipe.

Known behaviour (not a bug)

Inside a relative Framer overlay with Dismiss on Click Outside: auto, a click on or next to the lightbox can be treated as "outside" and close the overlay. That is Framer behaviour, not component behaviour. Workaround: set the overlay's dismiss option to Off, or use a regular absolute-positioned layer instead.

54:T8a1,

Contact Carousel

This framer code component is a deep customizable Contact Carousel for presenting people or places as a series of cards. Each card holds an image, title, subtitle, tags, two text fields and a set of contact actions. Visitors move between cards with buttons, a menu overlay, arrow keys or swipe.

Suitable for team pages, office locations and partner directories.

Content

Per section: button label, image, title, subtitle, tags, Text 1, Text 2, filter values and any number of actions. Text fields support bold, italic and line breaks.

Actions

Each card carries its own contact buttons, each with an icon, label and link. One person can have phone and SMS, another email, WhatsApp and Telegram. Links accept tel:, sms:, mailto: or a normal URL; leave it empty for a button without a link.

Layout

The image sits left, right or above the text, with its own column width. Its height follows the aspect ratio, a fixed value, or the text beside it.

Navigation

Previous, next and menu buttons with an optional progress bar, plus a menu overlay listing all sections.

Lightbox

Opens the image full screen, with close button, backdrop, separate opening and closing transitions and optional scroll locking. Can be switched off.

Filter

Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages.

Autoplay

Moves through the cards on its own. Pauses on hover, on hidden tabs, when scrolled out of view, and for a set delay after any manual step.

Accessibility

Semantic HTML, ARIA labels, screen-reader announcements, focus handling in the lightbox, keyboard navigation and reduced-motion support.

Styling

Sixteen property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, through Framer's native controls.

Notes

One .tsx file. Uses Framer's animation library and Phosphor Icons.

Questions and feedback via the Framer Community.

55:T67d,

Here's another update for the CardCarousel. This time, I have added a live filter and filter properties to set variables. I am using it for a timeline. My project has multiple pages for different locations. I added all the content/sections to one component and set a variable for the initial filter value. Visitors can filter by location or select all. You can see this in the pictures.

CardCarousel ONE

Version ONE.five - updated 25 August 2026

Live Filter A new filter button beside the menu lets visitors switch the selection themselves. Options are defined as label and value pairs, so a button can read "Germany" while matching "DE". The button and its overlay reuse the existing Control and Overlay styling, so there is nothing extra to style.

Filter Value and Filter Start Value Two plain fields above the General group. Being outside a group, they can be bound to a variable, which lets one component serve several pages: Filter Value fixes the selection, Filter Start Value only preselects it and leaves the visitor free to change it.

Order of precedence: what the visitor picks, then Filter Start Value, then Filter Value, then the Filter group.

Filter › Match Filter values can now be compared against each section's Filter field, its visible Tags, or both. Tags are matched as whole words, so a value has to read exactly like the tag.

Lightbox indicator dots on by default The dots already existed but started switched off, so galleries gave no hint of how many images followed.

56:T913,

Card Carousel ONE • Feature: Sections and Filter

Sections

A section is one card. The carousel shows one at a time; visitors move between them with the buttons, the menu overlay, arrow keys or swipe.

Each section holds a Button label for the menu, a Title, a Subtitle, optional Tags, a Caption, one or more Filter values, and any number of Images shown as a gallery inside the card.

Title, Subtitle and Caption accept two asterisks for bold and one for italic, plus manual line breaks. Sections appear in the order you list them, with no limit on how many you add.

No CMS collection needed: add a section, fill in the fields, done. For content that also needs its own pages, more details, more options, and URLs, a collection is still the better tool.

Filter

The Filter group decides which sections appear, so the same component can sit on several pages and show a different selection on each.

Leave All on Yes to show everything. Set it to No and list the values you want under Values.

How matching works:

One hit is enough. A section shows if its Filter field matches any value in your list.

Case is ignored. DE, de and De are the same.

Both sides take several values, separated by space, comma, semicolon, slash or pipe: DE, KE or DE / KE.

An empty list shows everything, and so does the value all.

Sections without a filter value are left out while filtering. They return when All is set back to Yes.

Example

SectionFilterDöbeln officeDEColol farmIDTrade fairDE, ID

German page, Values DE → Döbeln office and Trade fair. Indonesian page, Values ID → Colol farm and Trade fair. Overview page, All on Yes → all three.

Update:

I reduced the price from 12$ to 8$.

57:T545,

I've updated the code component - CardCarousel ONE

Changelog:

Version ONE.two — 11 August 2026

Static rendering Autoplay, the Ken Burns effect and all transitions are now switched off while Framer renders on the canvas or exports a page. Image preloading and the viewport observer are skipped there as well.

Fixed: controls jumping on section change The card area could briefly be empty while switching sections, which collapsed the height and made the buttons and progress bar move. The outgoing card now stays visible outside the layout flow while the new one takes its place.

Animation The Fade mode has been removed — it caused the height jump described above. Crossfade, Zoom and Swipe remain, available for the card, the image and the lightbox. Crossfade is the new default, and the card transition now runs at 0.6 s.

New properties

Control: Icon Size, Padding

Overlay › Button: Padding

Image › Arrows: Hover Effect

Changed

Overlay buttons use the same padding as the control buttons

Image placeholder colour is now transparent instead of light grey

Icon Size now sits directly after Icon Weight in Control, Image › Arrows and Lightbox › Close Button

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-a6d2f85d-34de-4241-beab-480810c4c161-all:/unified/creator/a6d2f85d-34de-4241-beab-480810c4c161/activity/":[{"data":[{"id":"01a110f7-bbe2-73ae-9e90-92ef7834f900","type":"comment.reply","target":{"type":"post","id":"01a10d25-17f7-739b-a8d8-3ff3060acf0b","preview":"I'm working at the moment on a music player. In addition to the general (music player) functionality, I've also implemented an interaction event for an overlay and a link button. As with the other code components, I've tried to make it as customizable as possible while keeping the property panel clear and easy to navigate.\nMusic Player","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm working at the moment on a music player. In addition to the general (music player) functionality, I've also implemented an interaction event for an overlay and a link button. As with the other code components, I've tried to make it as customizable as possible while keeping the property panel clear and easy to navigate."}]},{"type":"paragraph","content":[{"type":"text","text":"Music Player","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://maroon-performance-999902.framer.app/workstation/music-player","target":"_blank"}}]}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a10d1b-81cd-764f-af7e-f0339bedba1e.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a10d25-17f7-739b-a8d8-3ff3060acf0b","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a110f7-bbc3-7100-861f-c7d2a74a970c","preview":"Currently, the sound is abruptly cut off when switching pages because the audio element is unmounted as part of the component. The audio element is inline in the JSX.\nNote: I'm not a developer, the ai is doing the work while I give my thoughts/input.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Currently, the sound is abruptly cut off when switching pages because the audio element is unmounted as part of the component. The audio element is inline in the JSX."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Note: I'm not a developer, the ai is doing the work while I give my thoughts/input."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a10d25-17f7-739b-a8d8-3ff3060acf0b","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a11003-cd2b-709e-9657-9c988e301f65"},"repost":null}},"actors":[{"id":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","slug":"markus-petzold","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-06T11:27:13.378Z","latestAt":"2026-10-06T11:27:13.378Z"},{"id":"01a0f625-388d-7148-b470-18864cf2d538","type":"comment.reply","target":{"type":"post","id":"01a0f354-63c2-730f-b5a2-4998b4c6cc84","preview":"Sections Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0f353-2bcd-718a-8686-628b53922edc.jpg","targetDeleted":false,"owned":true,"actions":{"postId":"01a0f354-63c2-730f-b5a2-4998b4c6cc84","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0f625-3870-75df-ae28-08e767b384a1","preview":"Hi PixlForm, with all these properties I tried to make it clearly organized into meaningful categories (propertiy groups).","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi PixlForm, with all these properties I tried to make it clearly organized into meaningful categories (propertiy groups)."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0f354-63c2-730f-b5a2-4998b4c6cc84","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0f53c-8481-77af-a920-9c9030414cdd"},"repost":null}},"actors":[{"id":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","slug":"markus-petzold","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-01T06:27:09.581Z","latestAt":"2026-10-01T06:27:09.581Z"},{"id":"01a0f354-663a-720f-b1e9-1c8cc3795784","type":"component.created","target":{"type":"component","id":"2FyHEW8AuAJj5somQUB3","preview":"Sections Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0f353-2bcd-718a-8686-628b53922edc.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","slug":"markus-petzold","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-30T17:19:49.818Z","latestAt":"2026-09-30T17:19:49.818Z"},{"id":"01a0bb53-f6dd-74f2-b3f3-5c8fec72241a","type":"component.created","target":{"type":"component","id":"ubgyxitKNYrrKHdlUkzz","preview":"Contact Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0bb52-1300-7186-b058-733d3f16b148.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","slug":"markus-petzold","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-19T20:20:37.213Z","latestAt":"2026-09-19T20:20:37.213Z"},{"id":"01a013a9-c88a-74aa-9254-941dbb6da92f","type":"comment.reply","target":{"type":"post","id":"01a01334-7f87-763d-8c28-18daf0d89fb2","preview":"Hello everyone, I have a component for a CMS list. In this component I want to implement icons with a multi-reference. But I'm struggling a bit with this. I don't no how to set up, so that the icons can be shown.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello everyone, I have a component for a CMS list. In this component I want to implement icons with a multi-reference. But I'm struggling a bit with this. I don't no how to set up, so that the icons can be shown."}]},{"type":"paragraph"}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01046-70ef-73c0-9d54-2b4d42881a57.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a01334-7f87-763d-8c28-18daf0d89fb2","like":{"count":8,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a013a9-c814-718f-99aa-d7903d8a3819","preview":"Hi Khusanjon, this is a card component from framer template. I modified it for my own purposes.\nThis card contains a frame - with variables fill, padding, radius, border, shadow and link. Inside this frame is an image with a border. Below the image a Title, Subtitle large, Subtitle small and then also a date tag and attributes tags from a CMS-List with Multi-References. I use this for different cases.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi Khusanjon, this is a card component from framer template. I modified it for my own purposes."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"This card contains a frame - with variables fill, padding, radius, border, shadow and link. Inside this frame is an image with a border. Below the image a Title, Subtitle large, Subtitle small and then also a date tag and attributes tags from a CMS-List with Multi-References. I use this for different cases."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a01334-7f87-763d-8c28-18daf0d89fb2","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a01394-ca92-72a4-8284-67000b95ae4b"},"repost":null}},"actors":[{"id":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","slug":"markus-petzold","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-18T06:58:09.162Z","latestAt":"2026-08-18T06:58:09.162Z"},{"id":"019ff00c-d96c-73ce-bd4e-3007b3939def","type":"comment.reply","target":{"type":"post","id":"019feffe-a4a1-71bc-9657-1955713d8532","preview":"$51","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I've updated the code component - CardCarousel ONE"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Changelog:"}]},{"type":"paragraph","content":[{"type":"text","text":"Version ONE.two — 11 August 2026"}]},{"type":"paragraph","content":[{"type":"text","text":"Static rendering","marks":[{"type":"bold"}]},{"type":"text","text":" Autoplay, the Ken Burns effect and all transitions are now switched off while Framer renders on the canvas or exports a page. Image preloading and the viewport observer are skipped there as well."}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed: controls jumping on section change","marks":[{"type":"bold"}]},{"type":"text","text":" The card area could briefly be empty while switching sections, which collapsed the height and made the buttons and progress bar move. The outgoing card now stays visible outside the layout flow while the new one takes its place."}]},{"type":"paragraph","content":[{"type":"text","text":"Animation","marks":[{"type":"bold"}]},{"type":"text","text":" The Fade mode has been removed — it caused the height jump described above. Crossfade, Zoom and Swipe remain, available for the card, the image and the lightbox. Crossfade is the new default, and the card transition now runs at 0.6 s."}]},{"type":"paragraph","content":[{"type":"text","text":"New properties","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Control: Icon Size, Padding"}]},{"type":"paragraph","content":[{"type":"text","text":"Overlay › Button: Padding"}]},{"type":"paragraph","content":[{"type":"text","text":"Image › Arrows: Hover Effect"}]},{"type":"paragraph","content":[{"type":"text","text":"Changed","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Overlay buttons use the same padding as the control buttons"}]},{"type":"paragraph","content":[{"type":"text","text":"Image placeholder colour is now transparent instead of light grey"}]},{"type":"paragraph","content":[{"type":"text","text":"Icon Size now sits directly after Icon Weight in Control, Image › Arrows and Lightbox › Close Button"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/019feffe-4e8a-77f8-ba32-b5b769bc2576.png","targetDeleted":false,"owned":true,"actions":{"postId":"019feffe-a4a1-71bc-9657-1955713d8532","like":{"count":6,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ff00c-d953-762c-95fc-d81a0a74f21b","preview":"But the reality is, that the Claude Ai made this job.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"But the reality is, that the Claude Ai made this job."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019feffe-a4a1-71bc-9657-1955713d8532","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ff007-db88-77b8-94a8-eb84c987342c"},"repost":null}},"actors":[{"id":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","slug":"markus-petzold","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-11T09:00:01.772Z","latestAt":"2026-08-11T09:00:01.772Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:a6d2f85d-34de-4241-beab-480810c4c161:/unified/posts/?creator=a6d2f85d-34de-4241-beab-480810c4c161&with=reposts":[{"data":[{"id":"01a10d25-17f7-739b-a8d8-3ff3060acf0b","title":null,"body":"

I'm working at the moment on a music player. In addition to the general (music player) functionality, I've also implemented an interaction event for an overlay and a link button. As with the other code components, I've tried to make it as customizable as possible while keeping the property panel clear and easy to navigate.

Music Player

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm working at the moment on a music player. In addition to the general (music player) functionality, I've also implemented an interaction event for an overlay and a link button. As with the other code components, I've tried to make it as customizable as possible while keeping the property panel clear and easy to navigate."}]},{"type":"paragraph","content":[{"type":"text","text":"Music Player","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://maroon-performance-999902.framer.app/workstation/music-player","target":"_blank"}}]}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a10d1b-81cd-764f-af7e-f0339bedba1e.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1291,"height":1100}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a10d1c-c875-728a-bcfb-3dda5ad1b331.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":573,"height":1487}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a10d1c-c876-72ca-a898-d3fbaaa3e451.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":578,"height":816}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":3},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T17:38:17.213Z","updatedAt":"2026-10-05T17:38:17.213Z"},{"id":"01a0f354-63c2-730f-b5a2-4998b4c6cc84","title":null,"body":"

I was looking for a solution to have multiple images for a content inside of a carousel. This is my solution for it. A carousel inside of a carousel.

I had previously listed this component for sale. Now it's available for free.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I was looking for a solution to have multiple images for a content inside of a carousel. This is my solution for it. A carousel inside of a carousel."}]},{"type":"paragraph","content":[{"type":"text","text":"I had previously listed this component for sale. Now it's available for free."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2FyHEW8AuAJj5somQUB3","resolved":true,"title":"Sections Carousel","body":"$52","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Sections Carousel"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This framer code component is a "},{"type":"text","text":"deep customizable Multi-Image Sections Carousel","marks":[{"type":"bold"}]},{"type":"text","text":", that presents content as a series of cards. Each card holds a title, subtitle, tags, a caption and its own image gallery. Visitors move between cards with buttons, a menu overlay, arrow keys or swipe gestures."}]},{"type":"paragraph","content":[{"type":"text","text":"Suitable for timelines, product overviews, case studies and team profiles."}]},{"type":"customHeading","content":[{"type":"text","text":"Content"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Per section: button label, title, subtitle, tags, caption, filter values and any number of images. Text fields support bold, italic and line breaks. No limit on sections."}]},{"type":"customHeading","content":[{"type":"text","text":"Navigation"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Previous, next and menu buttons with an optional progress bar. A menu overlay lists all sections. Arrow keys, swipe gestures, image arrows and indicator dots included."}]},{"type":"customHeading","content":[{"type":"text","text":"Lightbox"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Opens images full screen, with arrows, dots, close button, backdrop, separate opening and closing transitions and optional page-scroll locking. Can be switched off."}]},{"type":"customHeading","content":[{"type":"text","text":"Filter"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages."}]},{"type":"customHeading","content":[{"type":"text","text":"Autoplay"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Steps through all images of a card before moving on. Pauses on hover, on hidden browser tabs, when scrolled out of view, and for a set delay after any manual step."}]},{"type":"customHeading","content":[{"type":"text","text":"Animation"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Fade, Crossfade, Zoom and Swipe, set separately for cards, images and the lightbox, each with Framer's transition editor. Optional Ken Burns effect."}]},{"type":"customHeading","content":[{"type":"text","text":"Accessibility"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Semantic HTML, ARIA labels, screen-reader announcements on card changes, focus handling in the lightbox, full keyboard navigation, and reduced-motion support."}]},{"type":"customHeading","content":[{"type":"text","text":"Styling"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Twelve property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, all through Framer's native controls."}]},{"type":"customHeading","content":[{"type":"text","text":"Notes"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Uses Framer's animation library and Phosphor Icons."}]}]},"introduction":"Deep custom. Sections Carousel","slug":"sections-carousel","author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0f353-2bcd-718a-8686-628b53922edc.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-30T17:19:48.429Z","updatedAt":"2026-09-30T17:19:48.429Z","publishedAt":"2026-09-30T17:19:48.427Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/SectionsCarousel-BOhTKJ.js@BeqXiw6kKvWwIgk5uSJc","previewUrl":"https://maroon-performance-999902.framer.app/workstation/sectionscarousel","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"BeqXiw6kKvWwIgk5uSJc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-30T17:19:49.186Z","updatedAt":"2026-09-30T17:19:49.186Z"},{"id":"01a0d493-d6b9-75ac-b69f-66b8c67d9c90","title":null,"body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CONTACT CAROUSEL - CHANGELOG","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Version ONE.one - 2026-09-24"}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Lightbox was clipped inside relative Framer overlays.","marks":[{"type":"bold"}]},{"type":"text","text":" Framer Motion applies a "},{"type":"text","text":"transform","marks":[{"type":"code"}]},{"type":"text","text":" to the animated card, and a transformed element becomes the containing block for "},{"type":"text","text":"position: fixed","marks":[{"type":"code"}]},{"type":"text","text":" descendants. The lightbox was therefore positioned against the card instead of the viewport. It is now rendered into "},{"type":"text","text":"document.body","marks":[{"type":"code"}]},{"type":"text","text":" via "},{"type":"text","text":"createPortal","marks":[{"type":"code"}]},{"type":"text","text":", fully detached from the transformed tree."}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll lock stayed active after the first close.","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"lightboxExiting","marks":[{"type":"code"}]},{"type":"text","text":" was set on open but never reset. The outer "},{"type":"text","text":"AnimatePresence","marks":[{"type":"code"}]},{"type":"text","text":" now calls "},{"type":"text","text":"onExitComplete={() => setLightboxExiting(false)}","marks":[{"type":"code"}]},{"type":"text","text":", so the state is clean after the exit animation."}]},{"type":"paragraph","content":[{"type":"text","text":"Clicking the backdrop reliably closes the lightbox","marks":[{"type":"bold"}]},{"type":"text","text":" when "},{"type":"text","text":"dismissible: On","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Changed","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Lightbox moved out of "},{"type":"text","text":"rootRef","marks":[{"type":"code"}]},{"type":"text","text":"; it is now returned as a sibling via a "},{"type":"text","text":"lightboxPortal","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"renderPhosphorIcon","marks":[{"type":"code"}]},{"type":"text","text":" moved above the component (was only reachable through hoisting)."}]},{"type":"paragraph","content":[{"type":"text","text":"Added "},{"type":"text","text":"import { createPortal } from \"react-dom\"","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Unchanged","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All property controls, style groups, hooks, effects, types, and constants."}]},{"type":"paragraph","content":[{"type":"text","text":"Error boundary, "},{"type":"text","text":"export default","marks":[{"type":"code"}]},{"type":"text","text":" setup, autoplay, filter, live filter, panel overlay, keyboard navigation, and swipe."}]},{"type":"paragraph","content":[{"type":"text","text":"Known behaviour (not a bug)","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Inside a relative Framer overlay with "},{"type":"text","text":"Dismiss on Click Outside: auto","marks":[{"type":"bold"}]},{"type":"text","text":", a click on or next to the lightbox can be treated as \"outside\" and close the overlay. That is Framer behaviour, not component behaviour. Workaround: set the overlay's dismiss option to "},{"type":"text","text":"Off","marks":[{"type":"bold"}]},{"type":"text","text":", or use a regular absolute-positioned layer instead."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0d490-ddca-7648-b306-976cc5d79c72.jpg","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-24T18:00:53.693Z","updatedAt":"2026-09-24T18:00:53.693Z"},{"id":"01a0bb53-f479-71e9-b52b-3d8f4d1cf19d","title":null,"body":"

I hope this code component can be also a great utility for your project.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I hope this code component can be also a great utility for your project."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ubgyxitKNYrrKHdlUkzz","resolved":true,"title":"Contact Carousel","body":"$54","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Contact Carousel"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This framer code component is a "},{"type":"text","text":"deep customizable","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Contact Carousel","marks":[{"type":"bold"}]},{"type":"text","text":" for presenting people or places as a series of cards. Each card holds an image, title, subtitle, tags, two text fields and a set of contact actions. Visitors move between cards with buttons, a menu overlay, arrow keys or swipe."}]},{"type":"paragraph","content":[{"type":"text","text":"Suitable for team pages, office locations and partner directories."}]},{"type":"customHeading","content":[{"type":"text","text":"Content"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Per section: button label, image, title, subtitle, tags, Text 1, Text 2, filter values and any number of actions. Text fields support bold, italic and line breaks."}]},{"type":"customHeading","content":[{"type":"text","text":"Actions"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Each card carries its own contact buttons, each with an icon, label and link. One person can have phone and SMS, another email, WhatsApp and Telegram. Links accept tel:, sms:, mailto: or a normal URL; leave it empty for a button without a link."}]},{"type":"customHeading","content":[{"type":"text","text":"Layout"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The image sits left, right or above the text, with its own column width. Its height follows the aspect ratio, a fixed value, or the text beside it."}]},{"type":"customHeading","content":[{"type":"text","text":"Navigation"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Previous, next and menu buttons with an optional progress bar, plus a menu overlay listing all sections."}]},{"type":"customHeading","content":[{"type":"text","text":"Lightbox"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Opens the image full screen, with close button, backdrop, separate opening and closing transitions and optional scroll locking. Can be switched off."}]},{"type":"customHeading","content":[{"type":"text","text":"Filter"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages."}]},{"type":"customHeading","content":[{"type":"text","text":"Autoplay"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Moves through the cards on its own. Pauses on hover, on hidden tabs, when scrolled out of view, and for a set delay after any manual step."}]},{"type":"customHeading","content":[{"type":"text","text":"Accessibility"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Semantic HTML, ARIA labels, screen-reader announcements, focus handling in the lightbox, keyboard navigation and reduced-motion support."}]},{"type":"customHeading","content":[{"type":"text","text":"Styling"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Sixteen property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, through Framer's native controls."}]},{"type":"customHeading","content":[{"type":"text","text":"Notes"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"One .tsx file. Uses Framer's animation library and Phosphor Icons."}]},{"type":"paragraph","content":[{"type":"text","text":"Questions and feedback via the Framer Community."}]}]},"introduction":"Deep customizable Contact Carousel","slug":"contact-carousel","author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0bb52-1300-7186-b058-733d3f16b148.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1640,"height":1240}}],"post":null,"createdAt":"2026-09-19T20:20:35.985Z","updatedAt":"2026-09-24T17:44:03.206Z","publishedAt":"2026-09-19T20:20:35.983Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/ContactCarousel-ONE-zero-PIkMRC.js@z8USlR35nmeMHZXoYnP2","previewUrl":"https://maroon-performance-999902.framer.app/workstation/contactcarousel","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"z8USlR35nmeMHZXoYnP2","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-09-19T20:20:36.601Z","updatedAt":"2026-09-19T20:20:36.601Z"},{"id":"01a0395b-8abf-7758-a61b-3f2b8f83d63c","title":null,"body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here's another update for the CardCarousel. This time, I have added a live filter and filter properties to set variables. I am using it for a timeline. My project has multiple pages for different locations. I added all the content/sections to one component and set a variable for the initial filter value. Visitors can filter by location or select all. You can see this in the pictures."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"CardCarousel ONE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Version ONE.five - updated 25 August 2026"}]},{"type":"paragraph","content":[{"type":"text","text":"Live Filter","marks":[{"type":"bold"}]},{"type":"text","text":" A new filter button beside the menu lets visitors switch the selection themselves. Options are defined as label and value pairs, so a button can read \"Germany\" while matching \"DE\". The button and its overlay reuse the existing Control and Overlay styling, so there is nothing extra to style."}]},{"type":"paragraph","content":[{"type":"text","text":"Filter Value and Filter Start Value","marks":[{"type":"bold"}]},{"type":"text","text":" Two plain fields above the General group. Being outside a group, they can be bound to a variable, which lets one component serve several pages: Filter Value fixes the selection, Filter Start Value only preselects it and leaves the visitor free to change it."}]},{"type":"paragraph","content":[{"type":"text","text":"Order of precedence: what the visitor picks, then Filter Start Value, then Filter Value, then the Filter group."}]},{"type":"paragraph","content":[{"type":"text","text":"Filter › Match","marks":[{"type":"bold"}]},{"type":"text","text":" Filter values can now be compared against each section's Filter field, its visible Tags, or both. Tags are matched as whole words, so a value has to read exactly like the tag."}]},{"type":"paragraph","content":[{"type":"text","text":"Lightbox indicator dots on by default","marks":[{"type":"bold"}]},{"type":"text","text":" The dots already existed but started switched off, so galleries gave no hint of how many images followed."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0395b-6704-77be-93ec-d8b42021ae53.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2092,"height":1449}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0395b-671b-7462-873f-19d99e16d80a.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1752,"height":1181}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0395b-671a-75d8-956e-f06efe896bf6.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1750,"height":1408}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0395b-67f6-748c-9563-9246d29abe2e.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":2097,"height":1462}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a0395b-6756-707a-b18e-723f4dd4f95a.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1885,"height":990}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-25T14:38:15.747Z","updatedAt":"2026-08-25T14:38:15.747Z"},{"id":"01a0395b-0929-760a-8293-d0475b7052e4","title":null,"body":"

CardCarousel ONE

Version ONE.four - updated 19 August 2026

Fixed: tapping the backdrop did not close the lightbox An invisible box around the enlarged image covered the backdrop and absorbed taps, which was most noticeable on phones where the image leaves a lot of empty space around it. The backdrop receives them again.

Fixed: blue flash when tapping Mobile browsers showed their button highlight when tapping the lightbox backdrop or the card image. Both are full-size tap targets, where that flash read as a glitch rather than as feedback.

Escape always closes the lightbox The Dismiss Escape switch has been removed. Escape is expected behaviour for a full-screen dialog, and turning it off could leave visitors without a way out.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CardCarousel ONE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Version ONE.four - updated 19 August 2026"}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed: tapping the backdrop did not close the lightbox","marks":[{"type":"bold"}]},{"type":"text","text":" An invisible box around the enlarged image covered the backdrop and absorbed taps, which was most noticeable on phones where the image leaves a lot of empty space around it. The backdrop receives them again."}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed: blue flash when tapping","marks":[{"type":"bold"}]},{"type":"text","text":" Mobile browsers showed their button highlight when tapping the lightbox backdrop or the card image. Both are full-size tap targets, where that flash read as a glitch rather than as feedback."}]},{"type":"paragraph","content":[{"type":"text","text":"Escape always closes the lightbox","marks":[{"type":"bold"}]},{"type":"text","text":" The Dismiss Escape switch has been removed. Escape is expected behaviour for a full-screen dialog, and turning it off could leave visitors without a way out."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-25T14:37:42.573Z","updatedAt":"2026-08-25T14:37:42.573Z"},{"id":"01a01edf-3e33-7788-9d19-f876281f36fc","title":null,"body":"

Regarding my last message. It works now. The multi-reference field with a component to show multiple individual icons.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Regarding my last message. It works now. The multi-reference field with a component to show multiple individual icons."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01ed9-6fd4-70ee-8cce-0b61910356bd.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2082,"height":1033}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01ede-8c83-71a0-9870-28b82e1bc3ba.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1629,"height":940}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01ede-8b9d-7550-9751-f6c237dee7dc.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1856,"height":929}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01ede-8cc4-709b-8418-6361d4ce976d.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2404,"height":906}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01ee0-2fe7-702f-9ea4-693937725e27.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1376,"height":745}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":3,"edited":true,"editedAt":"2026-08-20T11:13:32.640Z","createdAt":"2026-08-20T11:12:22.070Z","updatedAt":"2026-08-20T11:13:32.640Z"},{"id":"01a01334-7f87-763d-8c28-18daf0d89fb2","title":null,"body":"

Hello everyone, I have a component for a CMS list. In this component I want to implement icons with a multi-reference. But I'm struggling a bit with this. I don't no how to set up, so that the icons can be shown.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello everyone, I have a component for a CMS list. In this component I want to implement icons with a multi-reference. But I'm struggling a bit with this. I don't no how to set up, so that the icons can be shown."}]},{"type":"paragraph"}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01046-70ef-73c0-9d54-2b4d42881a57.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2416,"height":1028}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01046-710b-71de-8553-de7c84c81c17.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2362,"height":1368}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01333-e32b-755e-93c2-23bef0cb14fc.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":3000,"height":1892}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a01333-e370-74d8-8f79-cafbf222584f.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":3000,"height":1892}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-18T04:50:02.763Z","updatedAt":"2026-08-18T04:50:02.763Z"},{"id":"01a004ee-50da-76bf-9b58-ec2f75e0b263","title":null,"body":"

CardCarousel ONE - Update

Version: ONE.three (updated 15 August 2026)

Removed unused size options: Image › Size no longer offers Min Width, Max Width and Min Height. Widths were measured against the card, whose width is already set under General › Max Width, and a minimum height had no useful effect on a cropped image. Width, Height, Ratio and Max Height remain.

Clarified: The description of Card › Min Height no longer refers to page jumping, which was fixed in the previous version. It now simply describes what the setting does: giving short and long sections a shared minimum height.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CardCarousel ONE - Update","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Version: ONE.three (updated 15 August 2026)"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Removed unused size options:","marks":[{"type":"bold"}]},{"type":"text","text":" Image › Size no longer offers Min Width, Max Width and Min Height. Widths were measured against the card, whose width is already set under General › Max Width, and a minimum height had no useful effect on a cropped image. Width, Height, Ratio and Max Height remain."}]},{"type":"paragraph","content":[{"type":"text","text":"Clarified:","marks":[{"type":"bold"}]},{"type":"text","text":" The description of Card › Min Height no longer refers to page jumping, which was fixed in the previous version. It now simply describes what the setting does: giving short and long sections a shared minimum height."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a004ee-1370-7767-8c88-e24245c9ab4f.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1237,"height":1471}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a004ee-1389-7508-b794-1106ee8d731c.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1215,"height":1469}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a004ee-1489-75cd-bb72-130d2a80adbf.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1212,"height":1480}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-15T10:18:42.270Z","updatedAt":"2026-08-15T10:18:42.270Z"},{"id":"01a0049b-4385-74b8-8cdb-1ddf2324770f","title":null,"body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Card Carousel ONE ","marks":[{"type":"bold"}]},{"type":"text","text":"• Feature: Sections and Filter"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Sections","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A section is one card. The carousel shows one at a time; visitors move between them with the buttons, the menu overlay, arrow keys or swipe."}]},{"type":"paragraph","content":[{"type":"text","text":"Each section holds a "},{"type":"text","text":"Button","marks":[{"type":"bold"}]},{"type":"text","text":" label for the menu, a "},{"type":"text","text":"Title","marks":[{"type":"bold"}]},{"type":"text","text":", a "},{"type":"text","text":"Subtitle","marks":[{"type":"bold"}]},{"type":"text","text":", optional "},{"type":"text","text":"Tags","marks":[{"type":"bold"}]},{"type":"text","text":", a "},{"type":"text","text":"Caption","marks":[{"type":"bold"}]},{"type":"text","text":", one or more "},{"type":"text","text":"Filter","marks":[{"type":"bold"}]},{"type":"text","text":" values, and any number of "},{"type":"text","text":"Images","marks":[{"type":"bold"}]},{"type":"text","text":" shown as a gallery inside the card."}]},{"type":"paragraph","content":[{"type":"text","text":"Title, Subtitle and Caption accept two asterisks for bold and one for italic, plus manual line breaks. Sections appear in the order you list them, with no limit on how many you add."}]},{"type":"paragraph","content":[{"type":"text","text":"No CMS collection needed: add a section, fill in the fields, done. For content that also needs its own pages, more details, more options, and URLs, a collection is still the better tool."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Filter","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The Filter group decides which sections appear, so the same component can sit on several pages and show a different selection on each."}]},{"type":"paragraph","content":[{"type":"text","text":"Leave "},{"type":"text","text":"All","marks":[{"type":"bold"}]},{"type":"text","text":" on "},{"type":"text","text":"Yes","marks":[{"type":"italic"}]},{"type":"text","text":" to show everything. Set it to "},{"type":"text","text":"No","marks":[{"type":"italic"}]},{"type":"text","text":" and list the values you want under "},{"type":"text","text":"Values","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"How matching works:"}]},{"type":"paragraph","content":[{"type":"text","text":"One hit is enough.","marks":[{"type":"bold"}]},{"type":"text","text":" A section shows if its Filter field matches any value in your list."}]},{"type":"paragraph","content":[{"type":"text","text":"Case is ignored.","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"DE","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"de","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"De","marks":[{"type":"code"}]},{"type":"text","text":" are the same."}]},{"type":"paragraph","content":[{"type":"text","text":"Both sides take several values,","marks":[{"type":"bold"}]},{"type":"text","text":" separated by space, comma, semicolon, slash or pipe: "},{"type":"text","text":"DE, KE","marks":[{"type":"code"}]},{"type":"text","text":" or "},{"type":"text","text":"DE / KE","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"An empty list shows everything,","marks":[{"type":"bold"}]},{"type":"text","text":" and so does the value "},{"type":"text","text":"all","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Sections without a filter value are left out","marks":[{"type":"bold"}]},{"type":"text","text":" while filtering. They return when All is set back to "},{"type":"text","text":"Yes","marks":[{"type":"italic"}]},{"type":"text","text":"."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Example","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"SectionFilterDöbeln office"},{"type":"text","text":"DE","marks":[{"type":"code"}]},{"type":"text","text":"Colol farm"},{"type":"text","text":"ID","marks":[{"type":"code"}]},{"type":"text","text":"Trade fair"},{"type":"text","text":"DE, ID","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"German page, Values "},{"type":"text","text":"DE","marks":[{"type":"code"}]},{"type":"text","text":" → Döbeln office and Trade fair. Indonesian page, Values "},{"type":"text","text":"ID","marks":[{"type":"code"}]},{"type":"text","text":" → Colol farm and Trade fair. Overview page, All on "},{"type":"text","text":"Yes","marks":[{"type":"italic"}]},{"type":"text","text":" → all three."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Update:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"I reduced the price from 12$ to 8$."}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a00484-fa5a-75ac-8b48-185d01b8e1bf.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1230,"height":1188}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a00484-fa63-736d-8d03-23ffaf18c7d5.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1224,"height":1183}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a00484-fb70-704e-9395-88c68b9ae6bb.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1244,"height":1206}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/01a00484-fb64-746e-bdaa-7a3dfc70e990.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1237,"height":1208}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-15T08:47:59.370Z","updatedAt":"2026-08-15T08:47:59.370Z"},{"id":"019feffe-a4a1-71bc-9657-1955713d8532","title":null,"body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I've updated the code component - CardCarousel ONE"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Changelog:"}]},{"type":"paragraph","content":[{"type":"text","text":"Version ONE.two — 11 August 2026"}]},{"type":"paragraph","content":[{"type":"text","text":"Static rendering","marks":[{"type":"bold"}]},{"type":"text","text":" Autoplay, the Ken Burns effect and all transitions are now switched off while Framer renders on the canvas or exports a page. Image preloading and the viewport observer are skipped there as well."}]},{"type":"paragraph","content":[{"type":"text","text":"Fixed: controls jumping on section change","marks":[{"type":"bold"}]},{"type":"text","text":" The card area could briefly be empty while switching sections, which collapsed the height and made the buttons and progress bar move. The outgoing card now stays visible outside the layout flow while the new one takes its place."}]},{"type":"paragraph","content":[{"type":"text","text":"Animation","marks":[{"type":"bold"}]},{"type":"text","text":" The Fade mode has been removed — it caused the height jump described above. Crossfade, Zoom and Swipe remain, available for the card, the image and the lightbox. Crossfade is the new default, and the card transition now runs at 0.6 s."}]},{"type":"paragraph","content":[{"type":"text","text":"New properties","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Control: Icon Size, Padding"}]},{"type":"paragraph","content":[{"type":"text","text":"Overlay › Button: Padding"}]},{"type":"paragraph","content":[{"type":"text","text":"Image › Arrows: Hover Effect"}]},{"type":"paragraph","content":[{"type":"text","text":"Changed","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Overlay buttons use the same padding as the control buttons"}]},{"type":"paragraph","content":[{"type":"text","text":"Image placeholder colour is now transparent instead of light grey"}]},{"type":"paragraph","content":[{"type":"text","text":"Icon Size now sits directly after Icon Weight in Control, Image › Arrows and Lightbox › Close Button"}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/019feffe-4e8a-77f8-ba32-b5b769bc2576.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1741,"height":1152}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/019feffe-4dd2-7596-b62c-b135e4611e7d.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1494,"height":1008}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/019feffe-4db2-733e-aa65-7f8bc70bcba3.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1467,"height":1152}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-11T08:44:30.757Z","updatedAt":"2026-08-11T08:44:30.757Z"},{"id":"019fe262-44e3-769d-956c-0d792ebb7356","title":null,"body":"

I started creating a timeline component with AI, and in the end I saw the potential for other use cases. I did my best to make it as responsive and customisable as possible.

This framer code component is a deep customizable Multi-Image Card Carousel for different use cases - product overview, timeline and more.

I will make this code component available on the marketplace in the next few days.

Workstation • Card Carousel

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I started creating a timeline component with AI, and in the end I saw the potential for other use cases. I did my best to make it as responsive and customisable as possible."}]},{"type":"paragraph","content":[{"type":"text","text":"This framer code component is a "},{"type":"text","text":"deep customizable","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"Multi-Image Card Carousel","marks":[{"type":"bold"}]},{"type":"text","text":" for different use cases - product overview, timeline and more."}]},{"type":"paragraph","content":[{"type":"text","text":"I will make this code component available on the marketplace in the next few days."}]},{"type":"paragraph","content":[{"type":"text","text":"Workstation • Card Carousel","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://maroon-performance-999902.framer.app/workstation/cardcarousel","target":"_blank"}},{"type":"bold"}]}]}]},"author":{"framerUserId":"a6d2f85d-34de-4241-beab-480810c4c161","name":"Markus Petzold","slug":"markus-petzold","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/bz41r0gf","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/019fe25d-2b2e-72cc-8840-2426feef3adc.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1782,"height":1541}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a6d2f85d-34de-4241-beab-480810c4c161/019fe25d-2b3b-712d-a5e3-2b8cd836a329.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2369,"height":1557}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-08T17:18:38.823Z","updatedAt":"2026-08-08T17:18:38.823Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L58"}]