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:T4a5,Em software sob medida, a Lei do Software põe os direitos sobre o programa com a empresa que contratou. Só que a mesma frase abre com “salvo estipulação em contrário”, e é aí que mora o risco: quem decide, na prática, é o contrato. Um contrato pode fazer duas coisas bem diferentes com o mesmo código. Na cessão, a empresa pode alterar, vender e contratar outro time. Na licença, ela paga para usar, e o titular segue sendo o fornecedor. O problema é pagar preço de projeto exclusivo e receber termo de ferramenta pronta. O segundo ponto cego são as bibliotecas que o fornecedor já tinha. Sem licença perpétua para essas peças, o código cedido pode não rodar sem o que não foi cedido. E o código escrito com IA? A Lei de Direitos Autorais define autor como pessoa física, então a autoria se apoia em quem revisou, decidiu e integrou o resultado. Em site, a Wama resolve a titularidade de outro jeito: o projeto em Framer é transferido para a conta do cliente, e quem quiser trocar de fornecedor leva site, domínio e conta. No artigo estão as sete cláusulas que o contrato precisa escrever, o que pedir na entrega e quando vale registrar o software no INPI.64:Ta8c,

Portfolio Marquee is a project showcase built around a continuously moving image strip. Each project gets its own title, category, description, image gallery, and CTA, while the images move horizontally in an infinite loop to create a more editorial and immersive way to browse work.

You can use it for portfolios, case studies, photography, architecture, branding, products, agencies, or any visual collection where the work should remain the focus.

On Mobile, the layout automatically reorganizes into a mobile-friendly flow with Back at the top, project information below the image strip, and Next at the bottom.

Features:

Infinite horizontal image marquee
Multiple images for every project
Automatic scrolling
Adjustable scroll and hover speeds
Hover-to-enlarge images
Project title and category switching
Animated project information changes
Back and Next navigation
Current project counter
Previous/next image previews
Custom project CTA and links
Responsive mobile layout
Fully customizable typography, colors and spacing
Static-render optimized for Framer

Customize:

Project names and categories
Multiple images per project
Project descriptions
CTA labels and links
Starting project
Auto-scroll on/off
Scroll speed
Hover speed
Image gap
Thumbnail and hover image height
Background and placeholder colors
Title, category and description colors
CTA and navigation colors
Typography for every text element
Container padding
Title positioning
Description width
Navigation thumbnail size
Category/title spacing
Gallery/footer spacing

How It Works:

Choose a project and its content becomes the active showcase. Its image collection is repeated into a seamless horizontal marquee, allowing the gallery to continuously move without reaching a visible end.

When auto-scroll is enabled, the strip moves continuously.

65:Ta04,

Live Preview

Grab more components for free

Scroll Step Timeline is a clean, scroll-driven timeline for presenting processes, workflows, roadmaps, milestones, or step-by-step journeys.

As visitors scroll through the section, the vertical progress line fills along with the timeline. Each numbered step becomes active when it reaches the chosen viewport position, changing its circle, number, title, and description into the active state. A subtle halo also appears around the active step to make the current position easier to follow.

Features:

Scroll-driven active states
Animated vertical progress line
Numbered timeline steps
Active step color transitions
Subtle active-step halo
Custom step titles and descriptions
Adjustable active viewport position
Custom colors and typography
Adjustable spacing and max width
Custom circle and line sizing
Framer static/canvas support

Fully Customizable:

Make the timeline fit your brand and content without editing the code. Change the entire visual system from Framer's property panel, from the accent color and typography to the spacing, circle size, line width, and active-state behavior.

Customize:

Eyebrow and main heading
Number of steps
Step titles and descriptions
Background and accent colors
Active and muted text colors
Timeline line color
Heading, title, description and number fonts
Maximum content width
Top and bottom spacing
Gap between steps
Heading and content spacing
Active viewport trigger
Circle size and radius
Circle border width
Timeline line width

How It Works:

The timeline tracks the visitor's scroll position through the steps. As a step reaches the selected active point in the viewport, its numbered circle fills with the accent color and the related text becomes active. At the same time, the progress line grows down the timeline to show how far the visitor has moved through the process.

66:Ta3a,

Live Preview

Grab more premium components

Interactive Feature Explorer is a visual tabbed showcase for presenting different features, services, audiences, projects, or content categories in one focused layout.

Each tab reveals a central feature card with its own heading, description, image or video, while the remaining cards stack behind it with smooth vertical movement and scaling. Four supporting thumbnail cards appear around the main card on desktop and update with each selected tab.

Features:

Interactive tab-based content switching
Stacked cards with smooth animations
Individual image or video for every tab
Four supporting thumbnails per tab
Animated active tab indicator
Optional links for feature cards
Responsive mobile layout
Horizontally scrollable tabs on mobile
Custom typography, colors, spacing and sizing
Adjustable stack depth, scale and animation speed
Static-render optimized

Fully Customizable:

Build the layout around your own content and visual style directly from Framer's property panel. Every tab can have unique content and media, while the card, thumbnails, tabs, colors, typography, spacing, and animation behavior can all be adjusted to fit your design.

Customize:

Tab labels, headings and descriptions
Image or video per tab
Four thumbnail images and labels per tab
Optional card links
Card width and height
Card and image radius
Content padding
Heading and description typography
Thumbnail size and typography
Tab typography and spacing
Active and inactive colors
Tab container background and radius
Tabs position
Card-to-tabs spacing
Number of visible cards
Stack offset and scale
Animation duration

How It Works:

Choose a tab and the selected feature moves to the front of the stack while the other cards shift behind it. The supporting thumbnails update with the selected content, and the active tab indicator smoothly moves between options.

67:T8ba,

Live Preview

Grab more premium components

Split Screen Menu is a fullscreen navigation that turns the menu interaction into part of the visual experience. Click the menu icon in the top-right corner and the screen splits from the center, revealing the navigation on one side and a full-bleed image panel on the other.

Each navigation item can have its own image, so hovering over an item instantly updates the visual panel. On smaller screens, the layout automatically changes into a single full-screen navigation panel, keeping the interaction clean and usable on mobile.

Features

Full-screen split-screen navigation
Center-out menu animation
Desktop navigation + image panel
Image changes based on hovered item
Smooth image transitions
Numbered navigation items
Animated menu icon
Contact and footer links
Responsive mobile layout
Custom logo support
Custom navigation links
Static-render optimized

Fully Customizable

Customize the entire navigation directly from Framer's property panel. Add your own logo, navigation items, images, links, typography, colors, contact information, and spacing without editing the code.

Customize

Text or image logo
Logo typography and size
Navigation labels and URLs
Individual navigation images
Navigation typography
Item and hover colors
Contact email and links
Panel background colors
Menu icon colors
Page padding and spacing
Mobile layout behavior

How It Works

The menu stays minimal when closed, showing only the logo and menu icon. When opened, the interface expands into two sections: a solid navigation panel and a full-bleed image panel.

68:Ta1a,

Live Preview

Grab more componnets for free

Pricing Cards gives you a flexible pricing section designed to make plan comparisons feel clear while adding just enough motion to keep the interaction engaging.

Switch between monthly and yearly pricing with an animated toggle that smoothly transitions each price using a digit-roller effect. The toggle knob stretches and settles into place, while an optional savings chip appears alongside the yearly option.

Features

Monthly and yearly pricing switch
Animated digit-by-digit price transitions
Smooth GSAP-powered animations
Stretching and smearing toggle interaction
Optional yearly savings chip
Up to 3 pricing plans
Popular-plan badge and styling
Custom feature lists for every plan
Custom CTA labels and links
Open links in the same or new tab
Responsive card layout
Custom typography and colors
Static-render optimized for Framer

Fully Customizable

Everything can be adjusted directly from the Framer property panel, so you can adapt the component to match your website, product, SaaS, agency, or studio.

Customize

Plan names, prices, and features
Monthly/yearly pricing
Currency and savings label
Popular-plan state and badge
CTA text, links, and new-tab behavior
Card spacing, padding, radius, and borders
Heading and plan typography
Feature and supporting text styles
Card and border colors
Toggle typography, spacing, knob, and borders
CTA colors, hover states, and borders
Animation duration and digit stagger

How It Works

Add your pricing plans and define their monthly and yearly prices. Visitors can switch between billing periods using the animated toggle.

When the billing period changes, each price updates with a vertical digit-roller animation instead of simply replacing the number. The toggle knob stretches during the transition before settling into its new position, while the optional savings chip can appear for yearly billing.

69:T7d9,

Live Preview

Grab more componnets for free

Multi-Level Drawer Menu is a clean, animated navigation system built for websites with multiple categories and subpages. Open the menu to reveal your main navigation, then hover or click a category to smoothly reveal its related sublinks in a second panel. On mobile, the menu switches to a simple stacked navigation with a back button.

