62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.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/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.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/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T8c0,

Show your AI product working, without a video.

AI Chat Demo Pro plays a conversation by itself. The question types into the input, the assistant thinks through visible steps, then streams its answer word by word with a soft blur-in. The reasoning trace folds into a "Thought for 2.1s" summary, sources appear as numbered chips, and an action row lands underneath - exactly like the AI products people already use every day.

Every word is yours. Write the conversation in the properties panel, pick your colours and fonts, and drop your own Framer layers into the answer so the demo shows your product, not a generic chat bubble.

Why not just use a video?

● A demo video is 3-15 MB. This is a few KB, so your LCP score survives.

● Mobile autoplay is unreliable; visitors often see a frozen first frame. This always plays.

● Compressed video text is unreadable on a 390px phone. This reflows and stays crisp.

● Video is invisible to search engines and screen readers. This is real text.

● New pricing or a renamed feature means re-recording. Here it is a text field.

Features

● Self-playing scripted conversation, up to 12 messages

● Live reasoning trace on a gradient rail, collapsing into a timed summary

● Word-by-word streaming with blur-in and a gradient caret

● Your own Framer layers revealed inside the answer - charts, screenshots, cards, components

● Rich text: bold, inline code, bullets, code blocks with a label, images

● Numbered source chips, action row, attachment chips on user messages

● Three styles: Glass, Solid, Minimal - plus Dark, Light and fully custom colours

● Two-colour accent gradient, ambient glow, film grain, inner top highlight

● Framer font picker for body and title text, Google Fonts included

● Max width, bubble width, radius, padding, gap, avatars and shadow controls

● Responds to its own width, not the page - correct on tablet and mobile in any column

● Plays only while on screen, replays on scroll, loops, respects reduced motion

64:T6c8,

A playful, physics-driven polaroid card stack you can drag anywhere on screen — tilts in 3D as you move it, settles with a spring bounce, and stays right where you drop it.

Turn a static photo grid into something people actually want to touch. Draggable Card Stack scatters a pile of polaroid-style photo cards over a bold background quote, and lets visitors grab, fling, and rearrange them freely across the section. Each card tilts in 3D based on drag speed and direction, jumps above the rest of the stack while active, and lands with a natural spring overshoot when released — no snapping back, no reset. Fully responsive, touch-ready, and respects reduced-motion preferences.

How to Use

1. Drag Draggable Card Stack onto your canvas from the Insert panel — it fills the section by default (full viewport height recommended).

2. Open the Cards array in the properties panel and swap in your own images and captions (6 sample photos are included so it works out of the box).

3. Set your Quote Text — this large background heading sits behind the cards and works best as a short, punchy line (2–3 lines max).

4. Customize the look under Style: background color, quote color/size, font (Google Fonts), caption styling, card color, corner radius, card width, shadow strength, and how much the cards randomly rotate in the default stack.

5. Tune the feel under Behavior: toggle drag on/off, adjust Drag Elastic (resistance at the edges) and Tilt Intensity (how strongly cards wobble in 3D while dragging fast).

6. Drop it into a hero, portfolio, or gallery section — cards stay draggable within the section bounds on desktop, tablet, and mobile (touch supported).

65:T4de,

a plain image grid into a living backdrop. Each column drifts at its own pace and direction, tilted in soft 3D perspective, creating a continuous, cinematic motion that never repeats. It's designed for hero sections, agency landing pages, portfolio intros and case-study headers — anywhere a static grid feels flat.

Every column loops infinitely and seamlessly, so there's no visible reset or jump cut, no matter how long a visitor stays on the page.

Under the hood, Carousel is built for real production use, not just the demo view:

• Pauses automatically the moment it scrolls out of view, so it never runs off-screen for no reason.

• Detects the Framer canvas and export mode and swaps to a static preview — no animation cost while you're designing or exporting.

• Respects each visitor's reduced-motion setting.

