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:T3aff,

# BookingPro

A Calendly-style booking widget for Framer. Visitors pick a date and time on your own site and submit their details — fully branded, on your own domain, with no monthly subscription. Drop it in, paste your Formspree ID, optionally connect a Google Sheet that holds your taken slots, and you're live.

---

## Why You'll Like It

- Calendly-style booking without the monthly fee. A polished date+time picker that lives on your own domain, with your own brand. One-time purchase instead of a per-seat subscription.

- Friendly booking horizon. Pick "1 month from today", "3 months", "1 year" — no need to think in raw days. Calendar math is correct (1 month = the same day next month, not 30 days).

- Pick your week start. Monday (Europe / ISO, default), Sunday (US), or Saturday (Middle East). The grid and weekday labels rotate automatically.

- Four booking modes built in. Single appointment, multi-time block, hotel-style date range (check-in / check-out), or multiple independent dates. One component, all the use cases.

- Three ways to know what's already taken. Edit the booked list right in Framer, or sync from a Google Sheet, or pull from any JSON URL.

- Already-booked slots are visually clear. Taken slots are grayed out and show your custom message — no double bookings.

- Truly customizable form. You decide which fields to ask: name, email, phone, project description, anything.

- Sends straight to Formspree (or any webhook). The chosen date(s) and time(s) are added to the payload automatically.

- Designer-first. Four ready-made presets (Modern, Minimal, Soft, Dark), every color editable, every label rewriteable. Korean / Japanese / Spanish weekday and month names just need a quick paste.

- No code, no plugins, no CMS. No CMS dependency — booking data comes from your panel or a URL you choose.

---

## Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL. To bring it into Framer:

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

Framer will detect the link and place the component on your page. Drag it, resize it, and configure it from the right-side property panel.

---

## Four Booking Modes

Pick one in the Booking Mode dropdown at the top of the property panel.

### Date + Single Time

Classic Calendly-style. User picks a date, then one time slot. Best for: 1-on-1 calls, consultations, demos, photo shoots.

### Date + Multiple Times

User picks a date, then any number of time slots in that day. Optional Consecutive Only toggle requires the picked slots to be adjacent — perfect for "book a 2-hour studio block" or "book lunch + the meeting after".

### Date Range (Check-in / Check-out)

Hotel-style. User picks a start date (check-in), then an end date (check-out). The whole range highlights, the form summary shows the night count. Best for: lodging, multi-day rentals, conference room reservations.

### Multiple Dates

User picks any number of independent days. Best for: "select all the dates you're available", workshop signups with optional days, photo session day picker.

The booked list works for all modes. In date-only modes (range / multi-date), any taken date in your sheet blocks that whole day.

---

## Setup in 60 Seconds

1. Drop the component on your canvas.

2. Open the property panel on the right.

3. Availability — set your working days, hours, and slot length (e.g. Mon–Fri, 9–18, 30-minute slots).

4. Form Fields — add the questions you want to ask the visitor.

5. Submission — pick Formspree, paste your form ID. Done.

Optional but powerful: set Existing Bookings → Source to Google Sheet and paste a published CSV URL so booked slots come straight from your spreadsheet.

---

## What You Can Customize

Every group below is a collapsible panel in the Framer property pane.

- Style Preset — pick a look in one click (Modern / Minimal / Soft / Dark / Custom).

- Availability — working days (1=Mon, 2=Tue…), hours, slot length, lunch break, holidays, timezone label.

- Existing Bookings — pick how to sync taken slots: manual list, Google Sheet, or JSON URL.

- Form Fields — add any number of fields with id, label, type, placeholder, and required flag.

- Submission — Formspree ID, Webhook URL + Allowed Domains, email subject, the keys used for date/time in the payload.

- Messages — every visible string. Translate to any language, change the booked-slot warning, the success message, the back/submit labels — anything.

- Calendar Style — header, weekday labels, date colors, today ring, booked-slot dot color.

- Slots Style — slot colors (default / hover / selected / booked), columns, padding, radius.

- Form Style — input colors, label color, font sizes, spacing.

- Buttons — primary and secondary button colors, radius, padding, weight.

- Container — background, border, radius, summary pill, progress bar.

Most designers only touch a few of these. Pick a preset, edit your fields, ship.

---

## Three Ways to Track Booked Slots

You decide where the list of "already taken" times lives.

### 1. Manual List

Type slots into the property panel. Best for solo founders or low-volume use.

### 2. Google Sheet (CSV)

Step 1 — Create the sheet. Open a new Google Sheet and add two column headers in the first row: `date` and `time`. Then list each booked slot as one row:

| date | time |

|------|------|

| 2026-05-15 | 10:00 |

| 2026-05-15 | 14:00 |

| 2026-05-16 | 11:00 |

Format rules:

- date in `YYYY-MM-DD` format (e.g. `2026-05-15`)

- time in 24-hour `HH:MM` format (e.g. `10:00`, `14:30`)

- One booking per row

Step 2 — Publish the sheet as CSV. In Google Sheets:

1. File → Share → Publish to web

2. Choose your sheet, format Comma-separated values (.csv), click Publish

3. Copy the URL Google gives you

4. Paste into the Sheet CSV URL field in the property panel

The component re-checks the sheet on load (and optionally every N seconds). Add or remove a row in the sheet and the website updates without redeploying. Beautiful for a small team where someone manages bookings in Sheets.

For date-only modes (Date Range / Multiple Dates): the `time` column is still required, but the value is ignored — you can put anything (e.g. `00:00`). One row per blocked day.

### 3. Custom JSON URL

For anyone with a backend or automation. Point it at any URL that returns JSON like:

```json

[

{ "date": "2026-05-15", "time": "10:00" },

{ "date": "2026-05-15", "time": "14:00" }

]

```

or `{ "bookings": [...] }` or `{ "data": [...] }`. The component handles all three shapes.

---

## What the Booked Slot Behavior Looks Like

When a slot is already taken:

- It appears grayed out in the time grid

- The clickable behavior depends on Disable Booked Slots:

- On (default): the slot can't be clicked at all

- Off: clicking it shows your custom Booked Slot Message ("Sorry, this time is already taken — please pick another")

You write the message in any language you want, with any tone. The default is friendly: "This slot is already taken. Please pick another time."

---

## Where Your Data Goes

When the user submits, the component sends a JSON `POST` to your endpoint with all the fields they filled in plus the chosen date and time.

### Formspree

Endpoint: `https://formspree.io/f/{your-form-id}`. You only paste the form ID (e.g. `xnqklbpr`) — not a full URL. The component builds the HTTPS endpoint for you.

### Webhook (POST)

Any URL that accepts a JSON body — Zapier, Make, n8n, your own server, Notion via integrations, Airtable, Slack incoming webhooks. Two rules:

1. HTTPS only. `http://` URLs are rejected.

2. List the allowed domains. In the Submission group, fill Allowed Domains with a comma-separated list of the hosts you trust, e.g. `hooks.zapier.com, hook.us1.make.com, your-backend.com`. The component refuses to POST anywhere else. Subdomains count (so `hook.us1.make.com` covers `*.hook.us1.make.com` as well).

This keeps visitor data safe: if a webhook URL is ever changed by mistake (or by someone you didn't authorize), submissions won't silently leak to an unknown server.

### Payload Shape

The exact keys depend on the Booking Mode you chose. Custom form field IDs always come through. Here are the extras the component adds automatically:

Date + Single Time (default)

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"time": "14:00",

"_subject": "New booking request"

}

```

Date + Multiple Times

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"time": "14:00",

"times": "14:00, 14:30, 15:00",

"_subject": "..."

}

```

Date Range (Check-in / Check-out)

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"checkOut": "2026-05-18",

"nights": "3",

"dates": "2026-05-15, 2026-05-16, 2026-05-17, 2026-05-18",

"_subject": "..."

}

```

Multiple Dates

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"date": "2026-05-15",

"dates": "2026-05-15, 2026-05-22, 2026-06-05",

"_subject": "..."

}

```

All key names (`date`, `time`, `checkOut`, `nights`, `dates`, `times`) are configurable in the Submission group, in case your tool expects different names.

If your endpoint replies with a non-2xx status, the component shows your Error Message with a Back button so the user can try again.

---

## Great For

- 1-on-1 consultations and discovery calls

- Coaching sessions and tutoring

- Photo / video shoot booking

- Studio / equipment rental

- Salon / clinic appointments (with the holiday list filled in)

- Hotels, B&Bs, and lodging with check-in / check-out (range mode)

- Multi-day rentals and tour bookings

- Workshop / class registration with optional days (multi-date mode)

- Internal demos and sales calls

- Real estate viewings

- Anywhere you currently bounce between emails to schedule, or pay $10–30/month for a tool you barely use

---

## Power It Up With Your Favorite Tools

BookingPro sends a clean JSON payload to Formspree or any webhook, so it slots straight into the workflow you already have:

- Zapier / Make / n8n — Auto-send a confirmation email to the visitor, push the booking into Google Sheets, create a Notion page, or message a Slack channel.

- Google Calendar / Outlook — Add a Zapier step to create a calendar event the moment a booking lands.

- Gmail / SendGrid / Resend — Trigger a branded confirmation email from your own address.

- Stripe / PayPal — For paid bookings, wire the webhook to a payment link and unlock the calendar event after checkout.

- Your own server — Point the webhook at any HTTPS endpoint that accepts a JSON `POST`. Total control.

Because the data comes through as a regular `POST`, every "what if I want X to happen automatically" question has an answer.