Features

Multi-level navigation with primary and secondary panels
Desktop hover interactions
Mobile click-based navigation
Smooth panel and link animations
Up to 8 main categories
Up to 6 sublinks per category
Custom links with new-tab support
Responsive mobile layout
Optional footer links
Static-render optimized

Fully Customizable

Everything can be adjusted directly from Framer’s property panel, so you can match the menu to your website without editing the code.

Customize

Main categories and sublinks
URLs and new-tab behavior
Menu and close labels
Panel background and radius
Panel width, spacing and padding
Text and hover colors
Primary and secondary typography
Footer links and typography
Animation duration and easing

How It Works

Click the menu button to open the main drawer. On desktop, hovering over a category with sublinks reveals the secondary panel. Switching between categories smoothly replaces the displayed sublinks. On mobile, categories can be opened with a tap and the secondary panel includes a back button for navigation.

6a:T7c4,

Live Preview

Grab more componnets for free

Bento Shuffle Grid is a 5-tile interactive layout designed to showcase projects, products, services, or visual content. One large hero tile sits alongside four supporting cards. Click any supporting card to smoothly swap it with the hero, bringing that content into focus without moving the rest of the grid.

Each item supports its own image, label, heading, description, and optional CTA, while animated text reveals add a polished transition whenever the active content changes.

Features

Interactive 5-tile bento layout
Click-to-swap hero card
Smooth card transitions
Animated text reveals
Optional autoplay
Custom images and content
Optional CTA links
Responsive mobile layout
Fully customizable from Framer

Fully Customizable

Adjust the layout, content, typography, colors, spacing, animation speed, autoplay, and more directly through Framer's property panel.

Customize

Images, labels, headings & descriptions
CTA text and links
Grid scale, gap, radius & padding
Animation speed
Autoplay & interval
Heading, label, description & CTA fonts
Text, background & overlay colors

How It Works

The first card acts as the hero. Clicking any supporting card swaps it into the hero position with a smooth transition. You can also enable autoplay to cycle through the cards automatically.

On mobile, the layout automatically changes into a stacked responsive arrangement.

6b:T599,

Live Preview

Grab more components for free

Back To Top is a clean, customizable scroll-to-top button that appears after a defined scroll distance and smoothly returns visitors to the top of the page or a specific section. Choose your icon, colors, placement, shape, border, and motion directly from the Framer property panel.

Features:

Appears after a custom scroll distance
Smooth or instant scrolling
Scrolls to the page top or a custom section
Lucide and Phosphor icon support
Custom icon size and stroke
Left or right positioning
Adjustable offsets and z-index
Custom hover states
Optional border
Spring-based hover and press motion
Static-render optimized for Framer

How It Works

