53:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/3xi9_0nh8wp68.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1an0rrmx8vr9j.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/40pcohi_mocbm.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 54:T968,

Most "3D tilt card" components only respond to the mouse — which means the entire effect is dead on mobile, where most site traffic actually is. Gyro Tilt Card fixes that: it's a generic wrapper you drop any content into (an image, a product card, a testimonial, a feature card), and it tilts in 3D using whatever input the visitor's device actually has.

What it does:

- Desktop: cursor-position tilt, spring-smoothed so it settles instead of snapping.

- Mobile/tablet: live device-orientation (gyroscope) tilt, with correct portrait/landscape axis remapping.

- iOS 13+: requests motion permission properly, from a real tap, only when required — the prompt appears automatically and disappears once granted.

- Android & other browsers: gyro tilt attaches directly, no permission friction.

- No mouse, no usable gyro: a gentle ambient idle-sway animation keeps the card alive instead of sitting flat and looking broken.

- Idle border-beam: a rotating gradient light traces the card's edge while idle — a current, high-end visual cue — and cross-fades out the instant a mouse hovers, handing off to a cursor-tracking glare + dynamic shadow.

## How to Use

1. In Framer, create a new Code Component and paste in the component file.

2. Drag it onto the canvas and resize it to fit your card or image.

3. Open the Properties panel and set Content to the layer you want tilted — an image, a card frame, a testimonial, anything.

4. Adjust Max Tilt and Perspective to control how dramatic the 3D effect feels.

5. Toggle Glare and Dynamic Shadow on or off, and tune their intensity.

6. Leave Idle Sway Fallback on so the card never looks fully static on unsupported devices.

7. Style the Idle Beam: toggle it on/off, set start/end colors, width, rotation speed, and whether it breathes (subtle scale pulse).

8. Test in Preview on an actual phone — the gyroscope path and the iOS permission prompt only appear on a real device, not in the Framer Canvas or desktop preview.

55:T759,

I just shipped a free Framer component: Project Hover List.

It's the case-study-index interaction you've seen on every high-end agency site — hover a project, and a preview image floats next to your cursor and follows it around. Move fast between rows and the image tilts slightly, just like the real thing.

A few details I cared about while building it:

→ Spring-smoothed cursor tracking, not raw mouse coordinates → Velocity-based tilt on the preview image → Fully responsive — on mobile it automatically switches to inline thumbnails instead of trying to "float" an image with no cursor → Respects reduced-motion and renders clean on the Framer Canvas

It's free on the Framer Marketplace — link in comments. Drop your site below if you use it, I'd love to see it in the wild.

## How to Use

1. In Framer, create a new Code Component and paste in the component file.

2. Drag it onto the canvas inside a frame with enough height for your list (roughly 90px per row).

3. Open the Properties panel and edit the Projects array — add a title, category, image, and link for each row.

4. Set Font, Text, Accent, and Divider colors to match your site's design system.

5. Adjust Preview W / Preview H to size the floating image, and Radius for corner rounding.

6. Leave Compact Below at 680px, or raise/lower it depending on where your layout should switch to the mobile thumbnail view.

7. Test in Preview (not Canvas) — the cursor-follow effect only runs in Preview and on the live site.

\#framer #webdesign #uidesign #interactiondesign #nocode

56:T895,

Project Hover List recreates the classic agency case-study index interaction — the numbered project list where a preview image follows your cursor — as a fully data-driven Framer code component, not a static demo.

What it does:

- Hovering a row floats a live image preview next to the cursor, spring-smoothed so it settles instead of snapping.

- Fast cursor movement adds a subtle velocity-based skew to the preview, the same micro-detail used on high-end portfolio sites.

- Non-hovered rows dim to create focus, and each row draws its own underline on hover.

- Images crossfade when moving quickly between rows instead of flashing.

- On mobile or any touch device, the cursor-follow preview is replaced with a clean inline thumbnail per row — detected automatically via container width and pointer type, no manual toggle needed.

- Respects prefers-reduced-motion and renders a clean static frame on the Framer Canvas and in exports.