---

## A Few Tips

- For consultations, set Slot Length to 30 or 60 and keep Working Days to weekdays only.

- If you allow same-day bookings, set Min Days Ahead to 0. To require a day's notice, set it to 1.

- Use Holidays for fixed off-days (e.g. `2026-12-25, 2026-01-01`).

- Korean labels: paste `1월, 2월, 3월, 4월, 5월, 6월, 7월, 8월, 9월, 10월, 11월, 12월` into Month Labels and `월, 화, 수, 목, 금, 토, 일` into Weekday Labels.

- For Google Sheet sync, keep your sheet really simple — just `date` and `time` columns. Anything else is ignored.

- Test once with Submission → Send To = None to walk through the flow without sending anything.

---

## Need Help?

If a submission isn't arriving, check that:

- The Formspree ID is just the ID (e.g. `xnqklbpr`), not the full URL.

- Formspree has confirmed your sender email (they email you once after the first submission).

- Your webhook (if using one) is HTTPS and the host is listed in Allowed Domains (comma-separated, e.g. `hooks.zapier.com, hook.us1.make.com`).

- Your webhook responds with a 2xx status.

If you see a red error banner on the Framer canvas:

- That banner shows up only while you're designing — it's a heads-up that the Google Sheet / JSON URL didn't load. Visitors will never see it.

- Click Retry to re-fetch without touching the property panel.

- Common cause: the Sheet wasn't published as CSV, or the JSON URL returned a non-2xx status.

If booked slots aren't grayed out:

- The Sheet URL must be the published CSV URL (ends with `output=csv`), not the regular sheet URL.

- The column headers in your sheet should match what you typed in Date Column and Time Column (default `date` and `time`).

- Dates should be in `YYYY-MM-DD` format. The component also accepts `MM/DD/YYYY` and `YYYY/MM/DD` but `YYYY-MM-DD` is safest.

Everything else works out of the box.

64:T1f9b,

# ChatFormPro

A conversational form for Framer. Your visitors chat with a friendly bot instead of staring at a long page of fields. Drop it in, paste your Formspree ID, and you're collecting answers in minutes — no code, no plugins, no backend.

---

## Why You'll Like It

- No code, no setup nightmare. Connect Formspree in 30 seconds and you're done.

- Two modes in one component. Use it inline as a section, or as a floating chat widget on the bottom-right of your site.

- Conversations beat forms. Showing one question at a time with a typing-bot rhythm dramatically lifts completion rates compared to traditional multi-step cards.

- Endlessly extensible. Add as many questions as you need, mix input types, branch your messaging — every step is just an item in a list.

- Designer-friendly out of the box. Three visual presets (iMessage, Slack, Minimal) that already look polished. Tweak colors, fonts, and animations to match any brand.

- Works for any backend. Formspree for simple email/dashboard delivery, or your own webhook URL if you want data piped to Zapier, Make, n8n, Notion, Airtable, your CRM, anywhere that accepts a POST.

- Built-in privacy gate. Optional Accept/Decline confirmation step before anything is sent — handy for GDPR, internal forwarding policies, or just being polite.

---

## Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL. To bring it into Framer:

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

Framer will detect the link and place the component on your page automatically. From there it behaves like any other component — drag it, resize it, and configure it from the right-side property panel.

---

## Setup in 30 Seconds

1. Drop the component on your canvas (see Install above).

2. Open the property panel and replace the sample questions with your own.

3. Go to Submission and pick Formspree.

4. Sign up at https://formspree.io (free tier covers 50/month), create a form, copy the form ID from the URL.

5. Paste the ID into the Formspree ID field.

That's it. Publish and your first submission lands in your inbox.

---

## Two Display Modes

### Inline

The chat fills your component frame. Use it as a contact section, an embedded widget, a hero CTA, or anywhere a static form would live.

### Popup

A floating button (logo, label, or default chat icon) sits at the corner of every page. Click → chat opens. Click again → chat closes. Perfect as a site-wide help/sales widget. The floating button is fully customizable — circle, rounded square, or pill with a text label, your colors, your logo.

---

## What You Can Customize

Every group below is a collapsible panel in the Framer property pane.

- Style Preset — pick a look in one click (iMessage / Slack / Minimal / Custom).

- Steps — your questions, in order. Each one has its own input type and message.

- Submission — where the answers go (Formspree, Webhook, or none for demos), plus the success and error messaging.

- Consent Gate — turn on if you want a final "is this OK to send?" question with Accept and Decline buttons.

- Bot Persona — name, role, avatar, online dot — so the chat has a face.

- Bubble Style — bubble colors, shape, fonts, padding, tail, shadow.

- Avatar — bot avatar size and shape.

- Header — top bar styling.

- Input Field — text input + send button styling.

- Choice Buttons — pill button colors, including selected state for multi-select.

- Animation — typing speed, entrance style, pacing between questions.

- Behavior — auto-focus, submit-on-Enter, progress bar.

- Container — wrapper background, border, radius.

- Popup Mode — floating button shape/size/color/logo/label/position, popup panel size, optional dimmed backdrop.

You don't need to touch most of these. Pick a preset, add your questions, ship.

---

## Question Types

Eight input types, all switchable per step:

- Text / Email / Phone / Number / URL — single-line inputs with the right keyboard on mobile and basic format checks.

- Long Text — a textarea for detailed messages.

- Single Choice — pill buttons. The user taps one and the form auto-advances.

- Multi Choice — toggle buttons. The user selects any number, then taps Send.

Mix and match freely. A typical lead form might be Text → Email → Single Choice (topic) → Multi Choice (interests) → Long Text.

---

## Where Your Data Goes

When the user finishes (and accepts the consent gate, if enabled), the component sends a JSON `POST` request to your endpoint.

### Formspree

Endpoint: `https://formspree.io/f/{your-form-id}`

You only paste the ID. The component handles the rest. Submissions arrive as emails, show up in your Formspree dashboard, and can be exported as CSV.

### Custom Webhook (POST)

Set Send To to Webhook and paste any URL that accepts a `POST` with a JSON body. Useful for:

- Zapier / Make / n8n catch hooks

- Your own server endpoint

- Notion / Airtable / Google Sheets via integration platforms

- Slack incoming webhooks (with light tweaking)

### Payload Shape

Both Formspree and Webhook receive the same structure. Field keys come from each step's Field ID, and the values are whatever the user entered.

```json

{

"name": "Sarah Kim",

"email": "sarah@example.com",

"topic": "New project",

"interests": "Web design, Motion",

"message": "Hi! I'd love to chat about a redesign...",

"_subject": "New chat form submission"

}

```

Notes:

- Multi Choice answers are joined into a single string with the separator you choose (default `", "`).

- The optional `_subject` field is a Formspree convention used as the email subject.

- Headers sent: `Content-Type: application/json`, `Accept: application/json`.

If your endpoint replies with a non-2xx status, the component shows an error message in the chat with a Retry button.

---

## Great For

- Landing-page lead capture and contact forms

- Beta / waitlist signups

- Onboarding quizzes that segment new users

- Job application intake

- Newsletter signup with topic preferences

- GDPR-aware contact forms (turn on the Consent Gate)

- Site-wide help widget (use Popup mode)

---

## A Few Tips

- Keep questions short and conversational — "What should I call you?" beats "Full Name ".

- Mix typing times. A long thoughtful question can use a longer Bot Typing Time, a quick reply can use 0.3s. The pacing is what makes it feel human.

- For Popup mode, leave the FAB on a Master/Page section so it shows on every page.

- Use Multi Choice for "what are you interested in?" style questions — it converts way better than a free-text version.

- Test once with Send To = None before plugging in your real Formspree ID.

---

## Need Help?

If a submission isn't arriving, check that:

- The Formspree ID is just the ID (e.g. `xnqklbpr`), not the full URL.

- Formspree has confirmed your sender email (they email you once after the first submission).

- Your webhook (if using one) responds with a 2xx status.

Everything else works out of the box.

65:T2742,

# StatsHeroPro

A dashboard-grade stats hero block for Framer. Each metric is its own card with optional gradient backgrounds, multi-series charts, multi-segment donut rings, value-labeled axes, and animated count-ups — all in one component, all responsive out of the box.

---

## Why You'll Like It

- Cards that look like a real dashboard. Per-card gradient backgrounds, soft shadows, rounded corners, varied widths via Card Span (1–6). Mix a wide chart card with a narrow donut, just like the reference dashboards on Dribbble.

- Four polished visualizations per stat. Multi-series Sparkline (smooth gradient area fill), multi-series grouped Bar Chart, multi-segment Donut Ring (with center value, suffix, and sub-label), and Pictogram (icon repetition). Pick one per card and they all animate in sync with the count-up.

- Real chart axes. Y-axis grid lines with compact value labels (10K, 12만, 1.2M). X-axis category labels under the chart. Legend auto-renders for multi-series viz with colored dots and labels.

- Numbers that animate themselves. Each stat counts up from zero on scroll-in. Locale-aware formatting (US/UK/Korean/Japanese/Chinese/EU/BR) with optional compact mode so big numbers stay readable.

- Comparison badges that read themselves. Type `+34% YoY` and the badge picks the right color (green ▲) and arrow automatically. Toggle "Invert" for metrics where lower is better — like response time or churn — and the colors flip.

- Auto-fit responsive grid. Set a Min Column Width and the cards reflow automatically as the container shrinks. Or switch to fixed columns if you want strict control.

