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

Onyx Atelier is a minimalist architecture and design portfolio template crafted for high-end studios, architects, and multidisciplinary design practices. It pairs monolithic typography with tactile, material-first layouts, dark mode aesthetics, and editorial CMS monographs. Built entirely with native Framer components, color styles, and text styles for effortless rebranding without touching code. ## Key Features - Monolithic Editorial Design: Refined dark and tactile aesthetics inspired by architectural monographs - CMS-Driven Projects & Folio: Dedicated project detail pages with casework, drawings, material palettes, and photography layouts - Tactile Interactions: Smooth scroll reveals, dynamic cursor interactions, and responsive gallery carousels - Inquiry & Commission Desk: Structured client onboarding and feasibility questionnaire form - Fully Responsive: Flawlessly engineered across desktop, tablet, and mobile screens - Complete Design System: Easy font, color token, and layout customization ## Ideal For Architecture studios, interior designers, landscape architects, monograph publishers, and luxury design agencies. ## Tags Architecture, Minimalist, Portfolio, Dark Mode, CMS, Editorial, Studio, Monograph, Luxury, Agency

51:T4e1,Onyx Atelier is a minimalist architecture and design portfolio template crafted for high-end studios, architects, and multidisciplinary design practices. It pairs monolithic typography with tactile, material-first layouts, dark mode aesthetics, and editorial CMS monographs. Built entirely with native Framer components, color styles, and text styles for effortless rebranding without touching code. ## Key Features - Monolithic Editorial Design: Refined dark and tactile aesthetics inspired by architectural monographs - CMS-Driven Projects & Folio: Dedicated project detail pages with casework, drawings, material palettes, and photography layouts - Tactile Interactions: Smooth scroll reveals, dynamic cursor interactions, and responsive gallery carousels - Inquiry & Commission Desk: Structured client onboarding and feasibility questionnaire form - Fully Responsive: Flawlessly engineered across desktop, tablet, and mobile screens - Complete Design System: Easy font, color token, and layout customization ## Ideal For Architecture studios, interior designers, landscape architects, monograph publishers, and luxury design agencies. ## Tags Architecture, Minimalist, Portfolio, Dark Mode, CMS, Editorial, Studio, Monograph, Luxury, Agency52:T8b8,

Mavric Estate — Luxury Real Estate Experience

A refined digital experience for modern real estate.

Mavric Estate is a premium real estate website concept designed to make property discovery feel effortless, personal, and sophisticated. Combining cinematic imagery, elegant typography, and immersive layouts, it helps real estate agencies present their properties with confidence while creating a seamless journey from browsing to booking a viewing.

Key Highlights

Editorial-inspired design with premium typography

Immersive property imagery and interactive galleries

Dedicated property listings and detail pages

Buying, selling, and renting service sections

Client testimonials and frequently asked questions

Clear calls to action for viewings and enquiries

Responsive layouts for desktop, tablet, and mobile

Ideal For: Real estate agencies, independent property agents, luxury property brands, and residential developers.

## Easy to use

1. Start with the guide

Open the "Start Here: Template Guide" design page. Eight short cards walk you through the whole site.

2. Rebrand in minutes

Change the colours in Assets > Colors and the fonts in Assets > Text Styles. Buttons, cards, forms, the loader and page transitions follow automatically.

3. Add your listings Open CMS > Properties. Each item becomes a card on the home and Properties pages and gets its own detail page. Do the same for Areas, Agents, Reviews and FAQs.

4. Personalise the loader and hero

In the Main Layout template, select "Site Loader" to change the name, tagline, logo, colours and timing. Turn on "Preview on Canvas" while editing. On the home page, select "Video Reel" to swap in your own videos and poster images.

5. Connect your forms

Select each form (contact, newsletter, viewing request) and choose where submissions go in Send To: email, Google Sheets or a webhook.

6. Update links and publish

