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

Help visitors find answers without scrolling through one long FAQ.

SearchableHelpCenter combines categorized questions, two search behaviors, and an accessible accordion system in one responsive Framer component.

Use Filter List to display every matching question as the visitor types, or Jump To to show search suggestions and take visitors directly to a selected answer. Categories appear as a vertical navigation rail on wider layouts and transform into a horizontally scrollable pill row on smaller screens.

Configure the questions, answers, category names, icons, colors, typography, sizing, breakpoints, search labels, and accordion behavior directly from Framer’s properties panel.

Features

Up to six FAQ categories
Up to 24 questions per category
Filter List and Jump To search modes
Search suggestion dropdown
Built-in icon library and custom Framer icons
Single-open or multi-open accordions
Responsive category navigation
Container-based breakpoints
Custom colors and typography
Keyboard navigation and visible focus states
Reduced-motion support
Static Canvas and export rendering
No external dependencies

Great for SaaS products, support pages, customer portals, services, memberships, online platforms, and knowledge bases.

No code required. Everything is controlled directly from the Framer sidebar.

64:T59d,

Turn any image collection into a polished, editorial gallery.

Focus Bento Grid is a responsive bento gallery for Framer that combines flexible image arrangements with a fullscreen light-box. Add your images, choose a layout, select the featured tile, and customize the spacing and presentation directly from the properties panel.

The gallery adapts to its container across desktop, tablet, and mobile while preserving a clear visual hierarchy. Additional images can be represented through an overflow count, allowing the gallery to stay compact without hiding the size of the collection.

Features

Responsive bento gallery layouts
Configurable featured image
Custom image order and quantity
Fullscreen lightbox
Previous and next image navigation
Keyboard-accessible controls
Adjustable spacing and corner radius
Image-fit controls
Optional overflow count
Responsive compact layouts
Reduced-motion support
Static rendering on the Framer Canvas and in exports
No external dependencies

Add Focus Bento Grid to portfolios, travel sites, property pages, event galleries, case studies, and editorial projects.

No code required. Everything is controlled directly from the Framer sidebar.

65:T5f4,

Give visitors a clear way to estimate pricing directly on your Framer site.

PriceLab combines plan selection, seat and usage inputs, monthly or annual billing, included usage, live totals, an itemized cost breakdown, and conversion actions in one responsive component.

Choose whether plans update automatically based on seat thresholds or let visitors select a plan themselves. Configure the tiers, rates, ranges, annual discount, interface copy, currency, locale, colors, typography, CTA link, and quote button directly from Framer’s properties panel.

The component responds to its actual container width, adapts from two columns to a compact mobile layout, supports keyboard controls, respects reduced-motion preferences, and renders safely on the Framer Canvas and during exports.

Features

Automatic or visitor-selected pricing plans
Configurable seat and usage sliders
Optional included usage allowance
Monthly and annual billing
Live subtotal, discount, and final total
Itemized pricing breakdown
Locale-aware currency formatting
Configurable conversion CTA
Copyable plain-text quote summary
Light, dark, and automatic appearance
Responsive compact layout
Accessible keyboard controls
Reduced-motion and static-render support
No external dependencies

66:T508,

SplitFlap brings the rhythm and character of a mechanical departure board to Framer.

Add up to eight messages with four lines each. The board creates one stable grid from your longest message, so its physical footprint stays fixed while individual characters riffle and settle into place.

Use it for schedules, announcements, service updates, event information, launch messages, availability displays, and editorial headlines.

Highlights

Up to 8 message frames
Up to 4 lines and 32 characters per line
On Load, Scroll Into View, Hover / Tap, and Loop triggers
Adjustable flip speed, riffle length, stagger, and hold time
Responsive modules that scale to every breakpoint
Optional decorative blank flaps
Custom flap, character, seam, radius, ratio, gaps, and typography
Letters, numbers, and extended symbols
Reduced-motion support
Fully static on the Canvas and in exports
No dependencies

Setup

Insert SplitFlap, add your messages, choose a trigger, and style the board from the right sidebar. Preview the page to see the mechanical animation.

67:T539,

Light on foil, not a gradient on a card.

HoloCard is a responsive holographic card system for Framer. Its iridescent spectrum and light sweep move against the 3D tilt, creating a more physical foil effect than a simple moving gradient.

Use one of 5 layouts: Ticket, Membership, Gift Card, Event Pass, or Stat. Or switch to Custom Frame and apply the treatment to a Framer design you've already built.

Highlights

• Counter-parallax foil + traveling light sweep • Cursor-tracked 3D tilt + glare • Aurora, Chrome, Sunset, Neon + Custom spectrum • Five responsive layouts + Custom Frame • Both / Hover Only / Idle Only / Off motion modes • Optional card link or tap-to-cycle spectra • Fit-to-Frame responsive sizing • Adaptive title, spacing + decorative barcode • Separate display + etched font controls • Reduced-motion support • Static on the Canvas and in exports • Pauses motion when off-screen • Visible keyboard focus states • Zero dependencies

Setup

Add HoloCard, keep Sizing on Fit to Frame, set the frame width to Fill and height to Fit, then choose a layout and spectrum. Preview to see motion.

Note: the generated barcode is decorative and not scannable.