- Four design presets. Modern (cards on gray), Minimal (borderless on white), Bold (dark dashboard), Soft (pastel) — or go Custom for full control.

- Polished out of the box. Drop on the canvas and you immediately see a hero gradient card, a multi-series sparkline, a multi-segment donut, and a multi-series bar chart — all matching one of the dashboard inspirations on the marketplace.

---

## Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL.

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

Framer will detect the link and place the component on your page. Drag, resize, configure from the right-side property panel.

---

## Setup in 60 Seconds

1. Drop the component on your canvas.

2. Open the property panel on the right.

3. Stats — open the array, replace the four sample cards with your real metrics. Each card has a Label, a Value, and a Visualization dropdown.

4. Style Preset — pick Modern, Minimal, Bold (Dark), or Soft for an instant look.

5. (Optional) Enable Gradient BG on a hero card and pick two colors.

That's it. Scroll the section into view in the live preview and watch the cards animate.

---

## Four Visualization Modes

Each card has a Visualization dropdown. Pick one of:

### Sparkline (multi-line)

Trend lines with optional smooth bezier curves and gradient area fill (top opaque → bottom transparent). Add multiple Series to compare two or more lines on the same chart with an auto legend.

### Bar Chart (grouped)

Multi-series grouped bars. Each Series renders as its own colored bar at every X position, side by side. Perfect for "Sale 1 vs Sale 2 across 12 months."

### Donut Ring (multi-segment)

Multiple Series each contribute a segment around the ring. The center can show the first segment's percentage, the stat value, or the total of all segments — your call. Add a sub-label like "Conversion" beneath the big percentage.

### Pictogram

For "X out of Y" stories: "8 out of 10 customers recommend us." Pick any character or emoji as the icon, set Total Icons (e.g. 10), and the filled count is computed from the value.

### None

Pure number — no visualization. Use for the cleanest, most minimal cards (or hero cards with a gradient background).

---

## Card Spans for Varied Layouts

Each stat card has a Card Span (1–6). The grid lays cards left to right; a card with span 2 takes the next two columns. Mix a 1-column gradient hero next to a 2-column chart next to a 1-column donut and you get a real-feeling dashboard, not just a row of equal squares.

The default sample uses spans 1, 2, 1, 2 to demonstrate.

---

## Real Chart Axes

Turn on Y-Axis Grid for any chart-type stat and the chart automatically draws:

- Horizontal grid lines at "nice" intervals

- Value labels on the left (10K, 20K, 30K, 40K — or 1만, 2만, 3만 in Korean)

Turn on X-Axis Labels and provide a comma-separated list of labels (e.g. `Jan, Feb, Mar, Apr` or `1, 2, 3, 4`). Labels space evenly under the chart.

Both axes inherit colors and sizes from the Chart Axes group, so the look stays consistent across all your cards.

---

## Multi-Series Setup

Each stat has a Series array. Add one item per line / bar series:

- Label — used in the auto legend

- Data Points — comma-separated numbers (used by Sparkline + Bar)

- Value — single number (used by Donut as segment size)

- Color — drives the chart and the legend dot

For a single-line sparkline, just add one series. For a multi-line comparison chart, add 2–3 series with different colors. The legend appears automatically below the chart when there are 2+ series.

---

## What You Can Customize

Every group below is a collapsible panel in the Framer property pane.

- Style Preset — Modern, Minimal, Bold (Dark), Soft, or Custom.

- Stats — full array of cards. Each one has its own Card BG (with optional Gradient), text colors, icon, comparison delta, viz settings, and series.

- Header — eyebrow + title + subtitle with full typography control.

- Card Style — default card BG, radius, padding, alignment, border, shadow, shadow intensity.

- Number Style — font family, size, weight, color, letter-spacing, locale, prefix/suffix sizing.

- Label Style — typography under the icon row.

- Description — optional sentence under the stat.

- Comparison Delta — up/down/neutral colors, arrow toggle, optional pill background.

- Visualization — chart height, sparkline (stroke/smooth/area gradient/dots), bar (gap/group gap/radius), donut (size/ring width/track/center text + suffix + sub-label), pictogram (columns/size/gap/off opacity).

- Chart Axes — grid color/stroke/dashed, Y label color/size, X label color/size/gap.

- Legend — show, spacing, font, color, dot size, item gap, alignment.

- Icon Style — optional icon next to the label (off by default for cleaner cards).

- Animation — scroll trigger, count-up duration, easing curve, stagger, play-once, viz draw-in.

- Layout — auto-fit responsive (with min column width) or fixed columns, gaps, container framing.

- Footer / Source — optional small line under the cards.

Most designers only touch Stats, Style Preset, and a color or two. Pick a preset, edit your cards, ship.

---

## Locale & Compact Formatting

Set the Locale in Number Style. The component uses your browser's `Intl.NumberFormat`:

|---|---|---|---|

| 12500 | en-US | 12,500 | 12.5K |

| 12500 | ko-KR | 12,500 | 1.3만 |

| 4700000 | en-US | 4,700,000 | 4.7M |

| 4700000 | ja-JP | 4,700,000 | 470万 |

| 4700000 | de-DE | 4.700.000 | 4,7 Mio. |

Compact mode is recommended for any metric with 5+ digits. The Y-axis labels use the same compact helper so big chart values like 40,000 render as 40K — exactly like the references.

---

## Great For

- SaaS marketing pages ("Built for teams that ship")

- Investor decks rendered as web pages

- Annual report / year-in-review microsites

- Pricing pages (12K teams, 4.9★ rating, 99.98% uptime)

- Case studies showing client results

- Recruiting pages ("Why work here")

- Product launch pages with key metrics

- Anywhere a row of static numbers would work, but better

---

## A Few Tips

- For headline impact, set Number Font Size to 40–60 and Letter Spacing to a slight negative (-1 to -1.5).

- Use a Gradient BG on one or two hero cards to break up the grid and create visual hierarchy.

- For multi-series charts, keep your colors complementary (e.g. orange + purple) — it reads more clearly than two similar shades.

- Y-axis grid is the single fastest way to make a card feel "dashboard-grade" instead of "marketing-fluff."

- For Korean / Japanese sites, set Locale appropriately so big numbers use the local convention (만, 億, 万).

- Use Card Span 2 on the chart cards and Card Span 1 on the donuts and gradient hero cards for the cleanest layouts.

---

## Need Help?

If a chart doesn't appear:

- Check that the Visualization dropdown isn't on "None".

- For Sparkline / Bar: each Series needs a Data Points field with at least 2 numbers.

- For Donut: each Series needs a Value > 0.

- For Pictogram: confirm Pictogram Icon and Total Icons are filled in.

If the cards aren't reflowing on small screens:

- Make sure Auto-Fit Columns is on in the Layout group.

- Lower Min Column Width (default 260) if you want narrower cards.

If a stat looks crowded:

- Increase the card padding (Card Style → Padding).

- Enable Compact mode for big numbers.

- Reduce decimal places if you don't need them.

Everything else just works.

66:Tc68,

PREVIEW URL

- https://traditional-insurance-685177.framer.app

1. Introduction

The RFQCart component is a customizable shopping cart system designed for handling quote requests, bulk orders, and custom inquiries without the need for payment processing. It supports localStorage persistence to maintain cart items across sessions, webhook submission for quote requests, and features engaging animations for enhanced user experience.

2. Features

- LocalStorage Persistence: Automatically saves cart items in the user's browser.

- Webhook Submission: Send quote requests directly to a specified URL.

- Customizable Appearance: Tailor colors, texts, and styles to fit your design needs.

- Multiple Display Modes: Choose from full cart, button, mini summary, header icon, or header popup.

- Dynamic Form Fields: Collect additional customer information through customizable forms.

- Animation Support: Enable or disable animations for smoother transitions.

## 3. Installation & Setup

To use the RFQCart component in Framer:

1. Open your Framer project.

2. Navigate to the "Marketplace."

3. Search for "RFQCart" and select it.

4. Click "Add to Project" to import the component into your workspace.

5. Drag and drop the RFQCart component onto your canvas.

4. How to Use

1. Select Component Type: Choose between "cart" for a full cart view or "addToCart" for a button.

2. Configure Display Mode: Select how you want the cart to be displayed (e.g., full cart, button, mini summary).

3. Set Storage Key: Use a unique key to store cart data in localStorage.

4. Customize Appearance:

- Adjust color settings for primary, secondary, background, text, and borders.

- Configure the button appearance if using the "addToCart" type.

5. Define Webhook URL: Paste your webhook endpoint (Make/Zapier/Cloudflare Workers). The component sends a POST (JSON) request with items[], summary, requestId, and optional customer. Return 2xx for success (non-2xx shows an error). If CORS blocks direct requests, use a proxy (e.g., Cloudflare Workers).

6. Set Up Form Fields: If using forms, define custom fields for customer information.

7. Add Event Callbacks: Use the optional event callbacks to handle cart updates, submission success, and errors.

5. Example Payload (POST JSON)

```

{

"requestId": "RFQ-...",

"timestamp": "2026-01-20T14:45:30.000Z",

"customer": { "name": "Jane Smith", "email": "jane@company.com" },

"items": [

{ "id": "widget-pro", "name": "Widget Pro", "price": 149, "quantity": 10, "subtotal": 1490 }

"summary": { "totalItems": 10, "totalPrice": 1490, "currency": "$" }

}

```

67:Te9e,

1. Introduction

The SVGFillIndicator component visually represents progress using SVG images, featuring customizable fill styles and animations.