The button stays hidden until the visitor scrolls past your chosen threshold. Once visible, clicking it smoothly scrolls back to the top of the page or to a custom section using its HTML ID. You can choose smooth or instant scrolling and customize its hover, icon, placement, and motion behavior from the Framer panel.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-d84b3af4-cf3a-4f8c-a330-137560bb6207-all:/unified/creator/d84b3af4-cf3a-4f8c-a330-137560bb6207/activity/":[{"data":[{"id":"01a0bf48-fdab-7535-a1c4-c667228acd2b","type":"post.reposted","target":{"type":"post","id":"01a0bf46-8869-7709-b471-83c01064c04d","preview":"One of the most premium components I’ve built so far.\nPortfolio Marquee\nAn editorial project showcase with an infinite image marquee, hover enlargement, project navigation, previews, and CTAs. \nand yes, It is responsive for all small devices.\nLive Preview here\nThe kind of component I’d actually want to build a portfolio around.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"One of the most premium components I’ve built so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Portfolio Marquee","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/MiX6MYk","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"An editorial project showcase with an infinite image marquee, hover enlargement, project navigation, previews, and CTAs. "}]},{"type":"paragraph","content":[{"type":"text","text":"and yes, It is responsive for all small devices."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview here","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://portfoliomarquee.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The kind of component I’d actually want to build a portfolio around."}]}]},"thumbnail":"https://image.mux.com/oxZOBrpjOpyWRxyO8jB4n00AjKQT4KpeKxr02UU300lw028/thumbnail.webp?time=2.7","targetDeleted":false,"owned":false,"actions":{"postId":"01a0bf46-8869-7709-b471-83c01064c04d","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T14:47:06.918Z","latestAt":"2026-09-20T14:47:06.918Z"},{"id":"01a0bf48-fb77-73b5-9a6c-806f9803de39","type":"post.liked","target":{"type":"post","id":"01a0bf46-8869-7709-b471-83c01064c04d","preview":"One of the most premium components I’ve built so far.\nPortfolio Marquee\nAn editorial project showcase with an infinite image marquee, hover enlargement, project navigation, previews, and CTAs. \nand yes, It is responsive for all small devices.\nLive Preview here\nThe kind of component I’d actually want to build a portfolio around.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"One of the most premium components I’ve built so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Portfolio Marquee","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/MiX6MYk","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"An editorial project showcase with an infinite image marquee, hover enlargement, project navigation, previews, and CTAs. "}]},{"type":"paragraph","content":[{"type":"text","text":"and yes, It is responsive for all small devices."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview here","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://portfoliomarquee.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The kind of component I’d actually want to build a portfolio around."}]}]},"thumbnail":"https://image.mux.com/oxZOBrpjOpyWRxyO8jB4n00AjKQT4KpeKxr02UU300lw028/thumbnail.webp?time=2.7","targetDeleted":false,"owned":false,"actions":{"postId":"01a0bf46-8869-7709-b471-83c01064c04d","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T14:47:06.354Z","latestAt":"2026-09-20T14:47:06.354Z"},{"id":"01a0bf48-c714-740f-a864-8b51d4459918","type":"comment.reply","target":{"type":"post","id":"01a0bf32-7d0c-71ff-855d-a78cf9a41bf0","preview":"Portfolio Marquee","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0bf31-853b-70e9-8c11-1e1448156cf3.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0bf32-7d0c-71ff-855d-a78cf9a41bf0","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0bf48-c6f9-705f-9411-d7749efb7f0d","preview":"Exactly, and it's fully responsive on mobile too.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Exactly, and it's fully responsive on mobile too."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0bf32-7d0c-71ff-855d-a78cf9a41bf0","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0bf45-3ee7-74d4-b765-fff3a8fa1343"},"repost":null}},"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T14:46:52.948Z","latestAt":"2026-09-20T14:46:52.948Z"},{"id":"01a0bf32-7f7d-70fe-82cf-91616fe32cac","type":"component.created","target":{"type":"component","id":"U4df8FxjXkSXWDopLElS","preview":"Portfolio Marquee","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0bf31-853b-70e9-8c11-1e1448156cf3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-20T14:22:32.829Z","latestAt":"2026-09-20T14:22:32.829Z"},{"id":"01a0ba17-84c8-709f-87fa-1ca332731773","type":"creator.followed","target":{"type":"creator","id":"8a45159b-4e04-4c69-959a-a82bac252c4b","preview":"Flowgen Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8a45159b-4e04-4c69-959a-a82bac252c4b/md2qmufb","slug":"flowgen-studio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:34:58.614Z","latestAt":"2026-09-19T14:34:58.614Z"},{"id":"01a0ba17-35c0-762a-8ff6-dd228e93b168","type":"post.liked","target":{"type":"post","id":"01a0b9f6-96d5-745a-9089-205f56712d68","preview":"Our biggest dub commission so far 🚀","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Our biggest dub commission so far "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" "}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8a45159b-4e04-4c69-959a-a82bac252c4b/01a0b9f3-ff68-72bd-87ca-938134196341.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a0b9f6-96d5-745a-9089-205f56712d68","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:34:38.395Z","latestAt":"2026-09-19T14:34:38.395Z"},{"id":"01a0ba17-313b-73e3-8f5c-4986c4e2410c","type":"post.liked","target":{"type":"post","id":"01a0ba01-2edb-7321-a170-745189af769d","preview":"$63","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Em software sob medida, a "},{"type":"text","text":"Lei do Software","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.planalto.gov.br/ccivil_03/leis/l9609.htm","target":"_blank"}}]},{"type":"text","text":" põe os direitos sobre o programa com a empresa que contratou. Só que a mesma frase abre com “salvo estipulação em contrário”, e é aí que mora o risco: quem decide, na prática, é o contrato."}]},{"type":"paragraph","content":[{"type":"text","text":"Um contrato pode fazer duas coisas bem diferentes com o mesmo código. Na cessão, a empresa pode alterar, vender e contratar outro time. Na licença, ela paga para usar, e o titular segue sendo o fornecedor. O problema é pagar preço de projeto exclusivo e receber termo de ferramenta pronta."}]},{"type":"paragraph","content":[{"type":"text","text":"O segundo ponto cego são as bibliotecas que o fornecedor já tinha. Sem licença perpétua para essas peças, o código cedido pode não rodar sem o que não foi cedido."}]},{"type":"paragraph","content":[{"type":"text","text":"E o código escrito com IA? A "},{"type":"text","text":"Lei de Direitos Autorais","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.planalto.gov.br/ccivil_03/leis/l9610.htm","target":"_blank"}}]},{"type":"text","text":" define autor como pessoa física, então a autoria se apoia em quem revisou, decidiu e integrou o resultado."}]},{"type":"paragraph","content":[{"type":"text","text":"Em site, a Wama resolve a titularidade de outro jeito: o projeto em "},{"type":"text","text":"Framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/framer-brazil","target":"_blank"}}]},{"type":"text","text":" é transferido para a conta do cliente, e quem quiser trocar de fornecedor leva site, domínio e conta."}]},{"type":"paragraph","content":[{"type":"text","text":"No artigo estão as sete cláusulas que o contrato precisa escrever, o que pedir na entrega e quando vale registrar o software no INPI."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0ba01-2edb-7321-a170-745189af769d","like":{"count":6,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:34:37.239Z","latestAt":"2026-09-19T14:34:37.239Z"},{"id":"01a0ba17-2b37-73ea-9ec5-247a5b967b5e","type":"post.liked","target":{"type":"post","id":"01a0ba04-56b6-715f-b52c-ce906bad4e2d","preview":"Hey guys! Has anyone here ever migrated a client’s website from WordPress to Framer?\nI’m currently working on a potential migration for a website that’s around 10 years old, and I’d love to hear about your experience.\nWhat were the biggest challenges you encountered, especially when migrating an older WordPress site? Things like SEO, redirects, CMS/content migration, URL structure, or anything else that might not be obvious at first.\nWould really appreciate any insights or lessons learned from your experience. Need more insight on this one 🙏","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey guys! Has anyone here ever migrated a client’s website from WordPress to Framer?"}]},{"type":"paragraph","content":[{"type":"text","text":"I’m currently working on a potential migration for a website that’s around 10 years old, and I’d love to hear about your experience."}]},{"type":"paragraph","content":[{"type":"text","text":"What were the biggest challenges you encountered, especially when migrating an older WordPress site? Things like SEO, redirects, CMS/content migration, URL structure, or anything else that might not be obvious at first."}]},{"type":"paragraph","content":[{"type":"text","text":"Would really appreciate any insights or lessons learned from your experience. Need more insight on this one "},{"type":"emoji","attrs":{"name":"pray","emoji":"🙏"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0ba04-56b6-715f-b52c-ce906bad4e2d","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:34:35.697Z","latestAt":"2026-09-19T14:34:35.697Z"},{"id":"01a0ba17-2349-7407-bdd4-21cb3a26a8d9","type":"post.liked","target":{"type":"post","id":"01a0ba07-53c7-764d-9de7-66a78eb0fcb0","preview":"Day 30 of building Flow — my UI/UX design project 🚀\nToday was mostly about iterations. I revisited several previous decisions, but one of the bigger changes was in the payment flow.\nI changed the CTA placement to match the button placement across the other screens. It’s a small change, but it makes the overall design feel more consistent.\nI’d love to know your thoughts — A or B? 👇\nApart from that, I created the signing screen and started working on the review page. I’m also revisiting some of my earlier UX decisions and making changes where needed.\nFollow the project: https://www.figma.com/design/a9BOd8eltqp038l6LkToHb/Flow---Fintech-App?node-id=394-2459&t=8VLXpCbYSlSdCzDF-1","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 30 of building Flow — my UI/UX design project "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"Today was mostly about iterations. I revisited several previous decisions, but one of the bigger changes was in the payment flow."}]},{"type":"paragraph","content":[{"type":"text","text":"I changed the CTA placement to match the button placement across the other screens. It’s a small change, but it makes the overall design feel more consistent."}]},{"type":"paragraph","content":[{"type":"text","text":"I’d love to know your thoughts — A or B? 👇"}]},{"type":"paragraph","content":[{"type":"text","text":"Apart from that, I created the signing screen and started working on the review page. I’m also revisiting some of my earlier UX decisions and making changes where needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Follow the project: "},{"type":"text","text":"https://www.figma.com/design/a9BOd8eltqp038l6LkToHb/Flow---Fintech-App?node-id=394-2459&t=8VLXpCbYSlSdCzDF-1","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.figma.com/design/a9BOd8eltqp038l6LkToHb/Flow---Fintech-App?node-id=394-2459&t=8VLXpCbYSlSdCzDF-1","target":"_blank"}}]}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ce6c1f8a-8ca8-4bc8-b48b-f0d23ce1c344/01a0ba07-1c5a-73a8-8891-7cd4ea5e630c.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a0ba07-53c7-764d-9de7-66a78eb0fcb0","like":{"count":8,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:34:33.663Z","latestAt":"2026-09-19T14:34:33.663Z"},{"id":"01a0ba17-0c4e-7597-a641-edf98d8264cb","type":"template.liked","target":{"type":"template","id":"73417","preview":"Luven","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09a1594f-c142-46f7-9d20-4cc00ef2d4eb/01a0ba05-7558-70e9-899b-7b082e004ec5.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-09-19T14:34:27.785Z","latestAt":"2026-09-19T14:34:27.785Z"},{"id":"01a0ba16-eff0-709c-b09c-decab800a95b","type":"post.liked","target":{"type":"post","id":"01a0ba11-07e2-77f2-aec6-9a937dd6a6b2","preview":"$$20 worth of components in $9 template.\nLive preview","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"$$20 worth of components in $9 template."}]},{"type":"paragraph","content":[{"type":"text","text":"Live preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://articread.framer.ai/","target":"_blank"}},{"type":"bold"},{"type":"italic"}]}]}]},"thumbnail":"https://image.mux.com/8XT5xR8FeXg9p8RbJxEQ4njgKA00lqF6AzCT02eumAWhE/thumbnail.webp?time=2.267","targetDeleted":false,"owned":false,"actions":{"postId":"01a0ba11-07e2-77f2-aec6-9a937dd6a6b2","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:34:20.521Z","latestAt":"2026-09-19T14:34:20.521Z"},{"id":"01a0ba14-fdf6-77bf-99d4-00e76d690007","type":"post.reposted","target":{"type":"post","id":"01a0ba14-81d0-73a7-b16e-1228849a4cdb","preview":"Let's go! 2nd component of the day.\nScroll Step Timeline \nThe line grows as you scroll, and each step lights up when you reach it.\nSimple interaction, but it makes the whole process feel way more alive.\nLive Preview","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Let's go! 2nd component of the day."}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll Step Timeline ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/tbbTnuG","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"The line grows as you scroll, and each step lights up when you reach it."}]},{"type":"paragraph","content":[{"type":"text","text":"Simple interaction, but it makes the whole process feel way more alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://scrollstepstimeline.framer.website/","target":"_blank"}}]}]},{"type":"paragraph"}]},"thumbnail":"https://image.mux.com/CHBvyhT00Ml01PY15tA028h4Jfo0166on5S8T581NM02nhbA/thumbnail.webp?time=7.767","targetDeleted":false,"owned":false,"actions":{"postId":"01a0ba14-81d0-73a7-b16e-1228849a4cdb","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:32:13.042Z","latestAt":"2026-09-19T14:32:13.042Z"},{"id":"01a0ba14-fb57-7495-89fd-766e8d0465a6","type":"post.liked","target":{"type":"post","id":"01a0ba14-81d0-73a7-b16e-1228849a4cdb","preview":"Let's go! 2nd component of the day.\nScroll Step Timeline \nThe line grows as you scroll, and each step lights up when you reach it.\nSimple interaction, but it makes the whole process feel way more alive.\nLive Preview","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Let's go! 2nd component of the day."}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll Step Timeline ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/tbbTnuG","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"The line grows as you scroll, and each step lights up when you reach it."}]},{"type":"paragraph","content":[{"type":"text","text":"Simple interaction, but it makes the whole process feel way more alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://scrollstepstimeline.framer.website/","target":"_blank"}}]}]},{"type":"paragraph"}]},"thumbnail":"https://image.mux.com/CHBvyhT00Ml01PY15tA028h4Jfo0166on5S8T581NM02nhbA/thumbnail.webp?time=7.767","targetDeleted":false,"owned":false,"actions":{"postId":"01a0ba14-81d0-73a7-b16e-1228849a4cdb","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:32:12.370Z","latestAt":"2026-09-19T14:32:12.370Z"},{"id":"01a0ba06-9a65-71cd-bbe7-739f8b6ba194","type":"component.created","target":{"type":"component","id":"mKPIMMgtdBcImnFtu2Vp","preview":"Scroll Step Timeline","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0ba02-bbbb-7638-9229-5513e59543ee.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-19T14:16:30.053Z","latestAt":"2026-09-19T14:16:30.053Z"},{"id":"01a0b8ea-dd9c-744b-adc6-744d8a2ce5ab","type":"post.reposted","target":{"type":"post","id":"01a0b8ea-761c-724e-9f29-aef78e4e835b","preview":"Guys, this one has already crossed 370+ users.\nHonestly, I’d love to see what you’ve built with it.\nIf you’ve used it, drop your site below. I’m genuinely curious to see how you guys are using it.\nLink: Scroll Timeline pro\nAnd if you haven’t grabbed it yet, it’s completely free. \nGo check it out.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, this one has already crossed "},{"type":"text","text":"370+ users","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Honestly, I’d love to see what you’ve built with it."}]},{"type":"paragraph","content":[{"type":"text","text":"If you’ve used it, drop your site below. I’m genuinely curious to see how you guys are using it."}]},{"type":"paragraph","content":[{"type":"text","text":"Link: "},{"type":"text","text":"Scroll Timeline pro","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/DDdU5ex","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"And if you haven’t grabbed it yet, it’s "},{"type":"text","text":"completely free","marks":[{"type":"bold"}]},{"type":"text","text":". "}]},{"type":"paragraph","content":[{"type":"text","text":"Go check it out."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/01a0b8e8-8052-70c8-abce-59178f2a6880.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a0b8ea-761c-724e-9f29-aef78e4e835b","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T09:06:35.030Z","latestAt":"2026-09-19T09:06:35.030Z"},{"id":"01a0b8ea-dbcb-7318-a509-de826d48f746","type":"post.liked","target":{"type":"post","id":"01a0b8ea-761c-724e-9f29-aef78e4e835b","preview":"Guys, this one has already crossed 370+ users.\nHonestly, I’d love to see what you’ve built with it.\nIf you’ve used it, drop your site below. I’m genuinely curious to see how you guys are using it.\nLink: Scroll Timeline pro\nAnd if you haven’t grabbed it yet, it’s completely free. \nGo check it out.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, this one has already crossed "},{"type":"text","text":"370+ users","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Honestly, I’d love to see what you’ve built with it."}]},{"type":"paragraph","content":[{"type":"text","text":"If you’ve used it, drop your site below. I’m genuinely curious to see how you guys are using it."}]},{"type":"paragraph","content":[{"type":"text","text":"Link: "},{"type":"text","text":"Scroll Timeline pro","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/DDdU5ex","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"And if you haven’t grabbed it yet, it’s "},{"type":"text","text":"completely free","marks":[{"type":"bold"}]},{"type":"text","text":". "}]},{"type":"paragraph","content":[{"type":"text","text":"Go check it out."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/01a0b8e8-8052-70c8-abce-59178f2a6880.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a0b8ea-761c-724e-9f29-aef78e4e835b","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T09:06:34.559Z","latestAt":"2026-09-19T09:06:34.559Z"},{"id":"01a0b8e2-a9d7-7704-81d3-9321c7cf5fc6","type":"post.liked","target":{"type":"post","id":"01a0b8e1-e73f-7005-9a07-f08ec15c3a26","preview":"Guys, after a little break because of exams,\nI built this little masterpiece: Media Feature Showcase\nSwitch between tabs, bring a card to the front, and watch the whole stack smoothly rearrange with custom images, videos, and supporting visuals.\nLive Preview\nTook a few days off, but this one was worth coming back for.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, after a little break because of exams,"}]},{"type":"paragraph","content":[{"type":"text","text":"I built this little masterpiece: "},{"type":"text","text":"Media Feature Showcase","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/aowgR8v","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Switch between tabs, bring a card to the front, and watch the whole stack smoothly rearrange with custom images, videos, and supporting visuals."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://interactivefeatureexplorer.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Took a few days off, but this one was worth coming back for."}]}]},"thumbnail":"https://image.mux.com/n600AtZzj9oOwDKWfJkGn6BPoFCJdiO01hPs9HPSoDyXg/thumbnail.webp?time=1.8","targetDeleted":false,"owned":false,"actions":{"postId":"01a0b8e1-e73f-7005-9a07-f08ec15c3a26","like":{"count":3,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T08:57:37.489Z","latestAt":"2026-09-19T08:57:37.489Z"},{"id":"01a0b8e2-6260-7699-b779-7c81b05c8967","type":"post.reposted","target":{"type":"post","id":"01a0b8e1-e73f-7005-9a07-f08ec15c3a26","preview":"Guys, after a little break because of exams,\nI built this little masterpiece: Media Feature Showcase\nSwitch between tabs, bring a card to the front, and watch the whole stack smoothly rearrange with custom images, videos, and supporting visuals.\nLive Preview\nTook a few days off, but this one was worth coming back for.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, after a little break because of exams,"}]},{"type":"paragraph","content":[{"type":"text","text":"I built this little masterpiece: "},{"type":"text","text":"Media Feature Showcase","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/aowgR8v","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Switch between tabs, bring a card to the front, and watch the whole stack smoothly rearrange with custom images, videos, and supporting visuals."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://interactivefeatureexplorer.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Took a few days off, but this one was worth coming back for."}]}]},"thumbnail":"https://image.mux.com/n600AtZzj9oOwDKWfJkGn6BPoFCJdiO01hPs9HPSoDyXg/thumbnail.webp?time=1.8","targetDeleted":false,"owned":false,"actions":{"postId":"01a0b8e1-e73f-7005-9a07-f08ec15c3a26","like":{"count":3,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T08:57:19.196Z","latestAt":"2026-09-19T08:57:19.196Z"},{"id":"01a0b8d6-6227-741a-812f-1d38c57eea8d","type":"component.created","target":{"type":"component","id":"CsPNGKTMM1Gz8pH4vR36","preview":"Media Feature tabs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0b8d5-d1e5-76c5-8ee5-6747220546af.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-19T08:44:12.711Z","latestAt":"2026-09-19T08:44:12.711Z"},{"id":"01a0afa6-542b-7789-a138-afeba5015669","type":"post.liked","target":{"type":"post","id":"01a0af9d-306c-773a-b490-9470ffd0516f","preview":"Glass Type was paid. It’s free now. \nFree Remix\nLiquid type. A radial glass lens that pulls the letters.\nIf you’ve been waiting on the listing — it’s open.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass Type was paid. It’s free now. "}]},{"type":"paragraph","content":[{"type":"text","text":"Free Remix","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://dub.sh/glass-type","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Liquid type. A radial glass lens that pulls the letters."}]},{"type":"paragraph","content":[{"type":"text","text":"If you’ve been waiting on the listing — it’s open."}]}]},"thumbnail":"https://image.mux.com/5glHa9902SRz9HEeiNfT9EkfPYG02z3NPtW2NSkXz1tcI/thumbnail.webp?time=3.833","targetDeleted":false,"owned":false,"actions":{"postId":"01a0af9d-306c-773a-b490-9470ffd0516f","like":{"count":22,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":5,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","slug":"design-by-saqlain","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T13:55:08.449Z","latestAt":"2026-09-17T13:55:08.449Z"}],"pagination":{"next":"MjAyNi0wOS0xN1QxMzo1NTowOC40NDlafDAxYTBhZmE2LTU0MmItNzc4OS1hMTM4LWFmZWJhNTAxNTY2OQ","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:d84b3af4-cf3a-4f8c-a330-137560bb6207:/unified/posts/?creator=d84b3af4-cf3a-4f8c-a330-137560bb6207&with=reposts":[{"data":[{"id":"01a0bf46-8869-7709-b471-83c01064c04d","title":null,"body":"

One of the most premium components I’ve built so far.

Portfolio Marquee

An editorial project showcase with an infinite image marquee, hover enlargement, project navigation, previews, and CTAs.

and yes, It is responsive for all small devices.

Live Preview here

The kind of component I’d actually want to build a portfolio around.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"One of the most premium components I’ve built so far."}]},{"type":"paragraph","content":[{"type":"text","text":"Portfolio Marquee","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/MiX6MYk","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"An editorial project showcase with an infinite image marquee, hover enlargement, project navigation, previews, and CTAs. "}]},{"type":"paragraph","content":[{"type":"text","text":"and yes, It is responsive for all small devices."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview here","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://portfoliomarquee.framer.website/","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The kind of component I’d actually want to build a portfolio around."}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/oxZOBrpjOpyWRxyO8jB4n00AjKQT4KpeKxr02UU300lw028.m3u8","metadata":{"posterUrl":"https://image.mux.com/oxZOBrpjOpyWRxyO8jB4n00AjKQT4KpeKxr02UU300lw028/thumbnail.webp?time=2.7","aspectRatio":"16:9","duration":7.809333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T14:44:25.837Z","updatedAt":"2026-09-20T14:44:25.837Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0bf48-fd9d-73df-9273-3acf97c1ee7f","repostedAt":"2026-09-20T14:47:06.910Z"}},{"id":"01a0bf32-7d0c-71ff-855d-a78cf9a41bf0","title":null,"body":"

Portfolio Marquee

A cinematic project gallery with an infinite image marquee

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio Marquee","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A cinematic project gallery with an infinite image marquee"}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"U4df8FxjXkSXWDopLElS","resolved":true,"title":"Portfolio Marquee","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://portfoliomarquee.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab More components for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Portfolio Marquee ","marks":[{"type":"bold"}]},{"type":"text","text":"is a project showcase built around a continuously moving image strip. Each project gets its own title, category, description, image gallery, and CTA, while the images move horizontally in an infinite loop to create a more editorial and immersive way to browse work."}]},{"type":"paragraph","content":[{"type":"text","text":"You can use it for portfolios, case studies, photography, architecture, branding, products, agencies, or any visual collection where the work should remain the focus."}]},{"type":"paragraph","content":[{"type":"text","text":"On Mobile","marks":[{"type":"bold"}]},{"type":"text","text":", the layout automatically reorganizes into a mobile-friendly flow with Back at the top, project information below the image strip, and Next at the bottom."}]},{"type":"customHeading","content":[{"type":"text","text":"Features:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Infinite horizontal image marquee"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple images for every project"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic scrolling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable scroll and hover speeds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover-to-enlarge images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Project title and category switching"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated project information changes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Back and Next navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Current project counter"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Previous/next image previews"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom project CTA and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive mobile layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable typography, colors and spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render optimized for Framer"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customize:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Project names and categories"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple images per project"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Project descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA labels and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Starting project"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-scroll on/off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image gap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Thumbnail and hover image height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background and placeholder colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Title, category and description colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA and navigation colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography for every text element"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Container padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Title positioning"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Description width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation thumbnail size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Category/title spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gallery/footer spacing"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works:"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Choose a project and its content becomes the active showcase. Its image collection is repeated into a seamless horizontal marquee, allowing the gallery to continuously move without reaching a visible end."}]},{"type":"paragraph","content":[{"type":"text","text":"When auto-scroll is enabled, the strip moves continuously."}]}]},"introduction":"Auto-Scroll Projects Carousel","slug":"portfolio-marquee","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0bf31-853b-70e9-8c11-1e1448156cf3.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-20T14:22:31.323Z","updatedAt":"2026-09-20T14:22:31.323Z","publishedAt":"2026-09-20T14:22:31.320Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://portfoliomarquee.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/portfoliomarquee","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"GtCwE5nJvkm5goFm0cf9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T14:22:32.204Z","updatedAt":"2026-09-20T14:22:32.204Z"},{"id":"01a0ba14-81d0-73a7-b16e-1228849a4cdb","title":null,"body":"

Let's go! 2nd component of the day.

Scroll Step Timeline

The line grows as you scroll, and each step lights up when you reach it.

Simple interaction, but it makes the whole process feel way more alive.

Live Preview

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Let's go! 2nd component of the day."}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll Step Timeline ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/tbbTnuG","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"The line grows as you scroll, and each step lights up when you reach it."}]},{"type":"paragraph","content":[{"type":"text","text":"Simple interaction, but it makes the whole process feel way more alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://scrollstepstimeline.framer.website/","target":"_blank"}}]}]},{"type":"paragraph"}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/CHBvyhT00Ml01PY15tA028h4Jfo0166on5S8T581NM02nhbA.m3u8","metadata":{"posterUrl":"https://image.mux.com/CHBvyhT00Ml01PY15tA028h4Jfo0166on5S8T581NM02nhbA/thumbnail.webp?time=7.767","aspectRatio":"16:9","duration":10.542667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":2},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T14:31:41.267Z","updatedAt":"2026-09-19T14:31:41.267Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0ba14-fde7-7327-9bbe-69171cd4739a","repostedAt":"2026-09-19T14:32:13.033Z"}},{"id":"01a0ba06-97fb-74d9-9f8f-1032a0f9974e","title":null,"body":"

A scroll-driven process timeline (step by step) with animated progress states.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A scroll-driven process timeline (step by step) with animated progress states."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mKPIMMgtdBcImnFtu2Vp","resolved":true,"title":"Scroll Step Timeline","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://scrollstepstimeline.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more components for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll Step Timeline is a clean, scroll-driven timeline for presenting processes, workflows, roadmaps, milestones, or step-by-step journeys."}]},{"type":"paragraph","content":[{"type":"text","text":"As visitors scroll through the section, the vertical progress line fills along with the timeline. Each numbered step becomes active when it reaches the chosen viewport position, changing its circle, number, title, and description into the active state. A subtle halo also appears around the active step to make the current position easier to follow."}]},{"type":"customHeading","content":[{"type":"text","text":"Features:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven active states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated vertical progress line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Numbered timeline steps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active step color transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Subtle active-step halo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom step titles and descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable active viewport position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable spacing and max width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom circle and line sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer static/canvas support"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable:"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Make the timeline fit your brand and content without editing the code. Change the entire visual system from Framer's property panel, from the accent color and typography to the spacing, circle size, line width, and active-state behavior."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Eyebrow and main heading"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Number of steps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Step titles and descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background and accent colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active and muted text colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timeline line color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Heading, title, description and number fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Maximum content width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Top and bottom spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gap between steps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Heading and content spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active viewport trigger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Circle size and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Circle border width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timeline line width"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works:"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The timeline tracks the visitor's scroll position through the steps. As a step reaches the selected active point in the viewport, its numbered circle fills with the accent color and the related text becomes active. At the same time, the progress line grows down the timeline to show how far the visitor has moved through the process."}]}]},"introduction":"Scroll-driven process timeline","slug":"scroll-step-timeline","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0ba02-bbbb-7638-9229-5513e59543ee.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-19T14:16:28.779Z","updatedAt":"2026-09-19T14:16:28.779Z","publishedAt":"2026-09-19T14:16:28.771Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollstepstimeline.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/scrollstepstimeline","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"T4K6gRwXMuFopKwNenUI","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-09-19T14:16:29.435Z","updatedAt":"2026-09-19T14:16:29.435Z"},{"id":"01a0b8ea-761c-724e-9f29-aef78e4e835b","title":null,"body":"