68:T584,

Drag to reveal the difference.

Reveal is a polished before/after image comparison slider for Framer. Add two images and visitors can drag anywhere across the comparison, swipe on touch, or use the keyboard to explore the difference.

An optional reveal-on-scroll intro demonstrates the comparison automatically when it enters view, with Sweep and Peek styles to choose from.

Built for real responsive sites, Reveal includes aspect-ratio presets, responsive images, image focal-point support, reduced-motion behavior, keyboard accessibility, and full customization from the Framer sidebar.

Highlights

• Drag anywhere, touch + keyboard control • Optional Sweep + Peek reveal-on-scroll intros • 16:9, 4:3, 1:1, 3:4 + Fill Height layouts • Cover + Contain image modes • Custom labels, divider, handle + accent ring • Optional cursor-based hover zoom • Custom caption + typography controls • Responsive-image optimization • Accessible focus states + slider semantics • Reduced-motion support • Responsive label behavior • Zero dependencies

Setup

Add Reveal to your page, upload your Before and After images, choose an aspect ratio, and preview. Everything else can be customized directly from the sidebar.

For best results, use matching Before and After image dimensions and compositions.

69:T5f2,

A polished ⌘K command palette for Framer sites. Let visitors quickly search your site, jump to sections, or open pages and external links, using the keyboard or an optional on-page trigger.

CommandK filters commands as visitors type, prioritizes matches that begin with their search, and organizes results into customizable groups. Every command can scroll to a section or open a Framer page, anchor, or supported URL.

Highlights:

• Open with ⌘K, Ctrl+K, or the optional trigger • Live search with prefix-priority matching • Section scrolling and page or external links • Custom command groups and shortcut hints • Built-in icons, uploaded image icons, or text-only mode • Five presets: Paper, Carbon, Adaptive, Sharp, and Midnight Glass • Custom colors, glass, blur, radius, typography, width, and height • Light, dark, and system-adaptive appearance • Open/closed Canvas Preview for easier setup • Responsive behavior for desktop, tablet, and mobile • Keyboard navigation, focus management, ARIA support, and reduced motion • Static-render safeguards for Framer previews and thumbnails

Setup is handled directly in the Framer sidebar. Add your commands, choose Scroll or Page for each item, connect the destination, and customize the appearance.

Custom icon tip: For the sharpest uploaded icons, use an SVG image asset or export a transparent PNG at 4× its intended display size. For example: 96×96 px for a 24 px icon.

6a:T7f6,

A floating pill navbar that highlights the section currently in view. It combines smooth scrolling, an animated active pill, glass styling, and full sidebar customization with section and page-link items in one navbar.

Built for real sites, its scrollspy supports smooth-scroll libraries and custom scroll containers. It also includes keyboard focus states, reduced-motion support, aria-current, and responsive behavior across desktop, tablet, and scrollable mobile layouts.

HIGHLIGHTS: Animated sliding pill, smooth scroll, and robust scrollspy • Section links and page links in one navbar • Sidebar controls for colors, glass, shadow, spacing, type, and behavior • 5 included style presets • Accessible focus states and reduced-motion support • Fixed or in-frame positioning

SETUP

Add the component to your page.
Give each Framer section an ID, such as home, about, or projects.
In Nav Items, add a matching Label and Section ID. IDs are case-sensitive and should not include #.
For another page, change the item Type to Page and select its destination.
Preview or publish to test scrolling and navigation; the canvas displays a static preview.

CUSTOMIZATION

Adjust background, pill, border, text states, glass blur, shadow, radius, padding, gap, top offset, typography, animation, position, and z-index directly from Framer’s sidebar.

QUICK FIXES

• Pill not moving: confirm that every Section ID exactly matches its frame ID. • Wrong scroll position: increase Top Offset. • Hidden navbar: raise Z-Index. • Glass not visible: lower the Background color’s opacity. • Final section not activating: give short sections a minimum height of about 60vh. • Link back to a homepage section with an anchor path such as /#projects.