2. Features

Two fill styles: linear and wave
Customizable fill directions (left-to-right, right-to-left, bottom-to-top, top-to-bottom)
Supports SVG images as backgrounds
Adjustable border radius
Percentage display with customizable position, color, and font size
Animation control with various triggers

3. Installation & Setup

To add the SVGFillIndicator component to your Framer project:

Open your Framer project.
Navigate to the Components panel.
Search for "SVGFillIndicator".
Drag and drop the component onto your canvas.

4. How to Use

Select the SVGFillIndicator component on the canvas.
In the right panel, configure the properties-Fill Style: Choose between linear or wave.-Fill Direction: Select the direction of the fill animation.-SVG Image: Upload or link to your SVG image.-Border Radius: Set the desired border radius.-Progress Value: Define the progress percentage (0-100).-Percentage Display: Toggle visibility and customize appearance.-Animation: Configure animation trigger and duration.-Accessibility: Set ARIA labels and motion preferences.
Preview your component to see the effects of your configurations.

5. Property Controls Reference

fillStyle

fillStyle (ControlType.Enum, Default: "linear") - Defines the type of fill animation (linear or wave).

fillDirection

fillDirection (ControlType.Enum, Default: "left-to-right") - Specifies the direction of the fill animation. Options include:- "left-to-right"- "right-to-left"- "bottom-to-top"- "top-to-bottom"

svgImage

svgImage (ControlType.Image) - The SVG image to be used as the basis for the fill animation.

borderRadius

borderRadius (ControlType.Number, Default: 0) - Sets the border radius in pixels.

value

value (ControlType.Number, Default: 65) - The current progress value, ranging from 0 to 100.

percentage

Configures the percentage display settings.

show (ControlType.Boolean, Default: true) - Determines if the percentage text is shown.
position (ControlType.Enum, Default: "bottom") - Specifies the position of the percentage text. Options include:- "top"- "center"- "bottom"
color (ControlType.Color, Default: "#6366F1") - Sets the text color of the percentage display.
fontSize (ControlType.Number, Default: 16) - Defines the font size of the percentage text in pixels.

animation

Controls the animation behavior.

trigger (ControlType.Enum, Default: "auto") - Sets the animation trigger mode. Options include:- "auto"- "onView"- "manual"
duration (ControlType.Number, Default: 1.2) - Specifies the duration of the animation in seconds.

accessibility

Configures accessibility settings for the component.

ariaLabel (ControlType.String, Default: "Progress indicator") - ARIA label for screen readers.
respectReducedMotion (ControlType.Boolean, Default: true) - Indicates whether to respect users' motion preferences.

68:T1237,

1. Introduction

The ZoomableProductViewer component enables users to zoom in on product images interactively, enhancing visual details for better product examination.

2. Features

Interactive zoom functionality with various modes (hover, click, both)
Customizable zoom lens shape and size
Adjustable zoom level for detailed views
Option to display a hint and zoom indicator for user guidance
Configurable styles including background color and shadow effects

3. Installation & Setup

To add the ZoomableProductViewer component to your Framer project.

Open your Framer project.
Navigate to the Marketplace and search for "ZoomableProductViewer".
Click the "Install" button to add the component to your project.
Drag the ZoomableProductViewer component onto your canvas.

4. How to Use

Select the Component: Click on the ZoomableProductViewer component on the canvas.
Upload an Image: In the properties panel, upload a high-resolution image for better zoom quality.
Configure Zoom Settings:- Set the zoom level, lens size, and shape according to your preference.
Adjust Style: Modify the background color, border radius, and shadow settings to match your design.
Customize UI Elements: Enable or disable the hint and zoom indicator as needed.
Set Interaction Preferences: Choose how the zoom is activated (hover, click, or both) and adjust smooth follow settings.
Preview: Test the component in preview mode to ensure the zoom functionality works as expected.

5. Property Controls Reference

zoomConfigures the zoom functionality of the component.

level (Number, Default: 2.5) - The magnification level applied to the image when zoomed.
lensSize (Number, Default: 150) - The diameter of the zoom lens in pixels.
lensShape (Enum, Default: "circle") - Determines the shape of the zoom lens (circle or square).
showLensBorder (Boolean, Default: true) - Whether to display a border around the zoom lens.
lensBorderColor (Color, Default: "rgba(255, 255, 255, 0.8)") - Color of the lens border.
lensBorderWidth (Number, Default: 3) - Thickness of the lens border in pixels.
safePadding (Number, Default: 32) - Extra padding to prevent lens clipping at edges.

styleControls the visual appearance of the component.

backgroundColor (Color, Default: "#0a0a0a") - Background color of the component.
borderRadius (Number, Default: 12) - Corner roundness in pixels.
showShadow (Boolean, Default: true) - Whether to display a shadow around the component.
shadowColor (Color, Default: "rgba(0, 0, 0, 0.3)") - Color of the shadow.
shadowBlur (Number, Default: 30) - Blur effect of the shadow in pixels.

uiConfigures user interface elements of the component.

showHint (Boolean, Default: true) - Whether to display a hint when the user hovers over the image.
hintText (String, Default: "Hover to zoom") - Text displayed in the hint.
hintPosition (Enum, Default: "top-left") - Position of the hint relative to the component.
showZoomIndicator (Boolean, Default: true) - Whether to display the zoom level indicator.
cursorStyle (Enum, Default: "crosshair") - Style of the cursor when hovering over the component.

interactionConfigures user interaction settings.

zoomMode (Enum, Default: "hover") - Determines how the zoom is activated (hover, click, or both).
smoothFollow (Boolean, Default: true) - Enables smooth following of the mouse cursor within the zoom area.
followSpeed (Number, Default: 0.15) - Speed of the smooth follow effect.

69:T2545,

Multi-Step Form Pro

CHANGELOG

v1.2.0

- Form Submit Mode: Choose between AJAX (stay on page with success screen) or Redirect (navigate to form service page) for form services like Formspree.

- Success Screen Redirect: Auto-redirect to a custom URL after showing the success screen with a countdown timer.

v1.1.0

- Font Selection: Provide a UI to select the Framer project font (ControlType.Font).

- Border Width: Adjust the form container border thickness (0-10px).

1. INTRODUCTION

Multi-Step Form Pro lets you build multi-step forms with flexible fields, styling, and animations. Send submissions via webhook or form data, with a success screen and optional auto-redirect.

No coding required - just paste your Formspree URL and start receiving emails instantly.

2. FEATURES

- Customizable step titles and subtitles

- Multiple field types (text, email, date, etc.)

- Conditional required fields

- Webhook integration for submissions (Zapier, Make, Slack, Discord, Google Chat)

- Form service integration (Formspree, Netlify, etc.) with AJAX or Redirect mode - no coding needed

- Custom styling options for colors, borders, and fonts

- Success screen display with optional auto-redirect

- Animation effects between steps

3. INSTALLATION & SETUP

Install Into Your Framer Project

After purchase you'll receive a `.txt` file containing the component URL. To bring it into Framer:

1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).

2. Go to your Framer dashboard and open the project where you want to use it.

3. Click into the canvas.

4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).

---

4. HOW TO USE

1. Configure Steps: Modify the stepsMeta property to define the titles and subtitles of each form step.

2. Add Fields: Use the fields property to configure the input fields for each step, specifying the type, label, and requirements.

3. Customize Appearance: Adjust the colors, styling, and buttons properties to match your design preferences.

4. Set Up Submission: Configure the submission property to determine how the form data should be sent (via webhook or form service).

5. Configure Success Screen: Customize the success screen message and optionally enable auto-redirect to another page.

6. Handle Submission: Implement the onSubmit function to manage the data after form submission.

5. PROPERTY CONTROLS REFERENCE

[stepsMeta]

Defines the steps of the form.

- title (String, Default: "New Step")

The title displayed for each step

- subtitle (String, Default: "Step description")

A brief description shown under the step title

[fields]

Configures the input fields for the form.

- stepIndex (Number, Default: 0)

Specifies the step number the field belongs to (0-based index)

- type (Enum, Default: "text")

The type of input field (text, email, tel, textarea, select, radio, checkbox, date, url)

- label (String, Default: "Field Label")

Display name for the field

- placeholder (String, Default: "")

Hint text shown when the field is empty

- required (Boolean, Default: false)

Indicates if the field is mandatory

- options (String, Default: "")

Comma-separated list of options for select or radio inputs

- termsLinkText (String, Default: "")

Text to display as a link (for checkbox)

- termsLinkUrl (String, Default: "")

URL for the link (for checkbox)

[colors]

Configures the color scheme of the component.