Guys, this one has already crossed 370+ users.

Honestly, I’d love to see what you’ve built with it.

If you’ve used it, drop your site below. I’m genuinely curious to see how you guys are using it.

Link: Scroll Timeline pro

And if you haven’t grabbed it yet, it’s completely free.

Go check it out.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, this one has already crossed "},{"type":"text","text":"370+ users","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Honestly, I’d love to see what you’ve built with it."}]},{"type":"paragraph","content":[{"type":"text","text":"If you’ve used it, drop your site below. I’m genuinely curious to see how you guys are using it."}]},{"type":"paragraph","content":[{"type":"text","text":"Link: "},{"type":"text","text":"Scroll Timeline pro","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/DDdU5ex","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"And if you haven’t grabbed it yet, it’s "},{"type":"text","text":"completely free","marks":[{"type":"bold"}]},{"type":"text","text":". "}]},{"type":"paragraph","content":[{"type":"text","text":"Go check it out."}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/01a0b8e8-8052-70c8-abce-59178f2a6880.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":541,"height":522}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T09:06:08.544Z","updatedAt":"2026-09-19T09:06:08.544Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0b8ea-dd86-72f9-9aef-2646adfb6f70","repostedAt":"2026-09-19T09:06:35.017Z"}},{"id":"01a0b8e1-e73f-7005-9a07-f08ec15c3a26","title":null,"body":"

Guys, after a little break because of exams,

I built this little masterpiece: Media Feature Showcase

Switch between tabs, bring a card to the front, and watch the whole stack smoothly rearrange with custom images, videos, and supporting visuals.

Live Preview

Took a few days off, but this one was worth coming back for.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, after a little break because of exams,"}]},{"type":"paragraph","content":[{"type":"text","text":"I built this little masterpiece: "},{"type":"text","text":"Media Feature Showcase","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/aowgR8v","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Switch between tabs, bring a card to the front, and watch the whole stack smoothly rearrange with custom images, videos, and supporting visuals."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://interactivefeatureexplorer.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Took a few days off, but this one was worth coming back for."}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/n600AtZzj9oOwDKWfJkGn6BPoFCJdiO01hPs9HPSoDyXg.m3u8","metadata":{"posterUrl":"https://image.mux.com/n600AtZzj9oOwDKWfJkGn6BPoFCJdiO01hPs9HPSoDyXg/thumbnail.webp?time=1.8","aspectRatio":"16:9","duration":8.376}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T08:56:47.682Z","updatedAt":"2026-09-19T08:56:47.682Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0b8e2-624f-7468-9c09-4a33078139a8","repostedAt":"2026-09-19T08:57:19.184Z"}},{"id":"01a0b8d6-5fcb-71dc-a91e-d34efbdea2ec","title":null,"body":"

