50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/1v3f42-oqro9g.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/146b7x-3yl4nl.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js"],"S"] 51:T81f,

A box that shows a coupon code and copies it when the visitor clicks. The button says Copied! for a moment, so they know it worked. Use it on sale pages, in popups and in announcement bars.

What you can customize

Everything is set from the property panel. No code needed.

- Code and label text

- Code shown, or hidden until the visitor clicks

- Button label, the Copied text, colors and radius, or no button

- Expiry: an end date, then a message or nothing

- Fill and border: dashed, solid or none, with color and width

- Radius, padding and gap

- Fonts and colors for the code and the label

- On Copy interaction

Details

- The whole box is clickable, not only the button.

- With the code hidden, it is blurred and the real code is not in the page until the click. One click reveals it and copies it.

- With Expiry on, the box switches to your message at the end date, even while the page is open. Use the same date as your countdown to end both together.

- On Copy runs a Framer interaction after a copy, such as opening an overlay.

- Works with keyboard and screen readers, and on narrow screens the button moves below the code.

- The expiry changes what the box shows. It does not turn the coupon off in your shop.

How to use

Add the component to your page and type your coupon into Code. It sizes itself to fit. To place it inside a popup or a bar, put it in the layer you connect to that component. On the canvas the box cannot be clicked. Open the preview to try copying.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days. More components, including four free ones, are at https://joviseo.vercel.app

52:T864,

A bar with a short message and a button that slides in after the visitor scrolls, and stays at the edge of the screen while they read. Use it to keep your main call to action in view on long pages.

What you can customize

Everything is set from the property panel. No code needed.

- Message text, or your own Framer layer in its place

- Button label, link, colors and radius

- Show After: how far the visitor scrolls before the bar appears

- Hide Before End: hides the bar near the bottom, so it does not cover your footer

- Position: bottom or top of the screen

- Max width and inset, for a floating bar or one that touches the edges

- Fill, text color, radius, padding and shadow

- Close button, and how long the bar stays closed: until reload, for the visit, or for a number of days

- Font and slide-in transition

Details

- The bar hides again when the visitor scrolls back to the top.

- A closed bar is remembered in the visitor's own browser. Change the Bar ID to show it to everyone again.

- Only the bar catches clicks. The page beside it stays clickable.

- On narrow screens the button moves below the message, and the bar keeps clear of the home indicator on phones.

- Connect a Countdown Timer or any layer to Content to show it in the bar.

How to use

Add the component to your page and set its Position to Fixed, so the placeholder takes no room. Type your message, set the button label and link, and choose Show After. The canvas always shows the bar so you can style it. Open the preview and scroll down to see it slide in.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days. More components, including four free ones, are at https://joviseo.vercel.app

53:T887,

An FAQ list with a search field and category filters. Visitors type a word and see only the questions that match, with the matching words highlighted. Add your questions in the property panel.

What you can customize

Everything is set from the property panel. No code needed.

- Questions, answers and an optional category for each

- Search field: placeholder, colors and radius, or hidden

- Category buttons: labels and colors, or hidden

- One question open at a time, or many

- First question open on load

- Update URL, for links to a single question

- SEO Schema, for search engines

- Message and optional link when a search finds nothing

- Plus or chevron icon, and highlight color

- Fill, border, radius, padding and gap

- Fonts and colors for questions and answers

Details

- The search looks in questions and answers and ignores capital letters. When the match is inside an answer, that question opens by itself.

- Search and category work together, so a search only looks inside the selected category.

- With Update URL on, opening a question adds it to the page address. Visitors who open that link land on the question with its answer open.

- SEO Schema adds FAQPage structured data to the page.

- Works with keyboard and screen readers.

- Answers are plain text with line breaks.

How to use

Add the component to your page and set its width. Open Questions in the property panel and type your questions and answers. To get category buttons, give your questions a Category. On the canvas the first question is shown open so you can style the answers.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days. More components, including four free ones, are at https://joviseo.vercel.app

54:T863,

A popup that opens when a visitor is about to leave your page. Use it for a discount, a newsletter sign-up or a last reminder. Show the built-in card, or connect any frame you design in Framer.

What you can customize

Everything is set from the property panel. No code needed.

- Content: the built-in card or your own Framer layer

- Show when leaving, after a time, after scrolling, or any mix

- A separate delay for phones, where leaving cannot be detected

- How often a visitor sees it: every page load, once per visit, once every few days, or only once

- Title, text, button, card size and colors

- Overlay color, close button and click-outside behavior

- Fonts and opening transition

- On Open and On Close interactions

Details

- Leaving means the mouse moves out through the top of the browser window. The sides are ignored, and so is the first second after the page loads.

- The popup opens once per page load, even with several triggers on.

- Visitors close it with the X button, the Esc key or a click outside. The page behind does not scroll while it is open.

- Change the Popup ID to show the popup to everyone again.

- The component does not collect data. To collect emails, connect your own frame with a Framer form.

How to use

Add the component to your page and set its Position to Fixed, so the placeholder takes no room. Type your title and text, or connect your own frame to Content, then pick the triggers in Show When. To test it, set Show to Every Page Load, open the preview, and move your mouse up to the browser's tabs.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days. More components, including four free ones, are at https://joviseo.vercel.app

55:T8b6,

An automatic table of contents for articles and blog posts. It reads the headings on your page, builds the list, and highlights the section the visitor is reading. Add it once to your CMS page and it works for every post.

What you can customize

Everything is set from the property panel. No code needed.

- Section ID, to list only the headings inside your article

- Heading levels to include, from H1 to H6

- Title text, or no title

- Numbers, such as 1, 1.1, 1.2, 2

- Top offset, to leave room for a sticky navigation bar

- Smooth or instant scrolling

- Update URL on click, for shareable links

- Indent and gap

- Indicator line colors and thickness

- Fonts and colors for the title, items, hover and active states

Details

- The current section is highlighted as the visitor scrolls, and the last item is highlighted at the end of the page.

- With Update URL on, a click adds the heading to the page address. Visitors who open that link land on the same heading.

- Headings without an ID get one automatically, so there is nothing to set up in your content.

- The list updates when the page content changes, and it skips headings hidden on the current breakpoint.

- The component hides itself on pages with no headings.

How to use

Add the component to your article page and place it beside your content. Set its Position to Sticky to keep it on screen. To leave out headings from your navigation and footer, give your article layer a Scroll Section ID and enter the same ID in Section ID. On the canvas the list shows sample headings. Open the preview to see your real ones.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days.

More components, including four free ones, are at https://joviseo.vercel.app

56:T897,

A pricing slider for usage-based pricing. Visitors drag the slider to pick an amount, such as a number of users, and the price updates as they drag. No formulas to write.

What you can customize

Everything is set from the property panel. No code needed.

- Type: Slider or Price, from the same component

- Minimum, maximum, step and default value

- Value label with your own prefix and suffix, such as " users"

- Track, fill and handle colors and sizes

- Pricing: Per Unit (base price plus a price per unit) or Tiers (a price for each range)

- Text to show at the maximum, such as Contact us

- Price prefix, suffix and decimal places

- Price, suffix and label fonts and colors

Details

- A slider changes every price on the page with the same Group name, so each plan card can calculate its own price from one slider.

- Use different Group names to run separate calculators on one page.

- Works with mouse, touch and keyboard. On phones, dragging sideways moves the slider and dragging up or down still scrolls the page.

- Pairs with Live Pricing Toggle, sold separately. Give both the same Group name and each price applies its Yearly Discount when the toggle is on Yearly.

- The component shows a price. It does not change checkout links.

How to use

Add the component to your page and set its width. That is your slider. Then drag another copy to where the price should be, set its Type to Price, and choose Per Unit or Tiers. On the canvas the slider cannot be dragged. Change its Default to see other prices while designing, or open the preview.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days.

More components, including four free ones, are at https://joviseo.vercel.app

57:T827,

A monthly / yearly pricing toggle that actually changes your prices. Place one toggle on the page and one price in each plan card. When a visitor clicks the toggle, every price switches with it.

What you can customize

Everything is set from the property panel. No code needed.

- Type: Toggle or Price, from the same component

- Toggle labels, so it works for any two price sets

- Default option when the page loads

- Badge text and colors, such as -20% or 2 months free

- Track, thumb and label colors

- Font, radius, inset and padding

- Thumb transition

- Monthly and yearly price text, in any currency or format

- Suffix for each option, such as /month

- Optional crossed-out monthly price next to the yearly price

- Price and suffix fonts and colors

Details

- A toggle changes every price on the page with the same Group name. No variants or interactions to wire up.

