62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 63:T95d,

Most SaaS founders spend weeks agonizing over their website. Metrify gives you a stunning, complete website out of the box one that looks like it was built by a senior design team, because it was.

Built for analytics, revenue intelligence, and data-driven SaaS products, Metrify is packed with every section, page, and UI detail you need to turn visitors into customers from day one.

What makes Metrify different? It's not just a template. It's a complete website system ready to go live.

Stunning, enterprise-grade design that holds up after customization. Metrify's dark, high-contrast aesthetic is built to stay beautiful once you swap in your own copy, logos, and screenshots. No janky aftereffects when you make it yours.

A full feature section that sells the product. Animated feature highlights, bento-style dashboard showcases, and a tabbed platform overview section work together to communicate complex product value in seconds.

Comparison pricing table built to convert. A structured, feature-rich pricing page with a side-by-side plan comparison table makes your tiers instantly readable — no custom dev work required.

CMS-powered blog and updates. Publish product updates, launch announcements, and content marketing pieces without touching the design. Both blog and updates sections are CMS-connected and ready to populate.

Every essential page, already designed. From the FAQ section and contact form to Terms of Service, Privacy Policy, and a custom 404 — nothing is missing.

Pages included

Core pages

Landing Page (Hero, features, bento dashboards, social proof, pricing, FAQ, CTA)
Features Page
Pricing Page (with full plan comparison table)
About Page

Content hub (CMS)

Blog Index
Blog Detail Page
Updates Index
Updates Detail Page

Growth & team pages

Contact Page (with form)
Careers Index
Careers Detail Page (with application form)

Essential pages

Terms of Service
Privacy Policy
404 Page

64:T43d,

My entry for the Framer 3.0 Contest 🚀

To explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard.

Built entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches.

Highlights:

• Built with Framer 3.0 Agents

• GSAP ScrollTrigger animations

• Interactive display reveals

• Scroll-driven product storytelling

The goal was to make the website feel like a product film rather than a traditional landing page.

Live: https://keyboard.framer.media

Would love to hear your thoughts 👇

#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic

65:Ta1c,

Gridly is a premium bento-grid portfolio template that helps designers and developers transform visitors into clients with a professionally designed, attention-grabbing layout.

Built with modern aesthetics, seamless light and dark theme support, and a modular bento structure, it maintains its stunning visual appeal even after customization with your own projects and content. Visitors can switch between beautifully crafted themes for a polished experience that looks great in any environment.

What makes Gridly different?

It's not just a template. It's a complete portfolio system.

Striking bento-grid layout that holds attention

Gridly breaks away from generic templates with a modular grid layout that organizes your stats, skills, tools, and featured work into one cohesive, scroll-stopping homepage.

Seamless light & dark modes

Professionally designed theme variants ensure your portfolio looks polished day and night, with a built-in theme switcher that lets visitors browse in their preferred style.

Built-in social proof blocks

Dedicated cells for years of experience, total projects, happy clients, testimonials, and work history give visitors instant credibility cues without extra design work.

Dynamic project showcase (CMS-powered)

Add, edit, and reorder projects through a connected CMS, so your homepage and project index update automatically every time you ship new work.

Individual case study pages

Each project gets its own dedicated project page to walk visitors through your process, outcomes, and visuals, turning casual browsers into serious leads.

Gridly is meticulously crafted for designers, developers, and creative professionals, ensuring excellent performance, fully responsive design, beautiful light and dark experiences, and frustration-free setup.

Pages Included

Core Pages

Home (Bento-grid layout)
Projects Index (CMS-powered)
Individual Project Page (CMS-powered)

Essential Pages