New Component Published!

An animated tabbed feature showcase with stacked cards and media for Framer.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New Component Published!"}]},{"type":"paragraph","content":[{"type":"text","text":"An animated tabbed feature showcase with stacked cards and media for Framer."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CsPNGKTMM1Gz8pH4vR36","resolved":true,"title":"Media Feature tabs","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://interactivefeatureexplorer.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more premium components","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Interactive Feature Explorer is a visual tabbed showcase for presenting different features, services, audiences, projects, or content categories in one focused layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Each tab reveals a central feature card with its own heading, description, image or video, while the remaining cards stack behind it with smooth vertical movement and scaling. Four supporting thumbnail cards appear around the main card on desktop and update with each selected tab."}]},{"type":"customHeading","content":[{"type":"text","text":"Features:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive tab-based content switching"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stacked cards with smooth animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual image or video for every tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four supporting thumbnails per tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated active tab indicator"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional links for feature cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive mobile layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontally scrollable tabs on mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom typography, colors, spacing and sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable stack depth, scale and animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render optimized"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable:"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Build the layout around your own content and visual style directly from Framer's property panel. Every tab can have unique content and media, while the card, thumbnails, tabs, colors, typography, spacing, and animation behavior can all be adjusted to fit your design."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tab labels, headings and descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image or video per tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four thumbnail images and labels per tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional card links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card width and height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card and image radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Content padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Heading and description typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Thumbnail size and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tab typography and spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active and inactive colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tab container background and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tabs position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card-to-tabs spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Number of visible cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stack offset and scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation duration"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works:"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Choose a tab and the selected feature moves to the front of the stack while the other cards shift behind it. The supporting thumbnails update with the selected content, and the active tab indicator smoothly moves between options."}]}]},"introduction":"Tabbed cards showcase with media","slug":"media-feature-tabs","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0b8d5-d1e5-76c5-8ee5-6747220546af.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-19T08:44:11.458Z","updatedAt":"2026-09-19T08:44:11.458Z","publishedAt":"2026-09-19T08:44:11.455Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactivefeatureexplorer.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/MediaFeaturetabs","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Hn08oc19ZeRSCObXNNaJ","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-19T08:44:12.107Z","updatedAt":"2026-09-19T08:44:12.107Z"},{"id":"01a0a4cf-2765-739f-9648-a2db3b54ab8c","title":null,"body":"

Guys, made a little different menu this time.

Split Screen Menu: click, the screen (your web page) splits and the whole thing comes alive.

Nav on one side, images on the other. Hover a link, the image changes.

Live Preview

Pretty fun one to build. What do you think?

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Guys, made a little different menu this time."}]},{"type":"paragraph","content":[{"type":"text","text":"Split Screen Menu: ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/mI1PF4y","target":"_blank"}}]},{"type":"text","text":" click, the screen (your web page) splits and the whole thing comes alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Nav on one side, images on the other. Hover a link, the image changes."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://splitscreenmenu.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pretty fun one to build. What do you think?"}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/2LXJIj83nMuLluhwH6mk016JdkzOU59lC9TKRMW5E200Q.m3u8","metadata":{"posterUrl":"https://image.mux.com/2LXJIj83nMuLluhwH6mk016JdkzOU59lC9TKRMW5E200Q/thumbnail.webp?time=4.467","aspectRatio":"16:9","duration":11.276}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":2},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-15T11:23:54.602Z","updatedAt":"2026-09-15T11:23:54.602Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0a4cf-a80a-759b-abd3-3b0e80af44e5","repostedAt":"2026-09-15T11:24:27.532Z"}},{"id":"01a0a4c7-83dd-721c-8fd5-bc460ce5b4bc","title":null,"body":"

A fullscreen split-screen menu that opens from the center.

Fully responsive, stacks to a centered fullscreen menu on mobile.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A fullscreen split-screen menu that opens from the center."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully responsive, stacks to a centered fullscreen menu on mobile."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cDlBJMiLQyD22xfiw0ik","resolved":true,"title":"Screen Split Menu","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://splitscreenmenu.framer.website/","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more premium components ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Split Screen Menu is a fullscreen navigation that turns the menu interaction into part of the visual experience. Click the menu icon in the top-right corner and the screen splits from the center, revealing the navigation on one side and a full-bleed image panel on the other."}]},{"type":"paragraph","content":[{"type":"text","text":"Each navigation item can have its own image, so hovering over an item instantly updates the visual panel. On smaller screens, the layout automatically changes into a single full-screen navigation panel, keeping the interaction clean and usable on mobile."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-screen split-screen navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Center-out menu animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop navigation + image panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image changes based on hovered item"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth image transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Numbered navigation items"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated menu icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact and footer links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive mobile layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom logo support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom navigation links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render optimized"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Customize the entire navigation directly from Framer's property panel. Add your own logo, navigation items, images, links, typography, colors, contact information, and spacing without editing the code."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text or image logo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo typography and size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation labels and URLs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual navigation images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Item and hover colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact email and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Panel background colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Menu icon colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Page padding and spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile layout behavior"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The menu stays minimal when closed, showing only the logo and menu icon. When opened, the interface expands into two sections: a solid navigation panel and a full-bleed image panel."}]}]},"introduction":"Hover Image Navigation","slug":"screen-split-menu","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0a4c6-e198-705d-8939-7c64e03155ef.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-15T11:15:33.318Z","updatedAt":"2026-09-15T11:15:33.318Z","publishedAt":"2026-09-15T11:15:33.315Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://splitscreenmenu.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/splitscreenmenu","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"plzUKb297ewfpex35cSy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-15T11:15:33.981Z","updatedAt":"2026-09-15T11:15:33.981Z"},{"id":"01a0942c-dd00-732a-8695-8c7f4c75bc48","title":null,"body":"

Pricing & features Table is now available on marketplace

Built with animated price switching, a stretchy toggle, savings tags, popular-plan states, and smooth CTA hovers.

Live Preview

Pricing sections usually don’t need much.

This one was fun to build.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing & features Table","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/K7GbN3q","target":"_blank"}}]},{"type":"text","text":" is now available on marketplace"}]},{"type":"paragraph","content":[{"type":"text","text":"Built with animated price switching, a stretchy toggle, savings tags, popular-plan states, and smooth CTA hovers."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://interactivepricingcards.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pricing sections usually don’t need much."}]},{"type":"paragraph","content":[{"type":"text","text":"This one was fun to build."}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/bAojyr02Ao5n6hUc7F5J02he700tR3bDUOQdvZtwy2YB5Y.m3u8","metadata":{"posterUrl":"https://image.mux.com/bAojyr02Ao5n6hUc7F5J02he700tR3bDUOQdvZtwy2YB5Y/thumbnail.webp?time=3.133","aspectRatio":"16:9","duration":5.609333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-12T05:52:43.269Z","updatedAt":"2026-09-12T05:52:43.269Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0942d-7620-72b9-96c9-49cdff89e883","repostedAt":"2026-09-12T05:53:22.466Z"}},{"id":"01a0923e-bd6f-7098-b8f6-0dfbd29cf455","title":null,"body":"

Built these Pricing Cards for Framer with animated price switching, a stretchy toggle, savings tags, popular-plan states, and smooth CTA hovers.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built these Pricing Cards for Framer with animated price switching, a stretchy toggle, savings tags, popular-plan states, and smooth CTA hovers."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"FzkOYPKa5WpMkhbeDryX","resolved":true,"title":"Pricing Cards Pro","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://interactivepricingcards.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more componnets for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pricing Cards gives you a flexible pricing section designed to make plan comparisons feel clear while adding just enough motion to keep the interaction engaging."}]},{"type":"paragraph","content":[{"type":"text","text":"Switch between monthly and yearly pricing with an animated toggle that smoothly transitions each price using a digit-roller effect. The toggle knob stretches and settles into place, while an optional savings chip appears alongside the yearly option."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Monthly and yearly pricing switch"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated digit-by-digit price transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth GSAP-powered animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stretching and smearing toggle interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional yearly savings chip"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 3 pricing plans"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Popular-plan badge and styling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom feature lists for every plan"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom CTA labels and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open links in the same or new tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive card layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom typography and colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render optimized for Framer"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Everything can be adjusted directly from the Framer property panel, so you can adapt the component to match your website, product, SaaS, agency, or studio."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Plan names, prices, and features"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Monthly/yearly pricing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Currency and savings label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Popular-plan state and badge"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA text, links, and new-tab behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card spacing, padding, radius, and borders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Heading and plan typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature and supporting text styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card and border colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle typography, spacing, knob, and borders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA colors, hover states, and borders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation duration and digit stagger"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add your pricing plans and define their monthly and yearly prices. Visitors can switch between billing periods using the animated toggle."}]},{"type":"paragraph","content":[{"type":"text","text":"When the billing period changes, each price updates with a vertical digit-roller animation instead of simply replacing the number. The toggle knob stretches during the transition before settling into its new position, while the optional savings chip can appear for yearly billing."}]}]},"introduction":"Interactive pricing section","slug":"pricing-cards-pro","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a0923d-b6d7-752e-9805-4d0b182fefc5.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-09-11T20:52:59.760Z","updatedAt":"2026-09-11T20:52:59.760Z","publishedAt":"2026-09-11T20:52:59.757Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactivepricingcards.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/pricingcards","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"8fVER6n8cBTcy6LR6cWX","tags":[]}}],"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-09-11T20:53:00.399Z","updatedAt":"2026-09-11T20:53:00.399Z"},{"id":"01a08fe4-5972-750b-a53f-52f10549d7e4","title":null,"body":"

Multi-level Drawer Menu is now available on marketplace.

Built with smooth panel transitions, hover on desktop, click on mobile, and enough control to make it fit your site.

Main menu → sublinks → back. Simple flow, no clutter.

Live Preview

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-level Drawer Menu","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/iol84z8","target":"_blank"}}]},{"type":"text","text":" is now available on marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with smooth panel transitions, hover on desktop, click on mobile, and enough control to make it fit your site."}]},{"type":"paragraph","content":[{"type":"text","text":"Main menu → sublinks → back. Simple flow, no clutter."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://multilevelmenu.framer.website/","target":"_blank"}}]}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/z3VviJ8Cqf01eGtoWLVT6M7kQ00Ed87CncuUz01ftkxA9w.m3u8","metadata":{"posterUrl":"https://image.mux.com/z3VviJ8Cqf01eGtoWLVT6M7kQ00Ed87CncuUz01ftkxA9w/thumbnail.webp?time=7.1","aspectRatio":"16:9","duration":10.609333}}],"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":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-11T09:55:02.135Z","updatedAt":"2026-09-11T09:55:02.135Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a08fe4-d188-7748-968e-7a6ee82503bd","repostedAt":"2026-09-11T09:55:32.873Z"}},{"id":"01a08d14-b056-7597-a054-7758fead9b27","title":null,"body":"