- Use different Group names to run separate pricing tables on one page.

- Prices switch with a short fade and respect the visitor's reduced motion setting.

- The toggle works with mouse, touch and keyboard.

- The component changes the prices shown. It does not change checkout links.

How to use

Add the component to your pricing page. That is your toggle. Then drag another copy into each plan card, set its Type to Price, and type in the monthly and yearly prices. On the canvas the toggle cannot be clicked. Set Default to Yearly to see your yearly prices while designing, or open the preview.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days.

More components, including four free ones, are at https://joviseo.vercel.app

58:T852,

A monthly / yearly pricing toggle that actually changes your prices. Place one toggle on the page and one price in each plan card. When a visitor clicks the toggle, every price switches with it.

What you can customize

Everything is set from the property panel. No code needed.

- Type: Toggle or Price, from the same component

- Toggle labels, so it works for any two price sets

- Default option when the page loads

- Badge text and colors, such as -20% or 2 months free

- Track, thumb and label colors

- Font, radius, inset and padding

- Thumb transition

- Monthly and yearly price text, in any currency or format

- Suffix for each option, such as /month

- Optional crossed-out monthly price next to the yearly price

- Price and suffix fonts and colors

Details

- A toggle changes every price on the page with the same Group name. No variants or interactions to wire up.

- Use different Group names to run separate pricing tables on one page.

- Prices switch with a short fade and respect the visitor's reduced motion setting.

- The toggle works with mouse, touch and keyboard.

- The component changes the prices shown. It does not change checkout links.

How to use

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days.

More components, including four free ones, are at https://joviseo.vercel.app

59:T88c,

A countdown timer for Framer sites. Count down to a fixed date for a launch, an event or a sale, or give every visitor their own timer that starts on their first visit and keeps running when they come back.

What you can customize

Everything is set from the property panel. No code needed.

- Mode: Fixed Date or Per Visitor

- End date and time, or a duration in days, hours and minutes

- At the end: show zeros, show a message, or hide the timer

- Restart, for Per Visitor timers that should loop

- Units: show or hide days, hours, minutes and seconds

- Labels: your own words in any language, or hidden

- Box fill, radius, padding and minimum width

- Number and label fonts and colors

- Separator character, color and gap

Details

- On End runs a Framer interaction when the timer reaches zero, so you can switch a component to a "Sale ended" variant or open an overlay.

- Per Visitor timers are stored in the visitor's browser. Give a timer a new Timer ID to start everyone again for a new offer.

- Hidden units roll into the next one. With Days hidden, two days left shows as 48 hours.

- Numbers use equal-width digits, so the boxes do not shift as the seconds change.

- The timer stays accurate after the tab has been in the background.

How to use

Add the component to your page and pick a Mode. For Fixed Date, choose the End Date. For Per Visitor, set the Duration. The component sizes itself to fit its content, so there is nothing to resize. On the canvas the timer does not tick. Open the preview to see it count down.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days.

More components, including four free ones, are at https://joviseo.vercel.app

5a:T114b,

Hover Spotlight Card

A card with a soft light that follows the cursor. As visitors move across the card, the glow lights up the surface and the border beneath it. A simple way to make feature grids and pricing sections feel responsive.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Title and Text: built-in content for the card

- Content: connect your own Framer layer to replace the built-in text

- Align: left or center

- Fill: card background color

- Spotlight: color and size of the light

- Border: width, color and glow color

- Radius and Padding

- Title Font, Text Font and colors

Details

The light only moves a CSS position, so it stays smooth even with many cards on one page. On touch screens the light follows the finger.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version.

Need Help?

Email joviseo1106@gmail.com . Questions are usually answered within 3 business days.

More Resources

More components by Joviseo, including four free ones: https://joviseo.vercel.app

5b:T666,

Before After Slider

An image comparison slider for Framer sites. Visitors drag the handle to reveal one image over the other, which makes it ideal for retouching, redesigns, renovations and any before and after story.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Before and After: the two images to compare

- Direction: horizontal or vertical

- Move On: drag the handle, or follow the mouse on hover

- Start: where the divider begins

- Handle: size, color, line thickness and arrows

- Labels: text, colors and size, or hide them

- Radius: corner radius

Details

Works with mouse, touch and keyboard. A horizontal slider still lets the page scroll up and down on phones. Images use Framer's responsive image control, so they load at the right size.

How To Use

Drop the component on your page, pick a Before and an After image in the property panel, and resize the component to match your images.

About The Code

Need Help?

Email joviseo1106@gmail.com. Questions are usually answered within 3 business days.

More Resources

More components by Joviseo, including four free ones: https://joviseo.vercel.app

5c:T691,

Before After Slider

An image comparison slider for Framer sites. Visitors drag the handle to reveal one image over the other, which makes it ideal for retouching, redesigns, renovations and any before and after story.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Before and After: the two images to compare

- Direction: horizontal or vertical

- Move On: drag the handle, or follow the mouse on hover

- Start: where the divider begins

- Handle: size, color, line thickness and arrows

- Labels: text, colors and size, or hide them

- Radius: corner radius

Details

Works with mouse, touch and keyboard. A horizontal slider still lets the page scroll up and down on phones. Images use Framer's responsive image control, so they load at the right size.

How To Use

Drop the component on your page, pick a Before and an After image in the property panel, and resize the component to match your images.

About The Code

Need Help?

Email joviseo1106@gmail.com. Questions are usually answered within 3 business days.

More Resources

More components by Joviseo, including four free ones: https://joviseo.vercel.app

5d:T56d,

Typing Effect Text

A headline that types out a list of phrases one character at a time, deletes them, and moves on to the next. A fixed prefix stays in place, so you can write lines like "We design websites." and rotate the last word.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Prefix and Phrases: the fixed text and the list of rotating phrases

- Tag: H1, H2, H3, P or Span, for correct heading structure

- Type Speed, Delete Speed and Pause

- Loop: repeat forever or stop on the last phrase

- Reserve Width and Align: keep space for the longest phrase so nothing shifts

- Cursor: character, color and blinking

- Font, Text color and Typed Text color

Details

Typing starts when the text scrolls into view. Visitors who prefer reduced motion see the first phrase without animation.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

More components by Joviseo: Scroll To Top Ring, Reading Progress Bar, Text Scramble Button and Magnetic Pull Button. https://joviseo.vercel.app

5e:T56d,

Typing Effect Text

Customizable Properties

Everything is set from the property panel, with no code editing.

- Prefix and Phrases: the fixed text and the list of rotating phrases

- Tag: H1, H2, H3, P or Span, for correct heading structure

- Type Speed, Delete Speed and Pause

- Loop: repeat forever or stop on the last phrase

- Reserve Width and Align: keep space for the longest phrase so nothing shifts

- Cursor: character, color and blinking

- Font, Text color and Typed Text color

Details

Typing starts when the text scrolls into view. Visitors who prefer reduced motion see the first phrase without animation.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

More components by Joviseo: Scroll To Top Ring, Reading Progress Bar, Text Scramble Button and Magnetic Pull Button. https://joviseo.vercel.app

5f:T515,

Magnetic Pull Button

A button that leans toward the cursor as it gets close, then springs back when the cursor moves away. The label moves a little further than the button, which adds a subtle sense of depth.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Text, Link and New Tab

- Strength: how far the button follows the cursor

- Label Pull: how much extra the label moves

- Range: how close the cursor must be before the pull starts

- Spring: stiffness and damping of the return motion

- Font, Text and Fill colors, with separate hover colors

- Radius, Padding and Border

Details

The pull only runs for mouse pointers, so on touch screens it behaves like a normal button. Visitors who prefer reduced motion get a static button.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

More components by Joviseo: Scroll To Top Ring, Reading Progress Bar and Text Scramble Button. https://joviseo.vercel.app

60:T4b6,

Text Scramble Button

A button whose label scrambles into random characters and resolves back, letter by letter, when visitors hover it. A small detail that makes calls to action feel alive.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Text, Link and New Tab

- Trigger: on hover, on appear, or both

- Duration: how long the scramble lasts

- Characters: the set of characters used while scrambling

- Font: family, size and weight

- Text and Fill colors, with separate hover colors

- Radius, Padding and Border

Details

The button keeps its width while the label scrambles, so nothing around it shifts. Visitors who prefer reduced motion see the plain label.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

More components by Joviseo: Scroll To Top Ring and Reading Progress Bar. https://joviseo.vercel.app

61:T75c,

Scroll To Top Ring Button

A back-to-top button for Framer sites that also shows reading progress. A ring around the button fills as visitors scroll down the page, and one click takes them back to the top.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Show After: scroll distance before the button appears (0–3000px)