Setup takes about two minutes: add IDs, match them in the sidebar, and publish.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-f6a55acb-741a-4373-a380-51af416db788-all:/unified/creator/f6a55acb-741a-4373-a380-51af416db788/activity/":[{"data":[{"id":"01a09167-a508-7504-a1f6-563ab5c75153","type":"creator.followed","target":{"type":"creator","id":"2179b778-b2d7-4c1e-ab27-60e7e12a6593","preview":"felix strobel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2179b778-b2d7-4c1e-ab27-60e7e12a6593/8gv1pj67","slug":"fs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-11T16:58:03.906Z","latestAt":"2026-09-11T16:58:03.906Z"},{"id":"01a08cbb-c78b-7383-821c-0510ef409af8","type":"creator.followed","target":{"type":"creator","id":"b39f8558-4154-4f1e-99f0-9362556724d1","preview":"Adam Zaky","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b39f8558-4154-4f1e-99f0-9362556724d1/m6vmj49g","slug":"adam-zaky","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-10T19:11:51.683Z","latestAt":"2026-09-10T19:11:51.683Z"},{"id":"01a05eeb-153b-76e8-8a6f-9629fb40891a","type":"creator.followed","target":{"type":"creator","id":"001f5b33-6097-4b89-9746-eafbbc58ab0c","preview":"Omer Mirza","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/001f5b33-6097-4b89-9746-eafbbc58ab0c/lzhswod7","slug":"omermirza","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T21:40:59.812Z","latestAt":"2026-09-01T21:40:59.812Z"},{"id":"01a05e42-057c-716c-94eb-4923a85fecca","type":"creator.followed","target":{"type":"creator","id":"f786a7f3-e511-414a-9de6-9ea10150315e","preview":"Anthony Joe","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f786a7f3-e511-414a-9de6-9ea10150315e/yjietiwx","slug":"tony-spark","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:20.214Z","latestAt":"2026-09-01T18:36:20.214Z"},{"id":"01a05e42-0410-73d6-a213-e15bb54d9aa7","type":"creator.followed","target":{"type":"creator","id":"478edf74-419e-4b8e-9851-bd3fd9674c66","preview":"Mahfuzur Rahman","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/478edf74-419e-4b8e-9851-bd3fd9674c66/gyp6z48l","slug":"mahfuzuruiux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:19.841Z","latestAt":"2026-09-01T18:36:19.841Z"},{"id":"01a05e41-f3d6-73b2-8590-dabebdc5174a","type":"creator.followed","target":{"type":"creator","id":"09bc3e24-752b-4a1b-97c2-ab8d755f63b8","preview":"Tauhid Hasan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09bc3e24-752b-4a1b-97c2-ab8d755f63b8/4taurhlo","slug":"tauhiduiux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:15.698Z","latestAt":"2026-09-01T18:36:15.698Z"},{"id":"01a05e41-efd8-7291-8aab-b928cc14ddcb","type":"creator.followed","target":{"type":"creator","id":"25e18b35-a1bf-4813-91a0-bf332cd05970","preview":"Designbox","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/25e18b35-a1bf-4813-91a0-bf332cd05970/fyh4kag6","slug":"thegeneralyst","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:14.663Z","latestAt":"2026-09-01T18:36:14.663Z"},{"id":"01a05e41-e90a-77bc-a3b9-4200562a0f37","type":"creator.followed","target":{"type":"creator","id":"21f8da80-d520-4b8d-a91b-11af4d55c8d7","preview":"Dave Omeiza","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21f8da80-d520-4b8d-a91b-11af4d55c8d7/fzbtkuod","slug":"daveomeizaozi","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:12.931Z","latestAt":"2026-09-01T18:36:12.931Z"},{"id":"01a05e41-e567-76b7-bc3b-cba299bf6148","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":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:11.994Z","latestAt":"2026-09-01T18:36:11.994Z"},{"id":"01a05e41-e0cf-7679-9432-14d49793069f","type":"creator.followed","target":{"type":"creator","id":"e3fd58f1-6d27-4c7f-8c46-a532074a0a97","preview":"Simona Meleca","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/350430/avatar-rdWH5VGVYv9DWxV2tTXr0hIo1rRm3L.jpg","slug":"simona-meleca","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:10.824Z","latestAt":"2026-09-01T18:36:10.824Z"},{"id":"01a05e41-dac7-707b-967d-ed27eafbb3ab","type":"creator.followed","target":{"type":"creator","id":"0ac7e3f3-07ae-4002-b2e2-3b74e0c883d5","preview":"Vestiaire Collective","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0ac7e3f3-07ae-4002-b2e2-3b74e0c883d5/ld74zxwm","slug":"vestiaire-collective","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-01T18:36:09.283Z","latestAt":"2026-09-01T18:36:09.283Z"},{"id":"01a025d4-af4d-7022-bd14-425adf506604","type":"comment.reply","target":{"type":"post","id":"01a02260-423f-77cc-879f-d4effc57b798","preview":"SearchableHelpCenter","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a0225f-aff5-710d-83f3-e43618802b0d.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a02260-423f-77cc-879f-d4effc57b798","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a025d4-af24-7018-aaef-188055796bf0","preview":"Thank you!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you! "}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a02260-423f-77cc-879f-d4effc57b798","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0228c-8671-720d-910e-e47577b41033"},"repost":null}},"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-21T19:38:10.637Z","latestAt":"2026-08-21T19:38:10.637Z"},{"id":"01a025d4-8ffd-71cf-ba5a-95576810c197","type":"comment.liked","target":{"type":"comment","id":"01a0228c-8671-720d-910e-e47577b41033","preview":"So good!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"So good!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a02260-423f-77cc-879f-d4effc57b798","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0228c-8671-720d-910e-e47577b41033"},"repost":null}},"context":{"type":"post","id":"01a02260-423f-77cc-879f-d4effc57b798","preview":"SearchableHelpCenter","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a0225f-aff5-710d-83f3-e43618802b0d.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a02260-423f-77cc-879f-d4effc57b798","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-21T19:38:02.616Z","latestAt":"2026-08-21T19:38:02.616Z"},{"id":"01a02263-0502-7276-b40b-a99ab91909ba","type":"creator.followed","target":{"type":"creator","id":"e0222182-3d74-4d56-b2d9-eba289a28fa5","preview":"Andres","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e0222182-3d74-4d56-b2d9-eba289a28fa5/ubt5ticx","slug":"andres-jimmy","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-21T03:35:09.822Z","latestAt":"2026-08-21T03:35:09.822Z"},{"id":"01a02260-4541-756f-bc4b-007a587402ab","type":"component.created","target":{"type":"component","id":"hL6cqe80IUwLZglxUQ9u","preview":"SearchableHelpCenter","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a0225f-aff5-710d-83f3-e43618802b0d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-21T03:32:09.665Z","latestAt":"2026-08-21T03:32:09.665Z"},{"id":"01a01ffe-5ce2-7239-9816-e11649eada66","type":"creator.followed","target":{"type":"creator","id":"1c3f8c0e-9a84-4398-b943-070b6a20c51a","preview":"Temlix","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1c3f8c0e-9a84-4398-b943-070b6a20c51a/k9nsnu4c","slug":"temlix","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-20T16:25:58.734Z","latestAt":"2026-08-20T16:25:58.734Z"},{"id":"01a01a99-5303-7388-9f10-c19f816c609c","type":"template.liked","target":{"type":"template","id":"63233","preview":"Tennix","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/949868c8-a1e8-48a5-80be-d3cf4a09e3c3/01a0137e-72f4-750e-8213-c606e28b4339.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-08-19T15:17:31.006Z","latestAt":"2026-08-19T15:17:31.006Z"},{"id":"01a015eb-adb1-7252-acef-42005f414574","type":"creator.followed","target":{"type":"creator","id":"a3a50c10-7d16-410f-8a82-19525b1f5ba2","preview":"Arini Studio LLC","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29247/avatar-e0gYlLBVVN9BbdX6o2q98TKsuGpZCG.jpg","slug":"arinistudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-18T17:29:22.083Z","latestAt":"2026-08-18T17:29:22.083Z"},{"id":"01a015eb-33ec-74a6-ae4b-d7866ce3c5b3","type":"component.created","target":{"type":"component","id":"dINiVbOCt7BxvDFcHZZj","preview":"Focus Bento Grid","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a015ea-f471-75af-917c-7f33a4b46154.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-18T17:28:50.924Z","latestAt":"2026-08-18T17:28:50.924Z"},{"id":"01a00b5c-d970-729e-b5ea-c537a954a2b8","type":"comment.liked","target":{"type":"comment","id":"01a00a24-fed2-755b-b377-547621349ee3","preview":"For polished website mockup videos, creators often combine Screen Studio for recording, Rotato or Artboard Studio for device mockups, and Jitter or After Effects for motion. Rive and Spline are useful when the mockup needs interactive or 3D elements. The best choice depends on whether you want speed, cinematic control, or real time interaction.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"For polished website mockup videos, creators often combine Screen Studio for recording, Rotato or Artboard Studio for device mockups, and Jitter or After Effects for motion. Rive and Spline are useful when the mockup needs interactive or 3D elements. The best choice depends on whether you want speed, cinematic control, or real time interaction."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a00958-9a9c-766f-8fce-0cb691629002","like":{"count":2,"liked":false},"reply":{"parentCommentId":"01a00a24-fed2-755b-b377-547621349ee3"},"repost":null}},"context":{"type":"post","id":"01a00958-9a9c-766f-8fce-0cb691629002","preview":"what tool do most of creators use to make these videos? especially the mockup ones.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"what tool do most of creators use to make these videos? especially the mockup ones."}]}]},"thumbnail":"https://image.mux.com/jp02o6gnal02xpIm5DHJbagjnviv74xCiapkKO9emp6i4/thumbnail.webp?time=3.183","targetDeleted":false,"owned":false,"actions":{"postId":"01a00958-9a9c-766f-8fce-0cb691629002","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"actors":[{"id":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","slug":"rickyroacho","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-16T16:17:09.485Z","latestAt":"2026-08-16T16:17:09.485Z"}],"pagination":{"next":"MjAyNi0wOC0xNlQxNjoxNzowOS40ODVafDAxYTAwYjVjLWQ5NzAtNzI5ZS1iNWVhLWM1MzdhOTU0YTJiOA","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:f6a55acb-741a-4373-a380-51af416db788:/unified/posts/?creator=f6a55acb-741a-4373-a380-51af416db788&with=reposts":[{"data":[{"id":"01a02260-423f-77cc-879f-d4effc57b798","title":null,"body":"

I revisited an older help-center component and rebuilt it into something much more flexible.

SearchableHelpCenter includes categorized FAQs, filter and jump-to search, responsive navigation, custom icons, and accessible accordion controls.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I revisited an older help-center component and rebuilt it into something much more flexible."}]},{"type":"paragraph","content":[{"type":"text","text":"SearchableHelpCenter includes categorized FAQs, filter and jump-to search, responsive navigation, custom icons, and accessible accordion controls."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hL6cqe80IUwLZglxUQ9u","resolved":true,"title":"SearchableHelpCenter","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Help visitors find answers without scrolling through one long FAQ."}]},{"type":"paragraph","content":[{"type":"text","text":"SearchableHelpCenter combines categorized questions, two search behaviors, and an accessible accordion system in one responsive Framer component."}]},{"type":"paragraph","content":[{"type":"text","text":"Use "},{"type":"text","text":"Filter List","marks":[{"type":"bold"}]},{"type":"text","text":" to display every matching question as the visitor types, or "},{"type":"text","text":"Jump To","marks":[{"type":"bold"}]},{"type":"text","text":" to show search suggestions and take visitors directly to a selected answer. Categories appear as a vertical navigation rail on wider layouts and transform into a horizontally scrollable pill row on smaller screens."}]},{"type":"paragraph","content":[{"type":"text","text":"Configure the questions, answers, category names, icons, colors, typography, sizing, breakpoints, search labels, and accordion behavior directly from Framer’s properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to six FAQ categories"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 24 questions per category"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Filter List and Jump To search modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Search suggestion dropdown"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in icon library and custom Framer icons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Single-open or multi-open accordions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive category navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Container-based breakpoints"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard navigation and visible focus states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static Canvas and export rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external dependencies"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for SaaS products, support pages, customer portals, services, memberships, online platforms, and knowledge bases."}]},{"type":"paragraph","content":[{"type":"text","text":"No code required. Everything is controlled directly from the Framer sidebar."}]}]},"introduction":"Searchable FAQ with Categories","slug":"searchablehelpcenter","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a0225f-aff5-710d-83f3-e43618802b0d.png","metadata":{"tint":{"h":210,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-21T03:32:08.303Z","updatedAt":"2026-08-21T03:32:08.303Z","publishedAt":"2026-08-21T03:32:08.297Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/searchable-help-center-demo","price":"12","paymentUrl":"https://rickyroacho.gumroad.com/l/searchable-help-center","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"WcouUS8Gbv8iKOjZX3sb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-21T03:32:08.895Z","updatedAt":"2026-08-21T03:32:08.895Z"},{"id":"01a015eb-318d-7301-8988-f37bf3f0be22","title":null,"body":"

Just finished a responsive bento gallery for Framer.

Add your images, choose the layout, select the featured tile, and open the complete collection in a fullscreen light-box.

Focus Bento Grid is now available for free :)

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just finished a responsive bento gallery for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Add your images, choose the layout, select the featured tile, and open the complete collection in a fullscreen light-box."}]},{"type":"paragraph","content":[{"type":"text","text":"Focus Bento Grid is now available for free :)","marks":[{"type":"bold"}]}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dINiVbOCt7BxvDFcHZZj","resolved":true,"title":"Focus Bento Grid","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn any image collection into a polished, editorial gallery."}]},{"type":"paragraph","content":[{"type":"text","text":"Focus Bento Grid is a responsive bento gallery for Framer that combines flexible image arrangements with a fullscreen light-box. Add your images, choose a layout, select the featured tile, and customize the spacing and presentation directly from the properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"The gallery adapts to its container across desktop, tablet, and mobile while preserving a clear visual hierarchy. Additional images can be represented through an overflow count, allowing the gallery to stay compact without hiding the size of the collection."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive bento gallery layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable featured image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom image order and quantity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fullscreen lightbox"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Previous and next image navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard-accessible controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable spacing and corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image-fit controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional overflow count"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive compact layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static rendering on the Framer Canvas and in exports"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external dependencies"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add Focus Bento Grid to portfolios, travel sites, property pages, event galleries, case studies, and editorial projects."}]},{"type":"paragraph","content":[{"type":"text","text":"No code required. Everything is controlled directly from the Framer sidebar."}]}]},"introduction":"Responsive Bento Gallery","slug":"focus-bento-grid","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a015ea-f471-75af-917c-7f33a4b46154.png","metadata":{"tint":{"h":60,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-18T17:28:49.582Z","updatedAt":"2026-08-18T17:28:49.582Z","publishedAt":"2026-08-18T17:28:49.578Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/FocusBentoGrid-UMTgST.js@ViCUAcwCgYoL0btVOfCe","previewUrl":"https://rickysdesignlab.framer.website/live-demos/focus-bento-grid-demo","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"ViCUAcwCgYoL0btVOfCe","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-18T17:28:50.317Z","updatedAt":"2026-08-18T17:28:50.317Z"},{"id":"01a006c1-7aec-7531-b346-07357e26011f","title":null,"body":"

Built a pricing calculator for Framer websites that lets visitors adjust their plan, seats, usage, and billing schedule to see a live estimate.

It also includes locale-aware currencies, a full cost breakdown, a conversion CTA, and a copyable quote.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a pricing calculator for Framer websites that lets visitors adjust their plan, seats, usage, and billing schedule to see a live estimate."}]},{"type":"paragraph","content":[{"type":"text","text":"It also includes locale-aware currencies, a full cost breakdown, a conversion CTA, and a copyable quote."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mSDC3J5ExnpR8TpiOI2W","resolved":true,"title":"PriceLab","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Give visitors a clear way to estimate pricing directly on your Framer site."}]},{"type":"paragraph","content":[{"type":"text","text":"PriceLab combines plan selection, seat and usage inputs, monthly or annual billing, included usage, live totals, an itemized cost breakdown, and conversion actions in one responsive component."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose whether plans update automatically based on seat thresholds or let visitors select a plan themselves. Configure the tiers, rates, ranges, annual discount, interface copy, currency, locale, colors, typography, CTA link, and quote button directly from Framer’s properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"The component responds to its actual container width, adapts from two columns to a compact mobile layout, supports keyboard controls, respects reduced-motion preferences, and renders safely on the Framer Canvas and during exports."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic or visitor-selected pricing plans"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable seat and usage sliders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional included usage allowance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Monthly and annual billing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live subtotal, discount, and final total"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Itemized pricing breakdown"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Locale-aware currency formatting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable conversion CTA"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copyable plain-text quote summary"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Light, dark, and automatic appearance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive compact layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible keyboard controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion and static-render support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external dependencies"}]}]}]}]},"introduction":"Interactive Pricing Calculator","slug":"pricelab","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/01a006bf-654f-721f-a457-7c76e8bb4b7e.png","metadata":{"tint":{"h":240,"s":25,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-15T18:48:57.771Z","updatedAt":"2026-08-15T18:48:57.771Z","publishedAt":"2026-08-15T18:48:57.767Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/pricelab-demo","price":"18","paymentUrl":"https://rickyroacho.gumroad.com/l/PriceLab","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"11LVueTDjSM2irgkRF9n","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-15T18:48:58.348Z","updatedAt":"2026-08-15T18:48:58.348Z"},{"id":"019ffc8d-761a-723a-9c01-3a8b4c99dd5a","title":null,"body":"

Keeping it minimal but still fun with this new product.

I wanted to recreate the movement of a classic departure board. With SplitFlap you can add your own messages, customize the look, and control how the board flips between them.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Keeping it minimal but still fun with this new product."}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to recreate the movement of a classic departure board. With SplitFlap you can add your own messages, customize the look, and control how the board flips between them."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"XA12r992Hls4jWzpHlHB","resolved":true,"title":"SplitFlap","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"SplitFlap brings the rhythm and character of a mechanical departure board to Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Add up to eight messages with four lines each. The board creates one stable grid from your longest message, so its physical footprint stays fixed while individual characters riffle and settle into place."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for schedules, announcements, service updates, event information, launch messages, availability displays, and editorial headlines."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 8 message frames"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 4 lines and 32 characters per line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"On Load, Scroll Into View, Hover / Tap, and Loop triggers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable flip speed, riffle length, stagger, and hold time"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive modules that scale to every breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional decorative blank flaps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom flap, character, seam, radius, ratio, gaps, and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Letters, numbers, and extended symbols"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully static on the Canvas and in exports"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No dependencies"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setup","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Insert SplitFlap, add your messages, choose a trigger, and style the board from the right sidebar. Preview the page to see the mechanical animation."}]}]},"introduction":"Mechanical Message Board","slug":"splitflap","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019ffc80-f533-748b-a29d-ec6fb7a22ad1.png","metadata":{"tint":{"h":180,"s":75,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-13T19:15:56.424Z","updatedAt":"2026-08-14T21:07:13.167Z","publishedAt":"2026-08-13T19:15:56.421Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/splitflap-live-demo","price":"12","paymentUrl":"https://rickyroacho.gumroad.com/l/splitflap","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"WZ1P1g1FaN4L2OMd8Q6T","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-08-13T19:15:57.082Z","updatedAt":"2026-08-13T19:15:57.082Z"},{"id":"019ff1ed-8b33-71f7-96c8-60f135d04c9c","title":null,"body":"

Meet HoloCard.

A holographic card system with tilt, foil effects, different layouts, and custom colors. Had a lot of fun getting the material and motion to feel right.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Meet "},{"type":"text","text":"HoloCard","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"A holographic card system with tilt, foil effects, different layouts, and custom colors. Had a lot of fun getting the material and motion to feel right."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"gIVqrpBtodTO5aHHDlwz","resolved":true,"title":"HoloCard","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Light on foil, not a gradient on a card.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"HoloCard is a responsive holographic card system for Framer. Its iridescent spectrum and light sweep move against the 3D tilt, creating a more physical foil effect than a simple moving gradient."}]},{"type":"paragraph","content":[{"type":"text","text":"Use one of 5 layouts: Ticket, Membership, Gift Card, Event Pass, or Stat. ","marks":[{"type":"bold"}]},{"type":"text","text":"Or switch to Custom Frame and apply the treatment to a Framer design you've already built."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Counter-parallax foil + traveling light sweep • Cursor-tracked 3D tilt + glare • Aurora, Chrome, Sunset, Neon + Custom spectrum • Five responsive layouts + Custom Frame • Both / Hover Only / Idle Only / Off motion modes • Optional card link or tap-to-cycle spectra • Fit-to-Frame responsive sizing • Adaptive title, spacing + decorative barcode • Separate display + etched font controls • Reduced-motion support • Static on the Canvas and in exports • Pauses motion when off-screen • Visible keyboard focus states • Zero dependencies"}]},{"type":"paragraph","content":[{"type":"text","text":"Setup","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add HoloCard, keep Sizing on Fit to Frame, set the frame width to Fill and height to Fit, then choose a layout and spectrum. Preview to see motion."}]},{"type":"paragraph","content":[{"type":"text","text":"Note:","marks":[{"type":"bold"}]},{"type":"text","text":" the generated barcode is decorative and not scannable.","marks":[{"type":"italic"}]}]}]},"introduction":"Holographic Tilt Card","slug":"holocard","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019ff1e9-18da-719a-bdfc-a835c42904d7.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-11T17:45:03.926Z","updatedAt":"2026-08-14T21:03:04.396Z","publishedAt":"2026-08-11T17:45:03.921Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/holocard-demo","price":"9","paymentUrl":"https://rickyroacho.gumroad.com/l/HoloCard","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"FTJ3VvTUw54sUnfpn8xN","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-11T17:45:04.564Z","updatedAt":"2026-08-11T17:45:04.564Z"},{"id":"019fdd84-88eb-7117-b44f-e6976e00b55d","title":null,"body":"

Been working on a simple before/after slider and finally got it feeling just right.

The component allows you to drag, swipe, or use the keyboard to reveal the difference.

I am calling this one: Reveal.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Been working on a simple before/after slider and finally got it feeling just right."}]},{"type":"paragraph","content":[{"type":"text","text":"The component allows you to drag, swipe, or use the keyboard to reveal the difference."}]},{"type":"paragraph","content":[{"type":"text","text":"I am calling this one: "},{"type":"text","text":"Reveal","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"xaNnzJNnPrwnJ7plQb6V","resolved":true,"title":"Reveal","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag to reveal the difference.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reveal is a polished before/after image comparison slider for Framer. Add two images and visitors can drag anywhere across the comparison, swipe on touch, or use the keyboard to explore the difference."}]},{"type":"paragraph","content":[{"type":"text","text":"An optional reveal-on-scroll intro demonstrates the comparison automatically when it enters view, with Sweep and Peek styles to choose from."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for real responsive sites, Reveal includes aspect-ratio presets, responsive images, image focal-point support, reduced-motion behavior, keyboard accessibility, and full customization from the Framer sidebar."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Drag anywhere, touch + keyboard control • Optional Sweep + Peek reveal-on-scroll intros • 16:9, 4:3, 1:1, 3:4 + Fill Height layouts • Cover + Contain image modes • Custom labels, divider, handle + accent ring • Optional cursor-based hover zoom • Custom caption + typography controls • Responsive-image optimization • Accessible focus states + slider semantics • Reduced-motion support • Responsive label behavior • Zero dependencies"}]},{"type":"paragraph","content":[{"type":"text","text":"Setup","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add Reveal to your page, upload your Before and After images, choose an aspect ratio, and preview. Everything else can be customized directly from the sidebar."}]},{"type":"paragraph","content":[{"type":"text","text":"For best results, use matching Before and After image dimensions and compositions."}]}]},"introduction":"Before/After Slider","slug":"reveal","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019fdd5a-2db7-7077-9205-5171cdf0b037.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-07T18:37:57.728Z","updatedAt":"2026-08-14T21:05:40.262Z","publishedAt":"2026-08-07T18:37:57.723Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/reveal-slider-demo","price":"8","paymentUrl":"https://rickyroacho.gumroad.com/l/reveal-slider","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"SmeNNly5jXDjQTOgEFjU","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-07T18:37:58.379Z","updatedAt":"2026-08-07T18:37:58.379Z"},{"id":"019fd31c-912b-71fc-9a93-2abefaf3e28a","title":null,"body":"