• Optional pause-on-hover, so visitors can rest their eyes on a tile without the wall drifting under them.

Add your own images by pasting a link or uploading directly — no CMS or external setup needed — and shape the look with columns, tile size, spacing, corner radius, speed, direction, and edge fade, all from the property panel.

66:T6af,

Index Nav — Fullscreen Navigation

A modern, responsive fullscreen navigation component for Framer.

Designed for creative websites, portfolios, studios, agencies, and modern landing pages. Click the menu button to reveal a fullscreen index-style navigation with smooth staggered transitions and large typography.

What's included

Responsive desktop and mobile navigation
Fullscreen menu overlay
Staggered menu reveal animation
Custom logo / brand mark
Custom menu items and links
Custom colors
Custom heading and body fonts
Adjustable content width
Configurable menu label
Open-by-default option
Keyboard-friendly Escape-to-close behavior

Important — Setup

After dragging the component into your Framer project, set a fixed height for the component/frame according to the section where you want to use it.

The component uses the frame's height for its navigation area, while the opened menu can expand to the available viewport.

Easy to customize

Everything important is exposed through Framer's property controls, so you can adapt the navigation to match your brand without editing the code.

Best for

Portfolio websites
Creative studios
Agencies
SaaS websites
Personal websites
Modern landing pages
Editorial / creative websites

Build a polished navigation experience without creating the interaction from scratch.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-13538a02-79f2-48b8-b8c3-7e175dfdf1c8-all:/unified/creator/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/activity/":[{"data":[{"id":"01a0bf9a-c3d4-725e-9a0b-f92005c7a5a2","type":"creator.followed","target":{"type":"creator","id":"82e00e59-ec54-44bc-b710-94f728526490","preview":"Nazam Azam","previewJson":null,"thumbnail":"https://framerusercontent.com/avatars/users/82e00e59-ec54-44bc-b710-94f728526490/swq7FJUKP","slug":"nazam-azam","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T16:16:26.046Z","latestAt":"2026-09-20T16:16:26.046Z"},{"id":"01a0bf71-f95e-716c-87f9-6ea502273028","type":"component.created","target":{"type":"component","id":"Vhxa0aAVB21lE3EJTOJD","preview":"AI Chat Demo Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0bfa3-8fd2-719b-b72b-7bdebe042938.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T15:31:52.798Z","latestAt":"2026-09-20T15:31:52.798Z"},{"id":"01a0bd9c-a83f-7057-b383-583d8c5b2207","type":"creator.followed","target":{"type":"creator","id":"7e4b2376-92d9-49df-8580-e3293af08a29","preview":"Michelle de Haas | Zo-e","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e4b2376-92d9-49df-8580-e3293af08a29/cl04sjas","slug":"zo-e","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T06:59:15.643Z","latestAt":"2026-09-20T06:59:15.643Z"},{"id":"01a0b712-e921-72b5-8093-322ea46c58df","type":"creator.followed","target":{"type":"creator","id":"7e90fc1d-cc64-4744-aedf-3798e1fc2518","preview":"no-more","previewJson":null,"thumbnail":null,"slug":"sourov-ahmed","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T00:31:04.989Z","latestAt":"2026-09-19T00:31:04.989Z"},{"id":"01a0b04f-1696-750b-b9ed-7ea4b530ad4f","type":"component.created","target":{"type":"component","id":"lKn1qJEkwbC6tmb5CRjM","preview":"Draggable Card","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0b04c-fd7a-73a6-af53-f4f5cf55b3be.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-17T16:59:28.278Z","latestAt":"2026-09-17T16:59:28.278Z"},{"id":"01a0afc5-602f-75b8-aec7-49429ba15739","type":"creator.followed","target":{"type":"creator","id":"09bc3e24-752b-4a1b-97c2-ab8d755f63b8","preview":"Tauhid Hasan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09bc3e24-752b-4a1b-97c2-ab8d755f63b8/4taurhlo","slug":"tauhiduiux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T14:29:03.146Z","latestAt":"2026-09-17T14:29:03.146Z"},{"id":"01a0afc5-5146-73fb-ade9-d4e4aabcfb4c","type":"creator.followed","target":{"type":"creator","id":"f478b0de-3860-430f-9abb-62a43584a990","preview":"Farhad Ahmed","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f478b0de-3860-430f-9abb-62a43584a990/l3x6bbd8","slug":"maybefarhad","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T14:28:59.330Z","latestAt":"2026-09-17T14:28:59.330Z"},{"id":"01a0ad3b-c8af-7351-bb24-0c4b2cef3ac1","type":"creator.followed","target":{"type":"creator","id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","preview":"PixlForm®","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d7b633f0-85d0-4e75-b61f-08c45984e34b/pdzpgzrh","slug":"pixl-form","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T02:39:31.497Z","latestAt":"2026-09-17T02:39:31.497Z"},{"id":"01a0ab65-b3c0-7228-966f-50f87ff1d62a","type":"component.created","target":{"type":"component","id":"8mKqilhSDkweBDQ7i4ka","preview":"Infinite Mosaic","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0ab64-d643-75ed-815f-0b25e953fd21.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T18:06:04.224Z","latestAt":"2026-09-16T18:06:04.224Z"},{"id":"01a0aab6-2a5f-70c9-b821-87f00e138ba3","type":"creator.followed","target":{"type":"creator","id":"830039ba-56b1-42fc-a371-361e8f7a1e4c","preview":"RedDevs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70334/avatar-q9VjO21hdl19yEZkkQj3EgY306N2Yq.jpg","slug":"reddevs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-16T14:54:20.238Z","latestAt":"2026-09-16T14:54:20.238Z"},{"id":"01a0a61c-f04d-7042-aad1-f0c2d9166aea","type":"component.created","target":{"type":"component","id":"UudWipSH57OUFWwMfLDI","preview":"Modern Index Navbar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0ab1a-28a6-74fe-a6cd-cf1a2a3c0cc3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","slug":"y-p-04","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-15T17:28:29.517Z","latestAt":"2026-09-15T17:28:29.517Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:13538a02-79f2-48b8-b8c3-7e175dfdf1c8:/unified/posts/?creator=13538a02-79f2-48b8-b8c3-7e175dfdf1c8&with=reposts":[{"data":[{"id":"01a0bf71-f753-706e-8719-e99d61e9e7b6","title":null,"body":"

