50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:Taee,

Cells Cart

A native shopping cart system for Framer — designed to feel like part of the canvas, not bolted on.

No external checkout. No headless commerce platform. No webhooks.Install the Cart Engine into your project's `<head>`, drop the components onto your pages, and you have a working cart. The cart lives in the visitor's browser, orders log to your Google Sheets, and confirmation emails send through Google Apps Script.

What's included

Scripts

Cart Engine -the head script that powers everything
Apps Script - enables Google Sheets integration

Triggers

Add To Cart Hitbox - invisible click area that turns any frame into a buy button
Variant Selector - pill-style picker for Size, Material, Fit, etc.
Color Selector - circular swatch picker
Quantity Selector - number stepper

Display

Cart Badge - live item count, perfect for nav bars
Cart Display (Manual) - full cart + checkout panel; orders log to Google Sheets
Cart Display (Auto Mail) - same as Manual, plus auto-sends branded confirmation emails via Gmail
Cart Display (Pro Mail) - confirmations sent from your branded domain via Brevo, Mailgun, Resend, SendGrid, or Postmark

How it works

Install the Cart Engine once per project.
Drop Triggers onto your CMS-bound product cards and bind ID, Name, Price, Image.
Add a Cart Display to your cart drawer or checkout page.
Connect a Google Apps Script to log orders to Google Sheets and send confirmation emails.

Why Cells Cart?

Zero infrastructure — no Stripe, no Shopify, no headless commerce platform required.
CMS-native — every component binds straight to Framer CMS fields.
Brandable emails — full control over banner, copy, colors, and template variables.
Variants + stock — multi-variant products with per-variant stock tracking.
Charges & discounts — flat or percentage adjustments based on quantity, price, or any custom field.

Documentation

Full setup guides and component references: cellscart.framer.wiki

52:T9bc,

Date Time Display is a flexible component for Framer that lets you render dynamic date and time directly inside your designs using simple formatting tokens. Instead of being limited to a fixed clock or calendar format, you can fully control how the output appears by inserting symbols inside curly braces within your text. The component automatically replaces those symbols with the correct live values and updates every second.

The component supports both system time and international time. In system mode, it simply follows the viewer’s device clock. In international mode, you can select a region and then choose a specific timezone within that region. This makes it useful for dashboards, global websites, event countdown pages, or any interface that needs to show time from different parts of the world.

Another useful feature is the Font Source connection. Instead of manually setting typography properties, the component can inherit styles from any text layer you connect. It automatically reads the font family, size, weight, line height, letter spacing, and other typographic settings, allowing the displayed time to match your design system perfectly.

The formatting system is designed to be simple and readable. You write normal text and place tokens inside curly braces wherever you want dynamic values to appear. For example:

Today is {dddd}, {MMMM} {do}, {YYYY} at {h}:{mm}:{ss} {a}

The component will convert that into a live sentence such as:

Today is Tuesday, March 10th, 2026 at 8:43:12 pm

Key features

Fully customizable date and time formatting using tokens
Supports both 12-hour and 24-hour clocks
Automatic updates every second
Local system time or international timezone display
Region-based timezone selection for easier navigation
Typography inheritance through a connected text layer
Works with any layout width or height in Framer
Lightweight logic built with native Intl date formatting

Because the formatting system is token-based, you can construct almost any readable style of date or time — from simple clocks to full descriptive sentences. This makes the component useful across a wide range of interfaces, including hero sections, dashboards, event pages, global product sites, and productivity tools.

53:T501,

This component only changes the variant of a component to another variant. Suppose, you want to change a component's variant from A to B using a shortcut(e.g. alt + x), this is the component you need. You cannot transition from page to page as of now.

How to use it

Click here for proper documentation