Multi-Level Drawer Menu — a clean two-level menu with smooth panel animations, expandable categories, and responsive mobile navigation.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-Level Drawer Menu — a clean two-level menu with smooth panel animations, expandable categories, and responsive mobile navigation."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fXmaVJbmcw7vuH0z9pK6","resolved":true,"title":"Multi Level Menu","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://multilevelmenu.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more componnets for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Multi-Level Drawer Menu is a clean, animated navigation system built for websites with multiple categories and subpages. Open the menu to reveal your main navigation, then hover or click a category to smoothly reveal its related sublinks in a second panel. On mobile, the menu switches to a simple stacked navigation with a back button."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-level navigation with primary and secondary panels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop hover interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile click-based navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth panel and link animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 8 main categories"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 6 sublinks per category"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom links with new-tab support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive mobile layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional footer links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render optimized"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Everything can be adjusted directly from Framer’s property panel, so you can match the menu to your website without editing the code."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Main categories and sublinks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"URLs and new-tab behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Menu and close labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Panel background and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Panel width, spacing and padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text and hover colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Primary and secondary typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Footer links and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation duration and easing"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Click the menu button to open the main drawer. On desktop, hovering over a category with sublinks reveals the secondary panel. Switching between categories smoothly replaces the displayed sublinks. On mobile, categories can be opened with a tap and the secondary panel includes a back button for navigation."}]}]},"introduction":"Responsive Sliding Navigation","slug":"multi-level-menu","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a08d14-1317-7027-8822-516e4b79d4d4.png","metadata":{"tint":{"h":210,"s":18,"l":17},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-10T20:48:57.842Z","updatedAt":"2026-09-11T20:55:11.756Z","publishedAt":"2026-09-10T20:48:57.840Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://multilevelmenu.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/multilevelmenu","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"EQnyw7LTEnSqGXLlzYY1","tags":[]}}],"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-09-10T20:48:58.454Z","updatedAt":"2026-09-10T20:48:58.454Z"},{"id":"01a08ba2-d87d-71dc-8fbc-ed7ceab25da0","title":null,"body":"