Contact Page (With form)
404 Page

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd-all:/unified/creator/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/activity/":[{"data":[{"id":"019f55b1-48bb-732e-89ab-80234eaad2e1","type":"template.created","target":{"type":"template","id":"69371","preview":"Metrify","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/019f55b0-2c2d-703b-9bfa-b0b2487e0531.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-07-12T09:38:29.691Z","latestAt":"2026-07-12T09:38:29.691Z"},{"id":"019f198a-aaf3-7633-b70a-f180a439437f","type":"creator.followed","target":{"type":"creator","id":"ef8b6554-81b7-49cd-ba5e-9c385f8f3ea1","preview":"Sonal Rastogi","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ef8b6554-81b7-49cd-ba5e-9c385f8f3ea1/8w91weq5","slug":"sonal-rastogi","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-30T17:19:05.968Z","latestAt":"2026-06-30T17:19:05.968Z"},{"id":"019eef8e-5aab-71b9-b1ea-6732bd3b230e","type":"comment.liked","target":{"type":"comment","id":"019eeb3d-5bfd-709e-a10d-e561edca4592","preview":"thats amazing!! need remix 😃","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"thats amazing!! need remix "},{"type":"emoji","attrs":{"name":"smiley","emoji":"😃"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed68d-0688-7498-a04c-7668408fb8ac","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019eeb3d-5bfd-709e-a10d-e561edca4592"},"repost":null}},"context":{"type":"post","id":"019ed68d-0688-7498-a04c-7668408fb8ac","preview":"My entry for the Framer 3.0 Contest 🚀\nTo explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard.\nBuilt entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches.\nHighlights: \n• Built with Framer 3.0 Agents \n• GSAP ScrollTrigger animations \n• Interactive display reveals \n• Scroll-driven product storytelling \nThe goal was to make the website feel like a product film rather than a traditional landing page.\nLive: https://keyboard.framer.media\nWould love to hear your thoughts 👇\n#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My entry for the Framer 3.0 Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"To explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Built with Framer 3.0 Agents "}]},{"type":"paragraph","content":[{"type":"text","text":"• GSAP ScrollTrigger animations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive display reveals "}]},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven product storytelling "}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was to make the website feel like a product film rather than a traditional landing page."}]},{"type":"paragraph","content":[{"type":"text","text":"Live: "},{"type":"text","text":"https://keyboard.framer.media","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://keyboard.framer.media","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear your thoughts "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic "}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed68d-0688-7498-a04c-7668408fb8ac","like":{"count":30,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-22T13:39:04.487Z","latestAt":"2026-06-22T13:39:04.487Z"},{"id":"019ee60a-a2f7-71f9-9c0c-6dddd1281071","type":"comment.reply","target":{"type":"post","id":"019ee0c5-d147-764f-8746-e64546174c54","preview":"Hey @Framer Community, can anyone help me understand how to add this background variation smart preview button in marketplace.\nThanks :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Community, can anyone help me understand how to add this background variation smart preview button in marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks :)"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/vqgv34w1","targetDeleted":false,"owned":true,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ee60a-a2df-719b-8b91-1d09954f83f5","preview":"Got it! Thank you.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Got it! Thank you."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ee0cc-80fd-7750-8b2e-62c6c23bf7a1"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-20T17:18:37.303Z","latestAt":"2026-06-20T17:18:37.303Z"},{"id":"019ee60a-651d-772e-b940-50bb93b510cc","type":"comment.reply","target":{"type":"post","id":"019ee0c5-d147-764f-8746-e64546174c54","preview":"Hey @Framer Community, can anyone help me understand how to add this background variation smart preview button in marketplace.\nThanks :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Community, can anyone help me understand how to add this background variation smart preview button in marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks :)"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/vqgv34w1","targetDeleted":false,"owned":true,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ee60a-6504-712e-802c-f9e9327b944a","preview":"Thanks!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee0d9-38c2-7359-b4df-0da86f51a707"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-20T17:18:21.469Z","latestAt":"2026-06-20T17:18:21.469Z"},{"id":"019ee60a-4a28-72e3-b916-3d1380f212ef","type":"comment.liked","target":{"type":"comment","id":"019ee0cc-80fd-7750-8b2e-62c6c23bf7a1","preview":"It depends how you’re handling the background variation.\nIf it’s a code component, you can make a separate code component button that triggers the other component. Then you can reuse that button anywhere on the site and choose which component or state it should trigger.\nIf it’s a native Framer component using variants, you can do it manually with interactions. Put a button inside the component, set it to change to the next variant on click, then include the same button in each variant so it can keep cycling through them.\nFor templates, I’d keep two versions: a public demo preview URL with the trigger buttons included, and a clean buyer/remix version with those demo controls removed.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"It depends how you’re handling the background variation."}]},{"type":"paragraph","content":[{"type":"text","text":"If it’s a code component, you can make a separate code component button that triggers the other component. Then you can reuse that button anywhere on the site and choose which component or state it should trigger."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"If it’s a native Framer component using variants, you can do it manually with interactions. Put a button inside the component, set it to change to the next variant on click, then include the same button in each variant so it can keep cycling through them."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"For templates, I’d keep two versions: a public demo preview URL with the trigger buttons included, and a clean buyer/remix version with those demo controls removed."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee0cc-80fd-7750-8b2e-62c6c23bf7a1"},"repost":null}},"context":{"type":"post","id":"019ee0c5-d147-764f-8746-e64546174c54","preview":"Hey @Framer Community, can anyone help me understand how to add this background variation smart preview button in marketplace.\nThanks :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Community, can anyone help me understand how to add this background variation smart preview button in marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks :)"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/vqgv34w1","targetDeleted":false,"owned":true,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-20T17:18:14.565Z","latestAt":"2026-06-20T17:18:14.565Z"},{"id":"019ee60a-3af0-740e-9363-6c86fadf180d","type":"comment.liked","target":{"type":"comment","id":"019ee0d9-38c2-7359-b4df-0da86f51a707","preview":"Use the cross-component interaction component from Framer University.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Use the cross-component interaction component from Framer University."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee0d9-38c2-7359-b4df-0da86f51a707"},"repost":null}},"context":{"type":"post","id":"019ee0c5-d147-764f-8746-e64546174c54","preview":"Hey @Framer Community, can anyone help me understand how to add this background variation smart preview button in marketplace.\nThanks :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Community, can anyone help me understand how to add this background variation smart preview button in marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks :)"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/vqgv34w1","targetDeleted":false,"owned":true,"actions":{"postId":"019ee0c5-d147-764f-8746-e64546174c54","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-20T17:18:10.667Z","latestAt":"2026-06-20T17:18:10.667Z"},{"id":"019ee0c1-ce06-7656-8976-aa7a5494af62","type":"comment.reply","target":{"type":"post","id":"019ee060-f6f4-739e-98f0-c2f3393ba917","preview":"Mobile version 👀📱\n🤍 Show some love on my submission","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile version "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}},{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Show some love on my submission","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/nugAP8Tqs4TyuI01OigRj6oPl5T00omRvyx8fFzm5UnLA/thumbnail.webp?time=16.633","targetDeleted":false,"owned":true,"actions":{"postId":"019ee060-f6f4-739e-98f0-c2f3393ba917","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ee0c1-cde6-712c-8148-eabc1a5bdc43","preview":"Thanks @Prem Shandilya Please support on my submission as well!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks "},{"type":"mention","attrs":{"id":"b10633cd-e712-48eb-871a-ea0592a67fbc","slug":"prem-shandilya","label":"Prem Shandilya","mentionSuggestionChar":"@"}},{"type":"text","text":" Please support on my submission as well!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ee060-f6f4-739e-98f0-c2f3393ba917","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee0b9-c63e-7089-8a20-3e13b4c2b051"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:40:58.118Z","latestAt":"2026-06-19T16:40:58.118Z"},{"id":"019ee0c1-963d-765c-a8e6-46fdfa9a8ab0","type":"comment.liked","target":{"type":"comment","id":"019ee0b9-c63e-7089-8a20-3e13b4c2b051","preview":"Well done!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Well done!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ee060-f6f4-739e-98f0-c2f3393ba917","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee0b9-c63e-7089-8a20-3e13b4c2b051"},"repost":null}},"context":{"type":"post","id":"019ee060-f6f4-739e-98f0-c2f3393ba917","preview":"Mobile version 👀📱\n🤍 Show some love on my submission","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile version "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}},{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Show some love on my submission","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/nugAP8Tqs4TyuI01OigRj6oPl5T00omRvyx8fFzm5UnLA/thumbnail.webp?time=16.633","targetDeleted":false,"owned":true,"actions":{"postId":"019ee060-f6f4-739e-98f0-c2f3393ba917","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T16:40:43.829Z","latestAt":"2026-06-19T16:40:43.829Z"},{"id":"019edf80-4249-710d-90b3-670c18f1f79e","type":"comment.liked","target":{"type":"comment","id":"019edf75-00d1-74af-bf06-2f7af5afdbc5","preview":"Woah!😮","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Woah!"},{"type":"emoji","attrs":{"name":"open_mouth","emoji":"😮"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed68d-0688-7498-a04c-7668408fb8ac","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edf75-00d1-74af-bf06-2f7af5afdbc5"},"repost":null}},"context":{"type":"post","id":"019ed68d-0688-7498-a04c-7668408fb8ac","preview":"My entry for the Framer 3.0 Contest 🚀\nTo explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard.\nBuilt entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches.\nHighlights: \n• Built with Framer 3.0 Agents \n• GSAP ScrollTrigger animations \n• Interactive display reveals \n• Scroll-driven product storytelling \nThe goal was to make the website feel like a product film rather than a traditional landing page.\nLive: https://keyboard.framer.media\nWould love to hear your thoughts 👇\n#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My entry for the Framer 3.0 Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"To explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Built with Framer 3.0 Agents "}]},{"type":"paragraph","content":[{"type":"text","text":"• GSAP ScrollTrigger animations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive display reveals "}]},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven product storytelling "}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was to make the website feel like a product film rather than a traditional landing page."}]},{"type":"paragraph","content":[{"type":"text","text":"Live: "},{"type":"text","text":"https://keyboard.framer.media","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://keyboard.framer.media","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear your thoughts "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic "}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed68d-0688-7498-a04c-7668408fb8ac","like":{"count":30,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T10:49:45.286Z","latestAt":"2026-06-19T10:49:45.286Z"},{"id":"019edf37-383a-72f5-b9f9-c9d6561f982d","type":"comment.liked","target":{"type":"comment","id":"019edf36-87d9-755a-bfd6-dcfaf7e25e3b","preview":"@Vansh Sharda Done! 🙌 best of luck!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"mention","attrs":{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","slug":"vansh-sharda","label":"Vansh Sharda","mentionSuggestionChar":"@"}},{"type":"text","text":" Done! "},{"type":"emoji","attrs":{"name":"raised_hands","emoji":"🙌"}},{"type":"text","text":" best of luck! "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019edf2e-8c2d-7453-bd90-5069e2f3421f","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edf2e-de14-76c5-96b0-9bd338a7119f"},"repost":null}},"context":{"type":"post","id":"019edf2e-8c2d-7453-bd90-5069e2f3421f","preview":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest 🚀\nFirst time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far.\nHere's a live scroll-through of the experience. 👇\n🤍 Please show some love on the submission post.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"First time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Here's a live scroll-through of the experience. "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Please show some love on the submission post. ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/eAgB003aMrm12TF1201VZChgY2j5AwX7qbd9NCe2eFpR00/thumbnail.webp?time=11.885","targetDeleted":false,"owned":true,"actions":{"postId":"019edf2e-8c2d-7453-bd90-5069e2f3421f","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T09:29:58.582Z","latestAt":"2026-06-19T09:29:58.582Z"},{"id":"019edf30-dcc6-753d-9985-3d651a9a88e9","type":"comment.reply","target":{"type":"post","id":"019edf2e-8c2d-7453-bd90-5069e2f3421f","preview":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest 🚀\nFirst time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far.\nHere's a live scroll-through of the experience. 👇\n🤍 Please show some love on the submission post.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"First time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Here's a live scroll-through of the experience. "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Please show some love on the submission post. ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/eAgB003aMrm12TF1201VZChgY2j5AwX7qbd9NCe2eFpR00/thumbnail.webp?time=11.885","targetDeleted":false,"owned":true,"actions":{"postId":"019edf2e-8c2d-7453-bd90-5069e2f3421f","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019edf30-dc9e-71fe-b3b0-25f0383975fa","preview":"Thanks, @Carlos Geronimo Would appreciate your support on submission post as well!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks, "},{"type":"mention","attrs":{"id":"f5a3bbc9-1f8a-4c09-b2c1-5dc4e90e1c26","slug":"carlos-geronimo","label":"Carlos Geronimo","mentionSuggestionChar":"@"}},{"type":"text","text":" Would appreciate your support on submission post as well!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019edf2e-8c2d-7453-bd90-5069e2f3421f","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edf2e-de14-76c5-96b0-9bd338a7119f"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T09:23:01.958Z","latestAt":"2026-06-19T09:23:01.958Z"},{"id":"019edf30-5b98-7571-86de-41b0d5b4be6c","type":"comment.liked","target":{"type":"comment","id":"019edf2e-de14-76c5-96b0-9bd338a7119f","preview":"Looks good mate!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Looks good mate!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019edf2e-8c2d-7453-bd90-5069e2f3421f","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edf2e-de14-76c5-96b0-9bd338a7119f"},"repost":null}},"context":{"type":"post","id":"019edf2e-8c2d-7453-bd90-5069e2f3421f","preview":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest 🚀\nFirst time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far.\nHere's a live scroll-through of the experience. 👇\n🤍 Please show some love on the submission post.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"First time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Here's a live scroll-through of the experience. "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Please show some love on the submission post. ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/eAgB003aMrm12TF1201VZChgY2j5AwX7qbd9NCe2eFpR00/thumbnail.webp?time=11.885","targetDeleted":false,"owned":true,"actions":{"postId":"019edf2e-8c2d-7453-bd90-5069e2f3421f","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T09:22:28.884Z","latestAt":"2026-06-19T09:22:28.884Z"},{"id":"019edbee-454c-70ea-817c-e12f0405938b","type":"comment.reply","target":{"type":"post","id":"019edbe4-e890-761f-9fb9-f20913f464d1","preview":"What if Framer keyboard had a cinematic launch site?\nThat's exactly what I built for the Framer 3.0 Agents Hackathon 🖤\nDrop a Like \"🤍\" on my submission.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if Framer keyboard had a cinematic launch site?"}]},{"type":"paragraph","content":[{"type":"text","text":"That's exactly what I built for the Framer 3.0 Agents Hackathon "},{"type":"emoji","attrs":{"name":"black_heart","emoji":"🖤"}}]},{"type":"paragraph","content":[{"type":"text","text":"Drop a Like \"","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]},{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":"\" on my submission.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/26KltWWmk100MukGN6RaLDyvUFI5mowgEjxsIQbP7G1s/thumbnail.webp?time=15.223","targetDeleted":false,"owned":true,"actions":{"postId":"019edbe4-e890-761f-9fb9-f20913f464d1","like":{"count":8,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019edbee-452b-7297-bd99-ba316eba99e6","preview":"Thanks @Grid Okay, please show your love on submission post as well :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks "},{"type":"mention","attrs":{"id":"255580d1-fc7f-4e91-95ec-d61dccc56d17","slug":"grid-okay","label":"Grid Okay","mentionSuggestionChar":"@"}},{"type":"text","text":", please show your love on submission post as well :)"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019edbe4-e890-761f-9fb9-f20913f464d1","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019edbeb-3bdd-72cc-8243-451ff1cf2e06"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T18:11:26.156Z","latestAt":"2026-06-18T18:11:26.156Z"},{"id":"019edbaf-6858-7171-a6e4-d1e0c81300d1","type":"comment.reply","target":{"type":"post","id":"019edbac-042a-737a-aea7-3f2e85579d94","preview":"Built this for the Framer 3.0 Agents Hackathon.\nRegardless of where it places, I'm proud of how far I pushed myself on this one.\nWould appreciate a 🤍 on the submission:\nhttps://framer.link/VjewkfY","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built this for the Framer 3.0 Agents Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"Regardless of where it places, I'm proud of how far I pushed myself on this one."}]},{"type":"paragraph","content":[{"type":"text","text":"Would appreciate a "},{"type":"emoji","attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" on the submission:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/6V16400oMy63lVvZewX2ieDoj4y8Vo1m301TfIRcM00Jf8/thumbnail.webp?time=13.683","targetDeleted":false,"owned":true,"actions":{"postId":"019edbac-042a-737a-aea7-3f2e85579d94","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019edbaf-6838-7638-81e3-4b8ffd6c2555","preview":"Thanks Matt, Please show your support on my submission well :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks Matt, Please show your support on my submission well :)"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019edbac-042a-737a-aea7-3f2e85579d94","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edbae-2913-7311-b12d-5c384e3ee3f4"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T17:02:46.360Z","latestAt":"2026-06-18T17:02:46.360Z"},{"id":"019edbaf-01a4-741a-8b27-a2324b169f82","type":"comment.liked","target":{"type":"comment","id":"019edbae-2913-7311-b12d-5c384e3ee3f4","preview":"looks really really good Vansh!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"looks really really good Vansh!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019edbac-042a-737a-aea7-3f2e85579d94","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edbae-2913-7311-b12d-5c384e3ee3f4"},"repost":null}},"context":{"type":"post","id":"019edbac-042a-737a-aea7-3f2e85579d94","preview":"Built this for the Framer 3.0 Agents Hackathon.\nRegardless of where it places, I'm proud of how far I pushed myself on this one.\nWould appreciate a 🤍 on the submission:\nhttps://framer.link/VjewkfY","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built this for the Framer 3.0 Agents Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"Regardless of where it places, I'm proud of how far I pushed myself on this one."}]},{"type":"paragraph","content":[{"type":"text","text":"Would appreciate a "},{"type":"emoji","attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" on the submission:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/6V16400oMy63lVvZewX2ieDoj4y8Vo1m301TfIRcM00Jf8/thumbnail.webp?time=13.683","targetDeleted":false,"owned":true,"actions":{"postId":"019edbac-042a-737a-aea7-3f2e85579d94","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T17:02:20.063Z","latestAt":"2026-06-18T17:02:20.063Z"},{"id":"019edbac-e6e8-763a-a7c6-1b435729696d","type":"post.liked","target":{"type":"post","id":"019edbaa-ffba-7498-9447-44bfc58481ed","preview":"New phone, who dis? \nHey Framer Community - drop a link to your profile below! \nWould love to see some new content and profiles :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New phone, who dis? "}]},{"type":"paragraph","content":[{"type":"text","text":"Hey Framer Community - drop a link to your profile below! "}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to see some new content and profiles :)"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019edbaa-ffba-7498-9447-44bfc58481ed","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T17:00:02.148Z","latestAt":"2026-06-18T17:00:02.148Z"},{"id":"019edbac-dc04-7699-9171-1fae8078c0cb","type":"comment.created","target":{"type":"post","id":"019edbaa-ffba-7498-9447-44bfc58481ed","preview":"New phone, who dis? \nHey Framer Community - drop a link to your profile below! \nWould love to see some new content and profiles :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New phone, who dis? "}]},{"type":"paragraph","content":[{"type":"text","text":"Hey Framer Community - drop a link to your profile below! "}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to see some new content and profiles :)"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019edbaa-ffba-7498-9447-44bfc58481ed","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019edbac-dbee-7649-a503-48698b02d4ea","preview":"Would love your thoughts on my hackathon submission: https://framer.link/VjewkfY","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Would love your thoughts on my hackathon submission: "},{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019edbaa-ffba-7498-9447-44bfc58481ed","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019edbac-dbee-7649-a503-48698b02d4ea"},"repost":null}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T16:59:59.364Z","latestAt":"2026-06-18T16:59:59.364Z"},{"id":"019edba4-e762-73ad-bdc3-46ad441bd80f","type":"comment.liked","target":{"type":"comment","id":"019edb6a-b591-756e-9f60-397c6dd096b8","preview":"Lets go!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Lets go!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed68d-0688-7498-a04c-7668408fb8ac","like":{"count":2,"liked":false},"reply":{"parentCommentId":"019edb6a-b591-756e-9f60-397c6dd096b8"},"repost":null}},"context":{"type":"post","id":"019ed68d-0688-7498-a04c-7668408fb8ac","preview":"My entry for the Framer 3.0 Contest 🚀\nTo explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard.\nBuilt entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches.\nHighlights: \n• Built with Framer 3.0 Agents \n• GSAP ScrollTrigger animations \n• Interactive display reveals \n• Scroll-driven product storytelling \nThe goal was to make the website feel like a product film rather than a traditional landing page.\nLive: https://keyboard.framer.media\nWould love to hear your thoughts 👇\n#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My entry for the Framer 3.0 Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"To explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Built with Framer 3.0 Agents "}]},{"type":"paragraph","content":[{"type":"text","text":"• GSAP ScrollTrigger animations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive display reveals "}]},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven product storytelling "}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was to make the website feel like a product film rather than a traditional landing page."}]},{"type":"paragraph","content":[{"type":"text","text":"Live: "},{"type":"text","text":"https://keyboard.framer.media","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://keyboard.framer.media","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear your thoughts "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic "}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed68d-0688-7498-a04c-7668408fb8ac","like":{"count":30,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T16:51:17.981Z","latestAt":"2026-06-18T16:51:17.981Z"},{"id":"019edb64-a17e-71a9-b814-61ff199b35fb","type":"comment.liked","target":{"type":"comment","id":"019edb64-554c-7595-9aab-43824a2cb026","preview":"@Vansh Sharda Done 🙂","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"mention","attrs":{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","slug":"vansh-sharda","label":"Vansh Sharda","mentionSuggestionChar":"@"}},{"type":"text","text":" Done "},{"type":"emoji","attrs":{"name":"slightly_smiling_face","emoji":"🙂"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019edb60-6384-7159-a0b3-355c1b2704e6","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019edb61-6fcb-746f-8172-2d2dda7287c5"},"repost":null}},"context":{"type":"post","id":"019edb60-6384-7159-a0b3-355c1b2704e6","preview":"I entered the Framer 3.0 Agents Contest with one goal:\nCreate something I'd be proud of regardless of the outcome.\nThe result is a cinematic product experience for the new Framer F1 Keyboard.\nIf you'd like to support my entry, please leave a 🤍 here:\nhttps://framer.link/VjewkfY","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I entered the Framer 3.0 Agents Contest with one goal:"}]},{"type":"paragraph","content":[{"type":"text","text":"Create something I'd be proud of regardless of the outcome."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a cinematic product experience for the new Framer F1 Keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"If you'd like to support my entry, please leave a "},{"type":"emoji","attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" here:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/r54Zf2dxm5TIpFCc7Y8hjYutQc2CCkmyRTpxKewWkZw/thumbnail.webp?time=11.885","targetDeleted":false,"owned":true,"actions":{"postId":"019edb60-6384-7159-a0b3-355c1b2704e6","like":{"count":15,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","slug":"vansh-sharda","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T15:41:05.786Z","latestAt":"2026-06-18T15:41:05.786Z"}],"pagination":{"next":"MjAyNi0wNi0xOFQxNTo0MTowNS43ODZafDAxOWVkYjY0LWExN2UtNzFhOS1iODE0LTYxZmYxOTliMzVmYg","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd:/unified/posts/?creator=2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd&with=reposts":[{"data":[{"id":"019f55b1-4750-77bc-99b0-535c3123353f","title":null,"body":"

Metrify is a premium Framer template built for analytics and revenue SaaS products. With four animated backgrounds it is Designed for founders who want a polished, conversion-ready website without starting from scratch just drop in your brand and go live.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Metrify is a premium Framer template built for analytics and revenue SaaS products. With four animated backgrounds it is Designed for founders who want a polished, conversion-ready website without starting from scratch just drop in your brand and go live."}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[],"resources":[{"id":"69371","resolved":true,"title":"Metrify","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most SaaS founders spend weeks agonizing over their website. Metrify gives you a stunning, complete website out of the box one that looks like it was built by a senior design team, because it was.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built for analytics, revenue intelligence, and data-driven SaaS products, Metrify is packed with every section, page, and UI detail you need to turn visitors into customers from day one."}]},{"type":"paragraph","content":[{"type":"text","text":"What makes Metrify different?","marks":[{"type":"bold"}]},{"type":"text","text":" It's not just a template. It's a complete website system ready to go live."}]},{"type":"paragraph","content":[{"type":"text","text":"Stunning, enterprise-grade design that holds up after customization.","marks":[{"type":"bold"}]},{"type":"text","text":" Metrify's dark, high-contrast aesthetic is built to stay beautiful once you swap in your own copy, logos, and screenshots. No janky aftereffects when you make it yours."}]},{"type":"paragraph","content":[{"type":"text","text":"A full feature section that sells the product.","marks":[{"type":"bold"}]},{"type":"text","text":" Animated feature highlights, bento-style dashboard showcases, and a tabbed platform overview section work together to communicate complex product value in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"Comparison pricing table built to convert.","marks":[{"type":"bold"}]},{"type":"text","text":" A structured, feature-rich pricing page with a side-by-side plan comparison table makes your tiers instantly readable — no custom dev work required."}]},{"type":"paragraph","content":[{"type":"text","text":"CMS-powered blog and updates.","marks":[{"type":"bold"}]},{"type":"text","text":" Publish product updates, launch announcements, and content marketing pieces without touching the design. Both blog and updates sections are CMS-connected and ready to populate."}]},{"type":"paragraph","content":[{"type":"text","text":"Every essential page, already designed.","marks":[{"type":"bold"}]},{"type":"text","text":" From the FAQ section and contact form to Terms of Service, Privacy Policy, and a custom 404 — nothing is missing."}]},{"type":"paragraph","content":[{"type":"text","text":"Pages included","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Core pages"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing Page (Hero, features, bento dashboards, social proof, pricing, FAQ, CTA)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Features Page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing Page (with full plan comparison table)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"About Page"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Content hub (CMS)"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blog Index"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blog Detail Page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Updates Index"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Updates Detail Page"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Growth & team pages"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact Page (with form)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Careers Index"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Careers Detail Page (with application form)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Essential pages"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Terms of Service"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Privacy Policy"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"404 Page"}]}]}]},{"type":"paragraph"}]},"introduction":"A premium SaaS website template","slug":"metrify","author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/019f55b0-2c2d-703b-9bfa-b0b2487e0531.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/019f55b0-2c5b-734b-82e0-c2105bfbe42c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/019f55b0-2c34-7789-88c8-7adbd11265cf.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/019f55b0-2c4d-728f-9fd6-48b31b2ae42a.png","metadata":{"tint":{"h":240,"s":26,"l":65},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-07-12T09:38:29.060Z","updatedAt":"2026-07-12T09:38:29.060Z","publishedAt":"2026-07-12T09:38:29.058Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"79","paymentUrl":"https://buy.polar.sh/polar_cl_f0Zd4luxssonn3k7a0CKBRgRTNK6IMEvxcjA707zGg7","remixUrl":null,"previewUrl":"https://metrify.framer.website/","categories":[{"id":26,"name":"AI","slug":"ai"},{"id":22,"name":"Startup","slug":"startup"},{"id":2,"name":"SaaS","slug":"saas"},{"id":14,"name":"Landing Page","slug":"landing-page"}],"styles":[{"id":109,"name":"Modern","slug":"modern"},{"id":111,"name":"Minimal","slug":"minimal"},{"id":193,"name":"Black & White","slug":"black-and-white"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":2,"name":"SaaS","slug":"saas"},"features":[{"id":1,"name":"Appear Effects","slug":"appear-effects"},{"id":13,"name":"Slideshows/Tickers","slug":"slideshows-tickers"},{"id":17,"name":"Sticky Scrolling","slug":"sticky-scrolling"},{"id":18,"name":"Scroll Effects","slug":"scroll-effects"},{"id":21,"name":"CMS","slug":"cms"},{"id":25,"name":"Custom Cursors","slug":"custom-cursors"},{"id":30,"name":"Forms","slug":"forms"},{"id":32,"name":"Layout Templates","slug":"layout-templates"},{"id":35,"name":"Text Effects","slug":"text-effects"},{"id":37,"name":"Code Components","slug":"code-components"},{"id":40,"name":"Variable Fonts","slug":"variable-fonts"},{"id":41,"name":"Vector Sets","slug":"vector-sets"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-12T09:38:29.328Z","updatedAt":"2026-07-12T09:38:29.328Z"},{"id":"019eeac8-a107-7096-9636-1e635d0cb383","title":null,"body":"

Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest 🚀

Please Like my submission here 🥹

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest ","marks":[{"type":"bold"}]},{"type":"emoji","marks":[{"type":"bold"}],"attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"Please Like my submission here ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]},{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"face_holding_back_tears","emoji":"🥹"}}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/djxKX0096VfvQm702HVJTpjd2Dxe3JkbHmjKvmlCoWFK00.m3u8","metadata":{"posterUrl":"https://image.mux.com/djxKX0096VfvQm702HVJTpjd2Dxe3JkbHmjKvmlCoWFK00/thumbnail.webp?time=8.53","aspectRatio":"16:9","duration":22.083333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-21T15:24:37.521Z","updatedAt":"2026-06-21T15:24:37.521Z"},{"id":"019ee0c5-d147-764f-8746-e64546174c54","title":null,"body":"

Hey @Framer Community, can anyone help me understand how to add this background variation smart preview button in marketplace.

Thanks :)

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Community, can anyone help me understand how to add this background variation smart preview button in marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks :)"}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/vqgv34w1","metadata":{"tint":{"h":0,"s":0,"l":3},"width":2349,"height":1469}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-19T16:45:21.098Z","updatedAt":"2026-06-19T16:45:21.098Z"},{"id":"019ee060-f6f4-739e-98f0-c2f3393ba917","title":null,"body":"

Mobile version 👀📱

🤍 Show some love on my submission

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile version "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}},{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Show some love on my submission","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/nugAP8Tqs4TyuI01OigRj6oPl5T00omRvyx8fFzm5UnLA.m3u8","metadata":{"posterUrl":"https://image.mux.com/nugAP8Tqs4TyuI01OigRj6oPl5T00omRvyx8fFzm5UnLA/thumbnail.webp?time=16.633","aspectRatio":"16:9","duration":24.071333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-19T14:55:11.609Z","updatedAt":"2026-06-19T14:55:11.609Z"},{"id":"019edf7f-a923-7149-aa9f-c9dc7bbff974","title":null,"body":"

I love projects that force me to learn something completely new.

This contest did exactly that.

Came in wanting to build a website.

Left learning a ton about 3D scrollytelling.

🤍Support my submission

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I love projects that force me to learn something completely new."}]},{"type":"paragraph","content":[{"type":"text","text":"This contest did exactly that."}]},{"type":"paragraph","content":[{"type":"text","text":"Came in wanting to build a website."}]},{"type":"paragraph","content":[{"type":"text","text":"Left learning a ton about 3D scrollytelling."}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":"Support my submission","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/9vKrUAp9Ody902pdRa7JXZ5aLKDatTVACySoTZ01GsaHc.m3u8","metadata":{"posterUrl":"https://image.mux.com/9vKrUAp9Ody902pdRa7JXZ5aLKDatTVACySoTZ01GsaHc/thumbnail.webp?time=15.383","aspectRatio":"16:9","duration":22.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":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-19T10:49:06.088Z","updatedAt":"2026-06-19T10:49:06.088Z"},{"id":"019edf2e-8c2d-7453-bd90-5069e2f3421f","title":null,"body":"

Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest 🚀

First time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far.

Here's a live scroll-through of the experience. 👇

🤍 Please show some love on the submission post.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a cinematic 3D scroll experience for Framer's new Keyboard for the Framer 3.0 Agents Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"First time creating a project like this using Framer 3.0 Agents + GSAP and it ended up being one of my favorite builds so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Here's a live scroll-through of the experience. "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" Please show some love on the submission post. ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/eAgB003aMrm12TF1201VZChgY2j5AwX7qbd9NCe2eFpR00.m3u8","metadata":{"posterUrl":"https://image.mux.com/eAgB003aMrm12TF1201VZChgY2j5AwX7qbd9NCe2eFpR00/thumbnail.webp?time=11.885","aspectRatio":"16:9","duration":22.083333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-19T09:20:30.257Z","updatedAt":"2026-06-19T09:20:30.257Z"},{"id":"019edbe4-e890-761f-9fb9-f20913f464d1","title":null,"body":"

What if Framer keyboard had a cinematic launch site?

That's exactly what I built for the Framer 3.0 Agents Hackathon 🖤

Drop a Like "🤍" on my submission.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if Framer keyboard had a cinematic launch site?"}]},{"type":"paragraph","content":[{"type":"text","text":"That's exactly what I built for the Framer 3.0 Agents Hackathon "},{"type":"emoji","attrs":{"name":"black_heart","emoji":"🖤"}}]},{"type":"paragraph","content":[{"type":"text","text":"Drop a Like \"","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]},{"type":"emoji","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}],"attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":"\" on my submission.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/26KltWWmk100MukGN6RaLDyvUFI5mowgEjxsIQbP7G1s.m3u8","metadata":{"posterUrl":"https://image.mux.com/26KltWWmk100MukGN6RaLDyvUFI5mowgEjxsIQbP7G1s/thumbnail.webp?time=15.223","aspectRatio":"16:9","duration":22.083333}}],"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":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T18:01:12.596Z","updatedAt":"2026-06-18T18:01:12.596Z"},{"id":"019edbac-042a-737a-aea7-3f2e85579d94","title":null,"body":"

Built this for the Framer 3.0 Agents Hackathon.

Regardless of where it places, I'm proud of how far I pushed myself on this one.

Would appreciate a 🤍 on the submission:

https://framer.link/VjewkfY

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built this for the Framer 3.0 Agents Hackathon."}]},{"type":"paragraph","content":[{"type":"text","text":"Regardless of where it places, I'm proud of how far I pushed myself on this one."}]},{"type":"paragraph","content":[{"type":"text","text":"Would appreciate a "},{"type":"emoji","attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" on the submission:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/6V16400oMy63lVvZewX2ieDoj4y8Vo1m301TfIRcM00Jf8.m3u8","metadata":{"posterUrl":"https://image.mux.com/6V16400oMy63lVvZewX2ieDoj4y8Vo1m301TfIRcM00Jf8/thumbnail.webp?time=13.683","aspectRatio":"16:9","duration":22.3}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T16:59:04.111Z","updatedAt":"2026-06-18T16:59:04.111Z"},{"id":"019edb60-6384-7159-a0b3-355c1b2704e6","title":null,"body":"

I entered the Framer 3.0 Agents Contest with one goal:

Create something I'd be proud of regardless of the outcome.

The result is a cinematic product experience for the new Framer F1 Keyboard.

If you'd like to support my entry, please leave a 🤍 here:

https://framer.link/VjewkfY

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I entered the Framer 3.0 Agents Contest with one goal:"}]},{"type":"paragraph","content":[{"type":"text","text":"Create something I'd be proud of regardless of the outcome."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a cinematic product experience for the new Framer F1 Keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"If you'd like to support my entry, please leave a "},{"type":"emoji","attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" here:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/r54Zf2dxm5TIpFCc7Y8hjYutQc2CCkmyRTpxKewWkZw.m3u8","metadata":{"posterUrl":"https://image.mux.com/r54Zf2dxm5TIpFCc7Y8hjYutQc2CCkmyRTpxKewWkZw/thumbnail.webp?time=11.885","aspectRatio":"16:9","duration":22.083333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T15:36:27.791Z","updatedAt":"2026-06-18T15:36:27.791Z"},{"id":"019eda12-8acb-7016-a2eb-3729e5932283","title":null,"body":"

Built a fully scroll-driven 3D experience for Framer's new F1 Keyboard using Framer 3.0 Agents + GSAP.

Every scroll movement reveals another layer of the keyboard until it fully assembles itself.

One of the most challenging projects I've built recently.

If you think it deserves a spot among the winners, I'd appreciate a 🤍 on my submission:

https://framer.link/VjewkfY

#Framer #GSAP #BuildInPublic #WebDesign

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a fully scroll-driven 3D experience for Framer's new F1 Keyboard using Framer 3.0 Agents + GSAP."}]},{"type":"paragraph","content":[{"type":"text","text":"Every scroll movement reveals another layer of the keyboard until it fully assembles itself."}]},{"type":"paragraph","content":[{"type":"text","text":"One of the most challenging projects I've built recently."}]},{"type":"paragraph","content":[{"type":"text","text":"If you think it deserves a spot among the winners, I'd appreciate a "},{"type":"emoji","attrs":{"name":"white_heart","emoji":"🤍"}},{"type":"text","text":" on my submission:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.link/VjewkfY","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/VjewkfY","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #GSAP #BuildInPublic #WebDesign"}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"link-preview","url":"https://framer.link/VjewkfY","metadata":{"title":"F1 Keyboard 3D Site – Entry – Framer Community","description":"F1 Keyboard 3D Site — F1 Keyboard 3D Site — an entry in the Framer Community.","imageUrl":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/opengraph/4e2ccfbb34524af7/image.png","siteName":"Framer Community","faviconUrl":null}}],"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":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T09:31:48.818Z","updatedAt":"2026-06-18T09:31:48.818Z"},{"id":"019ed9f9-6469-74c1-a401-de8ab4e06b55","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"link-preview","url":"https://framer.link/VjewkfY","metadata":{"title":"F1 Keyboard 3D Site – Entry – Framer Community","description":"F1 Keyboard 3D Site — F1 Keyboard 3D Site — an entry in the Framer Community.","imageUrl":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/opengraph/4e2ccfbb34524af7/image.png","siteName":"Framer Community","faviconUrl":null}}],"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-06-18T09:04:20.591Z","updatedAt":"2026-06-18T09:04:20.591Z"},{"id":"019ed68d-0688-7498-a04c-7668408fb8ac","title":null,"body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My entry for the Framer 3.0 Contest "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"To explore the capabilities of Framer 3.0 Agents, I created a 3D Scroll Trigger Product Landing Page experience for the newly announced Framer F1 Keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely in Framer 3.0, the experience combines custom GSAP-powered scroll storytelling with cinematic product reveals inspired by modern hardware launches."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Built with Framer 3.0 Agents "}]},{"type":"paragraph","content":[{"type":"text","text":"• GSAP ScrollTrigger animations "}]},{"type":"paragraph","content":[{"type":"text","text":"• Interactive display reveals "}]},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven product storytelling "}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was to make the website feel like a product film rather than a traditional landing page."}]},{"type":"paragraph","content":[{"type":"text","text":"Live: "},{"type":"text","text":"https://keyboard.framer.media","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://keyboard.framer.media","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear your thoughts "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #Framer3.0 #FramerContest #GSAP #CreativeDevelopment #WebDesign #MotionDesign #ProductDesign #Awwwards #BuildInPublic "}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed68d-0688-7498-a04c-7ae51eb1f677","contestId":"agents-hackathon","author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13"},"title":"F1 Keyboard 3D Site","body":"

A cinematic product-launch experience for the Framer F1 keyboard. Featuring scroll-driven image-sequence animations, premium motion design, and an engineering-inspired exploded view, the website turns product exploration into an immersive storytelling experience. Build with Framer 3.0

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A cinematic product-launch experience for the Framer F1 keyboard. Featuring scroll-driven image-sequence animations, premium motion design, and an engineering-inspired exploded view, the website turns product exploration into an immersive storytelling experience. Build with Framer 3.0"}]}]},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/hdy8wx88","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/9hahca69","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/qun4of7e","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"data":{"previewUrl":"https://keyboard.framer.media"},"winner":false,"createdAt":"2026-06-17T17:07:07.061Z","updatedAt":"2026-06-17T17:07:07.061Z"}],"categories":[],"tags":[],"likes":{"count":30,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T17:07:07.024Z","updatedAt":"2026-06-17T17:07:07.024Z"},{"id":"019ed27e-4d3f-730a-ab47-9dd24c45f315","title":null,"body":"

After weeks of designing, refining, and obsessing over every detail, Gridly is finally live 🚀

A premium bento-grid portfolio template built for designers, developers, and creatives who want their work to stand out.

✦ Unique bento-grid layout

✦ Dark & Light modes

✦ Fully responsive

✦ CMS-powered projects

✦ Built with Framer

Would love to hear your thoughts 👇

#Framer #WebDesign #UIDesign #PortfolioDesign #BuildInPublic

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"After weeks of designing, refining, and obsessing over every detail, Gridly is finally live "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"A premium bento-grid portfolio template built for designers, developers, and creatives who want their work to stand out."}]},{"type":"paragraph","content":[{"type":"text","text":"✦ Unique bento-grid layout"}]},{"type":"paragraph","content":[{"type":"text","text":"✦ Dark & Light modes"}]},{"type":"paragraph","content":[{"type":"text","text":"✦ Fully responsive"}]},{"type":"paragraph","content":[{"type":"text","text":"✦ CMS-powered projects"}]},{"type":"paragraph","content":[{"type":"text","text":"✦ Built with Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to hear your thoughts "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #WebDesign #UIDesign #PortfolioDesign #BuildInPublic"}]}]},"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[],"resources":[{"id":"66702","resolved":true,"title":"Gridly","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Gridly is a "},{"type":"text","text":"premium bento-grid portfolio template","marks":[{"type":"bold"}]},{"type":"text","text":" that helps designers and developers transform visitors into clients with a professionally designed, attention-grabbing layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with "},{"type":"text","text":"modern aesthetics","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"seamless light and dark theme support","marks":[{"type":"bold"}]},{"type":"text","text":", and a "},{"type":"text","text":"modular bento structure","marks":[{"type":"bold"}]},{"type":"text","text":", it maintains its stunning visual appeal even after customization with your own projects and content. Visitors can switch between beautifully crafted themes for a polished experience that looks great in any environment."}]},{"type":"customHeading","content":[{"type":"text","text":"What makes Gridly different?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"It's not just a template. It's a "},{"type":"text","text":"complete portfolio system","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"customHeading","content":[{"type":"text","text":"Striking bento-grid layout that holds attention"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Gridly breaks away from generic templates with a "},{"type":"text","text":"modular grid layout","marks":[{"type":"bold"}]},{"type":"text","text":" that organizes your stats, skills, tools, and featured work into one cohesive, scroll-stopping homepage."}]},{"type":"customHeading","content":[{"type":"text","text":"Seamless light & dark modes"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Professionally designed theme variants ensure your portfolio looks polished day and night, with a "},{"type":"text","text":"built-in theme switcher","marks":[{"type":"bold"}]},{"type":"text","text":" that lets visitors browse in their preferred style."}]},{"type":"customHeading","content":[{"type":"text","text":"Built-in social proof blocks"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Dedicated cells for "},{"type":"text","text":"years of experience","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"total projects","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"happy clients","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"testimonials","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"work history","marks":[{"type":"bold"}]},{"type":"text","text":" give visitors instant credibility cues without extra design work."}]},{"type":"customHeading","content":[{"type":"text","text":"Dynamic project showcase (CMS-powered)"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add, edit, and reorder projects through a "},{"type":"text","text":"connected CMS","marks":[{"type":"bold"}]},{"type":"text","text":", so your homepage and project index update automatically every time you ship new work."}]},{"type":"customHeading","content":[{"type":"text","text":"Individual case study pages"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Each project gets its own "},{"type":"text","text":"dedicated project page","marks":[{"type":"bold"}]},{"type":"text","text":" to walk visitors through your process, outcomes, and visuals, turning casual browsers into serious leads."}]},{"type":"paragraph","content":[{"type":"text","text":"Gridly is meticulously crafted for "},{"type":"text","text":"designers, developers, and creative professionals","marks":[{"type":"bold"}]},{"type":"text","text":", ensuring "},{"type":"text","text":"excellent performance","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"fully responsive design","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"beautiful light and dark experiences","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"frustration-free setup","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"customHeading","content":[{"type":"text","text":"Pages Included"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Core Pages"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Home","marks":[{"type":"bold"}]},{"type":"text","text":" (Bento-grid layout)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Projects Index","marks":[{"type":"bold"}]},{"type":"text","text":" (CMS-powered)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual Project Page","marks":[{"type":"bold"}]},{"type":"text","text":" (CMS-powered)"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Essential Pages"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact Page","marks":[{"type":"bold"}]},{"type":"text","text":" (With form)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"404 Page","marks":[{"type":"bold"}]}]}]}]}]},"introduction":"A premium bento-grid portfolio tem","slug":"gridly","author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/r96eoa8i","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1229}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/9758wifj","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/sjybxgaf","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/gals59rr","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-16T22:12:33.182Z","updatedAt":"2026-06-16T22:12:33.182Z","publishedAt":"2026-06-16T22:12:33.179Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"39","paymentUrl":"https://buy.polar.sh/polar_cl_yvn7WV2a8GpUpNqJjPPaKtUDnFVlk4eqN74IM1LYRSy","remixUrl":null,"previewUrl":"https://gridly.framer.ai/","categories":[{"id":16,"name":"Personal","slug":"personal"},{"id":19,"name":"Portfolio","slug":"portfolio"},{"id":188,"name":"Art & Design","slug":"art-and-design"}],"styles":[],"mainCategory":{"id":268,"name":"Designers","slug":"designers"},"features":[{"id":1,"name":"Appear Effects","slug":"appear-effects"},{"id":7,"name":"Light & Dark Theme","slug":"light-dark-theme"},{"id":13,"name":"Slideshows/Tickers","slug":"slideshows-tickers"},{"id":18,"name":"Scroll Effects","slug":"scroll-effects"},{"id":21,"name":"CMS","slug":"cms"},{"id":30,"name":"Forms","slug":"forms"},{"id":35,"name":"Text Effects","slug":"text-effects"},{"id":37,"name":"Code Components","slug":"code-components"},{"id":39,"name":"Selection Styles","slug":"selection-styles"},{"id":41,"name":"Vector Sets","slug":"vector-sets"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-16T22:12:33.215Z","updatedAt":"2026-06-16T22:12:33.215Z"},{"id":"019d8f7a-d4e5-72f5-9c55-4c4b63016acb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PxFm4J3EQqVJARnGb175","resolved":true,"title":"Dot Matrix Button","body":"

What you can customize:

Content and TypographyLabel your button textFont family weight and size

ArrowArrow colorArrow background colorAnimation duration

ColorsButton colorText color

LinkingAdd custom linksConnect to pages or sections inside Framer

","bodyJson":null,"introduction":"Minimal dot matrix animated button","slug":"dot-matrix-button","author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/PxFm4J3EQqVJARnGb175/dot-matrix-button-lK1eqEKXzbTDpikXJVVKIJW7IbvSNC","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-09T08:23:27.989Z","updatedAt":"2026-04-14T23:00:02.745Z","publishedAt":"2026-04-15T04:51:25.029Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Matrix-Arrow-Button-4DgEc4.js@f4pBU94ZSReOrITUgOJl","previewUrl":"https://lively-motivation-462859.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"f4pBU94ZSReOrITUgOJl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T04:51:25.029Z","updatedAt":"2026-04-15T04:51:25.029Z"},{"id":"019d8f7a-c66e-7553-9e96-1a8a0e501294","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[],"resources":[{"id":"3n4D5HHHnT6OpeQWkrHa","resolved":true,"title":"Blinds Button","body":"

What you can customize:

Content & Layout

Label — your button text
Font — family, weight, size
Padding — X / Y
Radius — sharp to fully rounded

Arrow

Visibility — show / hide
Size
Color
Hover Color

Colors

Button Color
Text Color
Curtain Color
Hover Background Color
Text Hover Color

Border

Toggle on/off
Width
Color

Linking

Add custom links
Connect to sections or pages inside Framer

","bodyJson":null,"introduction":"CTA with Blinds Closing Hover effect","slug":"curtain-button","author":{"framerUserId":"2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd","name":"Vansh Sharda","slug":"vansh-sharda","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2cd8c8e2-7101-4af5-88f7-d5b0883ebbcd/fjsrqj13","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/3n4D5HHHnT6OpeQWkrHa/curtain-button-vWypwre3rFIbyp8hSTz4TbfuyqGiMc","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-08T08:39:22.806Z","updatedAt":"2026-04-17T22:11:43.820Z","publishedAt":"2026-04-15T04:51:21.326Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/CurtainButton-rxxxni.js@S7brI9YeN6Dyjut6Br9E","previewUrl":"https://make-baguette-745549.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"S7brI9YeN6Dyjut6Br9E","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-04-15T04:51:21.326Z","updatedAt":"2026-04-15T04:51:21.326Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L66"}]