- Smooth: smooth scroll or instant jump

- Fill and Shadow: background color and box shadow

- Icon: arrow or chevron, with color, size and stroke

- Ring: color, track color and thickness, or hide it

- Hover Scale and Transition: hover size and appear animation

Why This Component

Most scroll-to-top buttons only scroll. This one doubles as a scroll progress indicator, so long pages such as blog posts, docs and landing pages get two features in one small button. It is lightweight and stays hidden until visitors need it.

How To Use

Drop the component on your page and set its position to Fixed. Pin it to the bottom and right at 24px, keep width and height equal, and raise its Z Index so it stays above your sections.

About The Code

Need Help?

Email joviseo1106@gmail.com. Questions are usually answered within 3 business days.

More Resources

Pair it with Reading Progress Bar, a free scroll progress bar with a matching look. Live demo, license and more components: https://joviseo.vercel.app

62:T4be,

Reading Progress Bar

A thin bar that fills as visitors scroll, showing how far they are through the page. Ideal for blog posts, docs, case studies and long landing pages.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Fill: color of the progress bar

- Track: color of the background behind the bar

- Grow From: left, center or right

- Rounded: round the leading end of the bar

- Smooth: spring-smoothed motion or direct tracking

How To Use

Drop the component on your page and set its position to Fixed. Set Width to Relative 100% and Height to 4px, pin it to the top and left at 0, and raise its Z Index so it stays above your sections.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

Pair it with Scroll To Top Progress Button, a back-to-top button with a matching progress ring. More components: https://joviseo.vercel.app

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-21a65b87-79b6-4301-9fd3-02381450f947-all:/unified/creator/21a65b87-79b6-4301-9fd3-02381450f947/activity/":[{"data":[{"id":"01a12674-3f9e-74a1-a46a-ab126cf3df59","type":"component.created","target":{"type":"component","id":"G7PCVLDVMnauHOfOqsBH","preview":"Coupon Code Box","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12673-e6ee-712f-a76c-60b148498a53.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-10T15:35:15.102Z","latestAt":"2026-10-10T15:35:15.102Z"},{"id":"01a1265b-15ce-70d9-babe-3db702be6757","type":"component.created","target":{"type":"component","id":"glWgq1o9A7dwoZc7xwJG","preview":"Sticky CTA Bar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a1265a-e2a3-775b-bf8d-277793fc377d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-10T15:07:45.998Z","latestAt":"2026-10-10T15:07:45.998Z"},{"id":"01a1263f-65ee-759b-88fb-3308930de522","type":"component.created","target":{"type":"component","id":"drc8O28Qs8qbi7PtuEWM","preview":"Searchable FAQ","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a1263f-1e79-710e-9602-ffe67fd767b9.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-10T14:37:31.502Z","latestAt":"2026-10-10T14:37:31.502Z"},{"id":"01a12623-c6b6-7453-92c2-852bde4f5453","type":"component.created","target":{"type":"component","id":"Zj2RGUHTQPwIyFMhBrWB","preview":"Exit Offer Popup","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12621-eabf-75e3-a6b7-e832b745b94b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-10T14:07:21.270Z","latestAt":"2026-10-10T14:07:21.270Z"},{"id":"01a125f9-6f27-7344-85d4-69418e94348a","type":"component.created","target":{"type":"component","id":"mO1n8APWhcBVKlJR39xy","preview":"Article TOC","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a125f8-c443-75ef-9fcb-97fc545ea7f6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-10T13:21:06.343Z","latestAt":"2026-10-10T13:21:06.343Z"},{"id":"01a12191-da30-749b-819f-387196c8278d","type":"component.created","target":{"type":"component","id":"4w1IL1jtMkdBR9Or6bNB","preview":"Live Pricing Slider","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12191-9d4f-744b-a9f3-3238ec5831fe.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-09T16:49:29.136Z","latestAt":"2026-10-09T16:49:29.136Z"},{"id":"01a12148-6b05-75cf-8db9-b334565dff03","type":"component.created","target":{"type":"component","id":"naW248LUiyMkbfhOKiA1","preview":"Live Pricing Toggle","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12148-267f-7699-be09-8b31e0102eb7.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-09T15:29:16.549Z","latestAt":"2026-10-09T15:29:16.549Z"},{"id":"01a120f9-ef01-76f8-87c9-9ba554d338f4","type":"component.created","target":{"type":"component","id":"RojVBXyn5Yb25bk4We7k","preview":"Evergreen Countdown","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a120f9-44ef-77ed-92cf-2aab49e59c0e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-09T14:03:32.993Z","latestAt":"2026-10-09T14:03:32.993Z"},{"id":"01a11a73-47b6-717a-9679-22d2c1794ba2","type":"component.created","target":{"type":"component","id":"qrGDJxhGklSf9boMKuF3","preview":"Hover Spotlight Card","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11a72-59c8-75aa-aa6c-136c5738b39d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-08T07:38:45.046Z","latestAt":"2026-10-08T07:38:45.046Z"},{"id":"01a11a3a-aa53-7396-9cf0-b8b387150f40","type":"component.created","target":{"type":"component","id":"sqVtZZp6sRftdWG1UWqx","preview":"BeforeAfterCompare","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11a3a-70f9-738f-b310-494f5ad8a1d6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-08T06:36:54.739Z","latestAt":"2026-10-08T06:36:54.739Z"},{"id":"01a119cb-973b-7087-bdec-be7724e927ba","type":"component.created","target":{"type":"component","id":"oBruIMOHV0iYNEzpZEOT","preview":"Typing Effect Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a119cb-4403-7011-b5bc-37b7271dad9e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-08T04:35:35.355Z","latestAt":"2026-10-08T04:35:35.355Z"},{"id":"01a119be-287b-75ce-aeb1-0f841029db34","type":"component.created","target":{"type":"component","id":"co08DgpbeEjLuWFbKwHb","preview":"Magnetic Pull Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a119bd-cb9e-7731-864c-d702cbda21b4.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-08T04:20:55.035Z","latestAt":"2026-10-08T04:20:55.035Z"},{"id":"01a11940-1252-747e-a2aa-5f2bc57053f3","type":"component.created","target":{"type":"component","id":"kzuRCvC1e5uu12XkJaHa","preview":"Text Scramble Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11949-3539-74ed-8316-92aa7d66e79b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-08T02:03:11.825Z","latestAt":"2026-10-08T02:03:11.825Z"},{"id":"01a1155f-af8b-72b4-b6f0-746d6fea81df","type":"component.created","target":{"type":"component","id":"94OmZ2CVbt0aksPDDvHq","preview":"Scroll To Top Ring","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11552-c335-77ef-8f05-a0304f635e31.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-07T07:59:14.827Z","latestAt":"2026-10-07T07:59:14.827Z"},{"id":"01a1154a-8d92-768b-b0f4-3abbe9ade838","type":"component.created","target":{"type":"component","id":"QvSkFJY6ihaHuL9akp9Z","preview":"Reading Progress Bar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11547-2f4a-756b-9766-b0517e18aede.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","slug":"joviseo-kim","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-07T07:36:09.874Z","latestAt":"2026-10-07T07:36:09.874Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:21a65b87-79b6-4301-9fd3-02381450f947:/unified/posts/?creator=21a65b87-79b6-4301-9fd3-02381450f947&with=reposts":[{"data":[{"id":"01a12674-3d58-726e-acc9-cf7c983291d0","title":null,"body":"

Coupon Code Box is live.

A box that shows your coupon code and copies it with one click. The button says Copied! so visitors know it worked.