Your AI product deserves better than a screen recording.

AI Chat Demo Pro is a Framer component that plays your product conversation live on the page: the question types itself, the assistant works through visible reasoning steps, and the answer streams in word by word. You write the script in the properties panel and drop your own Framer layers into the reply, so visitors see your interface - not a stock chat bubble.

Lighter than video, readable on mobile, indexable by search, and editable in seconds when your copy changes. Now on the Framer Marketplace.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Your AI product deserves better than a screen recording."}]},{"type":"paragraph","content":[{"type":"text","text":"AI Chat Demo Pro is a Framer component that plays your product conversation live on the page: the question types itself, the assistant works through visible reasoning steps, and the answer streams in word by word. You write the script in the properties panel and drop your own Framer layers into the reply, so visitors see your interface - not a stock chat bubble."}]},{"type":"paragraph","content":[{"type":"text","text":"Lighter than video, readable on mobile, indexable by search, and editable in seconds when your copy changes. Now on the Framer Marketplace."}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Vhxa0aAVB21lE3EJTOJD","resolved":true,"title":"AI Chat Demo Pro","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Show your AI product working, without a video.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"AI Chat Demo Pro plays a conversation by itself. The question types into the input, the assistant thinks through visible steps, then streams its answer word by word with a soft blur-in. The reasoning trace folds into a \"Thought for 2.1s\" summary, sources appear as numbered chips, and an action row lands underneath - exactly like the AI products people already use every day."}]},{"type":"paragraph","content":[{"type":"text","text":"Every word is yours. Write the conversation in the properties panel, pick your colours and fonts, and drop your own Framer layers into the answer so the demo shows your product, not a generic chat bubble."}]},{"type":"paragraph","content":[{"type":"text","text":"Why not just use a video?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"● A demo video is 3-15 MB. This is a few KB, so your LCP score survives."}]},{"type":"paragraph","content":[{"type":"text","text":"● Mobile autoplay is unreliable; visitors often see a frozen first frame. This always plays."}]},{"type":"paragraph","content":[{"type":"text","text":"● Compressed video text is unreadable on a 390px phone. This reflows and stays crisp."}]},{"type":"paragraph","content":[{"type":"text","text":"● Video is invisible to search engines and screen readers. This is real text."}]},{"type":"paragraph","content":[{"type":"text","text":"● New pricing or a renamed feature means re-recording. Here it is a text field."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"● Self-playing scripted conversation, up to 12 messages"}]},{"type":"paragraph","content":[{"type":"text","text":"● Live reasoning trace on a gradient rail, collapsing into a timed summary"}]},{"type":"paragraph","content":[{"type":"text","text":"● Word-by-word streaming with blur-in and a gradient caret"}]},{"type":"paragraph","content":[{"type":"text","text":"● Your own Framer layers revealed inside the answer - charts, screenshots, cards, components"}]},{"type":"paragraph","content":[{"type":"text","text":"● Rich text: bold, inline code, bullets, code blocks with a label, images"}]},{"type":"paragraph","content":[{"type":"text","text":"● Numbered source chips, action row, attachment chips on user messages"}]},{"type":"paragraph","content":[{"type":"text","text":"● Three styles: Glass, Solid, Minimal - plus Dark, Light and fully custom colours"}]},{"type":"paragraph","content":[{"type":"text","text":"● Two-colour accent gradient, ambient glow, film grain, inner top highlight"}]},{"type":"paragraph","content":[{"type":"text","text":"● Framer font picker for body and title text, Google Fonts included"}]},{"type":"paragraph","content":[{"type":"text","text":"● Max width, bubble width, radius, padding, gap, avatars and shadow controls"}]},{"type":"paragraph","content":[{"type":"text","text":"● Responds to its own width, not the page - correct on tablet and mobile in any column"}]},{"type":"paragraph","content":[{"type":"text","text":"● Plays only while on screen, replays on scroll, loops, respects reduced motion"}]},{"type":"paragraph"}]},"introduction":"Interactive AI Chat Component","slug":"ai-chat-demo-pro","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0bfa3-8fd2-719b-b72b-7bdebe042938.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-20T15:31:51.719Z","updatedAt":"2026-09-20T16:29:35.709Z","publishedAt":"2026-09-20T15:31:51.716Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scary-sheet-292155.framer.app/","price":"12","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/f0eec15a-0b60-40ea-9f6d-3f0428c46d84","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"FIcSt68MCaDyXqoyZVBA","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T15:31:52.275Z","updatedAt":"2026-09-20T15:31:52.275Z"},{"id":"01a0b04f-145f-7538-8a21-22c425101b3d","title":null,"body":"

Collect the moments. ✦

A playful Polaroid-style gallery for Framer — designed to make images feel tactile, layered, and interactive.

Drag, explore, and bring your favorite moments to life.

Built for travel sites, portfolios, creative studios, and visual storytelling.

#Framer #FramerComponent #WebDesign #InteractionDesign

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Collect the moments. ✦","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A playful Polaroid-style gallery for Framer — designed to make images feel tactile, layered, and interactive."}]},{"type":"paragraph","content":[{"type":"text","text":"Drag, explore, and bring your favorite moments to life."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for travel sites, portfolios, creative studios, and visual storytelling."}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #FramerComponent #WebDesign #InteractionDesign"}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[],"resources":[{"id":"lKn1qJEkwbC6tmb5CRjM","resolved":true,"title":"Draggable Card","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A playful, physics-driven polaroid card stack you can drag anywhere on screen — tilts in 3D as you move it, settles with a spring bounce, and stays right where you drop it."}]},{"type":"paragraph","content":[{"type":"text","text":"Turn a static photo grid into something people actually want to touch. Draggable Card Stack scatters a pile of polaroid-style photo cards over a bold background quote, and lets visitors grab, fling, and rearrange them freely across the section. Each card tilts in 3D based on drag speed and direction, jumps above the rest of the stack while active, and lands with a natural spring overshoot when released — no snapping back, no reset. Fully responsive, touch-ready, and respects reduced-motion preferences."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"How to Use"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Drag Draggable Card Stack onto your canvas from the Insert panel — it fills the section by default (full viewport height recommended)."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Open the Cards array in the properties panel and swap in your own images and captions (6 sample photos are included so it works out of the box)."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Set your Quote Text — this large background heading sits behind the cards and works best as a short, punchy line (2–3 lines max)."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Customize the look under Style: background color, quote color/size, font (Google Fonts), caption styling, card color, corner radius, card width, shadow strength, and how much the cards randomly rotate in the default stack."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Tune the feel under Behavior: toggle drag on/off, adjust Drag Elastic (resistance at the edges) and Tilt Intensity (how strongly cards wobble in 3D while dragging fast)."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Drop it into a hero, portfolio, or gallery section — cards stay draggable within the section bounds on desktop, tablet, and mobile (touch supported)."}]}]},"introduction":"A world of places, captured in fra","slug":"draggable-card","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0b04c-fd7a-73a6-af53-f4f5cf55b3be.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-17T16:59:27.099Z","updatedAt":"2026-09-20T16:32:10.909Z","publishedAt":"2026-09-17T16:59:27.096Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://mighty-technology-827802.framer.app/","price":"7","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/b5083ad1-2618-4079-aaba-49fb98613669","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"0WhMjlwOqD5m8CBrqa9X","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-17T16:59:27.711Z","updatedAt":"2026-09-17T16:59:27.711Z"},{"id":"01a0ab65-b164-73f8-b037-12954000455f","title":null,"body":"

An infinite 3D image wall for Framer with smooth scrolling, subtle depth, premium hover interactions, and responsive performance.

Built to feel clean, fast, and production-ready.

#Framer #NoCode #WebDesign #UI #MotionDesign

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"An infinite 3D image wall for Framer with smooth scrolling, subtle depth, premium hover interactions, and responsive performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Built to feel clean, fast, and production-ready."}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #NoCode #WebDesign #UI #MotionDesign"}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8mKqilhSDkweBDQ7i4ka","resolved":true,"title":"Infinite Mosaic","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"a plain image grid into a living backdrop. Each column drifts at its own pace and direction, tilted in soft 3D perspective, creating a continuous, cinematic motion that never repeats. It's designed for hero sections, agency landing pages, portfolio intros and case-study headers — anywhere a static grid feels flat."}]},{"type":"paragraph","content":[{"type":"text","text":"Every column loops infinitely and seamlessly, so there's no visible reset or jump cut, no matter how long a visitor stays on the page."}]},{"type":"paragraph","content":[{"type":"text","text":"Under the hood, Carousel is built for real production use, not just the demo view:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Pauses automatically the moment it scrolls out of view, so it never runs off-screen for no reason."}]},{"type":"paragraph","content":[{"type":"text","text":"• Detects the Framer canvas and export mode and swaps to a static preview — no animation cost while you're designing or exporting."}]},{"type":"paragraph","content":[{"type":"text","text":"• Respects each visitor's reduced-motion setting."}]},{"type":"paragraph","content":[{"type":"text","text":"• Optional pause-on-hover, so visitors can rest their eyes on a tile without the wall drifting under them."}]},{"type":"paragraph","content":[{"type":"text","text":"Add your own images by pasting a link or uploading directly — no CMS or external setup needed — and shape the look with columns, tile size, spacing, corner radius, speed, direction, and edge fade, all from the property panel."}]}]},"introduction":"Infinite 3D image wall with smooth","slug":"infinite-mosaic","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0ab64-d643-75ed-815f-0b25e953fd21.png","metadata":{"tint":{"h":0,"s":0,"l":24},"width":1200,"height":815}}],"post":null,"createdAt":"2026-09-16T18:06:03.032Z","updatedAt":"2026-09-20T14:09:05.038Z","publishedAt":"2026-09-16T18:06:03.029Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://comfortable-quail-675281.framer.app/","price":"4","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/865b3e4c-8d5a-4c5b-9dcb-a4be48afabfd","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"xc5Ir2wtHAkVKDtOnaOK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T18:06:03.620Z","updatedAt":"2026-09-16T18:06:03.620Z"},{"id":"01a0a61c-ee2d-7591-94f2-e4507dfc41af","title":null,"body":"

Just launched — Modern Navbar for Framer 🚀

A responsive fullscreen navigation component with smooth menu transitions, customizable typography, colors, menu items, and content width.

Built for portfolios, agencies, studios, SaaS and modern landing pages.

Available now on the Framer Marketplace.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just launched — Modern Navbar for Framer ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"A responsive fullscreen navigation component with smooth menu transitions, customizable typography, colors, menu items, and content width."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for portfolios, agencies, studios, SaaS and modern landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Available now on the Framer Marketplace."}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[],"resources":[{"id":"UudWipSH57OUFWwMfLDI","resolved":true,"title":"Modern Index Navbar","body":"$66","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Index Nav — Fullscreen Navigation"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A modern, responsive fullscreen navigation component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed for creative websites, portfolios, studios, agencies, and modern landing pages. Click the menu button to reveal a fullscreen index-style navigation with smooth staggered transitions and large typography."}]},{"type":"customHeading","content":[{"type":"text","text":"What's included"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive desktop and mobile navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fullscreen menu overlay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Staggered menu reveal animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom logo / brand mark"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom menu items and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom heading and body fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable content width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable menu label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open-by-default option"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard-friendly Escape-to-close behavior"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Important — Setup"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"After dragging the component into your Framer project, "},{"type":"text","text":"set a fixed height for the component/frame","marks":[{"type":"bold"}]},{"type":"text","text":" according to the section where you want to use it."}]},{"type":"paragraph","content":[{"type":"text","text":"The component uses the frame's height for its navigation area, while the opened menu can expand to the available viewport."}]},{"type":"customHeading","content":[{"type":"text","text":"Easy to customize"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Everything important is exposed through Framer's property controls, so you can adapt the navigation to match your brand without editing the code."}]},{"type":"customHeading","content":[{"type":"text","text":"Best for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial / creative websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Build a polished navigation experience without creating the interaction from scratch."}]}]},"introduction":"Modern Navigation for Multipage We","slug":"modern-index-navbar","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"y p","slug":"y-p-04","avatar":"https://framerusercontent.com/avatars/users/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/NBvsqHZTn","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0ab1a-28a6-74fe-a6cd-cf1a2a3c0cc3.png","metadata":{"tint":{"h":60,"s":7,"l":28},"width":2400,"height":1247}}],"post":null,"createdAt":"2026-09-15T17:28:28.414Z","updatedAt":"2026-09-20T13:08:04.852Z","publishedAt":"2026-09-15T17:28:28.411Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ModerNavbar-q95ZLM.js@EAy9VOsLvzeRqbLW3MWK","previewUrl":"https://newcomer-homework-722293.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"EAy9VOsLvzeRqbLW3MWK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-15T17:28:28.973Z","updatedAt":"2026-09-15T17:28:28.973Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L67"}]