51:I[267044,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3f4g-fr876v8f.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/34g6edkub9lqm.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/16queuxy94k6z.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0feduxwyr82nv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/0h18ahbw9nndq.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/0yqk60ay0h76r.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/046rld3pdrzo7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/0lmmb08iwroji.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T643,

Type Piano is my Framer hackathon entry: an interactive playground where music becomes typography. Instead of creating sound for the sake of sound, every key press generates visual compositions that evolve into unique typographic posters.

Why I built it

Most creative tools separate exploration from output. You play music in one place and design in another. I wanted to create something that turns playful experimentation directly into a visual artifact you can keep.

What's inside

Piano keyboard that generates typography through interaction
Multiple visual themes, from ambient and cinematic to horror-inspired styles
Multi-language support for different writing systems
Real-time poster generation based on your inputs
Export-ready outputs that can be saved and shared

What agents helped with

Framer agents helped refine the interaction layer, improve the poster layouts, and iterate on how typography responds to user input. They were especially useful for testing different visual systems, simplifying controls, and making the experience work smoothly across screen sizes.

What surprised me most was how quickly agents could help explore creative directions. Instead of spending hours rebuilding layouts, I could focus on the interaction itself and keep experimenting with how music, language, and typography connect.

Try it: pick a theme, play a few notes, and watch a poster emerge from your performance.

Built with Framer 3.0 AI agents.

53:T663,

xPay lets Indian businesses accept international payments in 100+ currencies and 45+ local payment methods across 160+ countries, with a 95% success rate. I designed the website and the design system behind it, so one visual language carried across the marketing site, sales decks and investor pitch decks.

The challenge: Cross-border payments are a trust purchase. Founders and finance teams worry about failed transactions, hidden FX fees and compliance paperwork (FIRC, sales tax) long before they look at features. The site had to remove that anxiety and still explain a broad product: subscriptions, payment links, US virtual accounts and tax autopilot.

My approach:

Credibility above the fold. YC backing and the Product Hunt "#4 Product of the Day" badge sit next to the headline, and the hero leads into the real merchant dashboard rather than a stock illustration.

Lead with the numbers. The 1,200+ businesses, $400M in annual volume and 160+ countries metrics plus the PCI-DSS badge come before any features.

Answer objections directly. A "How do we differ" bento handles the big four fears: zero hidden charges, instant FIRC, no transaction limits and a 10-minute support SLA.

Make "global" visible. A 45+ payment-method logo cloud and a live world-map CTA show reach without long text.

Built to scale. A component-based design system in Framer keeps product pages, industry pages and FAQs consistent as the team adds content.

54:T7ac,

CodeAnt AI reviews every pull request and continuously secures code, cloud and runtime for 800+ engineering teams, including Commvault, Bajaj Finserv and Akasa Air. As founding designer, I owned the website end to end: positioning, information architecture, visual system and the full Framer build.

The challenge: Security tools all sound the same. Every competitor says "AI-powered" and "shift left." Developers tune that out, and CISOs need proof before they book a call. The site had to make a technical, multi-product platform clear in seconds and still feel like a premium brand.

My approach:

Lead with the outcome. The hero says what CodeAnt does in six words ("Your Codebase Reviewed and Secured"), followed straight away by a logo wall from startups to Fortune 100.

Proof before features. Customer stories with named executives and real quotes sit above the product sections, so trust comes first.

Show the real product. Each capability (Defensive Code, Defensive Cloud, Offensive Pentesting) is paired with a live product UI on landscape-photo backdrops, not abstract illustrations.

Enterprise trust, made visible. A dedicated Secure & Compliant section brings SOC 2 Type II, Gartner Cool Vendor 2026 and HIPAA to the surface, so security reviewers get answers before they ask.

One system, many pages. A monospace label system ([DEFENSIVE · CODE]), a strict grid and a single violet accent scale across landing pages, comparison pages and the integrations hub, all built as reusable Framer components.

Result: The website supported CodeAnt's go-to-market from $0 to a $60M valuation, and conversion rate doubled after launch. The marketing team now ships new landing pages from the component library without design hand-offs.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-7605c713-0119-474e-88a3-918e8765a2e2-all:/unified/creator/7605c713-0119-474e-88a3-918e8765a2e2/activity/":[{"data":[{"id":"019eda9f-caec-724e-8330-0f29970aa874","type":"comment.liked","target":{"type":"comment","id":"019ed99f-b1e6-761b-bdc1-e02ffe1c18ac","preview":"It's really creative the way come with idea!🎉 Listen+Write \nNice work @Utkarsh Dhairya Panwar","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"It's really creative the way come with idea!"},{"type":"emoji","attrs":{"name":"tada","emoji":"🎉"}},{"type":"text","text":" Listen+Write "}]},{"type":"paragraph","content":[{"type":"text","text":"Nice work "},{"type":"mention","attrs":{"id":"7605c713-0119-474e-88a3-918e8765a2e2","label":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed99f-b1e6-761b-bdc1-e02ffe1c18ac"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T12:06:05.801Z","latestAt":"2026-06-18T12:06:05.801Z"},{"id":"019ed941-8461-74c0-b64b-e39bbcf3bbd5","type":"comment.liked","target":{"type":"comment","id":"019ed574-b1ef-7769-86c6-cc0ce52c7297","preview":"This is freaking insane!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This is freaking insane!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed574-b1ef-7769-86c6-cc0ce52c7297"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T05:43:30.141Z","latestAt":"2026-06-18T05:43:30.141Z"},{"id":"019ed941-7dd2-714c-a076-bc2ac0fa1f67","type":"comment.liked","target":{"type":"comment","id":"019ed6fe-8293-76bb-b641-00a0da834005","preview":"This is creative. Nice!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This is creative. Nice!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed6fe-8293-76bb-b641-00a0da834005"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T05:43:28.462Z","latestAt":"2026-06-18T05:43:28.462Z"},{"id":"019ed565-9a5b-77b6-8557-5fb602ea8c5f","type":"comment.liked","target":{"type":"comment","id":"019ed51d-3cda-757e-9176-bfdf87b3e25a","preview":"Love it!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Love it!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed51d-3cda-757e-9176-bfdf87b3e25a"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T11:44:26.200Z","latestAt":"2026-06-17T11:44:26.200Z"},{"id":"019ed565-948b-7777-b2d8-6d55e3b0ff98","type":"comment.liked","target":{"type":"comment","id":"019ed51e-00db-7718-88c1-dfc6c6793e26","preview":"This is sick, I love it!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This is sick, I love it!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed51e-00db-7718-88c1-dfc6c6793e26"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T11:44:24.711Z","latestAt":"2026-06-17T11:44:24.711Z"},{"id":"019ed565-8f53-7117-a523-56e3f3b8b33c","type":"comment.liked","target":{"type":"comment","id":"019ed52c-9fb0-7283-957a-926400ae3b9a","preview":"Love the posters","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Love the posters"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed52c-9fb0-7283-957a-926400ae3b9a"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T11:44:23.376Z","latestAt":"2026-06-17T11:44:23.376Z"},{"id":"019ed565-89fa-7448-a39c-f26c0578cf9c","type":"comment.liked","target":{"type":"comment","id":"019ed54c-9cd0-7009-90eb-7d37233e9a37","preview":"This is such a cool concept","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This is such a cool concept "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed54c-9cd0-7009-90eb-7d37233e9a37"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T11:44:22.006Z","latestAt":"2026-06-17T11:44:22.006Z"},{"id":"019ed565-85d6-7050-ab15-515717b2d32a","type":"comment.liked","target":{"type":"comment","id":"019ed550-d6b6-764b-b726-f3617cc3ec95","preview":"Good design! Love it! 😃","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Good design! Love it! "},{"type":"emoji","attrs":{"name":"smiley","emoji":"😃"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed550-d6b6-764b-b726-f3617cc3ec95"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T11:44:20.946Z","latestAt":"2026-06-17T11:44:20.946Z"},{"id":"019ed565-801b-74cd-a067-e000ef364cba","type":"comment.liked","target":{"type":"comment","id":"019ed565-188b-7339-bf6a-75e44dd1382e","preview":"Never fails to amaze with your ideas!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Never fails to amaze with your ideas!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"feedItemType":null,"actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed565-188b-7339-bf6a-75e44dd1382e"},"repost":null}},"context":{"type":"post","id":"019ed51a-3371-7428-8938-fd838bc08984","preview":"Built Type Piano for the Framer Hackathon.\nA playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.\nWould love to hear what poster you create.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"feedItemType":"post","actions":{"postId":"019ed51a-3371-7428-8938-fd838bc08984","like":{"count":229,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","slug":"utkarsh-dhairya-panwar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T11:44:19.479Z","latestAt":"2026-06-17T11:44:19.479Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:7605c713-0119-474e-88a3-918e8765a2e2:/unified/posts/?creator=7605c713-0119-474e-88a3-918e8765a2e2&with=reposts":[{"data":[{"id":"019ee514-2af8-74fc-b770-a83bed5ca014","title":null,"body":"

What if every melody generated a poster?

That's the idea behind Type Piano.

Play. Experiment. Export.

Built in Framer during the hackathon. Give it a try and drop an like if you enjoy it.

https://www.framer.com/community/contests/agents-hackathon/submissions/FyyCShn21JcxzMqMnigQ8/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if every melody generated a poster?"}]},{"type":"paragraph","content":[{"type":"text","text":"That's the idea behind Type Piano."}]},{"type":"paragraph","content":[{"type":"text","text":"Play. Experiment. Export."}]},{"type":"paragraph","content":[{"type":"text","text":"Built in Framer during the hackathon. Give it a try and drop an like if you enjoy it."}]},{"type":"paragraph","content":[{"type":"text","text":"https://www.framer.com/community/contests/agents-hackathon/submissions/FyyCShn21JcxzMqMnigQ8/","marks":[{"type":"link","attrs":{"href":"https://www.framer.com/community/contests/agents-hackathon/submissions/FyyCShn21JcxzMqMnigQ8/","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]}]},"author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/ObLGirF26D92XyJn00vgtKUPAu9RTj5AZ51e2S94f8fQ.m3u8","metadata":{"posterUrl":"https://image.mux.com/ObLGirF26D92XyJn00vgtKUPAu9RTj5AZ51e2S94f8fQ/thumbnail.webp?time=33.083","aspectRatio":"203:138","duration":47.3}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-20T12:49:24.732Z","updatedAt":"2026-06-20T12:49:24.732Z","type":"post"},{"id":"019ed51a-3371-7428-8938-fd838bc08984","title":null,"body":"

Built Type Piano for the Framer Hackathon.

A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance.

Would love to hear what poster you create.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built Type Piano for the Framer Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"A playful experiment where every note becomes typography. Play the piano, switch themes, explore different languages, and generate unique posters from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear what poster you create."}]}]},"author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed51a-3371-7428-8939-021785685cac","contestId":"agents-hackathon","author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"]},"title":"Type Piano","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Type Piano is my Framer hackathon entry: an interactive playground where music becomes typography. Instead of creating sound for the sake of sound, every key press generates visual compositions that evolve into unique typographic posters."}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Why I built it"}]},{"type":"paragraph","content":[{"type":"text","text":"Most creative tools separate exploration from output. You play music in one place and design in another. I wanted to create something that turns playful experimentation directly into a visual artifact you can keep."}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"What's inside"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Piano keyboard that generates typography through interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple visual themes, from ambient and cinematic to horror-inspired styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-language support for different writing systems"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time poster generation based on your inputs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Export-ready outputs that can be saved and shared"}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"What agents helped with"}]},{"type":"paragraph","content":[{"type":"text","text":"Framer agents helped refine the interaction layer, improve the poster layouts, and iterate on how typography responds to user input. They were especially useful for testing different visual systems, simplifying controls, and making the experience work smoothly across screen sizes."}]},{"type":"paragraph","content":[{"type":"text","text":"What surprised me most was how quickly agents could help explore creative directions. Instead of spending hours rebuilding layouts, I could focus on the interaction itself and keep experimenting with how music, language, and typography connect."}]},{"type":"paragraph","content":[{"type":"text","text":"Try it: pick a theme, play a few notes, and watch a poster emerge from your performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with Framer 3.0 AI agents.","marks":[{"type":"italic"}]}]}]},"media":[{"type":"video","url":"https://stream.mux.com/2M6501St5MAunFeoc0101a00fmq9V1XZ02vZIvHQEw8ykku8.m3u8","metadata":{"posterUrl":"https://image.mux.com/2M6501St5MAunFeoc0101a00fmq9V1XZ02vZIvHQEw8ykku8/thumbnail.webp?time=40.633","aspectRatio":"203:138","duration":47.3}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/e4sr9j0k","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"data":{"previewUrl":"https://typepiano.framer.website"},"winner":false,"createdAt":"2026-06-17T10:22:04.706Z","updatedAt":"2026-06-17T10:22:04.706Z"}],"categories":[],"tags":[],"likes":{"count":229,"liked":false},"comments":{"count":16},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T10:22:04.675Z","updatedAt":"2026-06-17T10:22:04.675Z","type":"post"},{"id":"01974fa8-3a86-7933-8f4b-c507a07665df","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"5502","resolved":true,"title":"xPay (YC W24)","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"xPay lets Indian businesses accept international payments in 100+ currencies and 45+ local payment methods across 160+ countries, with a 95% success rate. I designed the website and the design system behind it, so one visual language carried across the marketing site, sales decks and investor pitch decks."}]},{"type":"paragraph","content":[{"type":"text","text":"The challenge:","marks":[{"type":"bold"}]},{"type":"text","text":" Cross-border payments are a trust purchase. Founders and finance teams worry about failed transactions, hidden FX fees and compliance paperwork (FIRC, sales tax) long before they look at features. The site had to remove that anxiety and still explain a broad product: subscriptions, payment links, US virtual accounts and tax autopilot."}]},{"type":"paragraph","content":[{"type":"text","text":"My approach:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Credibility above the fold.","marks":[{"type":"bold"}]},{"type":"text","text":" YC backing and the Product Hunt \"#4 Product of the Day\" badge sit next to the headline, and the hero leads into the real merchant dashboard rather than a stock illustration."}]},{"type":"paragraph","content":[{"type":"text","text":"Lead with the numbers.","marks":[{"type":"bold"}]},{"type":"text","text":" The 1,200+ businesses, $400M in annual volume and 160+ countries metrics plus the PCI-DSS badge come before any features."}]},{"type":"paragraph","content":[{"type":"text","text":"Answer objections directly.","marks":[{"type":"bold"}]},{"type":"text","text":" A \"How do we differ\" bento handles the big four fears: zero hidden charges, instant FIRC, no transaction limits and a 10-minute support SLA."}]},{"type":"paragraph","content":[{"type":"text","text":"Make \"global\" visible.","marks":[{"type":"bold"}]},{"type":"text","text":" A 45+ payment-method logo cloud and a live world-map CTA show reach without long text."}]},{"type":"paragraph","content":[{"type":"text","text":"Built to scale.","marks":[{"type":"bold"}]},{"type":"text","text":" A component-based design system in Framer keeps product pages, industry pages and FAQs consistent as the team adds content."}]}]},"introduction":"A platform for Indian businesses to expand internationally by providing tools for international billing and sales operations, including managing taxes and payments in local currencies","slug":"xpay-yc-w24","author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b46-c74d-70a8-8a56-298dd4f709dc.jpg","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b46-c72a-704a-bb06-b59449195bd0.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b46-c737-7091-b7f9-b2dc8abe4304.jpg","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b46-c74c-7688-befe-23728cdfbb3a.jpg","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-06-08T13:08:34.564Z","updatedAt":"2026-10-08T11:30:15.086Z","publishedAt":"2025-06-08T13:08:34.566Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://www.xpaycheckout.com/","categories":[{"id":"0539c25a-136d-4f8b-a2e7-342a21b7d607","name":"AI","slug":"ai"},{"id":"1fec15c2-ca4a-4d52-bf3a-c04e6d002202","name":"SaaS","slug":"saas"},{"id":"ddd39099-5b17-42e0-b333-7b7c480a114f","name":"Business","slug":"business"}],"mainCategory":{"id":"ef114cbb-3a21-4ee3-9465-f5a2043f4b28","name":"Finance","slug":"finance"},"styles":[{"id":"303f0ab5-6ac2-43e9-8257-f08773521d38","name":"Corporate","slug":"corporate"}],"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":"2025-06-08T13:08:34.566Z","updatedAt":"2025-06-08T13:08:34.566Z","type":"post"},{"id":"01974fa2-5504-72b9-a8d3-8b0b69069d4f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"5498","resolved":true,"title":"CodeAnt AI","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CodeAnt AI reviews every pull request and continuously secures code, cloud and runtime for 800+ engineering teams, including Commvault, Bajaj Finserv and Akasa Air. As founding designer, I owned the website end to end: positioning, information architecture, visual system and the full Framer build."}]},{"type":"paragraph","content":[{"type":"text","text":"The challenge:","marks":[{"type":"bold"}]},{"type":"text","text":" Security tools all sound the same. Every competitor says \"AI-powered\" and \"shift left.\" Developers tune that out, and CISOs need proof before they book a call. The site had to make a technical, multi-product platform clear in seconds and still feel like a premium brand."}]},{"type":"paragraph","content":[{"type":"text","text":"My approach:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Lead with the outcome.","marks":[{"type":"bold"}]},{"type":"text","text":" The hero says what CodeAnt does in six words (\"Your Codebase Reviewed and Secured\"), followed straight away by a logo wall from startups to Fortune 100."}]},{"type":"paragraph","content":[{"type":"text","text":"Proof before features.","marks":[{"type":"bold"}]},{"type":"text","text":" Customer stories with named executives and real quotes sit above the product sections, so trust comes first."}]},{"type":"paragraph","content":[{"type":"text","text":"Show the real product.","marks":[{"type":"bold"}]},{"type":"text","text":" Each capability (Defensive Code, Defensive Cloud, Offensive Pentesting) is paired with a live product UI on landscape-photo backdrops, not abstract illustrations."}]},{"type":"paragraph","content":[{"type":"text","text":"Enterprise trust, made visible.","marks":[{"type":"bold"}]},{"type":"text","text":" A dedicated Secure & Compliant section brings SOC 2 Type II, Gartner Cool Vendor 2026 and HIPAA to the surface, so security reviewers get answers before they ask."}]},{"type":"paragraph","content":[{"type":"text","text":"One system, many pages.","marks":[{"type":"bold"}]},{"type":"text","text":" A monospace label system ([DEFENSIVE · CODE]), a strict grid and a single violet accent scale across landing pages, comparison pages and the integrations hub, all built as reusable Framer components."}]},{"type":"paragraph","content":[{"type":"text","text":"Result:","marks":[{"type":"bold"}]},{"type":"text","text":" The website supported CodeAnt's go-to-market from $0 to a $60M valuation, and conversion rate doubled after launch. The marketing team now ships new landing pages from the component library without design hand-offs."}]}]},"introduction":"CodeAnt AI helps companies cut manual code review time and bugs by 50%. It understands your entire codebase and provides one-click fixes for code quality & security issues.","slug":"codeant-ai","author":{"framerUserId":"7605c713-0119-474e-88a3-918e8765a2e2","name":"Utkarsh Dhairya Panwar","slug":"utkarsh-dhairya-panwar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/ggue4rje","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b45-1c08-74df-833a-696dad55122a.jpg","metadata":{"tint":{"h":240,"s":67,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b45-1ccb-7427-a2bc-e0d801473c0c.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b45-1cc9-7778-8474-44b2a11bf93c.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7605c713-0119-474e-88a3-918e8765a2e2/01a11b45-1bf4-7029-a850-662b5ac476c8.jpg","metadata":{"tint":{"h":240,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-06-08T13:02:08.114Z","updatedAt":"2026-10-08T11:29:17.243Z","publishedAt":"2025-06-08T13:02:08.132Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://www.codeant.ai/","categories":[{"id":"0539c25a-136d-4f8b-a2e7-342a21b7d607","name":"AI","slug":"ai"},{"id":"1fec15c2-ca4a-4d52-bf3a-c04e6d002202","name":"SaaS","slug":"saas"}],"mainCategory":{"id":"0539c25a-136d-4f8b-a2e7-342a21b7d607","name":"AI","slug":"ai"},"styles":[{"id":"303f0ab5-6ac2-43e9-8257-f08773521d38","name":"Corporate","slug":"corporate"}],"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":"2025-06-08T13:02:08.132Z","updatedAt":"2025-06-08T13:02:08.132Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]