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:T9f0,

Team Mosaic is an interactive team showcase for Framer that transforms traditional profile cards into a responsive editorial grid. Team members appear as clean portrait tiles, and selecting a person expands their card into a detailed profile while the surrounding grid smoothly rearranges around them.

✦ Key Features

Interactive Team Grid - Present your people in a clean, responsive mosaic layout.
Expandable Profiles - Select any member to reveal a larger profile directly inside the grid.
Smooth Grid Reflow - Surrounding cards automatically reposition with fluid transitions when a profile opens.
Detailed Member Profiles - Add name, role, team, location, bio, profile link, and email.
Up to 40 Members - Build anything from a compact studio team to a larger company directory.
Responsive Columns - Automatically adapts the grid from 2 to 6 columns based on available space.
Monochrome Reveal - Display portraits in greyscale and reveal their original color on hover or when selected.
Hover Image Zoom - Add subtle image scaling for a polished interactive feel.
Focus Mode - Optionally dim surrounding members when a profile is expanded.
Custom Header - Add an eyebrow, heading, and introduction above your team.
Flexible Portraits - Adjust image proportions, tile size, spacing, padding, and corner radius.
Custom Styling - Personalize backgrounds, profile panels, accent colors, typography, and interface details.

✦ What You Can Create

Agency team pages
Creative studio rosters
Company directories
Leadership showcases
Startup team sections
Employee profiles
Design collectives
About pages
Founder and executive profiles

✦ Turn Your Team Into a Story

Team Mosaic combines portraits, profiles, and responsive grid movement into one cohesive team experience. Instead of sending visitors to separate profile pages, it lets them explore each person directly within the layout while keeping the entire team visible and connected.

5a:[["$","$L5d",null,{"post":{"id":"01a0c8f8-59ff-7592-9a03-25ffb511ec0b","title":null,"body":"

Team Mosaic Component

If you like it, give it a ❤

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Team Mosaic Component"}]},{"type":"paragraph","content":[{"type":"text","text":"If you like it, give it a ","marks":[{"type":"bold"}]},{"type":"emoji","marks":[{"type":"bold"}],"attrs":{"name":"heart","emoji":"❤"}}]}]},"author":{"framerUserId":"93e0445d-da1b-434f-be79-797c7c983df6","name":"Axis Supply","slug":"axissupply","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/x7b91rcg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"jHmpvNbuWlLpXQ6ukklb","resolved":true,"title":"Team Mosaic","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Team Mosaic","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive team showcase for Framer that transforms traditional profile cards into a responsive editorial grid. Team members appear as clean portrait tiles, and selecting a person expands their card into a detailed profile while the surrounding grid smoothly rearranges around them."}]},{"type":"customHeading","content":[{"type":"text","text":"✦ Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Team Grid","marks":[{"type":"bold"}]},{"type":"text","text":" - Present your people in a clean, responsive mosaic layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Expandable Profiles","marks":[{"type":"bold"}]},{"type":"text","text":" - Select any member to reveal a larger profile directly inside the grid."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth Grid Reflow","marks":[{"type":"bold"}]},{"type":"text","text":" - Surrounding cards automatically reposition with fluid transitions when a profile opens."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Detailed Member Profiles","marks":[{"type":"bold"}]},{"type":"text","text":" - Add name, role, team, location, bio, profile link, and email."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 40 Members","marks":[{"type":"bold"}]},{"type":"text","text":" - Build anything from a compact studio team to a larger company directory."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Columns","marks":[{"type":"bold"}]},{"type":"text","text":" - Automatically adapts the grid from 2 to 6 columns based on available space."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Monochrome Reveal","marks":[{"type":"bold"}]},{"type":"text","text":" - Display portraits in greyscale and reveal their original color on hover or when selected."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover Image Zoom","marks":[{"type":"bold"}]},{"type":"text","text":" - Add subtle image scaling for a polished interactive feel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Focus Mode","marks":[{"type":"bold"}]},{"type":"text","text":" - Optionally dim surrounding members when a profile is expanded."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Header","marks":[{"type":"bold"}]},{"type":"text","text":" - Add an eyebrow, heading, and introduction above your team."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flexible Portraits","marks":[{"type":"bold"}]},{"type":"text","text":" - Adjust image proportions, tile size, spacing, padding, and corner radius."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Styling","marks":[{"type":"bold"}]},{"type":"text","text":" - Personalize backgrounds, profile panels, accent colors, typography, and interface details."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"✦ What You Can Create"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency team pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative studio rosters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Company directories"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Leadership showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Startup team sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Employee profiles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design collectives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"About pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Founder and executive profiles"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"✦ Turn Your Team Into a Story"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Team Mosaic","marks":[{"type":"bold"}]},{"type":"text","text":" combines portraits, profiles, and responsive grid movement into one cohesive team experience. Instead of sending visitors to separate profile pages, it lets them explore each person directly within the layout while keeping the entire team visible and connected."}]}]},"introduction":"Interactive Expandable Team Grid","slug":"team-mosaic","author":{"framerUserId":"93e0445d-da1b-434f-be79-797c7c983df6","name":"Axis Supply","slug":"axissupply","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/x7b91rcg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/01a0c8f7-f47f-74d5-a990-f56868d74f64.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-22T11:55:13.669Z","updatedAt":"2026-10-02T11:16:01.299Z","publishedAt":"2026-09-22T11:55:13.666Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://teammosaic.framer.website/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_sf0dmcnu2Bw5Yib0kgjqsSMUlp2QMY8VDBmaE1ujzm5","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"7XHpi9QyeiQ4DAca4b1B","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-22T11:55:14.303Z","updatedAt":"2026-09-22T11:55:14.303Z","reported":false}}],"$L5f"]

Suggested for you