Add your social links in the Header (menu) and Footer components, set your domain and publish.

53:T82c,

Mavric Estate is a premium real estate template for local agencies, independent agents and property developers. It pairs calm, editorial design with motion that feels expensive: a branded intro loader, a three-clip video hero, smooth scrolling and page transitions.

Every listing lives in the CMS. Add a home once and it appears on the home page, in the filterable Properties page and on its own detail page, with gallery, key facts, mortgage calculator, agent card and a viewing request form. Areas, agents, reviews and FAQs are CMS-driven too, so the whole site updates from one place.

Built entirely with native Framer layers, components, colour styles and text styles, so it is easy to rebrand without touching code.

## Features

Pages

- Home, Properties, Property detail (CMS), About, Contact, 404

CMS

- Properties: price, beds, baths, size, gallery, features, status, area and agent

- Areas, Agents, Reviews and FAQs collections

- Property pages set their own title, description and share image from the CMS

Motion and interaction

- Branded intro loader with drawn logo mark, progress counter and curtain reveal

- Hero text and header animate in as the loader lifts

- Three-clip video hero reel with progress lines

- Smooth scrolling (Lenis)

- Page transitions between pages

- Pinned horizontal scroll for the Areas section on desktop, swipeable on tablet and phone

- Flip-on-hover property cards, animated buttons and menu reveal

Tools for visitors

- Property filters

- Mortgage calculator on every property page

- Viewing request, contact and newsletter forms

- Click-to-call and email tiles

Quality

- Fully responsive: desktop, tablet and phone

- Colour styles and text styles throughout for fast rebranding

- Keyboard focus outlines and reduced-motion support

- SEO: page titles, descriptions, share image and favicon set

- Built-in "Start Here" template guide on the canvas

54:T5bc,

Most "3D tilt card" components only respond to the mouse — which means the entire effect is dead on mobile. Gyro Tilt Card fixes that: a generic wrapper you drop any content into (image, product card, testimonial), tilting in 3D using whatever input the device has. Features: - Desktop: cursor-position tilt, spring-smoothed. - Mobile/tablet: live gyroscope orientation tilt with portrait/landscape axis remapping. - iOS 13+: requests motion permission on tap when required. - Android & others: direct gyro tilt without friction. - Fallback: gentle ambient idle-sway keeps the card alive without mouse or gyro. - Idle border-beam: rotating gradient light traces the edge, fading on hover into dynamic shadow and cursor-tracking glare. ## How to Use 1. In Framer, create a Code Component and paste the component file. 2. Drag onto canvas and resize to fit your card or image. 3. Open Properties panel and set Content to your target layer. 4. Adjust Max Tilt and Perspective to tune the 3D feel. 5. Toggle Glare and Dynamic Shadow as desired. 6. Toggle Idle Sway Fallback and style the Idle Beam. 7. Test in Preview on a real phone for gyroscope interaction. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

55:T5a7,Most "3D tilt card" components only respond to the mouse — which means the entire effect is dead on mobile. Gyro Tilt Card fixes that: a generic wrapper you drop any content into (image, product card, testimonial), tilting in 3D using whatever input the device has. Features: - Desktop: cursor-position tilt, spring-smoothed. - Mobile/tablet: live gyroscope orientation tilt with portrait/landscape axis remapping. - iOS 13+: requests motion permission on tap when required. - Android & others: direct gyro tilt without friction. - Fallback: gentle ambient idle-sway keeps the card alive without mouse or gyro. - Idle border-beam: rotating gradient light traces the edge, fading on hover into dynamic shadow and cursor-tracking glare. ## How to Use 1. In Framer, create a Code Component and paste the component file. 2. Drag onto canvas and resize to fit your card or image. 3. Open Properties panel and set Content to your target layer. 4. Adjust Max Tilt and Perspective to tune the 3D feel. 5. Toggle Glare and Dynamic Shadow as desired. 6. Toggle Idle Sway Fallback and style the Idle Beam. 7. Test in Preview on a real phone for gyroscope interaction. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!56: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