Cooked this one up today: Bento Shuffle Grid

Click any card → it smoothly swaps with the main hero card.

Add autoplay, custom content, images, CTAs and fully control the layout from the Framer panel and is responsive as well.

Live Preview

This one was fun to build.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Cooked this one up today: "},{"type":"text","text":"Bento Shuffle Grid ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/LhbswHX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Click any card → it smoothly swaps with the main hero card."}]},{"type":"paragraph","content":[{"type":"text","text":"Add autoplay, custom content, images, CTAs and fully control the layout from the Framer panel and is responsive as well."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://bentosufflegrid.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"This one was fun to build."}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/6cWOJf00Y02vLgpFjvP02CEjW2wSGnd8wyq00VPIvmPXg100.m3u8","metadata":{"posterUrl":"https://image.mux.com/6cWOJf00Y02vLgpFjvP02CEjW2wSGnd8wyq00VPIvmPXg100/thumbnail.webp?time=5.267","aspectRatio":"16:9","duration":6.876}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":2},"reposts":{"count":2,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-10T14:06:35.980Z","createdAt":"2026-09-10T14:05:00.425Z","updatedAt":"2026-09-10T14:06:35.980Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a08ba4-9032-75de-a4b7-379d7ce78961","repostedAt":"2026-09-10T14:06:52.979Z"}},{"id":"01a08b8f-ccc9-721f-be3f-d06a8bb6ed35","title":null,"body":"

Built this Bento Shuffle Grid for Framer.

Click any card → it smoothly swaps with the main hero card.

Add autoplay, custom content, images, CTAs and fully control the layout from the Framer panel.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built this Bento Shuffle Grid for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Click any card → it smoothly swaps with the main hero card."}]},{"type":"paragraph","content":[{"type":"text","text":"Add autoplay, custom content, images, CTAs and fully control the layout from the Framer panel."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Hy0usyPqlKoOYbZxcUJI","resolved":true,"title":"Bento Shuffle Grid","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://dotsgrid.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more componnets for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Bento Shuffle Grid is a 5-tile interactive layout designed to showcase projects, products, services, or visual content. One large hero tile sits alongside four supporting cards. Click any supporting card to smoothly swap it with the hero, bringing that content into focus without moving the rest of the grid."}]},{"type":"paragraph","content":[{"type":"text","text":"Each item supports its own image, label, heading, description, and optional CTA, while animated text reveals add a polished transition whenever the active content changes."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive 5-tile bento layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-to-swap hero card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth card transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated text reveals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional autoplay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom images and content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional CTA links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive mobile layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable from Framer"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Adjust the layout, content, typography, colors, spacing, animation speed, autoplay, and more directly through Framer's property panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Images, labels, headings & descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA text and links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid scale, gap, radius & padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay & interval"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Heading, label, description & CTA fonts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text, background & overlay colors"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The first card acts as the hero. Clicking any supporting card swaps it into the hero position with a smooth transition. You can also enable autoplay to cycle through the cards automatically. "}]},{"type":"paragraph","content":[{"type":"text","text":"On "},{"type":"text","text":"mobile","marks":[{"type":"bold"}]},{"type":"text","text":", the layout automatically changes into a stacked responsive arrangement."}]}]},"introduction":"Responsive bento grid with shuffle","slug":"bento-shuffle-grid","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a08b97-1059-711a-8c72-e219dc4e4878.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-10T13:44:11.339Z","updatedAt":"2026-09-10T13:52:17.960Z","publishedAt":"2026-09-10T13:44:11.335Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://bentosufflegrid.framer.website/","price":"5","paymentUrl":"https://designbysaqlain.gumroad.com/l/bentoshufflegrid","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"IlNvONLY100Vu5JOyvXb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-10T13:44:12.234Z","updatedAt":"2026-09-10T13:44:12.234Z"},{"id":"01a0864e-ea6d-7249-8fa3-df0691542262","title":null,"body":"

