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

Holo ID Badge turns any photo or video into a hanging 3D ID badge. Hover to tilt it, drag it to swing, pull it down to stretch the lanyard, and watch it spring back. A WebGL shader adds depth parallax and a holographic foil that shifts with the viewing angle.

Highlights

Real depth: the photo or video shifts with the tilt, estimated from brightness or driven by your own depth map.
Holographic foil: Holo, Silver or Gold foil with a moving specular sheen.
Physical motion: pendulum swing, rubber-band stretch with spring-back, and a drop-in entrance.
Metal hardware: crimp end, swivel ring and hook in Chrome, Gold or Gunmetal.
Image or video: use a portrait, a team photo or a looping clip.

Customize everything

Name, role, company, ID number and barcode
Split layout (photo + details) or full-bleed media
Card, text and accent colors, corner radius and fonts
Lanyard length, color and printed text
Foil type and intensity, sheen, depth, tilt amount and idle drift
Fixed card width in a larger frame, or fit the card to the frame

Great for

Team and about pages, conference and event passes, speaker cards, portfolio hero sections, hiring pages and product launches.

Good to know

Place the badge in a frame larger than the card to give it room to swing and stretch.
Animation pauses when the badge is off screen and respects reduced-motion settings.
The Framer canvas shows a static preview. The full 3D effect runs in Preview and on the published site.
Uses WebGL 2. If it's not available, the badge falls back to a static version.

License

Personal license for personal and non-commercial projects. Add the Commercial License Upgrade at checkout for client work and business sites.

5a:[["$","$L5d",null,{"post":{"id":"01a0dc17-51c7-7320-b768-fea9d2bf8bf4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"9cf25393-088e-4cb0-985a-ce34d8a7e7fc","name":"V2SPACE","slug":"jshguo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9cf25393-088e-4cb0-985a-ce34d8a7e7fc/haso7xg0","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"td2QRK9QAekqOlhav35v","resolved":true,"title":"Holo ID Badge","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Holo ID Badge","marks":[{"type":"bold"}]},{"type":"text","text":" turns any photo or video into a hanging 3D ID badge. Hover to tilt it, drag it to swing, pull it down to stretch the lanyard, and watch it spring back. A WebGL shader adds depth parallax and a holographic foil that shifts with the viewing angle."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real depth","marks":[{"type":"bold"}]},{"type":"text","text":": the photo or video shifts with the tilt, estimated from brightness or driven by your own depth map."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Holographic foil","marks":[{"type":"bold"}]},{"type":"text","text":": Holo, Silver or Gold foil with a moving specular sheen."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Physical motion","marks":[{"type":"bold"}]},{"type":"text","text":": pendulum swing, rubber-band stretch with spring-back, and a drop-in entrance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Metal hardware","marks":[{"type":"bold"}]},{"type":"text","text":": crimp end, swivel ring and hook in Chrome, Gold or Gunmetal."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image or video","marks":[{"type":"bold"}]},{"type":"text","text":": use a portrait, a team photo or a looping clip."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize everything","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Name, role, company, ID number and barcode"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Split layout (photo + details) or full-bleed media"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card, text and accent colors, corner radius and fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lanyard length, color and printed text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Foil type and intensity, sheen, depth, tilt amount and idle drift"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fixed card width in a larger frame, or fit the card to the frame"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Team and about pages, conference and event passes, speaker cards, portfolio hero sections, hiring pages and product launches."}]},{"type":"paragraph","content":[{"type":"text","text":"Good to know","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place the badge in a frame larger than the card to give it room to swing and stretch."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation pauses when the badge is off screen and respects reduced-motion settings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The Framer canvas shows a static preview. The full 3D effect runs in Preview and on the published site."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Uses WebGL 2. If it's not available, the badge falls back to a static version."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"License","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Personal license for personal and non-commercial projects. Add the Commercial License Upgrade at checkout for client work and business sites."}]}]},"introduction":"Interactive holographic ID badge","slug":"holo-id-badge","author":{"framerUserId":"9cf25393-088e-4cb0-985a-ce34d8a7e7fc","name":"V2SPACE","slug":"jshguo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9cf25393-088e-4cb0-985a-ce34d8a7e7fc/haso7xg0","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9cf25393-088e-4cb0-985a-ce34d8a7e7fc/01a0dc17-3594-75ab-9856-325c9aaf5ad8.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-26T05:01:50.218Z","updatedAt":"2026-09-26T05:01:50.218Z","publishedAt":"2026-09-26T05:01:50.214Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lavender-slide-417911.framer.app/","price":"15","paymentUrl":"https://buy.stripe.com/fZufZhcjyeU1dTubnK3ZK03","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"qtUY9ERzZ8BE91cPHLn7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-26T05:01:50.919Z","updatedAt":"2026-09-26T05:01:50.919Z","reported":false}}],"$L5f"]

Suggested for you