Fully editable via Property Controls: project list (title, category, image, link per row), font, text/accent/divider colors, preview image size, corner radius, and the mobile breakpoint.

## How to Use

1. In Framer, create a new Code Component and paste in the component file.

2. Drag it onto the canvas inside a frame with enough height for your list (roughly 90px per row).

3. Open the Properties panel and edit the Projects array — add a title, category, image, and link for each row.

4. Set Font, Text, Accent, and Divider colors to match your site's design system.

5. Adjust Preview W / Preview H to size the floating image, and Radius for corner rounding.

6. Leave Compact Below at 680px, or raise/lower it depending on where your layout should switch to the mobile thumbnail view.

7. Test in Preview (not Canvas) — the cursor-follow effect only runs in Preview and on the live site.

57:T6bf,

Make every hero section feel expensive.

Aurora Mesh Gradient is a real-time WebGL background that flows like light. Soft color fields drift, warp and blend into each other, with deep background voids, subtle film grain and a gentle pull toward the cursor. It's the look behind today's top AI and SaaS landing pages, and you don't need to write any code.

Drag it onto the canvas, pick a preset, and place your headline on top. Done.

Features

- 6 hand-tuned presets: Aurora, Sunset, Ocean, Candy, Lava, Mono

- Custom mode with up to 6 colors plus a background color (supports your color styles)

- Cursor interaction with adjustable strength and smoothing

- Full control over speed, warp, detail, sharpness, voids, grain, saturation and vignette

- Seed control: generate a unique layout for every project

- Quality slider for great performance on large screens

- Animates only while it's on screen, so it's light on battery and CPU

- Respects the "reduced motion" accessibility setting

- Static fallback for thumbnails, exports and browsers without WebGL

- Border radius control: works as a full-page background or a rounded card

- No external fonts, scripts or links

Perfect for

AI products · SaaS landing pages · Portfolios · Agency sites · Launch pages · Pricing sections · Waitlists · Event pages

How to use

1. Add the component to your page.

2. Set its size to Fill (or any fixed size).

3. Choose a preset or switch to Custom colors.

4. Put your content on top of it in a Stack or Frame.

58: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

59: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).

5a: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.

5b: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.