You can hide the code until the click, and set an end date so it stops showing when your sale ends.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Coupon Code Box is live."}]},{"type":"paragraph","content":[{"type":"text","text":"A box that shows your coupon code and copies it with one click. The button says Copied! so visitors know it worked."}]},{"type":"paragraph","content":[{"type":"text","text":"You can hide the code until the click, and set an end date so it stops showing when your sale ends."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"G7PCVLDVMnauHOfOqsBH","resolved":true,"title":"Coupon Code Box","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A box that shows a coupon code and copies it when the visitor clicks. The button says Copied! for a moment, so they know it worked. Use it on sale pages, in popups and in announcement bars."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Code and label text"}]},{"type":"paragraph","content":[{"type":"text","text":"- Code shown, or hidden until the visitor clicks"}]},{"type":"paragraph","content":[{"type":"text","text":"- Button label, the Copied text, colors and radius, or no button"}]},{"type":"paragraph","content":[{"type":"text","text":"- Expiry: an end date, then a message or nothing"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fill and border: dashed, solid or none, with color and width"}]},{"type":"paragraph","content":[{"type":"text","text":"- Radius, padding and gap"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fonts and colors for the code and the label"}]},{"type":"paragraph","content":[{"type":"text","text":"- On Copy interaction"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- The whole box is clickable, not only the button."}]},{"type":"paragraph","content":[{"type":"text","text":"- With the code hidden, it is blurred and the real code is not in the page until the click. One click reveals it and copies it."}]},{"type":"paragraph","content":[{"type":"text","text":"- With Expiry on, the box switches to your message at the end date, even while the page is open. Use the same date as your countdown to end both together."}]},{"type":"paragraph","content":[{"type":"text","text":"- On Copy runs a Framer interaction after a copy, such as opening an overlay."}]},{"type":"paragraph","content":[{"type":"text","text":"- Works with keyboard and screen readers, and on narrow screens the button moves below the code."}]},{"type":"paragraph","content":[{"type":"text","text":"- The expiry changes what the box shows. It does not turn the coupon off in your shop."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page and type your coupon into Code. It sizes itself to fit. To place it inside a popup or a bar, put it in the layer you connect to that component. On the canvas the box cannot be clicked. Open the preview to try copying."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days. More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]}]},"introduction":"Click-to-copy coupon code box","slug":"coupon-code-box","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12673-e6ee-712f-a76c-60b148498a53.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-10T15:35:13.963Z","updatedAt":"2026-10-10T15:35:13.963Z","publishedAt":"2026-10-10T15:35:13.961Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/coupon","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_8gmwppx6PHh25N0lVmskI8whbKReGCsLaNX0U16CJPg","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"H0RbepGc0ms5K6hW8ieH","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-10T15:35:14.520Z","updatedAt":"2026-10-10T15:35:14.520Z"},{"id":"01a1265b-1379-71df-bbf9-6f9a1b456d2f","title":null,"body":"

Sticky CTA Bar is live.

A bar with a message and a button that slides in after your visitor scrolls, and stays at the edge of the screen while they read. Keep your main call to action in view on long pages.