57:T5fd,

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. What it does: - Hovering a row floats a live image preview next to the cursor, spring-smoothed. - Fast cursor movement adds subtle velocity skew to the preview. - Non-hovered rows dim for focus, and each row draws an underline on hover. - Images crossfade when moving between rows. - On mobile/touch, switches automatically to clean inline thumbnails. - Respects prefers-reduced-motion and renders a clean static canvas frame. Fully editable via Property Controls: project list (title, category, image, link per row), font, colors, preview dimensions, radius, and breakpoint. ## How to Use 1. In Framer, create a Code Component and paste the component file. 2. Drag onto the canvas inside a frame with enough height (~90px per row). 3. Open Properties panel and configure your Projects array. 4. Set Font, Text, Accent, and Divider colors to match your site. 5. Adjust Preview dimensions and Radius for corner rounding. 6. Tune Compact Below breakpoint for mobile view. 7. Test in Preview mode — cursor-follow runs in Preview and live. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

58:T5f6,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. What it does: - Hovering a row floats a live image preview next to the cursor, spring-smoothed. - Fast cursor movement adds subtle velocity skew to the preview. - Non-hovered rows dim for focus, and each row draws an underline on hover. - Images crossfade when moving between rows. - On mobile/touch, switches automatically to clean inline thumbnails. - Respects prefers-reduced-motion and renders a clean static canvas frame. Fully editable via Property Controls: project list (title, category, image, link per row), font, colors, preview dimensions, radius, and breakpoint. ## How to Use 1. In Framer, create a Code Component and paste the component file. 2. Drag onto the canvas inside a frame with enough height (~90px per row). 3. Open Properties panel and configure your Projects array. 4. Set Font, Text, Accent, and Divider colors to match your site. 5. Adjust Preview dimensions and Radius for corner rounding. 6. Tune Compact Below breakpoint for mobile view. 7. Test in Preview mode — cursor-follow runs in Preview and live. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!59:T721,

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. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

5a:T6fc,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. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!5b:T776,

Show your AI product working, without a video. AI Chat Demo Pro plays a scripted conversation by itself. The question types into the input, the assistant reasons 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 today's top AI products. Write the conversation in the properties panel, pick your colours and fonts, and drop your own Framer layers into the answer so the demo showcases your actual product. Why not just a video? - A demo video is 3–15 MB. This is lightweight code, protecting your LCP score. - Mobile autoplay is unreliable; this component always plays smoothly. - Compressed video text is unreadable on phones; this reflows and stays crisp. - Search-engine and screen-reader accessible (real text, not pixels). - Easy updates: editing text takes seconds without re-rendering videos. 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 gradient caret. - Embed native Framer layers: charts, screenshots, cards, components. - Rich text: bold, inline code, bullets, code blocks, images. - Numbered source chips, action row, and user attachment chips. - Three styles: Glass, Solid, Minimal — Dark, Light & custom colours. - Responsive container sizing: fits desktop, tablet, and mobile columns. - Plays when in view, replays on scroll, loops, respects reduced motion. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

5c:T75d,Show your AI product working, without a video. AI Chat Demo Pro plays a scripted conversation by itself. The question types into the input, the assistant reasons 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 today's top AI products. Write the conversation in the properties panel, pick your colours and fonts, and drop your own Framer layers into the answer so the demo showcases your actual product. Why not just a video? - A demo video is 3–15 MB. This is lightweight code, protecting your LCP score. - Mobile autoplay is unreliable; this component always plays smoothly. - Compressed video text is unreadable on phones; this reflows and stays crisp. - Search-engine and screen-reader accessible (real text, not pixels). - Easy updates: editing text takes seconds without re-rendering videos. 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 gradient caret. - Embed native Framer layers: charts, screenshots, cards, components. - Rich text: bold, inline code, bullets, code blocks, images. - Numbered source chips, action row, and user attachment chips. - Three styles: Glass, Solid, Minimal — Dark, Light & custom colours. - Responsive container sizing: fits desktop, tablet, and mobile columns. - Plays when in view, replays on scroll, loops, respects reduced motion. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!5d:T7b2,

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). --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