Inspired by the new Spider-Man movie, I designed six minimalist Apple Watch faces. This was mainly just for fun, but I ended up turning the whole idea into a small collection of 6 different designs.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Inspired by the new Spider-Man movie, I designed six minimalist Apple Watch faces. This was mainly just for fun, but I ended up turning the whole idea into a small collection of 6 different designs."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019fd31b-f0d7-76ec-a4c9-64962286a7e2.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":1866}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019fd31b-f0d6-7746-aa53-ef156efa3b85.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":1866}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-05T18:08:12.590Z","updatedAt":"2026-08-05T18:08:12.590Z"},{"id":"019fc980-20f6-726a-98a8-1c3789c240f3","title":null,"body":"

Just shipped CommandK for Framer.

A keyboard-first command palette for jumping between pages, links, and sections without digging through menus.

Open it with ⌘K or Ctrl+K, search, navigate with ↑↓ + Enter, and customize it with 5 presets or your own style.

Try the live demo.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just shipped CommandK for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"A keyboard-first command palette for jumping between pages, links, and sections without digging through menus."}]},{"type":"paragraph","content":[{"type":"text","text":"Open it with ⌘K or Ctrl+K, search, navigate with ↑↓ + Enter, and customize it with 5 presets or your own style."}]},{"type":"paragraph","content":[{"type":"text","text":"Try the live demo."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"FekyZKp4qZ2klylcFk3t","resolved":true,"title":"CommandK","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A polished ⌘K command palette for Framer sites. Let visitors quickly search your site, jump to sections, or open pages and external links, using the keyboard or an optional on-page trigger."}]},{"type":"paragraph","content":[{"type":"text","text":"CommandK filters commands as visitors type, prioritizes matches that begin with their search, and organizes results into customizable groups. Every command can scroll to a section or open a Framer page, anchor, or supported URL."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Open with ⌘K, Ctrl+K, or the optional trigger • Live search with prefix-priority matching • Section scrolling and page or external links • Custom command groups and shortcut hints • Built-in icons, uploaded image icons, or text-only mode • Five presets: Paper, Carbon, Adaptive, Sharp, and Midnight Glass • Custom colors, glass, blur, radius, typography, width, and height • Light, dark, and system-adaptive appearance • Open/closed Canvas Preview for easier setup • Responsive behavior for desktop, tablet, and mobile • Keyboard navigation, focus management, ARIA support, and reduced motion • Static-render safeguards for Framer previews and thumbnails"}]},{"type":"paragraph","content":[{"type":"text","text":"Setup is handled directly in the Framer sidebar. Add your commands, choose Scroll or Page for each item, connect the destination, and customize the appearance."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom icon tip: ","marks":[{"type":"bold"}]},{"type":"text","text":"For the sharpest uploaded icons, use an SVG image asset or export a transparent PNG at 4× its intended display size. For example: 96×96 px for a 24 px icon."}]}]},"introduction":"Spotlight-style Command Palette","slug":"commandk","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019fc97f-177c-77dc-ae00-19a804c4b694.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2274}}],"post":null,"createdAt":"2026-08-03T21:20:44.796Z","updatedAt":"2026-08-14T21:04:46.779Z","publishedAt":"2026-08-03T21:20:44.792Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/commandk-demo","price":"12","paymentUrl":"https://rickyroacho.gumroad.com/l/CommandK","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"IA8izVBGBLdbVJ0MsDDb","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-08-03T21:20:45.302Z","updatedAt":"2026-08-03T21:20:45.302Z"},{"id":"019f9b29-4d17-77b1-b1a6-46bd86f34bb4","title":null,"body":"