- accentColor (Color, Default: #4071F7)

Main accent color for buttons and active states

- backgroundColor (Color, Default: rgba(15, 15, 20, 0.95))

Background color of the form container

- textColor (Color, Default: #FFFFFF)

Primary text color for headings and labels

- subtextColor (Color, Default: rgba(255, 255, 255, 0.6))

Secondary text color for descriptions and placeholders

- borderColor (Color, Default: transparent)

Border color of the form container

- inputBorderColor (Color, Default: rgba(255, 255, 255, 0.1))

Border color for input fields

[styling]

Controls the border styling of the component.

- borderRadius (Number, Default: 24)

Corner roundness of the form container

- inputBorderRadius (Number, Default: 12)

Corner roundness of input fields and buttons

- borderWidth (Number, Default: 1)

Thickness of the form container border in pixels

- font (Font)

Select a font from your Framer project

[buttons]

Configures the action button appearance and behavior.

- nextButtonText (String, Default: "Continue")

Text for the next button

- prevButtonText (String, Default: "Back")

Text for the previous button

- submitButtonText (String, Default: "Submit")

Text for the submit button

- buttonTextColor (Color, Default: #FFFFFF)

Text color for primary action buttons

- buttonBackgroundColor (Color, Default: "")

Background color for the primary button

[animation]

Configures the animation behavior between form steps.

- animationType (Enum, Default: "slide")

Transition effect style (slide, fade, scale)

- animationDuration (Number, Default: 0.4)

Duration of the transition effect in seconds

[success]

Configures the success message displayed after form submission.

- successTitle (String, Default: "Thank You!")

Title shown on the success screen

- successMessage (String, Default: "We'll get back to you soon.")

Message displayed below the success title

- enableRedirect (Boolean, Default: false)

Enable automatic redirect after showing success screen

- redirectUrl (String, Default: "")

URL to redirect to after success screen (e.g., "/thank-you")

- redirectDelay (Number, Default: 3)

Seconds to wait before redirecting (Min: 1, Max: 10)

[submission]

Controls the submission settings for form data.

- useWebhook (Boolean, Default: false)

Enable webhook submission

- webhookType (Enum, Default: "json")

Select the webhook format (json, google-chat, slack, discord)

- webhookUrl (String, Default: "")

The endpoint URL for webhook submission

- useFormAction (Boolean, Default: false)

Enable form service submission (Formspree, Netlify, etc.)

- formAction (String, Default: "")

URL for form service submission (e.g., https://formspree.io/f/xxxxx)

- formMethod (Enum, Default: "POST")

HTTP method for form submission (POST, GET)

- formSubmitMode (Enum, Default: "redirect")

Submission mode: "ajax" stays on page, "redirect" navigates to form service page

6. HOW TO RECEIVE FORM SUBMISSIONS BY EMAIL (FORMSPREE)

No coding required! Just follow these simple steps to receive form submissions directly in your email inbox.

Recommended: Email delivery via Formspree (Free plan available)

Step 1) Create a Formspree account

- Go to Formspree and sign up: https://formspree.io

- Verify your email if Formspree asks you to.

Step 2) Create a new form

- In Formspree, create a New Form

- Set the recipient email to your email address (e.g., sample@test.com)

- Formspree will generate a Form Endpoint URL, which looks like: https://formspree.io/f/xxxxxxxx

Step 3) Paste the endpoint into Framer

- Open your Framer project

- Select the Multi Step Form component

- Go to Form Submission settings:

- Use Form Service: Yes

- Form Action URL: paste your Formspree endpoint

- Form Method: POST

- Submit Mode: Choose your preferred mode (see below)

Submit Mode Options:

AJAX (Stay on page)

Shows the component's built-in success screen without leaving the page. Recommended for a seamless user experience.

Redirect (Default)

Navigates to Formspree's confirmation page after submission.

Step 4) (Optional) Set up auto-redirect after success

If using AJAX mode, you can automatically redirect users to a custom page after showing the success screen:

- Go to Success Screen settings:

- Auto Redirect: Yes

- Redirect URL: Enter your destination (e.g., /thank-you or https://example.com/thank-you)

- Delay (seconds): Set how long to show the success screen before redirecting (1-10 seconds)

Step 5) Test it

1. Publish or preview the site

2. Submit a test entry

3. Confirm the message arrives in your email inbox