5e:T7ab,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). --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!5f:T5c4,

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, Infinite Mosaic 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. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

60:T5ad,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, Infinite Mosaic 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. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!61:T5fa,

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 expands 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 code. Best for: Portfolio websites, creative studios, agencies, SaaS websites, and modern editorial landing pages. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!

62:T5e7,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 expands 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 code. Best for: Portfolio websites, creative studios, agencies, SaaS websites, and modern editorial landing pages. --- ### ⚡ Created by [Spark Studio0](https://www.framer.com/@sparkstudio0/) Explore our full collection of interactive Framer UI components and luxury website templates at [framer.com/@sparkstudio0](https://www.framer.com/@sparkstudio0/). Follow our profile for weekly free UI drops!4e:["$","$L4f",null,{"value":{"fallback":{"$inf$activity-creator-13538a02-79f2-48b8-b8c3-7e175dfdf1c8-all:/unified/creator/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/activity/":[{"data":[{"id":"01a149f0-81f5-778f-841a-b1c23ce64959","type":"comment.reply","target":{"type":"post","id":"01a14899-3733-776a-ae7a-381092667f87","preview":"Onyx Atelier","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a148a6-22f4-774e-9134-ac9e2d3dbf3d.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a14899-3733-776a-ae7a-381092667f87","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a149f0-81db-77bc-a780-f28efbce6ca7","preview":"@Khusanjon Jurabaev Thanks for the kind words! Glad the monograph style is hitting the mark.\nMixing drawings and photos is highly recommended for architecture—it bridges the gap between the art of the design and the reality of the built space. Just make sure your drawings match the clean aesthetic of the photos.\nSend over a link or a preview. I'm always curious to see what other creators are working on.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"mention","attrs":{"id":"4499ef1c-4b1c-4064-996e-a272314019b4","slug":"astrodsgnr","label":"Khusanjon Jurabaev","mentionSuggestionChar":"@"}},{"type":"text","text":" Thanks for the kind words! Glad the monograph style is hitting the mark."}]},{"type":"paragraph","content":[{"type":"text","text":"Mixing drawings and photos is highly recommended for architecture—it bridges the gap between the art of the design and the reality of the built space. Just make sure your drawings match the clean aesthetic of the photos."}]},{"type":"paragraph","content":[{"type":"text","text":"Send over a link or a preview. I'm always curious to see what other creators are working on."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a14899-3733-776a-ae7a-381092667f87","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a14980-71df-7044-bfac-83ab1b233385"},"repost":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-17T12:57:41.109Z","latestAt":"2026-10-17T12:57:41.109Z"},{"id":"01a14899-3949-75c0-ac32-a6cccf7fc825","type":"template.created","target":{"type":"template","id":"76137","preview":"Onyx Atelier","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a148a6-22f4-774e-9134-ac9e2d3dbf3d.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":"template","visibility":"public","startedAt":"2026-10-17T06:42:43.656Z","latestAt":"2026-10-17T06:42:43.656Z"},{"id":"01a1363a-edca-75d8-8d74-d1130deb226f","type":"template.created","target":{"type":"template","id":"75762","preview":"Mavric Estate","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a13635-053d-76ac-b81a-213a0ff55cf1.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":"template","visibility":"public","startedAt":"2026-10-13T17:06:34.058Z","latestAt":"2026-10-13T17:06:34.058Z"},{"id":"01a11c85-269e-771b-826e-958ede8bfd6f","type":"creator.followed","target":{"type":"creator","id":"a95fda04-e4bb-488b-91f8-34e3a1f52287","preview":"ValleyDev","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a95fda04-e4bb-488b-91f8-34e3a1f52287/7h6nu0d1","slug":"valleydev-h0whfd","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-08T17:17:30.639Z","latestAt":"2026-10-08T17:17:30.639Z"},{"id":"01a11c85-253b-740f-89c9-0314cdbb9119","type":"creator.followed","target":{"type":"creator","id":"a1e0c773-d1ab-4dc1-86de-645157218a97","preview":"BuiltByKern","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/vd6q2r4n","slug":"builtbykern","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-08T17:17:30.293Z","latestAt":"2026-10-08T17:17:30.293Z"},{"id":"01a11c85-1e22-75b1-a16d-107421ef82be","type":"creator.followed","target":{"type":"creator","id":"2973a41a-d1cc-4698-8dd5-4249b3e9fcb5","preview":"JQN","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2973a41a-d1cc-4698-8dd5-4249b3e9fcb5/5987io1d","slug":"jqnweb","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-08T17:17:28.479Z","latestAt":"2026-10-08T17:17:28.479Z"},{"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/bbfkoyc4","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"}],"pagination":{"next":"MjAyNi0wOS0yMlQxNjo1MzowMy4zMTJafDAxYTBjYTA5LTAyZDktNzJhZS05ODRlLTRhMGE4NDAzYTAzYQ","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":"01a14899-3733-776a-ae7a-381092667f87","title":null,"body":"

