5d:I[333483,["/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/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7f4,

Highlight Sync Tabs – Click-to-Highlight Tab List with Synced Image

Highlight Sync Tabs is a modern, interactive Framer component that transforms a static "who we are" or mission list into a bold, synced showcase. Instead of a plain list, each item shows an icon, title, and description at all times, and the moment a visitor clicks a tab, it fills with a solid background color to mark it active while the side image updates to match. The seamless color and image sync give your about, mission, or company section a premium, cohesive feel with almost no setup required.

Click-to-Highlight Interaction

Active tab fills with a solid background color on click.
Side image updates in sync with the active tab.
Inactive tabs stay plain, keeping the active selection clear.
Smooth color and image transitions feel seamless and intentional.
Fully responsive and optimized for modern GPU-accelerated performance.

Customizable Design Controls Highlight Sync Tabs includes full Framer property controls so you can instantly match it to your brand or layout.

Customize

Titles (01–03) – Edit the heading for each tab.
Text (01–03) – Edit the description for each tab.
Images (01–03) – Assign a unique image to each tab, shown in the synced panel.
Active Card Color – Set the background color for the active tab.

How It Works Highlight Sync Tabs tracks click events across each tab. When a visitor clicks a tab, the component smoothly fills it with the active background color while the side image crossfades to the corresponding visual. The other tabs stay in their default plain state, keeping the active selection clear and making the experience feel seamless and intentional.

5a:[["$","$L5d",null,{"post":{"id":"01a0fb55-053e-747c-9931-88d4f71e57ff","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"492da4c7-1f68-44bb-a835-d654f4ede7b8","name":"Pentaclay","slug":"pentaclay","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28817/5IpLqH7F9iimwZKthWdWp8kYrU-vxHo09smZpSjxasGJhxW7DH2mYch2a.png","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"IGsaSzeNNAp82TEcBHpR","resolved":true,"title":"Highlight Sync Tabs","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Highlight Sync Tabs – Click-to-Highlight Tab List with Synced Image","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Highlight Sync Tabs is a modern, interactive Framer component that transforms a static \"who we are\" or mission list into a bold, synced showcase. Instead of a plain list, each item shows an icon, title, and description at all times, and the moment a visitor clicks a tab, it fills with a solid background color to mark it active while the side image updates to match. The seamless color and image sync give your about, mission, or company section a premium, cohesive feel with almost no setup required."}]},{"type":"paragraph","content":[{"type":"text","text":"Click-to-Highlight Interaction","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active tab fills with a solid background color on click."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Side image updates in sync with the active tab."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inactive tabs stay plain, keeping the active selection clear."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth color and image transitions feel seamless and intentional."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive and optimized for modern GPU-accelerated performance."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Design Controls","marks":[{"type":"bold"}]},{"type":"text","text":" Highlight Sync Tabs includes full Framer property controls so you can instantly match it to your brand or layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Titles (01–03)","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the heading for each tab."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text (01–03)","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the description for each tab."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Images (01–03)","marks":[{"type":"bold"}]},{"type":"text","text":" – Assign a unique image to each tab, shown in the synced panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active Card Color","marks":[{"type":"bold"}]},{"type":"text","text":" – Set the background color for the active tab."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]},{"type":"text","text":" Highlight Sync Tabs tracks click events across each tab. When a visitor clicks a tab, the component smoothly fills it with the active background color while the side image crossfades to the corresponding visual. The other tabs stay in their default plain state, keeping the active selection clear and making the experience feel seamless and intentional."}]}]},"introduction":"Tab List with Color & Image Sync","slug":"highlight-sync-tabs","author":{"framerUserId":"492da4c7-1f68-44bb-a835-d654f4ede7b8","name":"Pentaclay","slug":"pentaclay","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28817/5IpLqH7F9iimwZKthWdWp8kYrU-vxHo09smZpSjxasGJhxW7DH2mYch2a.png","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/492da4c7-1f68-44bb-a835-d654f4ede7b8/01a0fb5e-2f6e-7129-8caa-ef5ef6f8c020.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T06:37:27.323Z","updatedAt":"2026-10-05T11:00:13.349Z","publishedAt":"2026-10-02T06:37:27.320Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Highlight-Sync-Tabs-3WdZ2D.js@DqEbT18NaDWe6NmYFrCs","previewUrl":"https://highlightsynctabs.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"DqEbT18NaDWe6NmYFrCs","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T06:37:28.254Z","updatedAt":"2026-10-02T06:37:28.254Z","reported":false}}],"$L5f"]

Suggested for you