Drop this component inside another component that has multiple variants.
Set position to absolute and pin it to all 4 sides. This will make it easy to link it to other variants. Have the Z index as -1 as well. Alternatively, you can keep the width and height to 1 and pin it to a corner.
Configure this component: assign whatever key binding you want. You can choose multiple modifiers or no modifiers with a key. You can also only use modifiers as a trigger. Tab and Caps Lock cannot be combined with other key. You can separate two keys with "&&" (e.g. "a && b") - this will enable separate key bindings for the same event.
Now connect this component to your desired variant. You can add the interaction through the interactions panel as well.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-70a23f51-8d4b-4646-8d2a-3f049a365a0e-all:/unified/creator/70a23f51-8d4b-4646-8d2a-3f049a365a0e/activity/":[{"data":[{"id":"019ee06b-5f1b-73ba-959a-f84f5ad4cef0","type":"post.liked","target":{"type":"post","id":"019ee05f-a4b5-7506-9121-7880f514cdee","preview":"SaaS design is moving away from cold dashboards.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS design is moving away from cold dashboards.","marks":[{"type":"code"}]}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/71acde3d-a182-4080-a8de-3fe1ee702b04/8tvifuo9","targetDeleted":false,"owned":false,"actions":{"postId":"019ee05f-a4b5-7506-9121-7880f514cdee","like":{"count":14,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","slug":"stewpeed-hero","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T15:06:33.624Z","latestAt":"2026-06-19T15:06:33.624Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:70a23f51-8d4b-4646-8d2a-3f049a365a0e:/unified/posts/?creator=70a23f51-8d4b-4646-8d2a-3f049a365a0e&with=reposts":[{"data":[{"id":"019df39f-bd53-7088-a47d-9b4c2f10b2d4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1114","resolved":true,"title":"Cells Cart","body":"$51","bodyJson":null,"introduction":"Drop-in cart for Framer sites","slug":"cells-cart","author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1114-JkbZqzX8HxH5nOHpjAyrhAVO9wptsN","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1114-Z2m6uDOofAFbCkSmmUuYXUWEVUMZAD","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-04T05:27:22.185Z","updatedAt":"2026-05-04T05:27:27.283Z","publishedAt":"2026-05-04T15:33:45.427Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"6s8b63lgeqptwptoqm3iu3qvl","paid":true,"categories":[{"id":"c4868181-e303-4aac-8074-bd683d4debe8","name":"Ecommerce","slug":"ecommerce"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-04T15:33:45.427Z","updatedAt":"2026-05-04T15:33:45.427Z"},{"id":"019d16e7-54fc-702c-bd79-780a53522ccc","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zYqxty1kIDvU0bEuoVx7","resolved":true,"title":"DayTime Pro","body":"$52","bodyJson":null,"introduction":"Date Time Display is a flexible componen","slug":"daytime-pro","author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/zYqxty1kIDvU0bEuoVx7/daytime-pro-7JrX6kloR7X9pAmWZpUkTzpvhOwwp7","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-10T17:40:03.349Z","updatedAt":"2026-03-18T21:40:44.101Z","publishedAt":"2026-03-22T18:55:52.572Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/DateTimeDisplay-2jRSYg.js@oJBqSLStZjpSEqw4r1jk","previewUrl":"https://mj-datetimedisplay.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"oJBqSLStZjpSEqw4r1jk","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-03-22T18:55:52.572Z","updatedAt":"2026-03-22T18:55:52.572Z"},{"id":"019bee07-affe-739e-b10d-286bdca169f3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"YOmbTfBMt6QAVO4WSGv3","resolved":true,"title":"Keyboard Variant","body":"$53","bodyJson":null,"introduction":"Keyboard Shortcut to change Variant","slug":"keyboard-variant","author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/YOmbTfBMt6QAVO4WSGv3/keyboard-variant-WEKg1iTGGSpCURRai2MzgmRd9Eb6NM","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-09T04:10:22.640Z","updatedAt":"2026-04-28T03:25:11.341Z","publishedAt":"2026-01-24T03:23:59.870Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stewpeed-keyboardshortcut.framer.website/","price":"3","paymentUrl":"https://stwpdesign.lemonsqueezy.com/checkout/buy/2ea734b2-55ce-44de-991d-4388dcc24e16","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"4DGeuM54Jl1p20Sjylrc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-24T03:23:59.870Z","updatedAt":"2026-01-24T03:23:59.870Z"},{"id":"019957d7-4a2f-740e-b542-2e0ec2ef992b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"WjRHgc26AMTI44lCR9Ub","resolved":true,"title":"Text Hover Icon","body":"

Variants:
- Icons slide in from top
- Icons slide in from right
- Fade in and out transition
Custom icon
Container color control
Text color control
Editable text content
Works seamlessly on light or dark backgrounds
Fully responsive for all screen sizes

","bodyJson":null,"introduction":"","slug":"text-hover-icon","author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/WjRHgc26AMTI44lCR9Ub/text-hover-icon-znyHRtDSNPzqHDA7tUcKnAXApQm1fn","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-05T12:52:30.128Z","updatedAt":"2025-09-17T09:13:37.461Z","publishedAt":"2025-09-17T13:22:31.087Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Text-Hover-Icon-GMNv.js@3jCNH0OcGrAr9a7bVhQt","previewUrl":"https://cl-texthovericon.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"3jCNH0OcGrAr9a7bVhQt","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-17T13:22:31.087Z","updatedAt":"2025-09-17T13:22:31.087Z"},{"id":"01987990-97eb-70a2-bbbb-66557d8689bd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2umorHhCrk6tCm8vcEKl","resolved":true,"title":"Scroll Indicator","body":"

A clean and minimal scroll indicator designed to enhance user navigation. This component features a donut-shaped progress bar that smoothly animates as the user scrolls, providing a subtle visual cue without distracting from your content. Ideal for portfolios, blogs, or any long-scroll experience where you want to keep users engaged and informed.

Things You Can Change

Colour of
- the base
- the fill
- the remainder
Size of
- the circle
- the stroke
Section
- where it starts
- where it ends
  (You can also toggle an option so that it just follows the page's start and end)

","bodyJson":null,"introduction":"","slug":"scrollprogresscircle","author":{"framerUserId":"70a23f51-8d4b-4646-8d2a-3f049a365a0e","name":"MJ Nafi","slug":"stewpeed-hero","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/327104/avatar-C1xhHqidnfqbeSGonHsEbBFysB8hDb.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/2umorHhCrk6tCm8vcEKl/scrollprogresscircle-2Pk8wStBjGlLkFOjrEHzKL5izz1Mro","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-01T15:18:58.318Z","updatedAt":"2026-01-09T03:27:56.037Z","publishedAt":"2025-08-05T09:29:35.979Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Circular-Scroll-Progress-3-GrNG.js@0bNJQTRn8PhGZt8Bs9Im","previewUrl":"https://cl-circularscrollidicator.framer.media/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"0bNJQTRn8PhGZt8Bs9Im","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-05T09:29:35.979Z","updatedAt":"2025-08-05T09:29:35.979Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]