Introducing Onyx Atelier — Architecture in shadow and stone. A minimalist architecture and design portfolio template crafted for studios, architects, and multidisciplinary practices. Built with tactile editorial layouts, dark mode monograph aesthetics, and seamless CMS project casework. Live preview: https://active-strengthening-218427.framer.app/ #framer #architecture #design #portfolio #templates

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing Onyx Atelier — Architecture in shadow and stone. A minimalist architecture and design portfolio template crafted for studios, architects, and multidisciplinary practices. Built with tactile editorial layouts, dark mode monograph aesthetics, and seamless CMS project casework. Live preview: https://active-strengthening-218427.framer.app/ #framer #architecture #design #portfolio #templates"}]}]},"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":"76137","resolved":true,"title":"Onyx Atelier","body":"$50","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$51"}]}]},"introduction":"Architecture in shadow and stone","slug":"onyx-atelier","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/01a148a6-22f4-774e-9134-ac9e2d3dbf3d.png","metadata":{"tint":{"h":30,"s":27,"l":27},"width":1536,"height":1024}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a148a6-2323-7595-8b95-b54b5c0d12ec.png","metadata":{"tint":{"h":30,"s":41,"l":55},"width":1024,"height":1536}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a148a6-22e5-76bc-871a-e42b20b32e47.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1122,"height":1402}}],"post":null,"createdAt":"2026-10-17T06:42:42.545Z","updatedAt":"2026-10-18T12:56:25.098Z","publishedAt":"2026-10-17T06:42:42.542Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"79","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/f22889c0-30a4-45d5-87c0-730fb44cc172","remixUrl":null,"previewUrl":"https://active-strengthening-218427.framer.app/","categories":[],"styles":[{"id":109,"name":"Modern","slug":"modern"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":187,"name":"Architecture","slug":"architecture"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-17T06:42:43.123Z","updatedAt":"2026-10-17T06:42:43.123Z","type":"post"},{"id":"01a1363a-eb97-7719-979c-e67174abec7f","title":null,"body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mavric Estate — Luxury Real Estate Experience"}]},{"type":"paragraph","content":[{"type":"text","text":"A refined digital experience for modern real estate.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Mavric Estate is a premium real estate website concept designed to make property discovery feel effortless, personal, and sophisticated. Combining cinematic imagery, elegant typography, and immersive layouts, it helps real estate agencies present their properties with confidence while creating a seamless journey from browsing to booking a viewing."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Highlights","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Editorial-inspired design with premium typography"}]},{"type":"paragraph","content":[{"type":"text","text":"Immersive property imagery and interactive galleries"}]},{"type":"paragraph","content":[{"type":"text","text":"Dedicated property listings and detail pages"}]},{"type":"paragraph","content":[{"type":"text","text":"Buying, selling, and renting service sections"}]},{"type":"paragraph","content":[{"type":"text","text":"Client testimonials and frequently asked questions"}]},{"type":"paragraph","content":[{"type":"text","text":"Clear calls to action for viewings and enquiries"}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive layouts for desktop, tablet, and mobile"}]},{"type":"paragraph","content":[{"type":"text","text":"Ideal For:","marks":[{"type":"bold"}]},{"type":"text","text":" Real estate agencies, independent property agents, luxury property brands, and residential developers."}]},{"type":"paragraph","content":[{"type":"text","text":"## Easy to use","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Start with the guide"}]},{"type":"paragraph","content":[{"type":"text","text":"Open the \"Start Here: Template Guide\" design page. Eight short cards walk you through the whole site."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Rebrand in minutes"}]},{"type":"paragraph","content":[{"type":"text","text":"Change the colours in Assets > Colors and the fonts in Assets > Text Styles. Buttons, cards, forms, the loader and page transitions follow automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Add your listings Open CMS > Properties. Each item becomes a card on the home and Properties pages and gets its own detail page. Do the same for Areas, Agents, Reviews and FAQs."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Personalise the loader and hero"}]},{"type":"paragraph","content":[{"type":"text","text":"In the Main Layout template, select \"Site Loader\" to change the name, tagline, logo, colours and timing. Turn on \"Preview on Canvas\" while editing. On the home page, select \"Video Reel\" to swap in your own videos and poster images."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Connect your forms"}]},{"type":"paragraph","content":[{"type":"text","text":"Select each form (contact, newsletter, viewing request) and choose where submissions go in Send To: email, Google Sheets or a webhook."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Update links and publish"}]},{"type":"paragraph","content":[{"type":"text","text":"Add your social links in the Header (menu) and Footer components, set your domain and publish."}]}]},"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":"75762","resolved":true,"title":"Mavric Estate","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mavric Estate is a premium real estate template for local agencies, independent agents and property developers. It pairs calm, editorial design with motion that feels expensive: a branded intro loader, a three-clip video hero, smooth scrolling and page transitions."}]},{"type":"paragraph","content":[{"type":"text","text":"Every listing lives in the CMS. Add a home once and it appears on the home page, in the filterable Properties page and on its own detail page, with gallery, key facts, mortgage calculator, agent card and a viewing request form. Areas, agents, reviews and FAQs are CMS-driven too, so the whole site updates from one place."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely with native Framer layers, components, colour styles and text styles, so it is easy to rebrand without touching code."}]},{"type":"paragraph","content":[{"type":"text","text":"## Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Home, Properties, Property detail (CMS), About, Contact, 404"}]},{"type":"paragraph","content":[{"type":"text","text":"CMS"}]},{"type":"paragraph","content":[{"type":"text","text":"- Properties: price, beds, baths, size, gallery, features, status, area and agent"}]},{"type":"paragraph","content":[{"type":"text","text":"- Areas, Agents, Reviews and FAQs collections"}]},{"type":"paragraph","content":[{"type":"text","text":"- Property pages set their own title, description and share image from the CMS"}]},{"type":"paragraph","content":[{"type":"text","text":"Motion and interaction"}]},{"type":"paragraph","content":[{"type":"text","text":"- Branded intro loader with drawn logo mark, progress counter and curtain reveal"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hero text and header animate in as the loader lifts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Three-clip video hero reel with progress lines"}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth scrolling (Lenis)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Page transitions between pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Pinned horizontal scroll for the Areas section on desktop, swipeable on tablet and phone"}]},{"type":"paragraph","content":[{"type":"text","text":"- Flip-on-hover property cards, animated buttons and menu reveal"}]},{"type":"paragraph","content":[{"type":"text","text":"Tools for visitors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Property filters"}]},{"type":"paragraph","content":[{"type":"text","text":"- Mortgage calculator on every property page"}]},{"type":"paragraph","content":[{"type":"text","text":"- Viewing request, contact and newsletter forms"}]},{"type":"paragraph","content":[{"type":"text","text":"- Click-to-call and email tiles"}]},{"type":"paragraph","content":[{"type":"text","text":"Quality"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fully responsive: desktop, tablet and phone"}]},{"type":"paragraph","content":[{"type":"text","text":"- Colour styles and text styles throughout for fast rebranding"}]},{"type":"paragraph","content":[{"type":"text","text":"- Keyboard focus outlines and reduced-motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"- SEO: page titles, descriptions, share image and favicon set"}]},{"type":"paragraph","content":[{"type":"text","text":"- Built-in \"Start Here\" template guide on the canvas"}]},{"type":"paragraph"}]},"introduction":"Luxury real estate agency template","slug":"mavric-estate","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/01a13635-053d-76ac-b81a-213a0ff55cf1.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1536,"height":1024}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a13635-1716-75df-9742-7085bc8ab63d.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1536,"height":1024}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/13538a02-79f2-48b8-b8c3-7e175dfdf1c8/01a13636-9eb7-746f-9bcb-609b462266de.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1536,"height":1024}}],"post":null,"createdAt":"2026-10-13T17:06:32.902Z","updatedAt":"2026-10-17T06:20:29.455Z","publishedAt":"2026-10-13T17:06:32.900Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"79","paymentUrl":"https://yashparmar.lemonsqueezy.com/checkout/buy/aaf77205-9810-4ffd-9b12-05cb48912e71","remixUrl":null,"previewUrl":"https://mavric-estate.framer.website/","categories":[],"styles":[{"id":247,"name":"Professional","slug":"professional"},{"id":109,"name":"Modern","slug":"modern"},{"id":110,"name":"Animated","slug":"animated"}],"mainCategory":{"id":25,"name":"Real Estate","slug":"real-estate"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-13T17:06:33.495Z","updatedAt":"2026-10-13T17:06:33.495Z","type":"post"},{"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":"$55"}]}]},"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-10-17T07:02:20.798Z","publishedAt":"2026-09-23T17:05:26.483Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Modern-Tilt-Card-PYvuJ1.js@heedy0Pj7lMd6VE1xZFm","previewUrl":"https://strategic-topic-037116.framer.app/","price":null,"paymentUrl":null,"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","type":"post"},{"id":"01a0cf23-c81e-7478-b836-9e89c7c74dfa","title":null,"body":"$56","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":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$58"}]}]},"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-10-17T07:03:56.827Z","publishedAt":"2026-09-23T16:40:23.227Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ProjectHoverList-h8Fre9.js@YOtO8mXWw0i3XePSM9SG","previewUrl":"https://interactive-code-636008.framer.app/","price":null,"paymentUrl":null,"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","type":"post"},{"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":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$5a"}]}]},"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-10-17T07:05:31.390Z","publishedAt":"2026-09-22T16:52:21.766Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AuroraMeshGradient-ynrv85.js@lJh11sVpCSyTvK7vJG0m","previewUrl":"https://outstanding-pizza-897783.framer.app/","price":null,"paymentUrl":null,"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","type":"post"},{"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":"$5b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$5c"}]}]},"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-10-17T07:08:58.415Z","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","type":"post"},{"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":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$5e"}]}]},"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-10-17T07:07:05.777Z","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","type":"post"},{"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":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$60"}]}]},"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-10-17T07:10:29.370Z","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","type":"post"},{"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":"$61","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$62"}]}]},"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-10-17T07:11:54.722Z","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","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]