Worth paying for, but get it free for today!

It appears as you scroll and smoothly takes visitors back to the top or any section you choose.

Live preview

Custom icons, colors, size, position, border, motion and more.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Worth paying for, but get it"},{"type":"text","text":" free","marks":[{"type":"bold"},{"type":"italic"}]},{"type":"text","text":" for today!"}]},{"type":"paragraph","content":[{"type":"text","text":"Back To Top Button","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/ZBdeDwd","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"It appears as you scroll and smoothly takes visitors back to the top or any section you choose."}]},{"type":"paragraph","content":[{"type":"text","text":"Live preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://backtotopp.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Custom icons, colors, size, position, border, motion and more."}]},{"type":"paragraph"}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/cEh71XY7n3Ps00unEEesX9Vikp3svr4tEOQG9vDfzCXw.m3u8","metadata":{"posterUrl":"https://image.mux.com/cEh71XY7n3Ps00unEEesX9Vikp3svr4tEOQG9vDfzCXw/thumbnail.webp?time=1.133","aspectRatio":"16:9","duration":4.642667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":0},"reposts":{"count":1,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-09T13:15:29.164Z","createdAt":"2026-09-09T13:15:13.905Z","updatedAt":"2026-09-09T13:15:29.164Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a08652-4909-744a-854f-fd06c2e2be03","repostedAt":"2026-09-09T13:18:54.730Z"}},{"id":"01a08639-0192-715d-9fb8-5b4f091a4fd0","title":null,"body":"

Built a customizable Back To Top button for Framer.

It appears after scrolling, smoothly takes you back to the top or any target section, and lets you customize the icon, colors, size, position, border, and motion.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a customizable Back To Top button for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"It appears after scrolling, smoothly takes you back to the top or any target section, and lets you customize the icon, colors, size, position, border, and motion."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"iHBZKSHRRCRCQMswXO7D","resolved":true,"title":"Back to top V2","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://backtotopp.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Grab more components for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Back To Top is a clean, customizable scroll-to-top button that appears after a defined scroll distance and smoothly returns visitors to the top of the page or a specific section. Choose your icon, colors, placement, shape, border, and motion directly from the Framer property panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Features:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Appears after a custom scroll distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth or instant scrolling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scrolls to the page top or a custom section"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lucide and Phosphor icon support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom icon size and stroke"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Left or right positioning"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable offsets and z-index"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom hover states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional border"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring-based hover and press motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render optimized for Framer"}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The button stays hidden until the visitor scrolls past your chosen threshold. Once visible, clicking it smoothly scrolls back to the top of the page or to a custom section using its HTML ID. You can choose smooth or instant scrolling and customize its hover, icon, placement, and motion behavior from the Framer panel."}]}]},"introduction":"Scroll-trigger back-to-top button","slug":"back-to-top-v2","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a08638-6e89-733a-886b-e224a1760ab4.png","metadata":{"tint":{"h":160,"s":75,"l":13},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-09T12:51:17.416Z","updatedAt":"2026-09-09T12:51:17.416Z","publishedAt":"2026-09-09T12:51:17.413Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Backtotopbutton-l5nig7.js@nlWcTSvt1cLatHcrEQjk","previewUrl":"https://backtotopp.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"nlWcTSvt1cLatHcrEQjk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-09T12:51:18.034Z","updatedAt":"2026-09-09T12:51:18.034Z"},{"id":"01a085d4-d32f-76dc-b09b-509b4aa3cac1","title":null,"body":"

Get this new Slanted Reveal Button for free.

- A bold diagonal hover reveal button

- 4 reveal directions (top, bottom, left, right)

- Smooth skewed transition

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Get this new"},{"type":"text","text":" Slanted Reveal Button","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/zbuy63D","target":"_blank"}}]},{"type":"text","text":" for free."}]},{"type":"paragraph","content":[{"type":"text","text":"- A bold diagonal hover reveal button"}]},{"type":"paragraph","content":[{"type":"text","text":"- 4 reveal directions (top, bottom, left, right)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth skewed transition"}]}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/G02odNnQwpTT02QRlqIUvFqtSyAcg6isfZvuVrsnDRkd00.m3u8","metadata":{"posterUrl":"https://image.mux.com/G02odNnQwpTT02QRlqIUvFqtSyAcg6isfZvuVrsnDRkd00/thumbnail.webp?time=1.067","aspectRatio":"16:9","duration":3.509333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":1,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-10T07:51:18.287Z","createdAt":"2026-09-09T11:01:52.563Z","updatedAt":"2026-09-10T07:51:18.287Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a085d5-4b98-741c-acb4-8652f5b4db41","repostedAt":"2026-09-09T11:02:23.386Z"}},{"id":"01a085c1-a559-7436-b0dd-71111e09eb51","title":null,"body":"

A bold diagonal hover reveal button for Framer.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A bold diagonal hover reveal button for Framer."}]}]},"author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"BZrIAwmzsgYlpi1iNUHe","resolved":true,"title":"Slanted Button","body":"

Grab more componnets for free

Slanted Reveal Button adds a sharp diagonal transition to your buttons. On hover, a colored layer sweeps across the button with a slanted edge, switching the background and text together instead of using a simple fade. The reveal direction, skew, speed, and easing are fully customizable.

Features:

Diagonal hover reveal
4 reveal directions
Smooth skewed transition
Custom hover and base colors
Adjustable speed and easing
Custom font, padding, and radius
Optional links and new-tab support
Static fallback for mobile and Framer rendering

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Grab more componnets for free","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://www.framer.com/@design-by-saqlain/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Slanted Reveal Button adds a sharp diagonal transition to your buttons. On hover, a colored layer sweeps across the button with a slanted edge, switching the background and text together instead of using a simple fade. The reveal direction, skew, speed, and easing are fully customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"Features:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Diagonal hover reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"4 reveal directions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth skewed transition"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom hover and base colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable speed and easing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom font, padding, and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional links and new-tab support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static fallback for mobile and Framer rendering"}]}]}]}]},"introduction":"Diagonal hover reveal button","slug":"slanted-button","author":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/01a085c1-3c7f-71a6-9cf8-a1eadfafa95e.png","metadata":{"tint":{"h":180,"s":53,"l":42},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-09T10:40:55.010Z","updatedAt":"2026-09-09T10:40:55.010Z","publishedAt":"2026-09-09T10:40:55.007Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SlantedRevealButton-ohwAdB.js@8jRa1GQbkcny997m5U6f","previewUrl":"https://slantedrevealbutton.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"8jRa1GQbkcny997m5U6f","tags":[]}}],"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-09-09T10:40:55.641Z","updatedAt":"2026-09-09T10:40:55.641Z"},{"id":"01a08169-dcd9-77e9-8ef9-474dd6c427db","title":null,"body":"

2nd component of the day!

Built a simple dot grid background where the dots react to your cursor with a smooth, trailing glow. Nothing too crazy, just a subtle interaction that can make a hero or footer feel much more alive.

Live Preview

Save for your next framer project.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"2nd component of the day!"}]},{"type":"paragraph","content":[{"type":"text","text":"Built a simple "},{"type":"text","text":"dot grid background","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/XNELFbs","target":"_blank"}}]},{"type":"text","text":" where the dots react to your cursor with a smooth, trailing glow. Nothing too crazy, just a subtle interaction that can make a hero or footer feel much more alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://dotsgrid.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Save for your next framer project."}]},{"type":"paragraph"}]},"author":{"framerUserId":"8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58","name":"Zeeshan","slug":"designsbyzeeshan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8cb28d44-fcf5-43b4-a7ec-b93c7e27ab58/4g5i90l4","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/YG02a3oRYyKNFSV4S02TUtCevZ02iJbXxDbFdj02GHMC4CM.m3u8","metadata":{"posterUrl":"https://image.mux.com/YG02a3oRYyKNFSV4S02TUtCevZ02iJbXxDbFdj02GHMC4CM/thumbnail.webp?time=1.533","aspectRatio":"16:9","duration":4.109333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":6},"reposts":{"count":1,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T14:26:33.821Z","updatedAt":"2026-09-08T14:26:33.821Z","repostedBy":{"creator":{"framerUserId":"d84b3af4-cf3a-4f8c-a330-137560bb6207","name":"Saqlain Nasir","slug":"design-by-saqlain","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/5qea2yb3"},"repostId":"01a0816a-7f20-760d-b756-7871ffe86352","repostedAt":"2026-09-08T14:27:15.361Z"}}],"pagination":{"next":"MDFhMDgxNmEtN2YyMC03NjBkLWI3NTYtNzg3MWZmZTg2MzUy","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L6c"}]