It can hide near the footer, and visitors can close it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Sticky CTA Bar is live."}]},{"type":"paragraph","content":[{"type":"text","text":"A bar with a message and a button that slides in after your visitor scrolls, and stays at the edge of the screen while they read. Keep your main call to action in view on long pages."}]},{"type":"paragraph","content":[{"type":"text","text":"It can hide near the footer, and visitors can close it."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"glWgq1o9A7dwoZc7xwJG","resolved":true,"title":"Sticky CTA Bar","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A bar with a short message and a button that slides in after the visitor scrolls, and stays at the edge of the screen while they read. Use it to keep your main call to action in view on long pages."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Message text, or your own Framer layer in its place"}]},{"type":"paragraph","content":[{"type":"text","text":"- Button label, link, colors and radius"}]},{"type":"paragraph","content":[{"type":"text","text":"- Show After: how far the visitor scrolls before the bar appears"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hide Before End: hides the bar near the bottom, so it does not cover your footer"}]},{"type":"paragraph","content":[{"type":"text","text":"- Position: bottom or top of the screen"}]},{"type":"paragraph","content":[{"type":"text","text":"- Max width and inset, for a floating bar or one that touches the edges"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fill, text color, radius, padding and shadow"}]},{"type":"paragraph","content":[{"type":"text","text":"- Close button, and how long the bar stays closed: until reload, for the visit, or for a number of days"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font and slide-in transition"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- The bar hides again when the visitor scrolls back to the top."}]},{"type":"paragraph","content":[{"type":"text","text":"- A closed bar is remembered in the visitor's own browser. Change the Bar ID to show it to everyone again."}]},{"type":"paragraph","content":[{"type":"text","text":"- Only the bar catches clicks. The page beside it stays clickable."}]},{"type":"paragraph","content":[{"type":"text","text":"- On narrow screens the button moves below the message, and the bar keeps clear of the home indicator on phones."}]},{"type":"paragraph","content":[{"type":"text","text":"- Connect a Countdown Timer or any layer to Content to show it in the bar."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page and set its Position to Fixed, so the placeholder takes no room. Type your message, set the button label and link, and choose Show After. The canvas always shows the bar so you can style it. Open the preview and scroll down to see it slide in."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days. More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"CTA bar that appears on scroll","slug":"sticky-cta-bar","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a1265a-e2a3-775b-bf8d-277793fc377d.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-10T15:07:44.784Z","updatedAt":"2026-10-10T15:07:44.784Z","publishedAt":"2026-10-10T15:07:44.780Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/cta","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_YfnD4GOhf8ifcqILb7iNku7JTwrUJlM5Ea4na2pHPKl","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"3CcqrvRg2491HdLK6jMD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-10T15:07:45.402Z","updatedAt":"2026-10-10T15:07:45.402Z"},{"id":"01a1263f-63b5-731b-b8b4-88431b5b8a85","title":null,"body":"

Searchable FAQ is live.

An FAQ list with a search field and category filters. Visitors type a word and see only the questions that match, with the matching words highlighted.

It also adds FAQ structured data for search engines and gives every question its own link.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Searchable FAQ is live."}]},{"type":"paragraph","content":[{"type":"text","text":"An FAQ list with a search field and category filters. Visitors type a word and see only the questions that match, with the matching words highlighted."}]},{"type":"paragraph","content":[{"type":"text","text":"It also adds FAQ structured data for search engines and gives every question its own link."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"drc8O28Qs8qbi7PtuEWM","resolved":true,"title":"Searchable FAQ","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"An FAQ list with a search field and category filters. Visitors type a word and see only the questions that match, with the matching words highlighted. Add your questions in the property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Questions, answers and an optional category for each"}]},{"type":"paragraph","content":[{"type":"text","text":"- Search field: placeholder, colors and radius, or hidden"}]},{"type":"paragraph","content":[{"type":"text","text":"- Category buttons: labels and colors, or hidden"}]},{"type":"paragraph","content":[{"type":"text","text":"- One question open at a time, or many"}]},{"type":"paragraph","content":[{"type":"text","text":"- First question open on load"}]},{"type":"paragraph","content":[{"type":"text","text":"- Update URL, for links to a single question"}]},{"type":"paragraph","content":[{"type":"text","text":"- SEO Schema, for search engines"}]},{"type":"paragraph","content":[{"type":"text","text":"- Message and optional link when a search finds nothing"}]},{"type":"paragraph","content":[{"type":"text","text":"- Plus or chevron icon, and highlight color"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fill, border, radius, padding and gap"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fonts and colors for questions and answers"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- The search looks in questions and answers and ignores capital letters. When the match is inside an answer, that question opens by itself."}]},{"type":"paragraph","content":[{"type":"text","text":"- Search and category work together, so a search only looks inside the selected category."}]},{"type":"paragraph","content":[{"type":"text","text":"- With Update URL on, opening a question adds it to the page address. Visitors who open that link land on the question with its answer open."}]},{"type":"paragraph","content":[{"type":"text","text":"- SEO Schema adds FAQPage structured data to the page."}]},{"type":"paragraph","content":[{"type":"text","text":"- Works with keyboard and screen readers."}]},{"type":"paragraph","content":[{"type":"text","text":"- Answers are plain text with line breaks."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page and set its width. Open Questions in the property panel and type your questions and answers. To get category buttons, give your questions a Category. On the canvas the first question is shown open so you can style the answers."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days. More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"FAQ with search and categories","slug":"searchable-faq","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a1263f-1e79-710e-9602-ffe67fd767b9.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1920,"height":1080}}],"post":null,"createdAt":"2026-10-10T14:37:30.358Z","updatedAt":"2026-10-10T14:37:30.358Z","publishedAt":"2026-10-10T14:37:30.348Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/faq","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_elaBALNqiwHJ3t1UITaL6u9uS7tjyav2d6qFs34no7L","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"GnCW5W7aEeG7ykdVMPC2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-10T14:37:30.933Z","updatedAt":"2026-10-10T14:37:30.933Z"},{"id":"01a12623-c461-7328-88b0-4f5a00edf15e","title":null,"body":"

Exit Intent Popup is live.

A popup that opens when a visitor is about to leave your page. Show a discount, a newsletter sign-up or a last reminder, using the built-in card or any frame you design in Framer.

It can also open after a time or a scroll depth, and you choose how often each visitor sees it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Exit Intent Popup is live."}]},{"type":"paragraph","content":[{"type":"text","text":"A popup that opens when a visitor is about to leave your page. Show a discount, a newsletter sign-up or a last reminder, using the built-in card or any frame you design in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"It can also open after a time or a scroll depth, and you choose how often each visitor sees it."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Zj2RGUHTQPwIyFMhBrWB","resolved":true,"title":"Exit Offer Popup","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A popup that opens when a visitor is about to leave your page. Use it for a discount, a newsletter sign-up or a last reminder. Show the built-in card, or connect any frame you design in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Content: the built-in card or your own Framer layer"}]},{"type":"paragraph","content":[{"type":"text","text":"- Show when leaving, after a time, after scrolling, or any mix"}]},{"type":"paragraph","content":[{"type":"text","text":"- A separate delay for phones, where leaving cannot be detected"}]},{"type":"paragraph","content":[{"type":"text","text":"- How often a visitor sees it: every page load, once per visit, once every few days, or only once"}]},{"type":"paragraph","content":[{"type":"text","text":"- Title, text, button, card size and colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Overlay color, close button and click-outside behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fonts and opening transition"}]},{"type":"paragraph","content":[{"type":"text","text":"- On Open and On Close interactions"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- Leaving means the mouse moves out through the top of the browser window. The sides are ignored, and so is the first second after the page loads."}]},{"type":"paragraph","content":[{"type":"text","text":"- The popup opens once per page load, even with several triggers on."}]},{"type":"paragraph","content":[{"type":"text","text":"- Visitors close it with the X button, the Esc key or a click outside. The page behind does not scroll while it is open."}]},{"type":"paragraph","content":[{"type":"text","text":"- Change the Popup ID to show the popup to everyone again."}]},{"type":"paragraph","content":[{"type":"text","text":"- The component does not collect data. To collect emails, connect your own frame with a Framer form."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page and set its Position to Fixed, so the placeholder takes no room. Type your title and text, or connect your own frame to Content, then pick the triggers in Show When. To test it, set Show to Every Page Load, open the preview, and move your mouse up to the browser's tabs."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days. More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Popup that opens before they leave","slug":"exit-offer-popup","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12621-eabf-75e3-a6b7-e832b745b94b.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-10T14:07:20.040Z","updatedAt":"2026-10-10T14:07:20.040Z","publishedAt":"2026-10-10T14:07:20.037Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/popup","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_ItWJgISB0ATFY8RazIKlxO3hS4b5b48AYWmA20tMWeS","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"LoEAJdLrhm9D3IfB2vNm","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-10T14:07:20.673Z","updatedAt":"2026-10-10T14:07:20.673Z"},{"id":"01a125f9-6cce-7199-a8b3-7edc10b626c3","title":null,"body":"

Article TOC is live.

An automatic table of contents for articles and blog posts. It reads the headings on your page, builds the list, and highlights the section your visitor is reading. Add it once to your CMS page and it works for every post.

Clicks update the page address, so visitors can share a link to any section.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Article TOC is live."}]},{"type":"paragraph","content":[{"type":"text","text":"An automatic table of contents for articles and blog posts. It reads the headings on your page, builds the list, and highlights the section your visitor is reading. Add it once to your CMS page and it works for every post."}]},{"type":"paragraph","content":[{"type":"text","text":"Clicks update the page address, so visitors can share a link to any section."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mO1n8APWhcBVKlJR39xy","resolved":true,"title":"Article TOC","body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"An automatic table of contents for articles and blog posts. It reads the headings on your page, builds the list, and highlights the section the visitor is reading. Add it once to your CMS page and it works for every post."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Section ID, to list only the headings inside your article"}]},{"type":"paragraph","content":[{"type":"text","text":"- Heading levels to include, from H1 to H6"}]},{"type":"paragraph","content":[{"type":"text","text":"- Title text, or no title"}]},{"type":"paragraph","content":[{"type":"text","text":"- Numbers, such as 1, 1.1, 1.2, 2"}]},{"type":"paragraph","content":[{"type":"text","text":"- Top offset, to leave room for a sticky navigation bar"}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth or instant scrolling"}]},{"type":"paragraph","content":[{"type":"text","text":"- Update URL on click, for shareable links"}]},{"type":"paragraph","content":[{"type":"text","text":"- Indent and gap"}]},{"type":"paragraph","content":[{"type":"text","text":"- Indicator line colors and thickness"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fonts and colors for the title, items, hover and active states"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- The current section is highlighted as the visitor scrolls, and the last item is highlighted at the end of the page."}]},{"type":"paragraph","content":[{"type":"text","text":"- With Update URL on, a click adds the heading to the page address. Visitors who open that link land on the same heading."}]},{"type":"paragraph","content":[{"type":"text","text":"- Headings without an ID get one automatically, so there is nothing to set up in your content."}]},{"type":"paragraph","content":[{"type":"text","text":"- The list updates when the page content changes, and it skips headings hidden on the current breakpoint."}]},{"type":"paragraph","content":[{"type":"text","text":"- The component hides itself on pages with no headings."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your article page and place it beside your content. Set its Position to Sticky to keep it on screen. To leave out headings from your navigation and footer, give your article layer a Scroll Section ID and enter the same ID in Section ID. On the canvas the list shows sample headings. Open the preview to see your real ones."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Table of contents for articles","slug":"article-toc","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a125f8-c443-75ef-9fcb-97fc545ea7f6.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-10T13:21:05.108Z","updatedAt":"2026-10-10T13:21:05.108Z","publishedAt":"2026-10-10T13:21:05.105Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/toc","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_M2hXZy5RbWqlMDLsTZvYFptY4lLSu7WWFjKsl4U2br1","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"ok8r0aN5mCBbV6tPso34","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-10-10T13:21:05.742Z","updatedAt":"2026-10-10T13:21:05.742Z"},{"id":"01a12191-d7e9-71c1-8d0d-a51f93a23239","title":null,"body":"

Live Pricing Slider is live.

A slider for usage-based pricing. Visitors drag to pick an amount, such as a number of users, and the price updates as they drag. Choose per-unit or tiered pricing from the property panel, with no formulas to write.

It also pairs with Live Pricing Toggle to apply a yearly discount.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Pricing Slider is live."}]},{"type":"paragraph","content":[{"type":"text","text":"A slider for usage-based pricing. Visitors drag to pick an amount, such as a number of users, and the price updates as they drag. Choose per-unit or tiered pricing from the property panel, with no formulas to write."}]},{"type":"paragraph","content":[{"type":"text","text":"It also pairs with Live Pricing Toggle to apply a yearly discount."}]}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4w1IL1jtMkdBR9Or6bNB","resolved":true,"title":"Live Pricing Slider","body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A pricing slider for usage-based pricing. Visitors drag the slider to pick an amount, such as a number of users, and the price updates as they drag. No formulas to write."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Type: Slider or Price, from the same component"}]},{"type":"paragraph","content":[{"type":"text","text":"- Minimum, maximum, step and default value"}]},{"type":"paragraph","content":[{"type":"text","text":"- Value label with your own prefix and suffix, such as \" users\""}]},{"type":"paragraph","content":[{"type":"text","text":"- Track, fill and handle colors and sizes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Pricing: Per Unit (base price plus a price per unit) or Tiers (a price for each range)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Text to show at the maximum, such as Contact us"}]},{"type":"paragraph","content":[{"type":"text","text":"- Price prefix, suffix and decimal places"}]},{"type":"paragraph","content":[{"type":"text","text":"- Price, suffix and label fonts and colors"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- A slider changes every price on the page with the same Group name, so each plan card can calculate its own price from one slider."}]},{"type":"paragraph","content":[{"type":"text","text":"- Use different Group names to run separate calculators on one page."}]},{"type":"paragraph","content":[{"type":"text","text":"- Works with mouse, touch and keyboard. On phones, dragging sideways moves the slider and dragging up or down still scrolls the page."}]},{"type":"paragraph","content":[{"type":"text","text":"- Pairs with Live Pricing Toggle, sold separately. Give both the same Group name and each price applies its Yearly Discount when the toggle is on Yearly."}]},{"type":"paragraph","content":[{"type":"text","text":"- The component shows a price. It does not change checkout links."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page and set its width. That is your slider. Then drag another copy to where the price should be, set its Type to Price, and choose Per Unit or Tiers. On the canvas the slider cannot be dragged. Change its Default to see other prices while designing, or open the preview."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Slider that calculates your price","slug":"live-pricing-slider","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12191-9d4f-744b-a9f3-3238ec5831fe.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T16:49:27.907Z","updatedAt":"2026-10-09T16:49:27.907Z","publishedAt":"2026-10-09T16:49:27.905Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/slider","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_UXcgwNz7HktKk4bplDXsNXb5lC9qXaKunkH7L0UEZWy","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"oZz45toNL7ryPnQDPOH7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-09T16:49:28.553Z","updatedAt":"2026-10-09T16:49:28.553Z"},{"id":"01a12148-688b-749a-b669-c79c2ead7135","title":null,"body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A monthly / yearly pricing toggle that actually changes your prices. Place one toggle on the page and one price in each plan card. When a visitor clicks the toggle, every price switches with it."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Type: Toggle or Price, from the same component"}]},{"type":"paragraph","content":[{"type":"text","text":"- Toggle labels, so it works for any two price sets"}]},{"type":"paragraph","content":[{"type":"text","text":"- Default option when the page loads"}]},{"type":"paragraph","content":[{"type":"text","text":"- Badge text and colors, such as -20% or 2 months free"}]},{"type":"paragraph","content":[{"type":"text","text":"- Track, thumb and label colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font, radius, inset and padding"}]},{"type":"paragraph","content":[{"type":"text","text":"- Thumb transition"}]},{"type":"paragraph","content":[{"type":"text","text":"- Monthly and yearly price text, in any currency or format"}]},{"type":"paragraph","content":[{"type":"text","text":"- Suffix for each option, such as /month"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional crossed-out monthly price next to the yearly price"}]},{"type":"paragraph","content":[{"type":"text","text":"- Price and suffix fonts and colors"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- A toggle changes every price on the page with the same Group name. No variants or interactions to wire up."}]},{"type":"paragraph","content":[{"type":"text","text":"- Use different Group names to run separate pricing tables on one page."}]},{"type":"paragraph","content":[{"type":"text","text":"- Prices switch with a short fade and respect the visitor's reduced motion setting."}]},{"type":"paragraph","content":[{"type":"text","text":"- The toggle works with mouse, touch and keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"- The component changes the prices shown. It does not change checkout links."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your pricing page. That is your toggle. Then drag another copy into each plan card, set its Type to Price, and type in the monthly and yearly prices. On the canvas the toggle cannot be clicked. Set Default to Yearly to see your yearly prices while designing, or open the preview."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"naW248LUiyMkbfhOKiA1","resolved":true,"title":"Live Pricing Toggle","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A monthly / yearly pricing toggle that actually changes your prices. Place one toggle on the page and one price in each plan card. When a visitor clicks the toggle, every price switches with it."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Type: Toggle or Price, from the same component"}]},{"type":"paragraph","content":[{"type":"text","text":"- Toggle labels, so it works for any two price sets"}]},{"type":"paragraph","content":[{"type":"text","text":"- Default option when the page loads"}]},{"type":"paragraph","content":[{"type":"text","text":"- Badge text and colors, such as -20% or 2 months free"}]},{"type":"paragraph","content":[{"type":"text","text":"- Track, thumb and label colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font, radius, inset and padding"}]},{"type":"paragraph","content":[{"type":"text","text":"- Thumb transition"}]},{"type":"paragraph","content":[{"type":"text","text":"- Monthly and yearly price text, in any currency or format"}]},{"type":"paragraph","content":[{"type":"text","text":"- Suffix for each option, such as /month"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional crossed-out monthly price next to the yearly price"}]},{"type":"paragraph","content":[{"type":"text","text":"- Price and suffix fonts and colors"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- A toggle changes every price on the page with the same Group name. No variants or interactions to wire up."}]},{"type":"paragraph","content":[{"type":"text","text":"- Use different Group names to run separate pricing tables on one page."}]},{"type":"paragraph","content":[{"type":"text","text":"- Prices switch with a short fade and respect the visitor's reduced motion setting."}]},{"type":"paragraph","content":[{"type":"text","text":"- The toggle works with mouse, touch and keyboard."}]},{"type":"paragraph","content":[{"type":"text","text":"- The component changes the prices shown. It does not change checkout links."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your pricing page. That is your toggle. Then drag another copy into each plan card, set its Type to Price, and type in the monthly and yearly prices. On the canvas the toggle cannot be clicked. Set Default to Yearly to see your yearly prices while designing, or open the preview."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Toggle that updates your prices","slug":"live-pricing-toggle","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a12148-267f-7699-be09-8b31e0102eb7.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T15:29:15.273Z","updatedAt":"2026-10-09T16:33:53.118Z","publishedAt":"2026-10-09T15:29:15.270Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/pricing","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_hPH75TXULxg2fKfuqYcdwuXCpNXAaoVRJoOsO2iziuf","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"CdOJ1o5H3eHiqxGpsbhx","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-09T15:29:15.915Z","updatedAt":"2026-10-09T15:29:15.915Z"},{"id":"01a120f9-ecc4-743b-ae26-0911650572e3","title":null,"body":"

Countdown Timer is live.

Count down to a fixed date for a launch or a sale, or give every visitor their own timer that starts on their first visit and keeps running when they come back.

When time is up, it can show zeros, show a message, hide itself, or run a Framer interaction, so you can switch a section to a "Sale ended" variant.

Units, labels, fonts, colors and box style are all set from the property panel. No code needed.

Try the demo: https://cultural-universe-619242.framer.app/countdown

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Countdown Timer is live."}]},{"type":"paragraph","content":[{"type":"text","text":"Count down to a fixed date for a launch or a sale, or give every visitor their own timer that starts on their first visit and keeps running when they come back."}]},{"type":"paragraph","content":[{"type":"text","text":"When time is up, it can show zeros, show a message, hide itself, or run a Framer interaction, so you can switch a section to a \"Sale ended\" variant."}]},{"type":"paragraph","content":[{"type":"text","text":"Units, labels, fonts, colors and box style are all set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Try the demo: "},{"type":"text","text":"https://cultural-universe-619242.framer.app/countdown","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://cultural-universe-619242.framer.app/countdown","target":"_blank"}}]}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"RojVBXyn5Yb25bk4We7k","resolved":true,"title":"Evergreen Countdown","body":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A countdown timer for Framer sites. Count down to a fixed date for a launch, an event or a sale, or give every visitor their own timer that starts on their first visit and keeps running when they come back."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel. No code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Mode: Fixed Date or Per Visitor"}]},{"type":"paragraph","content":[{"type":"text","text":"- End date and time, or a duration in days, hours and minutes"}]},{"type":"paragraph","content":[{"type":"text","text":"- At the end: show zeros, show a message, or hide the timer"}]},{"type":"paragraph","content":[{"type":"text","text":"- Restart, for Per Visitor timers that should loop"}]},{"type":"paragraph","content":[{"type":"text","text":"- Units: show or hide days, hours, minutes and seconds"}]},{"type":"paragraph","content":[{"type":"text","text":"- Labels: your own words in any language, or hidden"}]},{"type":"paragraph","content":[{"type":"text","text":"- Box fill, radius, padding and minimum width"}]},{"type":"paragraph","content":[{"type":"text","text":"- Number and label fonts and colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Separator character, color and gap"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"- On End runs a Framer interaction when the timer reaches zero, so you can switch a component to a \"Sale ended\" variant or open an overlay."}]},{"type":"paragraph","content":[{"type":"text","text":"- Per Visitor timers are stored in the visitor's browser. Give a timer a new Timer ID to start everyone again for a new offer."}]},{"type":"paragraph","content":[{"type":"text","text":"- Hidden units roll into the next one. With Days hidden, two days left shows as 48 hours."}]},{"type":"paragraph","content":[{"type":"text","text":"- Numbers use equal-width digits, so the boxes do not shift as the seconds change."}]},{"type":"paragraph","content":[{"type":"text","text":"- The timer stays accurate after the tab has been in the background."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page and pick a Mode. For Fixed Date, choose the End Date. For Per Visitor, set the Duration. The component sizes itself to fit its content, so there is nothing to resize. On the canvas the timer does not tick. Open the preview to see it count down."}]},{"type":"paragraph","content":[{"type":"text","text":"Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component. Unlinking is not available, so the source cannot be viewed or edited. When an update is released, an Update button appears next to the component in your Assets panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Support"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Replies usually take up to 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More components, including four free ones, are at "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Countdown to a date or per visitor","slug":"evergreen-countdown","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a120f9-44ef-77ed-92cf-2aab49e59c0e.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T14:03:31.800Z","updatedAt":"2026-10-09T14:27:57.054Z","publishedAt":"2026-10-09T14:03:31.797Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/countdown","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_HlNbffkZYZZz9wBLIqVoG8lrkxBfTMc0NOaxu0JHZxn","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"QVaEKMjYnRtXlMoZPuLs","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-10-09T14:03:32.420Z","updatedAt":"2026-10-09T14:03:32.420Z"},{"id":"01a11a73-4580-77ea-98fc-5202abaa1831","title":null,"body":"

New component: Hover Spotlight Card. A soft light follows the cursor across the card and makes the border glow. Colors, size and content are all customizable.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component: Hover Spotlight Card. A soft light follows the cursor across the card and makes the border glow. Colors, size and content are all customizable."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qrGDJxhGklSf9boMKuF3","resolved":true,"title":"Hover Spotlight Card","body":"$5a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover Spotlight Card","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"A card with a soft light that follows the cursor. As visitors move across the card, the glow lights up the surface and the border beneath it. A simple way to make feature grids and pricing sections feel responsive.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Title and Text: built-in content for the card","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Content: connect your own Framer layer to replace the built-in text","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Align: left or center","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Fill: card background color","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Spotlight: color and size of the light","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Border: width, color and glow color","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Radius and Padding","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Title Font, Text Font and colors","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Details","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"The light only moves a CSS position, so it stays smooth even with many cards on one page. On touch screens the light follows the finger.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need Help?","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Email ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Questions are usually answered within 3 business days.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo, including four free ones: ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","target":"_blank"}}]},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"A soft light follows the cursor.","slug":"hover-spotlight-card","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11a72-59c8-75aa-aa6c-136c5738b39d.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-08T07:38:43.878Z","updatedAt":"2026-10-08T07:38:43.878Z","publishedAt":"2026-10-08T07:38:43.876Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/spotlight","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_KqZ94pOHbo7iocBYxCghHmIzb8BbQna4BeVpU3gAGsC","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"P7TZ8uwa5pZTWGfwIbet","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-08T07:38:44.480Z","updatedAt":"2026-10-08T07:38:44.480Z"},{"id":"01a11a3a-a7e9-745a-b788-3343badea269","title":null,"body":"$5b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Before After Slider"}]},{"type":"paragraph","content":[{"type":"text","text":"An image comparison slider for Framer sites. Visitors drag the handle to reveal one image over the other, which makes it ideal for retouching, redesigns, renovations and any before and after story."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Before and After: the two images to compare"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction: horizontal or vertical"}]},{"type":"paragraph","content":[{"type":"text","text":"- Move On: drag the handle, or follow the mouse on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"- Start: where the divider begins"}]},{"type":"paragraph","content":[{"type":"text","text":"- Handle: size, color, line thickness and arrows"}]},{"type":"paragraph","content":[{"type":"text","text":"- Labels: text, colors and size, or hide them"}]},{"type":"paragraph","content":[{"type":"text","text":"- Radius: corner radius"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"Works with mouse, touch and keyboard. A horizontal slider still lets the page scroll up and down on phones. Images use Framer's responsive image control, so they load at the right size."}]},{"type":"paragraph","content":[{"type":"text","text":"How To Use"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop the component on your page, pick a Before and an After image in the property panel, and resize the component to match your images."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version."}]},{"type":"paragraph","content":[{"type":"text","text":"Need Help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Questions are usually answered within 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo, including four free ones: "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"sqVtZZp6sRftdWG1UWqx","resolved":true,"title":"BeforeAfterCompare","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Before After Slider"}]},{"type":"paragraph","content":[{"type":"text","text":"An image comparison slider for Framer sites. Visitors drag the handle to reveal one image over the other, which makes it ideal for retouching, redesigns, renovations and any before and after story."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Before and After: the two images to compare"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction: horizontal or vertical"}]},{"type":"paragraph","content":[{"type":"text","text":"- Move On: drag the handle, or follow the mouse on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"- Start: where the divider begins"}]},{"type":"paragraph","content":[{"type":"text","text":"- Handle: size, color, line thickness and arrows"}]},{"type":"paragraph","content":[{"type":"text","text":"- Labels: text, colors and size, or hide them"}]},{"type":"paragraph","content":[{"type":"text","text":"- Radius: corner radius"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"Works with mouse, touch and keyboard. A horizontal slider still lets the page scroll up and down on phones. Images use Framer's responsive image control, so they load at the right size."}]},{"type":"paragraph","content":[{"type":"text","text":"How To Use"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop the component on your page, pick a Before and an After image in the property panel, and resize the component to match your images."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version."}]},{"type":"paragraph","content":[{"type":"text","text":"Need Help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Questions are usually answered within 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo, including four free ones: "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Drag to compare two images.","slug":"beforeaftercompare","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11a3a-70f9-738f-b310-494f5ad8a1d6.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-08T06:36:53.386Z","updatedAt":"2026-10-08T06:36:53.386Z","publishedAt":"2026-10-08T06:36:53.383Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app/compare","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_obz5RXj7uviPs0LRnL4gED2Vn5N6DrlLDUywd4HmzHA","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"8j2otZItlwm1wsIFAC1c","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-10-08T06:36:54.122Z","updatedAt":"2026-10-08T06:36:54.122Z"},{"id":"01a119cb-94ea-718c-8eb7-d9c7418678fa","title":null,"body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Typing Effect Text"}]},{"type":"paragraph","content":[{"type":"text","text":"A headline that types out a list of phrases one character at a time, deletes them, and moves on to the next. A fixed prefix stays in place, so you can write lines like \"We design websites.\" and rotate the last word."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Prefix and Phrases: the fixed text and the list of rotating phrases"}]},{"type":"paragraph","content":[{"type":"text","text":"- Tag: H1, H2, H3, P or Span, for correct heading structure"}]},{"type":"paragraph","content":[{"type":"text","text":"- Type Speed, Delete Speed and Pause"}]},{"type":"paragraph","content":[{"type":"text","text":"- Loop: repeat forever or stop on the last phrase"}]},{"type":"paragraph","content":[{"type":"text","text":"- Reserve Width and Align: keep space for the longest phrase so nothing shifts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Cursor: character, color and blinking"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font, Text color and Typed Text color"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"Typing starts when the text scrolls into view. Visitors who prefer reduced motion see the first phrase without animation."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo: Scroll To Top Ring, Reading Progress Bar, Text Scramble Button and Magnetic Pull Button. "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oBruIMOHV0iYNEzpZEOT","resolved":true,"title":"Typing Effect Text","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Typing Effect Text"}]},{"type":"paragraph","content":[{"type":"text","text":"A headline that types out a list of phrases one character at a time, deletes them, and moves on to the next. A fixed prefix stays in place, so you can write lines like \"We design websites.\" and rotate the last word."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Prefix and Phrases: the fixed text and the list of rotating phrases"}]},{"type":"paragraph","content":[{"type":"text","text":"- Tag: H1, H2, H3, P or Span, for correct heading structure"}]},{"type":"paragraph","content":[{"type":"text","text":"- Type Speed, Delete Speed and Pause"}]},{"type":"paragraph","content":[{"type":"text","text":"- Loop: repeat forever or stop on the last phrase"}]},{"type":"paragraph","content":[{"type":"text","text":"- Reserve Width and Align: keep space for the longest phrase so nothing shifts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Cursor: character, color and blinking"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font, Text color and Typed Text color"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"Typing starts when the text scrolls into view. Visitors who prefer reduced motion see the first phrase without animation."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo: Scroll To Top Ring, Reading Progress Bar, Text Scramble Button and Magnetic Pull Button. "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Types and deletes your phrases.","slug":"typing-effect-text","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a119cb-4403-7011-b5bc-37b7271dad9e.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-08T04:35:34.109Z","updatedAt":"2026-10-08T07:07:54.419Z","publishedAt":"2026-10-08T04:35:34.107Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/TypingLoopText-PSFtA4.js@nPUsOzmYnjVIpZnjsqey","previewUrl":"https://cultural-universe-619242.framer.app/typing","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"nPUsOzmYnjVIpZnjsqey","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-08T04:35:34.762Z","updatedAt":"2026-10-08T04:35:34.762Z"},{"id":"01a119be-2393-731f-afc1-63c2e9c1ce3a","title":null,"body":"

New free component: Magnetic Pull Button. It leans toward the cursor and springs back when you move away. Strength, range and spring are all customizable.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New free component: Magnetic Pull Button. It leans toward the cursor and springs back when you move away. Strength, range and spring are all customizable."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"co08DgpbeEjLuWFbKwHb","resolved":true,"title":"Magnetic Pull Button","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Magnetic Pull Button"}]},{"type":"paragraph","content":[{"type":"text","text":"A button that leans toward the cursor as it gets close, then springs back when the cursor moves away. The label moves a little further than the button, which adds a subtle sense of depth."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Text, Link and New Tab"}]},{"type":"paragraph","content":[{"type":"text","text":"- Strength: how far the button follows the cursor"}]},{"type":"paragraph","content":[{"type":"text","text":"- Label Pull: how much extra the label moves"}]},{"type":"paragraph","content":[{"type":"text","text":"- Range: how close the cursor must be before the pull starts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Spring: stiffness and damping of the return motion"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font, Text and Fill colors, with separate hover colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Radius, Padding and Border"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"The pull only runs for mouse pointers, so on touch screens it behaves like a normal button. Visitors who prefer reduced motion get a static button."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo: Scroll To Top Ring, Reading Progress Bar and Text Scramble Button. "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Pulls toward the cursor.","slug":"magnetic-pull-button","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a119bd-cb9e-7731-864c-d702cbda21b4.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-08T04:20:53.148Z","updatedAt":"2026-10-08T07:08:05.573Z","publishedAt":"2026-10-08T04:20:53.145Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/MagneticPullButton-GnZhDn.js@piYCOY0ORbXN6gT3xwgu","previewUrl":"https://cultural-universe-619242.framer.app/magnetic","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"piYCOY0ORbXN6gT3xwgu","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-10-08T04:20:53.779Z","updatedAt":"2026-10-08T04:20:53.779Z"},{"id":"01a11940-100f-7129-a126-2598d95ee810","title":null,"body":"

New free component: Text Scramble Button. The label scrambles into random characters and resolves back on hover. Trigger, speed, characters and colors are all customizable.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New free component: Text Scramble Button. The label scrambles into random characters and resolves back on hover. Trigger, speed, characters and colors are all customizable."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kzuRCvC1e5uu12XkJaHa","resolved":true,"title":"Text Scramble Button","body":"$60","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Text Scramble Button"}]},{"type":"paragraph","content":[{"type":"text","text":"A button whose label scrambles into random characters and resolves back, letter by letter, when visitors hover it. A small detail that makes calls to action feel alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Text, Link and New Tab"}]},{"type":"paragraph","content":[{"type":"text","text":"- Trigger: on hover, on appear, or both"}]},{"type":"paragraph","content":[{"type":"text","text":"- Duration: how long the scramble lasts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Characters: the set of characters used while scrambling"}]},{"type":"paragraph","content":[{"type":"text","text":"- Font: family, size and weight"}]},{"type":"paragraph","content":[{"type":"text","text":"- Text and Fill colors, with separate hover colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Radius, Padding and Border"}]},{"type":"paragraph","content":[{"type":"text","text":"Details"}]},{"type":"paragraph","content":[{"type":"text","text":"The button keeps its width while the label scrambles, so nothing around it shifts. Visitors who prefer reduced motion see the plain label."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"More components by Joviseo: Scroll To Top Ring and Reading Progress Bar. "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Label scrambles on hover.","slug":"text-scramble-button","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11949-3539-74ed-8316-92aa7d66e79b.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-08T02:03:10.661Z","updatedAt":"2026-10-08T07:08:17.141Z","publishedAt":"2026-10-08T02:03:10.658Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/TextScrambleHoverButton-jL2oCU.js@5bLsK63Npw0BVTIczMOC","previewUrl":"https://cultural-universe-619242.framer.app/scramble","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"5bLsK63Npw0BVTIczMOC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-08T02:03:11.248Z","updatedAt":"2026-10-08T02:03:11.248Z"},{"id":"01a1155f-ad63-70cf-85a6-c0c5a404085f","title":null,"body":"

New component: Scroll To Top Ring Button. A back-to-top button with a ring that fills as visitors scroll. Every detail is customizable from the property panel.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component: Scroll To Top Ring Button. A back-to-top button with a ring that fills as visitors scroll. Every detail is customizable from the property panel."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"94OmZ2CVbt0aksPDDvHq","resolved":true,"title":"Scroll To Top Ring","body":"$61","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll To Top Ring Button"}]},{"type":"paragraph","content":[{"type":"text","text":"A back-to-top button for Framer sites that also shows reading progress. A ring around the button fills as visitors scroll down the page, and one click takes them back to the top."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Show After: scroll distance before the button appears (0–3000px)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth: smooth scroll or instant jump"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fill and Shadow: background color and box shadow"}]},{"type":"paragraph","content":[{"type":"text","text":"- Icon: arrow or chevron, with color, size and stroke"}]},{"type":"paragraph","content":[{"type":"text","text":"- Ring: color, track color and thickness, or hide it"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hover Scale and Transition: hover size and appear animation"}]},{"type":"paragraph","content":[{"type":"text","text":"Why This Component"}]},{"type":"paragraph","content":[{"type":"text","text":"Most scroll-to-top buttons only scroll. This one doubles as a scroll progress indicator, so long pages such as blog posts, docs and landing pages get two features in one small button. It is lightweight and stays hidden until visitors need it."}]},{"type":"paragraph","content":[{"type":"text","text":"How To Use"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop the component on your page and set its position to Fixed. Pin it to the bottom and right at 24px, keep width and height equal, and raise its Z Index so it stays above your sections."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited. When an Update button appears next to the component, apply it to get the latest version."}]},{"type":"paragraph","content":[{"type":"text","text":"Need Help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"joviseo1106@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joviseo1106@gmail.com","target":"_blank"}}]},{"type":"text","text":". Questions are usually answered within 3 business days."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"Pair it with Reading Progress Bar, a free scroll progress bar with a matching look. Live demo, license and more components: "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Back to top with a progress ring","slug":"scroll-to-top-ring","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11552-c335-77ef-8f05-a0304f635e31.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-07T07:59:13.631Z","updatedAt":"2026-10-08T06:29:34.087Z","publishedAt":"2026-10-07T07:59:13.626Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cultural-universe-619242.framer.app","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_6uKYDg3TZO0FccoBznIx7UxrDW07LBokQc8IP2xKmae","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"GnR03cyRLwvZQlWZmShS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-10-08T01:42:47.573Z","createdAt":"2026-10-07T07:59:14.275Z","updatedAt":"2026-10-08T01:42:47.573Z"},{"id":"01a1154a-8b44-70bc-be63-c99f2fa88bb8","title":null,"body":"

New free component: Reading Progress Bar. A thin bar that fills as visitors scroll, with color, direction and smoothing controls. Great for blogs and long pages.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New free component: Reading Progress Bar. A thin bar that fills as visitors scroll, with color, direction and smoothing controls. Great for blogs and long pages."}]},{"type":"paragraph"}]},"author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[],"resources":[{"id":"QvSkFJY6ihaHuL9akp9Z","resolved":true,"title":"Reading Progress Bar","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Reading Progress Bar"}]},{"type":"paragraph","content":[{"type":"text","text":"A thin bar that fills as visitors scroll, showing how far they are through the page. Ideal for blog posts, docs, case studies and long landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Properties"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set from the property panel, with no code editing."}]},{"type":"paragraph","content":[{"type":"text","text":"- Fill: color of the progress bar"}]},{"type":"paragraph","content":[{"type":"text","text":"- Track: color of the background behind the bar"}]},{"type":"paragraph","content":[{"type":"text","text":"- Grow From: left, center or right"}]},{"type":"paragraph","content":[{"type":"text","text":"- Rounded: round the leading end of the bar"}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth: spring-smoothed motion or direct tracking"}]},{"type":"paragraph","content":[{"type":"text","text":"How To Use"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop the component on your page and set its position to Fixed. Set Width to Relative 100% and Height to 4px, pin it to the top and left at 0, and raise its Z Index so it stays above your sections."}]},{"type":"paragraph","content":[{"type":"text","text":"About The Code"}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited."}]},{"type":"paragraph","content":[{"type":"text","text":"More Resources"}]},{"type":"paragraph","content":[{"type":"text","text":"Pair it with Scroll To Top Progress Button, a back-to-top button with a matching progress ring. More components: "},{"type":"text","text":"https://joviseo.vercel.app","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://joviseo.vercel.app","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"Shows reading progress on scroll.","slug":"reading-progress-bar","author":{"framerUserId":"21a65b87-79b6-4301-9fd3-02381450f947","name":"Joviseo KIM","slug":"joviseo-kim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/7bv27c20","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/21a65b87-79b6-4301-9fd3-02381450f947/01a11547-2f4a-756b-9766-b0517e18aede.png","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-07T07:36:08.666Z","updatedAt":"2026-10-08T04:51:26.073Z","publishedAt":"2026-10-07T07:36:08.661Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Reading-Progress-Bar-jSSaev.js@SMSGgZyalH2dbJHvBEca","previewUrl":"https://cultural-universe-619242.framer.app/progress","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"SMSGgZyalH2dbJHvBEca","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-10-07T07:36:09.284Z","updatedAt":"2026-10-07T07:36:09.284Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]