ScrollSpy Navbar Pro is now available as a complete $9 Framer Code Component. It keeps navigation synced with every section using smooth scrolling and an animated active pill with responsive layouts, page links, five presets, and full sidebar customization. Set it up in about two minutes.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ScrollSpy Navbar Pro is now available as a complete $9 Framer Code Component. It keeps navigation synced with every section using smooth scrolling and an animated active pill with responsive layouts, page links, five presets, and full sidebar customization. Set it up in about two minutes."}]}]},"author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"YJ0qdcfLlfAxViTVKNYD","resolved":true,"title":"ScrollSpy Navbar Pro","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A floating pill navbar that highlights the section currently in view. It combines smooth scrolling, an animated active pill, glass styling, and full sidebar customization with section and page-link items in one navbar."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for real sites, its scrollspy supports smooth-scroll libraries and custom scroll containers. It also includes keyboard focus states, reduced-motion support, aria-current, and responsive behavior across desktop, tablet, and scrollable mobile layouts."}]},{"type":"paragraph","content":[{"type":"text","text":"HIGHLIGHTS:","marks":[{"type":"bold"}]},{"type":"text","text":" Animated sliding pill, smooth scroll, and robust scrollspy • Section links and page links in one navbar • Sidebar controls for colors, glass, shadow, spacing, type, and behavior • 5 included style presets • Accessible focus states and reduced-motion support • Fixed or in-frame positioning"}]},{"type":"paragraph","content":[{"type":"text","text":"SETUP","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Give each Framer section an ID, such as home, about, or projects."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"In Nav Items, add a matching Label and Section ID. IDs are case-sensitive and should not include #."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"For another page, change the item Type to Page and select its destination."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview or publish to test scrolling and navigation; the canvas displays a static preview."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"CUSTOMIZATION ","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Adjust background, pill, border, text states, glass blur, shadow, radius, padding, gap, top offset, typography, animation, position, and z-index directly from Framer’s sidebar."}]},{"type":"paragraph","content":[{"type":"text","text":"QUICK FIXES ","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Pill not moving: confirm that every Section ID exactly matches its frame ID. • Wrong scroll position: increase Top Offset. • Hidden navbar: raise Z-Index. • Glass not visible: lower the Background color’s opacity. • Final section not activating: give short sections a minimum height of about 60vh. • Link back to a homepage section with an anchor path such as /#projects."}]},{"type":"paragraph","content":[{"type":"text","text":"Setup takes about two minutes: add IDs, match them in the sidebar, and publish."}]}]},"introduction":"Smart Section Navigation","slug":"scrollspy-navbar-pro","author":{"framerUserId":"f6a55acb-741a-4373-a380-51af416db788","name":"Ricky R","slug":"rickyroacho","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/h8lc72fo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f6a55acb-741a-4373-a380-51af416db788/019f9b22-3b05-75f8-a15c-161459fe8b5f.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":3200,"height":1800}}],"post":null,"createdAt":"2026-07-25T21:23:22.393Z","updatedAt":"2026-08-14T21:03:56.973Z","publishedAt":"2026-07-25T21:23:22.391Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rickysdesignlab.framer.website/live-demos/scrollspy-navbar-pro-live-framer-demo","price":"9","paymentUrl":"https://rickyroacho.gumroad.com/l/scrollspy-navbar-pro?wanted=true","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"BWKP7w0N8WY8cQId0dbQ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-07-28T21:13:52.324Z","createdAt":"2026-07-25T21:23:23.031Z","updatedAt":"2026-07-28T21:13:52.324Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L6b"}]