4. (If it doesn't show up, also check Spam/Junk folder)

6a:Ta80,

1. Introduction

Create dynamic, interactive pixel trails that respond to cursor movement, enhancing user engagement with glowing effects.

2. Features

Interactive grid-based pixel trail effect.
Glowing pixels that fade over time.
Customizable parameters for color, size, and behavior.
Gooey effect for liquid-like blending between pixels.
Optional pulsing animation for active pixels.

3. Installation & Setup

To add the CursorPixelTrail component to your Framer project

Open your Framer project.
Navigate to the Framer Marketplace.
Search for "CursorPixelTrail" and click on the component.
Click "Add to Project" to include it in your workspace.

4. How to Use

Drag and drop the CursorPixelTrail component onto your canvas.
Customize the component properties in the properties panel.
Adjust settings such as glowColor, backgroundColor, and gridSize to fit your design.
Preview your project to see the pixel trail effect in action.

5. Property Controls Reference

glowColor (Color, Default: #00ff88) - Color of the glowing pixels.
backgroundColor (Color, Default: #0a0a0a) - Canvas background color.
gridSize (Number, Default: 20) - Size of each pixel in the grid (px).
pixelGap (Number, Default: 4) - Space between pixels (px).
pixelRoundness (Number, Default: 4) - Corner radius of pixels. 0 = square.
glowIntensity (Number, Default: 0.9) - Maximum brightness of activated pixels.
fadeSpeed (Number, Default: 0.03) - Speed at which pixels fade out. Lower values result in longer trails.
trailLength (Number, Default: 80) - Radius of cursor activation area (px).
gooeyEnabled (Boolean, Default: true) - Enable liquid-like blending between pixels.
gooeyStrength (Number, Default: 8) - Influence of neighboring pixels when gooey effect is enabled.
pulseEnabled (Boolean, Default: false) - Enable subtle pulsing animation for active pixels.
pulseSpeed (Number, Default: 2) - Speed of the pulse animation.
transparentBg (Boolean, Default: false) - Set background transparent for overlay use.

6b:Tbfb,

1. Introduction

The Interactive_Hero_Blob component creates an engaging, animated background of interactive blobs that respond to mouse movements, enhancing visual appeal.

2. Features

Five customizable blobs with varying colors and sizes.
Multiple theme options including custom color configurations.
Smooth animations with adjustable speed and intensity.
Mouse interaction for dynamic movement and cursor glow effects.
GPU-accelerated blur effects for a gooey appearance.

3. Installation & Setup

Open your Framer project.
Navigate to the components panel.
Search for "Interactive_Hero_Blob" and click on it to add it to your canvas.
Adjust the size of the component as needed.

4. How to Use

Select the Interactive_Hero_Blob component in your Framer project.
In the properties panel, configure the following settings:-Color Mode: Choose a theme from the dropdown or select "custom" to define your colors.-Custom Colors: If "custom" is selected, specify your desired colors for the blobs and background.-Intensity: Adjust the glow intensity of the blobs.-Speed: Set the animation speed of the blobs.-Scale: Change the size of all blobs proportionally.-Blur: Define the amount of blur for the gooey effect.-Interactive: Toggle whether blobs should react to mouse movements.-Cursor Glow: Enable or disable the glowing effect at the cursor position.
Preview your changes in the Framer canvas to see the effects in real-time.

5. Property Controls Reference

colorMode (Enum, Default: aqua) - Select a preset theme or choose Custom for your own colors.
customColor1 (Color, Default: #ff6b6b) - First blob color (visible when using custom mode).
customColor2 (Color, Default: #4ecdc4) - Second blob color (visible when using custom mode).
customColor3 (Color, Default: #ffe66d) - Third blob color (visible when using custom mode).
customBackground (Color, Default: #0a0a0a) - Background color (recommended dark colors).
intensity (Number, Default: 0.8) - Glow intensity of the blobs.
speed (Number, Default: 1) - Animation speed of the blobs.
scale (Number, Default: 1) - Size multiplier for all blobs.
blur (Number, Default: 10) - Blur amount for the gooey effect.
interactive (Boolean, Default: true) - Blobs follow mouse movement.
cursorGlow (Boolean, Default: true) - Show glowing effect at cursor position.

6c:T181d,

# Interactive Product Showcase v2 - Usage Guide

## 1. Introduction

The Interactive_Product_Showcase component enables users to create engaging product displays with interactive hotspots and tooltips.

## 2. Features

- Add multiple interactive hotspots on a background image.

- Customize hotspot icons, colors, and sizes.

- Display tooltips with titles, descriptions, and optional images or videos.

- Support for customizable button actions in tooltips.

- Responsive design for various screen sizes.

- Video support with auto-play, loop, and loading indicator.

## 3. How to add

1. Open the downloaded file and copy the Framer component link provided inside.

2. Open your project in Framer.

3. Paste the copied link directly onto the Framer canvas.

4. The component will be added to your project automatically.

5. You can then find it on the canvas and in Assets → Components.

6. From there, you can drag and reuse it anywhere in your project as many times as needed.

## 4. How to Use

- Select the Interactive_Product_Showcase component on your canvas.

- In the properties panel, set the Background Image to your desired product image.

- Define the Hotspots by adding details such as position (X, Y), title, description, media type (image or video), and optional button text and link.

- Customize the Hotspot Button Style to select the icon type, size, and colors.

- Adjust the Tooltip Style to modify the appearance of tooltips, including size and shape.

- Set typography options for tooltips in the Tooltip Typography section.

- Enable or disable the Tooltip Button based on your needs.

## 5. Property Controls Reference

### backgroundImage

- src (String) - URL of the background image.

- srcSet (String, Default: undefined) - Optional responsive image sources.

- alt (String, Default: "Background") - Alt text for accessibility.

### hotspots

Configures interactive hotspot markers.

- id (String, Default: undefined) - Unique identifier for the hotspot (hidden).

- x (Number, Default: 50) - Horizontal position from left (0-100%).

- y (Number, Default: 50) - Vertical position from top (0-100%).

- title (String, Default: "Hotspot Title") - Title shown on hover and in tooltip.

- description (String, Default: "Hotspot description") - Detailed description shown in tooltip.

- tooltipMediaType (Enum, Default: "image") - Media type for tooltip: image or video.

- tooltipImage (ResponsiveImage, Default: undefined) - Image displayed at the top of the tooltip (visible when Media Type is "image").

- tooltipVideo (File, Default: undefined) - Video displayed at the top of the tooltip with auto-play and loop (visible when Media Type is "video"). Supported formats: mp4, webm, mov.

- buttonText (String, Default: "View Details") - Call-to-action button label.

- buttonLink (String, Default: "https://example.com") - URL opened when the button is clicked.

- tooltipPosition (Enum, Default: "auto") - Tooltip positioning: auto or custom.

- tooltipVertical (Enum, Default: "top") - Vertical position: top or bottom (hidden if tooltipPosition is not custom).

- tooltipHorizontal (Enum, Default: "right") - Horizontal position: left or right (hidden if tooltipPosition is not custom).

### hotspotStyle

Controls the appearance of hotspot buttons.

- icon (Enum, Default: "plus") - Icon style: plus, arrow, or pulse.

- iconSize (Number, Default: 12) - Size of the icon in pixels.

- color (Color, Default: #3b82f6) - Background color of the hotspot button.

- iconColor (Color, Default: #ffffff) - Color of the icon and text.

### hotspotLabel

Configures the appearance of hotspot labels.

- show (Boolean, Default: true) - Whether to show the label on hover.

- font (FramerFont, Default: {}) - Typography settings for the label text.

### tooltipStyle

Controls tooltip appearance.

- size (Enum, Default: "medium") - Tooltip size: small, medium, or large.

- shape (Enum, Default: "rounded") - Tooltip shape: rounded or square.

- backgroundColor (Color, Default: #ffffff) - Background color of the tooltip.

- textColor (Color, Default: #1f2937) - Text color within the tooltip.

### tooltipTypography

Configures tooltip text styles.

- titleFont (FramerFont, Default: {}) - Typography settings for the tooltip title.

- descriptionFont (FramerFont, Default: {}) - Typography settings for the tooltip description.

### tooltipButton

Controls the appearance of the button in tooltips.

- show (Boolean, Default: true) - Whether to display the call-to-action button.

- textColor (Color, Default: #ffffff) - Text color of the button.

- font (FramerFont, Default: {}) - Typography settings for the button text.

---

## 6. Version History

| Version | Changes |

|---------|---------|

| 2.0.0 | Added video support with media type selector (image/video), loading indicator for videos |

| 1.0.0 | Initial release with image-only tooltip support |

6d:T15e4,

1. Introduction

TheSignatureDrawingPadcomponent allows users to capture handwritten signatures directly within a web application. It provides a responsive and intuitive interface for signing documents, making it ideal for applications such as contracts, forms, and agreements where digital signatures are required.

2. Features

Capture signatures with touch or mouse input.
Undo and clear functionalities for easy corrections.
Customizable appearance including colors, button styles, and header text.
Supports submission of signature images via a webhook.
Displays success and error messages after submission.

3. Installation & Setup

To add theSignatureDrawingPadcomponent to your Framer project

Open your Framer project.
Navigate to the Marketplace.
Search for "SignatureDrawingPad" and click on it.
Click the "Add to Project" button.
Drag and drop the component from the elements panel into your design canvas.

4. How to Use

Configure Properties: Select the SignatureDrawingPad component in your canvas to access the property controls panel.
Set Dimensions: Adjust the width and height to fit your design requirements.
Customize Appearance: Modify the stroke, colors, and border properties for aesthetic adjustments.
Button Settings: Enable or disable the undoButton, clearButton, and submitButton. Customize their appearance and text as needed.
Submission Settings: Set the webhookUrl for signature submissions and customize success/error messages.
Integrate Submission Logic: Optionally, define an onSubmit callback function to handle the signature data after submission.

5. Property Controls Reference

Sets the width of the drawing pad in pixels.

width (type: Number, default: 480)
height (type: Number, default: 320)

Sets the height of the drawing pad in pixels.

stroke (type: Object, default: { color: "#1E293B", width: 2.5 })
Configures the stroke properties for drawing.-color(type:Color, default:#1E293B)Specifies the color of the signature stroke.-width(type:Number, default:2.5)Sets the width of the stroke in pixels.
colors (type: Object, default: { header: "#D1E8FF", canvas: "#FFFFFF", headerText: "#1E293B", placeholder: "#94A3B8" })
Defines the color scheme for the component.-header(type:Color, default:#D1E8FF)Background color of the header.-canvas(type:Color, default:#FFFFFF)Background color of the drawing canvas.-headerText(type:Color, default:#1E293B)Color of the header text.-placeholder(type:Color, default:#94A3B8)Color of the placeholder text.
border (type: Object, default: { width: 1, color: "#D1E8FF", radius: 16 })
Configures the border appearance.-width(type:Number, default:1)Width of the border in pixels.-color(type:Color, default:#D1E8FF)Color of the border.-radius(type:Number, default:16)Corner radius of the border in pixels.
text (type: Object, default: { headerText: "Signature Line", placeholder: "sign here" })Configures text properties.-headerText(type:String, default:"Signature Line")Text displayed in the header.-placeholder(type:String, default:"sign here")Placeholder text shown in the drawing area.
buttonSize (type: Enum, default: medium)Specifies the size of the buttons. Options:small,medium.
undoButton
- enabled: Toggles whether the Undo button is displayed and usable.
- text: Label text shown on the Undo button.
- color: Background color of the Undo button.
- textColor: Text color of the Undo button label.
- borderStyle: Border style for the button (e.g., none, solid).
- borderWidth: Border thickness of the button.
- borderColor: Border color of the button.
clearButton
- enabled: Toggles whether the Clear button is displayed and usable.
- text: Label text shown on the Clear button.
- color: Background color of the Clear button.
- textColor: Text color of the Clear button label.
- borderStyle: Border style for the button (e.g., none, solid).
- borderWidth: Border thickness of the button.
- borderColor: Border color of the button.
submitButton
- enabled: Toggles whether the Submit button is displayed and usable.
- text: Label text shown on the Submit button.
- color: Background color of the Submit button.
- textColor: Text color of the Submit button label.
- borderStyle: Border style for the button (e.g., none, solid).
- borderWidth: Border thickness of the button.
- borderColor: Border color of the button.

6e:T1112,

1. Introduction

A premium Framer component for real-time multi-currency conversion, with an intuitive, visually polished interface ideal for e-commerce, finance dashboards, and more.

2. Features

Supports multiple currencies with real-time exchange rates.
Customizable themes (light and dark) to fit your design needs.
User-friendly interface with smooth animations.
Option to show or hide currency flags and symbols.
Allows users to add or remove custom currencies.
Responsive design for mobile and desktop views.
Automatic refresh of exchange rates at defined intervals.

3. Installation & Setup

To add the MultiExchangeRates component to your Framer project:

Navigate to the Framer Marketplace.
Search for "MultiExchangeRates"
Click on the component and select "Add to Project."
Drag the component from the assets panel into your design canvas.

4. How to Use

Customizing the Component

Select the MultiExchangeRates component on your canvas.
In the properties panel, you can customize various options, including:-Theme: Choose between 'dark' or 'light.'-Default Base Currency: Set the currency from which other currencies will be converted.-Default Amount: Specify the initial amount to display for conversion.-Currency Display Options: Toggle visibility for flags, currency symbols, and exchange rates.

Adding Currencies

In the properties panel, enable the Allow User Edit option.
Users can click the "Add Currency" button to include additional currencies not already displayed.

Adjusting Styles

Modify Background Color*, Card Background, and *Accent Colors to align with your design choices.
Utilize Border Radius to set the roundness of corners for all elements.

5. Property Controls Reference

theme (Enum, default: dark): Choose between dark and light color schemes.
defaultBaseCurrency (Enum, default: USD): The primary currency to convert from.
defaultAmount (Number, default: 1): Initial amount to display for conversion.
backgroundColor (Color, default: -): Override theme background.
cardBackgroundColor (Color, default: -): Override theme card color.
accentColor (Color, default: #6366f1): Primary accent color for buttons and highlights.
accentGradientEnd (Color, default: #8b5cf6): End color for gradient effects on buttons.
showFlags (Boolean, default: true): Display country flag emojis for each currency.
flagColor (Color, default: inherit): Custom color for flag emojis.
borderRadius (Number, default: 24): Rounded corner size for all elements.
showTitle (Boolean, default: true): Display the header section with title and subtitle.
title (String, default: Multi Exchange Rates): Main heading text displayed at the top.
showCurrencySymbol (Boolean, default: true): Show currency symbols before amounts.
showExchangeRate (Boolean, default: true): Display the conversion rate for each currency.
enableGlowEffect (Boolean, default: true): Add glow effects to buttons and cards on hover.
compactMode (Boolean, default: false): Reduce spacing and padding for a compact layout.
allowUserEdit (Boolean, default: true): Let users add or remove currencies from the list.
useRealTimeRates (Boolean, default: true): Fetch live exchange rates from API.
refreshInterval (Number, default: 30): How often to update exchange rates (in minutes).

6f:T1f73,

Version 2.0.0 released after 5 months!!

Hyperlinks in Cells

You can make any cell clickable by writing it in one of the formats below. This works the same way for both CSV input and Google Sheets.

Three ways to make a cell clickable

| Cell content | What you see in the table | When to use |

| ------------ | ------------------------- | ----------- |

| `[Visit](https://acme.com)` | `Visit` (clickable) | Recommended. Shows a short label, hides the URL. Works in any column. |

| `https://acme.com` | `https://acme.com` (clickable) | When you want the URL itself to be visible. |

Email and phone links are also supported

- `mailto:hello@acme.com`

- `tel:+1-555-1234`

Auto-Detect Links (optional)

Turn on Auto-Detect Links in the property panel if you want any URL, email, or phone number that appears inside a normal text cell to become clickable automatically. Off by default.

Link Column (whole column is a link)

If an entire column should always be a link, set that column's style to `link` in Column Styles. For example, to make the third column a link column

```

none,none,link,pill

```

Inside a link column you can use the `Label | URL` form to show a friendly label.

Important note for Google Sheets users

If your sheet uses the `=HYPERLINK("url", "label")` formula, the link will not work in the table. Google's public sheet export only returns the label and removes the URL, so the component cannot read it.

To fix this, replace the formula with the markdown form directly in the cell

| Before (does not work) | After (works) |

| ---------------------- | ------------- |

| `=HYPERLINK("https://acme.com", "Visit")` | `[Visit](https://acme.com)` |

After updating the sheet, click the Refresh button on the table.

Link appearance

Use these properties to style links

- Link Color — color of the clickable text

- Underline Links — show or hide the underline

- Open Links in New Tab — open in a new browser tab when clicked

1. Introduction

Connect Google Sheets or paste CSV data to create dynamic tables. Includes search, filter, sort, pagination, and customizable status badges. Perfect for dashboards

2. Features

Data source options: CSV input or Google Sheets.
Search and filter capabilities.
Column sorting on click.
Pagination support for managing large datasets.
Manual refresh option for Google Sheets data.
Customizable styles for headers and data cells.
Badge color rules for visual representation of status values.

3. Installation & Setup

To use the Dynamic Data Table in your Framer project, follow these steps

Open your Framer project.
Navigate to the Marketplace section.
Search for Dynamic Data Table and click on it.
Click the Install button to add the component to your project.
Drag and drop the Dynamic Data Table component onto your canvas.

4. How to Use

To customize and integrate the Dynamic Data Table into your project, follow these steps

Select the Dynamic Data Table component on your canvas.
In the properties panel, choose your data source:- For CSV, enter your data in the provided text area.- For Google Sheets, paste the public URL of your sheet and specify the sheet tab name.
Define the column headers that match your data.
Customize the appearance using the available style options such as background color, text color, and border settings.
Enable or disable features like sorting, searching, filtering, and pagination based on your requirements.
Preview your project to see the Dynamic Data Table in action.

5. Property Controls Reference

dataSource: "csv" | "googleSheets" (default: "csv") - Select data input method
manualData: string (default: sample CSV data) - Manually input data in CSV format
googleSheetUrl: string (default: "") - Public Google Sheets URL
sheetName: string (default: "Sheet1") - Sheet tab name to load
skipFirstRow: boolean (default: true) - Skip the first row (exclude header)
headers: string[] (default: ["Name", "Email", "Role", "Status"]) - Table header array
columnStyles: string (default: "none,none,dot,pill") - Badge style per column (none/dot/pill)
badgeColorRules: array (default: predefined rules) - Keyword-based badge color rules
showTitle: boolean (default: false) - Toggle table title visibility
tableTitle: string (default: "Data Table") - Table title text
titleSize: number (default: 20) - Title font size
style: "minimal" | "striped" | "bordered" | "modern" (default: "modern") - Table style preset
backgroundColor: string (default: "#0f0f14") - Table background color
headerColor: string (default: "#1a1a24") - Header background color
headerTextColor: string (default: "#ffffff") - Header text color
textColor: string (default: "#ffffff") - Body text color
accentColor: string (default: "#6366f1") - Accent color (buttons, links, etc.)
rowHoverColor: string (default: "#6366f120") - Row background color on hover
borderRadius: number (default: 12) - Table corner radius
borderColor: string (default: "#2a2a3a") - Border color
showBorder: boolean (default: false) - Toggle border visibility
showHeader: boolean (default: true) - Toggle header row visibility
searchBackground: string (default: "#1a1a24") - Search bar background color
searchBorderColor: string (default: "#2a2a3a") - Search bar border color
filterButtonColor: string (default: "#2a2a3a") - Filter button background color
filterButtonTextColor: string (default: "#ffffff") - Filter button text color
enableHover: boolean (default: true) - Enable row hover effect
enableAnimation: boolean (default: true) - Enable animation effects
enableSearch: boolean (default: true) - Enable search feature
enableFilter: boolean (default: true) - Enable filter feature
filterColumn: string (default: "") - Column name to apply filtering to
enableSort: boolean (default: true) - Enable sorting feature
enablePagination: boolean (default: true) - Enable pagination
rowsPerPage: number (default: 10) - Number of rows per page
showRefreshButton: boolean (default: true) - Toggle refresh button visibility
showScrollbar: boolean (default: true) - Toggle scrollbar visibility
scrollbarColor: string (default: "#6366f1") - Scrollbar color

70:T448,

## Features

- Customizable styles: minimal, gradient, rounded, segmented

- Adjustable progress, title, subtitle, colors, bar height, and animation duration

- Show or hide percentage

- Interactive animations

## Getting Started

Drag the component onto your canvas to start tracking progress visually.

## Property Reference

- Progress(%): Set the progress percentage (0-100)

- Example: Set to 75 for a progress of 75%

- Bar Style: Choose from minimal, gradient, rounded, or segmented

- Bar Height: Adjust the height of the progress bar

- Bar Color: Set the primary color of the progress bar

- Bar Gradient End: Only applicable for gradient style

- Bar Background: Set the background color of the progress bar

- Show Percentage: Toggle to show or hide the progress percentage

- Pill Style: Choose from Text, Badge, Gradient Text or None

- Pill Text Color: Customize the text color

- Animation(sec): Adjust the speed of the animations.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-6d43fd29-d6cb-4b85-8ffa-bdbf08dee210-all:/unified/creator/6d43fd29-d6cb-4b85-8ffa-bdbf08dee210/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:6d43fd29-d6cb-4b85-8ffa-bdbf08dee210:/unified/posts/?creator=6d43fd29-d6cb-4b85-8ffa-bdbf08dee210&with=reposts":[{"data":[{"id":"019e81c9-ebff-7fcf-8cad-e5b7498e8cad","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"STp9qrW9yXVOQm0arhvc","resolved":true,"title":"BookingPro","body":"$63","bodyJson":null,"introduction":"Subscription-free Framer booking widget.","slug":"bookingpro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/STp9qrW9yXVOQm0arhvc/bookingpro-97WEo9z0XJtiZd2FYMFoaZ8Y9aENok","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-25T09:40:38.341Z","updatedAt":"2026-06-01T06:06:28.740Z","publishedAt":"2026-06-01T06:05:54.559Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jolly-dolphin-900415.framer.app/","price":"25","paymentUrl":"https://buy.polar.sh/polar_cl_LoMzaQcrYqYTVgolIfRwM1Elyhv8hw4IooqPF0oHK33","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"VKGrVX9jMJT6uBDxtwWd","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-01T06:05:54.559Z","updatedAt":"2026-06-01T06:05:54.559Z"},{"id":"019e2717-7392-795c-87ef-52f39bd8c99e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tXixFGgh5puMdogcHKGi","resolved":true,"title":"ChatFormPro","body":"$64","bodyJson":null,"introduction":"Turn forms into friendly chats.","slug":"chatformpro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/tXixFGgh5puMdogcHKGi/chatformpro-Dp33WYquZsgBZeqoL2eIyBaSqW2XOM","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-09T05:52:25.406Z","updatedAt":"2026-05-14T13:37:15.055Z","publishedAt":"2026-05-14T15:25:08.882Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://positive-priority-878544.framer.app/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_DtXecUcEPp0tHxBtObWfRLhg8oQS15HMsJS7P3ohvlM","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"ZJiNIUXWYH8zbUK9vf4H","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-05-14T15:25:08.882Z","updatedAt":"2026-05-14T15:25:08.882Z"},{"id":"019e2717-69db-775d-bf06-38348b57ecc0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"MpqSfI0OWfUlcB9Qpjs2","resolved":true,"title":"StatsHeroPro","body":"$65","bodyJson":null,"introduction":"Data visualization stats component","slug":"statsheropro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/MpqSfI0OWfUlcB9Qpjs2/statsheropro-IGAMxwlEJjInacBnaL7l23TYVgRh1d","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-10T07:19:20.451Z","updatedAt":"2026-05-14T13:37:15.171Z","publishedAt":"2026-05-14T15:25:06.395Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://expensive-food-815963.framer.app/","price":"25","paymentUrl":"https://buy.polar.sh/polar_cl_O4XLW77rgXyqMjtXw5oA1q4x7zseYSPl6bkaz3ot5Sy","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"jyHgEaYNSALNJSLBhlDc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T15:25:06.395Z","updatedAt":"2026-05-14T15:25:06.395Z"},{"id":"019bf958-2f87-7aa3-b42d-66586267bc7e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JL47q46OmckGKZIIY0Ys","resolved":true,"title":"Cart + Quote","body":"$66","bodyJson":null,"introduction":"Cart & Quote with webhook submission","slug":"quote-cart-rfq","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JL47q46OmckGKZIIY0Ys/rfqcart-3RsFMnRsPzOWrPosJabPQKdkeODhxc","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-04T16:11:40.239Z","updatedAt":"2026-01-27T07:38:55.332Z","publishedAt":"2026-01-26T08:07:44.775Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://traditional-insurance-685177.framer.app/","price":"39","paymentUrl":"https://buy.polar.sh/polar_cl_YEHb9Yo2P8QB7ox96DmS9Gww90usoNHAUrNbs23EUeN","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"x9LfWNouGdYNK7kxlYBa","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-01-26T08:07:44.775Z","updatedAt":"2026-01-26T08:07:44.775Z"},{"id":"019be5ea-95bf-7e10-bbad-c0d218594cea","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oDhBZSm2sgfMuJYfcfGh","resolved":true,"title":"SVG Fill Indicator","body":"$67","bodyJson":null,"introduction":"","slug":"svgfillindicator","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/oDhBZSm2sgfMuJYfcfGh/svgfillindicator-3wV1zYCHGqHvsokyyDJbAEkKG0FfWy","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-12T14:59:24.231Z","updatedAt":"2026-01-23T13:41:41.021Z","publishedAt":"2026-01-22T13:35:14.879Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://yummy-spots-249881.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_JFmtLlBoz9SYP7GbekWZmkzqOP429UzegScc129DiD2","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"SgYY8azs1MygGV9lfG62","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-22T13:35:14.879Z","updatedAt":"2026-01-22T13:35:14.879Z"},{"id":"019bb2eb-02f6-7e05-ba5e-c213db9767a3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"q1V9uzVysGIM5SsrsKe7","resolved":true,"title":"ZoomableProdViewer","body":"$68","bodyJson":null,"introduction":"","slug":"zoomableprodviewer","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/q1V9uzVysGIM5SsrsKe7/zoomableprodviewer-UxaFdmyqmvTfxz85o5n877C6fATyC7","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-22T16:55:13.682Z","updatedAt":"2026-01-12T15:06:57.008Z","publishedAt":"2026-01-12T15:55:04.822Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://authentic-updates-564137.framer.app/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_Z7MDcPCnBl6lQSzDDQ0OixhN7WHFDaaKXI3JN1y2Itb","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"2EmwsGMcGLwG2iylgJeS","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-12T15:55:04.822Z","updatedAt":"2026-01-12T15:55:04.822Z"},{"id":"019b7861-e29d-7885-ba27-392d998fab43","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vflTl41yQLPELlLbnFjJ","resolved":true,"title":"Multi-Step Form Pro","body":"$69","bodyJson":null,"introduction":"No-code multi-step forms—paste Formspree","slug":"multi-step-form-pro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vflTl41yQLPELlLbnFjJ/stepflowform-NSVKEftv4DtJzlrbgK20laj2fxpG0k","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-14T15:33:17.160Z","updatedAt":"2026-05-10T06:31:47.807Z","publishedAt":"2026-01-01T07:07:19.581Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://genuine-colors-485694.framer.app/","price":"13","paymentUrl":"https://buy.polar.sh/polar_cl_GPLfibAL1fQPGu0fKDwjGw9L6eG53KtIlCXGi2HfQL1","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"YWLcGobybKPCqpSbIbqB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-01T07:07:19.581Z","updatedAt":"2026-01-01T07:07:19.581Z"},{"id":"019b4ada-3462-7179-ba0f-847cc1ccc1f7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fiyE1IcOsj1cOCCtXt5Z","resolved":true,"title":"CursorPixelTrail","body":"$6a","bodyJson":null,"introduction":"","slug":"cursorpixeltrail","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fiyE1IcOsj1cOCCtXt5Z/cursorpixeltrail-UTHgjQ8ZMK0l42IeEixyy1Ti8Yj4Ne","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-14T16:47:54.781Z","updatedAt":"2025-12-23T09:42:28.073Z","publishedAt":"2025-12-23T10:56:12.898Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://good-powerpoint-380709.framer.app/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_6MZiFGrpAvDBzcjqrBFTEZmXGsDH6qCL1PSXb4bLm5t","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"xCppBH4yxZCTwafChKlg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-23T10:56:12.898Z","updatedAt":"2025-12-23T10:56:12.898Z"},{"id":"019b3bf9-1e36-7469-b323-1b772b16e585","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Zea3MunRMYY251zfzZBo","resolved":true,"title":"InteractiveHero Blob","body":"$6b","bodyJson":null,"introduction":"","slug":"interactivehero-blob","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Zea3MunRMYY251zfzZBo/interactivehero-blob-X2jTcvDCeT6n9P3w92jiUhh2F50kV2","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-11T15:26:39.323Z","updatedAt":"2025-12-19T21:51:36.892Z","publishedAt":"2025-12-20T13:35:40.598Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://forgiving-works-023011.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_mtTqcjvnG7UI9I92aAsvIMHZFo6KaI9G4TuvW4fApfP","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"fLdPdRV4eWkPgmFS4dtS","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":"2025-12-20T13:35:40.598Z","updatedAt":"2025-12-20T13:35:40.598Z"},{"id":"019b3bf8-b977-7121-843f-36fc5aed87e7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4DuD31PtYEc2tYCA9zqv","resolved":true,"title":"Interactive Hotspots","body":"$6c","bodyJson":null,"introduction":"Hotspots + tooltips for product media","slug":"interactive-hotspots","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/4DuD31PtYEc2tYCA9zqv/interactive-hotspots-X4Ax4sPSsCQvfoORahCW9dloXNArNc","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-07T05:01:37.640Z","updatedAt":"2026-01-26T06:37:56.772Z","publishedAt":"2025-12-20T13:35:14.807Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://full-times-876481.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_0IsnzFyte5oOnoMuNifyAQupLwdOh1DTp12gl3bo1FQ","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"FZUnnti2qGSM35Vc9LtF","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":"2025-12-20T13:35:14.807Z","updatedAt":"2025-12-20T13:35:14.807Z"},{"id":"019b318c-c6a8-7e9c-b5cf-537632ddedb4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cbtLkbZIKlocwBXJdZIy","resolved":true,"title":"Signature Drawing Pad","body":"$6d","bodyJson":null,"introduction":"","slug":"signature-drawingpad","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/cbtLkbZIKlocwBXJdZIy/signature-drawingpad-2sxdSt99KX6ei3JS14N66zyNnOTIrB","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-10T14:10:13.026Z","updatedAt":"2025-12-19T11:31:48.702Z","publishedAt":"2025-12-18T13:01:08.136Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://glowing-table-758208.framer.app/","price":"20","paymentUrl":"https://buy.polar.sh/polar_cl_FQkQ4n0kcK9urPn5k3GmhRkCVtEkVy7hswMkP0wmpvD","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"jAoCWu67EX7HXuu9yExb","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":"2025-12-18T13:01:08.136Z","updatedAt":"2025-12-18T13:01:08.136Z"},{"id":"019b1324-c066-7ac0-8301-f65da9e82bc1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7UWjhw74j3dyQz58edZ3","resolved":true,"title":"MultiExchangeRates","body":"$6e","bodyJson":null,"introduction":"","slug":"multiexchangerates","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/7UWjhw74j3dyQz58edZ3/multiexchangerates-uhDh1ppkUz9KAwfVIwUFXwCbDWiJ6A","metadata":{"tint":{"h":210,"s":22,"l":14},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-04T07:17:32.708Z","updatedAt":"2025-12-12T09:15:29.321Z","publishedAt":"2025-12-12T15:18:54.310Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jubilant-month-162574.framer.app/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_mZz4XvPybYUZR8ZmJqKBgMR6frnxmV4gTCBlq3vpObb","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"znKNlnD8AjNwLUV9fvs3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-12T15:18:54.310Z","updatedAt":"2025-12-12T15:18:54.310Z"},{"id":"019b0b07-7463-7804-bc50-a1581bfd7240","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"NFjMiMR9kBOfRCO5M1n2","resolved":true,"title":"DataTable CSV+Sheets","body":"$6f","bodyJson":null,"introduction":"Live Data Table for CSV & Google Sheets","slug":"datatable-csv-sheets","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/NFjMiMR9kBOfRCO5M1n2/datatable-csv-sheets-8LhfTiqXmT4IXtb10zP3y3dZefsU2q","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-02T15:59:01.861Z","updatedAt":"2026-05-01T16:44:18.464Z","publishedAt":"2025-12-11T01:29:56.579Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sustained-answers-119507.framer.app/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_HTkHl99YGQIXapR8qi0k64IN0kvd811psVz0d2HQt9H","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"F5WOmyIgjY3TwbZliwzI","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":"2025-12-11T01:29:56.579Z","updatedAt":"2025-12-11T01:29:56.579Z"},{"id":"019b037b-8773-7daa-a2bc-53d4ccde45d8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Cc01lxaTaRNPDtSwXYox","resolved":true,"title":"Progress Bar Pro","body":"$70","bodyJson":null,"introduction":"","slug":"progress-bar-pro","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Cc01lxaTaRNPDtSwXYox/progress-bar-pro-NuoKoS3iivRVcesVkY8Mj7Oy6hUgAy","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-30T15:16:17.024Z","updatedAt":"2025-12-09T13:03:49.977Z","publishedAt":"2025-12-09T14:19:45.907Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://daring-designs-842340.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_nLOyrUxvEjjU0KiV5obxfMeYPzW4Zd7NtFyTB43qYLw","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"5kbvgnRfEQOcwubX4BQg","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":"2025-12-09T14:19:45.907Z","updatedAt":"2025-12-09T14:19:45.907Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L71"}]