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

52: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

53: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

54: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

55: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

56: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

57: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

58: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

59: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

5a: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

5b: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

5c: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

5d: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":"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":"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":"$51","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":"$52","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":"$53","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":"$54","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":"$55","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":"$56","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":"$57","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":"$58","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":"$59","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://framer.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":"$5a","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://framer.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":"$5b","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://framer.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":"$5c","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":"$5d","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://framer.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":"$L5e"}]