52:["$","$L53",null,{"value":{"fallback":{"$inf$activity-creator-13538a02-79f2-48b8-b8c3-7e175dfdf1c8-all:/unified/creator/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/activity/":[{"data":[{"id":"01a0f7ef-0d96-755d-b1e0-5e687539a704","type":"creator.followed","target":{"type":"creator","id":"8694dc10-b268-4c60-b8a6-37f11002aaf3","preview":"Bruno Ribeiro","previewJson":null,"thumbnail":null,"slug":"bruno-ribeiro-fz34g","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-01T14:47:14.063Z","latestAt":"2026-10-01T14:47:14.063Z"},{"id":"01a0d41b-8247-71ae-9a14-4dd3bb355df4","type":"creator.followed","target":{"type":"creator","id":"6e4f8380-d6cb-4655-93f2-b81f15adf506","preview":"Apex Interactive","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/6e4f8380-d6cb-4655-93f2-b81f15adf506/c4a9hfpi","slug":"apex-interactive","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-24T15:49:27.730Z","latestAt":"2026-09-24T15:49:27.730Z"},{"id":"01a0cf3a-ba49-75fb-a0e5-765acbefaa3d","type":"component.created","target":{"type":"component","id":"6S7eLvIUgf1GRf5RJnFW","preview":"Gyro Tilt Card","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0cf38-d61d-7174-9606-926a3730ab47.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-23T17:05:27.625Z","latestAt":"2026-09-23T17:05:27.625Z"},{"id":"01a0cf23-ca40-71a9-81bb-e03aa797f1a3","type":"component.created","target":{"type":"component","id":"5e5U5shLoZ3r41FCsovt","preview":"Project Hover List","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0cf22-ed81-732e-b274-e1ea6af22174.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-23T16:40:24.384Z","latestAt":"2026-09-23T16:40:24.384Z"},{"id":"01a0cc0c-4dc8-770c-9181-9bf451ff9285","type":"creator.followed","target":{"type":"creator","id":"a2b0ec8b-1ec8-4685-912a-aa75e9e634fd","preview":"David Weber","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a2b0ec8b-1ec8-4685-912a-aa75e9e634fd/5m0fuh03","slug":"dyved","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-23T02:15:53.536Z","latestAt":"2026-09-23T02:15:53.536Z"},{"id":"01a0cc0c-4a08-71be-a013-8395b30ad5d3","type":"creator.followed","target":{"type":"creator","id":"300b3a94-48ea-4347-9758-5ab6ca2618ff","preview":"N!nh™ Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/300b3a94-48ea-4347-9758-5ab6ca2618ff/bginqadn","slug":"ninhstudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-23T02:15:52.560Z","latestAt":"2026-09-23T02:15:52.560Z"},{"id":"01a0ca1f-428c-70b3-b298-0ee8eb0d82f3","type":"creator.followed","target":{"type":"creator","id":"31d29df6-8059-4253-b5b7-252346f06bd6","preview":"Jabel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/774205/avatar-Nct6RbpIMcRNaGX5CEbB24fuTsDQCw.jpg","slug":"jabel","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T17:17:21.402Z","latestAt":"2026-09-22T17:17:21.402Z"},{"id":"01a0ca1e-322a-76fa-8c71-1bc606f55707","type":"creator.followed","target":{"type":"creator","id":"ffa09057-21bc-47ab-8deb-9028e0a74be1","preview":"Outumn","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ffa09057-21bc-47ab-8deb-9028e0a74be1/t0nog86g","slug":"outumn","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T17:16:11.676Z","latestAt":"2026-09-22T17:16:11.676Z"},{"id":"01a0ca0a-00fd-761d-8426-6e081aea9c18","type":"creator.followed","target":{"type":"creator","id":"209f50a2-053f-4743-80bc-53199d20b167","preview":"Divyesh WebCraft","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/209f50a2-053f-4743-80bc-53199d20b167/4hm414mn","slug":"divyesh-kargathiya-fket0d","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T16:54:08.368Z","latestAt":"2026-09-22T16:54:08.368Z"},{"id":"01a0ca09-18db-70c8-8348-b18134ac2631","type":"creator.followed","target":{"type":"creator","id":"145266b7-4a55-4a3b-80a1-ecffbd4346ee","preview":"Aathif Thajudeen","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1014411/avatar-3hhQ5xrvrHyPqcZW2PL4D8an7mFCGm.jpg","slug":"aathif-thajudeen","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T16:53:08.926Z","latestAt":"2026-09-22T16:53:08.926Z"},{"id":"01a0ca09-13e2-76bd-9065-82e03bc694eb","type":"creator.followed","target":{"type":"creator","id":"56870ffa-753a-4f43-849a-921b07f4de48","preview":"Iconic Graphics","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/442362/avatar-5cAkrn6c4CT3LyepjCaxhrr3EOmftI.jpg","slug":"iconicgraphics","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T16:53:07.657Z","latestAt":"2026-09-22T16:53:07.657Z"},{"id":"01a0ca09-109f-748c-95c8-6f5b35e7e03f","type":"creator.followed","target":{"type":"creator","id":"0a227160-0555-457e-b5ca-ae49925c888d","preview":"Jitu Raut","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29402/dp_jitu-F5EnDD6fBaxBZpbvQ8CXo9sE8JEVs8.png","slug":"jitu-raut","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T16:53:06.809Z","latestAt":"2026-09-22T16:53:06.809Z"},{"id":"01a0ca09-0c24-745e-a3b2-76e7d8d51325","type":"creator.followed","target":{"type":"creator","id":"7acc44a9-1d04-435f-ab18-0fbac19933de","preview":"Sk Shohid Hossain","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/39568/avatar-y2O54tlJu2wcObqEIIAmtBf3bjiCrA.jpg","slug":"sk-shohid-hossain","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T16:53:05.660Z","latestAt":"2026-09-22T16:53:05.660Z"},{"id":"01a0ca09-02d9-72ae-984e-4a0a8403a03a","type":"creator.followed","target":{"type":"creator","id":"e3080ee1-6ff1-44e3-b859-2fc860699540","preview":"Kauan Boaro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e3080ee1-6ff1-44e3-b859-2fc860699540/59ts4crb","slug":"kauan-boaro","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T16:53:03.312Z","latestAt":"2026-09-22T16:53:03.312Z"},{"id":"01a0ca08-64e2-767f-8260-94da20a19fdb","type":"component.created","target":{"type":"component","id":"rXwzf7GExybgRfRCxemx","preview":"Aurora Mesh Gradient","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0ca06-cc75-7009-b4d3-719c91b06869.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-22T16:52:22.882Z","latestAt":"2026-09-22T16:52:22.882Z"},{"id":"01a0c9af-25c6-71ac-a4b1-0ac9bda7e87e","type":"creator.followed","target":{"type":"creator","id":"19e52f00-4000-423b-9239-e1dad0d03a9a","preview":"Polify","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/254649/avatar-tMxSD9th8hCuZ2BskId2eCxjTtO2re.jpg","slug":"polify","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T15:14:54.015Z","latestAt":"2026-09-22T15:14:54.015Z"},{"id":"01a0c9af-1cd7-70f5-83b9-a5a46b3674cc","type":"creator.followed","target":{"type":"creator","id":"24f1ab18-910f-4e74-8f01-d57a44b29b88","preview":"Pro Digitala Design Uppsala","previewJson":null,"thumbnail":null,"slug":"sreehas-sreejith","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T15:14:51.730Z","latestAt":"2026-09-22T15:14:51.730Z"},{"id":"01a0c9af-1923-707e-bb1e-8c4b58d2cea9","type":"creator.followed","target":{"type":"creator","id":"af7d4951-e313-4a02-989a-ee7ca7e93e3a","preview":"gustavwf","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/af7d4951-e313-4a02-989a-ee7ca7e93e3a/z5f254vt","slug":"gustavwf","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T15:14:50.782Z","latestAt":"2026-09-22T15:14:50.782Z"},{"id":"01a0c9af-10e1-712b-9b97-8b7d75e58a79","type":"creator.followed","target":{"type":"creator","id":"2e48b48d-d49b-40d8-8f8e-3f936cbc71b4","preview":"Satureight","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/134850/avatar-KI5GUyR1ExA4SzmvC3WXzMDuPCKj1N.jpg","slug":"satureight","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T15:14:48.663Z","latestAt":"2026-09-22T15:14:48.663Z"},{"id":"01a0c9af-0bff-76be-aed3-9955e6779aa7","type":"creator.followed","target":{"type":"creator","id":"d7fd131a-5132-40fa-9286-7a1330c5adae","preview":"Ebb Scandinavia","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/198848/avatar-oHyyw65cA3fVTYGVeu4pNiohpSXIkw.jpg","slug":"ebb-scandinavia","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","slug":"sparkstudio0","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T15:14:47.412Z","latestAt":"2026-09-22T15:14:47.412Z"}],"pagination":{"next":"MjAyNi0wOS0yMlQxNToxNDo0Ny40MTJafDAxYTBjOWFmLTBiZmYtNzZiZS1hZWQzLTk5NTVlNjc3OWFhNw","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":"01a0cf3a-b81c-77a3-828d-586a4eecc59e","title":null,"body":"

Most "3D tilt card" components on the market are dead on mobile. Yeah, really.

They only listen to your mouse position, so the second you open the site on your phone — which is most of your traffic — the tilt effect just... doesn't happen.

So I built one that actually works everywhere: Gyro Tilt Card, free on the Framer Marketplace.

→ Desktop: smooth, spring-based mouse tilt → Mobile: real device-orientation tilt, with proper iOS permission handling done right → No mouse, no gyro? A gentle idle-sway animation keeps it alive instead of going flat → A rotating border-beam plays while idle and fades out the instant you engage it

It's a wrapper, not a fixed layout — drop in any card, image, or component and it just tilts.

Free, link in comments. Try it on your phone, not just your laptop — that's the whole point.

\\#framer #webdesign #uidesign #interactiondesign #mobiledesign

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most \"3D tilt card\" components on the market are dead on mobile. Yeah, really."}]},{"type":"paragraph","content":[{"type":"text","text":"They only listen to your mouse position, so the second you open the site on your phone — which is most of your traffic — the tilt effect just... doesn't happen."}]},{"type":"paragraph","content":[{"type":"text","text":"So I built one that actually works everywhere: Gyro Tilt Card, free on the Framer Marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"→ Desktop: smooth, spring-based mouse tilt → Mobile: real device-orientation tilt, with proper iOS permission handling done right → No mouse, no gyro? A gentle idle-sway animation keeps it alive instead of going flat → A rotating border-beam plays while idle and fades out the instant you engage it"}]},{"type":"paragraph","content":[{"type":"text","text":"It's a wrapper, not a fixed layout — drop in any card, image, or component and it just tilts."}]},{"type":"paragraph","content":[{"type":"text","text":"Free, link in comments. Try it on your phone, not just your laptop — that's the whole point."}]},{"type":"paragraph","content":[{"type":"text","text":"\\#framer #webdesign #uidesign #interactiondesign #mobiledesign"}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"6S7eLvIUgf1GRf5RJnFW","resolved":true,"title":"Gyro Tilt Card","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most \"3D tilt card\" components only respond to the mouse — which means the entire effect is dead on mobile, where most site traffic actually is. Gyro Tilt Card fixes that: it's a generic wrapper you drop any content into (an image, a product card, a testimonial, a feature card), and it tilts in 3D using whatever input the visitor's device actually has."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Desktop:","marks":[{"type":"bold"}]},{"type":"text","text":" cursor-position tilt, spring-smoothed so it settles instead of snapping."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Mobile/tablet:","marks":[{"type":"bold"}]},{"type":"text","text":" live device-orientation (gyroscope) tilt, with correct portrait/landscape axis remapping."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"iOS 13+:","marks":[{"type":"bold"}]},{"type":"text","text":" requests motion permission properly, from a real tap, only when required — the prompt appears automatically and disappears once granted."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Android & other browsers:","marks":[{"type":"bold"}]},{"type":"text","text":" gyro tilt attaches directly, no permission friction."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"No mouse, no usable gyro:","marks":[{"type":"bold"}]},{"type":"text","text":" a gentle ambient idle-sway animation keeps the card alive instead of sitting flat and looking broken."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Idle border-beam:","marks":[{"type":"bold"}]},{"type":"text","text":" a rotating gradient light traces the card's edge while idle — a current, high-end visual cue — and cross-fades out the instant a mouse hovers, handing off to a cursor-tracking glare + dynamic shadow."}]},{"type":"paragraph","content":[{"type":"text","text":"## How to Use","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. In Framer, create a new "},{"type":"text","text":"Code Component","marks":[{"type":"bold"}]},{"type":"text","text":" and paste in the component file."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Drag it onto the canvas and resize it to fit your card or image."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Open the "},{"type":"text","text":"Properties panel","marks":[{"type":"bold"}]},{"type":"text","text":" and set "},{"type":"text","text":"Content","marks":[{"type":"bold"}]},{"type":"text","text":" to the layer you want tilted — an image, a card frame, a testimonial, anything."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Adjust "},{"type":"text","text":"Max Tilt","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Perspective","marks":[{"type":"bold"}]},{"type":"text","text":" to control how dramatic the 3D effect feels."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Toggle "},{"type":"text","text":"Glare","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Dynamic Shadow","marks":[{"type":"bold"}]},{"type":"text","text":" on or off, and tune their intensity."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Leave "},{"type":"text","text":"Idle Sway Fallback","marks":[{"type":"bold"}]},{"type":"text","text":" on so the card never looks fully static on unsupported devices."}]},{"type":"paragraph","content":[{"type":"text","text":"7. Style the "},{"type":"text","text":"Idle Beam","marks":[{"type":"bold"}]},{"type":"text","text":": toggle it on/off, set start/end colors, width, rotation speed, and whether it breathes (subtle scale pulse)."}]},{"type":"paragraph","content":[{"type":"text","text":"8. Test in "},{"type":"text","text":"Preview","marks":[{"type":"bold"}]},{"type":"text","text":" on an actual phone — the gyroscope path and the iOS permission prompt only appear on a real device, not in the Framer Canvas or desktop preview."}]}]},"introduction":"the 3D tilt effect.","slug":"gyro-tilt-card","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0cf38-d61d-7174-9606-926a3730ab47.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-23T17:05:26.489Z","updatedAt":"2026-09-24T15:47:03.551Z","publishedAt":"2026-09-23T17:05:26.483Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://strategic-topic-037116.framer.app/","price":"3","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/f8ea52bf-cd73-4d07-9115-f74e1d4f98c2","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"heedy0Pj7lMd6VE1xZFm","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-23T17:05:27.069Z","updatedAt":"2026-09-23T17:05:27.069Z"},{"id":"01a0cf23-c81e-7478-b836-9e89c7c74dfa","title":null,"body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just shipped a free Framer component: Project Hover List."}]},{"type":"paragraph","content":[{"type":"text","text":"It's the case-study-index interaction you've seen on every high-end agency site — hover a project, and a preview image floats next to your cursor and follows it around. Move fast between rows and the image tilts slightly, just like the real thing."}]},{"type":"paragraph","content":[{"type":"text","text":"A few details I cared about while building it:"}]},{"type":"paragraph","content":[{"type":"text","text":"→ Spring-smoothed cursor tracking, not raw mouse coordinates → Velocity-based tilt on the preview image → Fully responsive — on mobile it automatically switches to inline thumbnails instead of trying to \"float\" an image with no cursor → Respects reduced-motion and renders clean on the Framer Canvas"}]},{"type":"paragraph","content":[{"type":"text","text":"It's free on the Framer Marketplace — link in comments. Drop your site below if you use it, I'd love to see it in the wild."}]},{"type":"paragraph","content":[{"type":"text","text":"## How to Use","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. In Framer, create a new "},{"type":"text","text":"Code Component","marks":[{"type":"bold"}]},{"type":"text","text":" and paste in the component file."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Drag it onto the canvas inside a frame with enough height for your list (roughly 90px per row)."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Open the "},{"type":"text","text":"Properties panel","marks":[{"type":"bold"}]},{"type":"text","text":" and edit the "},{"type":"text","text":"Projects","marks":[{"type":"bold"}]},{"type":"text","text":" array — add a title, category, image, and link for each row."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Set "},{"type":"text","text":"Font","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Accent","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Divider","marks":[{"type":"bold"}]},{"type":"text","text":" colors to match your site's design system."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Adjust "},{"type":"text","text":"Preview W / Preview H","marks":[{"type":"bold"}]},{"type":"text","text":" to size the floating image, and "},{"type":"text","text":"Radius","marks":[{"type":"bold"}]},{"type":"text","text":" for corner rounding."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Leave "},{"type":"text","text":"Compact Below","marks":[{"type":"bold"}]},{"type":"text","text":" at 680px, or raise/lower it depending on where your layout should switch to the mobile thumbnail view."}]},{"type":"paragraph","content":[{"type":"text","text":"7. Test in "},{"type":"text","text":"Preview","marks":[{"type":"bold"}]},{"type":"text","text":" (not Canvas) — the cursor-follow effect only runs in Preview and on the live site."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"\\#framer #webdesign #uidesign #interactiondesign #nocode"}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"5e5U5shLoZ3r41FCsovt","resolved":true,"title":"Project Hover List","body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Project Hover List recreates the classic agency case-study index interaction — the numbered project list where a preview image follows your cursor — as a fully data-driven Framer code component, not a static demo."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Hovering a row floats a live image preview next to the cursor, spring-smoothed so it settles instead of snapping."}]},{"type":"paragraph","content":[{"type":"text","text":"- Fast cursor movement adds a subtle velocity-based skew to the preview, the same micro-detail used on high-end portfolio sites."}]},{"type":"paragraph","content":[{"type":"text","text":"- Non-hovered rows dim to create focus, and each row draws its own underline on hover."}]},{"type":"paragraph","content":[{"type":"text","text":"- Images crossfade when moving quickly between rows instead of flashing."}]},{"type":"paragraph","content":[{"type":"text","text":"- On mobile or any touch device, the cursor-follow preview is replaced with a clean inline thumbnail per row — detected automatically via container width and pointer type, no manual toggle needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":" and renders a clean static frame on the Framer Canvas and in exports."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully editable via Property Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" project list (title, category, image, link per row), font, text/accent/divider colors, preview image size, corner radius, and the mobile breakpoint."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"## How to Use","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. In Framer, create a new "},{"type":"text","text":"Code Component","marks":[{"type":"bold"}]},{"type":"text","text":" and paste in the component file."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Drag it onto the canvas inside a frame with enough height for your list (roughly 90px per row)."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Open the "},{"type":"text","text":"Properties panel","marks":[{"type":"bold"}]},{"type":"text","text":" and edit the "},{"type":"text","text":"Projects","marks":[{"type":"bold"}]},{"type":"text","text":" array — add a title, category, image, and link for each row."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Set "},{"type":"text","text":"Font","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Accent","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Divider","marks":[{"type":"bold"}]},{"type":"text","text":" colors to match your site's design system."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Adjust "},{"type":"text","text":"Preview W / Preview H","marks":[{"type":"bold"}]},{"type":"text","text":" to size the floating image, and "},{"type":"text","text":"Radius","marks":[{"type":"bold"}]},{"type":"text","text":" for corner rounding."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Leave "},{"type":"text","text":"Compact Below","marks":[{"type":"bold"}]},{"type":"text","text":" at 680px, or raise/lower it depending on where your layout should switch to the mobile thumbnail view."}]},{"type":"paragraph","content":[{"type":"text","text":"7. Test in "},{"type":"text","text":"Preview","marks":[{"type":"bold"}]},{"type":"text","text":" (not Canvas) — the cursor-follow effect only runs in Preview and on the live site."}]}]},"introduction":"Every row,a reveal.Hover a project","slug":"project-hover-list","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0cf22-ed81-732e-b274-e1ea6af22174.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-23T16:40:23.239Z","updatedAt":"2026-09-23T16:40:23.239Z","publishedAt":"2026-09-23T16:40:23.227Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactive-code-636008.framer.app/","price":"1","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/8971ec1e-cbad-413f-8ef8-744504a7c8dc","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"YOtO8mXWw0i3XePSM9SG","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-23T16:40:23.839Z","updatedAt":"2026-09-23T16:40:23.839Z"},{"id":"01a0ca08-62ce-769f-8326-cdf41b3f2fdf","title":null,"body":"

Meet the new Gradient Theme Switcher ✨

A flexible Framer component with 6 beautifully crafted themes + 1 fully customizable theme.

Choose from:

🌌 Aurora 🌅 Sunset 🌊 Ocean 🍬 Candy 🔥 Lava 🖤 Mono 🎨 Custom — create your own look

Built for designers and creators who want to add a polished visual theme system without starting from scratch.

Fully customizable. Easy to use. Ready for Framer.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Meet the new Gradient Theme Switcher ✨","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A flexible Framer component with "},{"type":"text","text":"6 beautifully crafted themes + 1 fully customizable theme","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from:"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"milky_way","emoji":"🌌"}},{"type":"text","text":" Aurora "},{"type":"emoji","attrs":{"name":"sunrise","emoji":"🌅"}},{"type":"text","text":" Sunset "},{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" Ocean "},{"type":"emoji","attrs":{"name":"candy","emoji":"🍬"}},{"type":"text","text":" Candy "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}},{"type":"text","text":" Lava "},{"type":"emoji","attrs":{"name":"black_heart","emoji":"🖤"}},{"type":"text","text":" Mono "},{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Custom — create your own look"}]},{"type":"paragraph","content":[{"type":"text","text":"Built for designers and creators who want to add a polished visual theme system without starting from scratch."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable. Easy to use. Ready for Framer.","marks":[{"type":"bold"}]}]}]},"author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rXwzf7GExybgRfRCxemx","resolved":true,"title":"Aurora Mesh Gradient","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Make every hero section feel expensive.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Aurora Mesh Gradient is a real-time WebGL background that flows like light. Soft color fields drift, warp and blend into each other, with deep background voids, subtle film grain and a gentle pull toward the cursor. It's the look behind today's top AI and SaaS landing pages, and you don't need to write any code."}]},{"type":"paragraph","content":[{"type":"text","text":"Drag it onto the canvas, pick a preset, and place your headline on top. Done."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- 6 hand-tuned presets: Aurora, Sunset, Ocean, Candy, Lava, Mono"}]},{"type":"paragraph","content":[{"type":"text","text":"- Custom mode with up to 6 colors plus a background color (supports your color styles)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Cursor interaction with adjustable strength and smoothing"}]},{"type":"paragraph","content":[{"type":"text","text":"- Full control over speed, warp, detail, sharpness, voids, grain, saturation and vignette"}]},{"type":"paragraph","content":[{"type":"text","text":"- Seed control: generate a unique layout for every project"}]},{"type":"paragraph","content":[{"type":"text","text":"- Quality slider for great performance on large screens"}]},{"type":"paragraph","content":[{"type":"text","text":"- Animates only while it's on screen, so it's light on battery and CPU"}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects the \"reduced motion\" accessibility setting"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static fallback for thumbnails, exports and browsers without WebGL"}]},{"type":"paragraph","content":[{"type":"text","text":"- Border radius control: works as a full-page background or a rounded card"}]},{"type":"paragraph","content":[{"type":"text","text":"- No external fonts, scripts or links"}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"AI products · SaaS landing pages · Portfolios · Agency sites · Launch pages · Pricing sections · Waitlists · Event pages"}]},{"type":"paragraph","content":[{"type":"text","text":"How to use","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Add the component to your page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Set its size to Fill (or any fixed size)."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Choose a preset or switch to Custom colors."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Put your content on top of it in a Stack or Frame."}]}]},"introduction":"A living, GPU-powered mesh gradien","slug":"aurora-mesh-gradient","author":{"framerUserId":"13538a02-79f2-48b8-b8c3-7e175dfdf1c8","name":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0ca06-cc75-7009-b4d3-719c91b06869.png","metadata":{"tint":{"h":233,"s":75,"l":19},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-22T16:52:21.769Z","updatedAt":"2026-09-24T15:52:01.274Z","publishedAt":"2026-09-22T16:52:21.766Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://outstanding-pizza-897783.framer.app/","price":"3","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/95dd29fb-97a3-4a3b-8c3f-20a6e69c8e02","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"lJh11sVpCSyTvK7vJG0m","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-22T16:52:22.350Z","updatedAt":"2026-09-22T16:52:22.350Z"},{"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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Vhxa0aAVB21lE3EJTOJD","resolved":true,"title":"AI Chat Demo Pro","body":"$58","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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a0d420-5117-70ab-9609-c8ac9bf22c70.png","metadata":{"tint":{"h":240,"s":25,"l":13},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-20T15:31:51.719Z","updatedAt":"2026-09-24T15:55:00.647Z","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":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"FIcSt68MCaDyXqoyZVBA","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-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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"lKn1qJEkwbC6tmb5CRjM","resolved":true,"title":"Draggable Card","body":"$59","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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","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":5,"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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8mKqilhSDkweBDQ7i4ka","resolved":true,"title":"Infinite Mosaic","body":"$5a","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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","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-22T14:06:30.747Z","publishedAt":"2026-09-16T18:06:03.029Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/GallaryMarquee-D7CRq6.js@xc5Ir2wtHAkVKDtOnaOK","previewUrl":"https://comfortable-quail-675281.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"xc5Ir2wtHAkVKDtOnaOK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"UudWipSH57OUFWwMfLDI","resolved":true,"title":"Modern Index Navbar","body":"$5b","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":"Spark Studio0","slug":"sparkstudio0","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/8z4jwal8","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":1,"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":"$L5c"}]