5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8ff,

Real-Time Cursors lets you simulate live collaboration directly on your website. Add up to 5 independent cursors and define exactly how each one moves, behaves and looks.

Each cursor can be configured individually, allowing you to create subtle background interaction or dynamic, attention-grabbing motion scenes.

Path Control

Define how each cursor moves across the canvas. All positions are set in percentages, ensuring fully responsive behavior across different layouts and screen sizes. You can choose between 2 movement types: Linear and Path.

Linear: move the cursor from point A to point B. Ideal for directional gestures or repeated motion.
Path: create custom routes using up to 5 coordinate points. Perfect for guided or complex movement patterns.

Complete Customization

Customize the visual style of every cursor. Each cursor is independent, allowing you to match them perfectly with your brand or interface style. Key features include:

Font: type, size, weight and color
Chip: name, color, stroke, shadow, radius, padding
Cursor: size, color, stroke, shadow, position, motion

Motion Control

Define how each cursor moves and behaves. Every cursor can be configured independently, making layered and natural motion easy to achieve.

Choose between Linear or Path movement
Enable or disable looping
Choose between Spring, Ease or Instant transitions

Best For

Simulating live collaboration
SaaS and startup landing pages
Product demos
Interactive hero sections
UI storytelling and walkthroughs

Support & Refund Policy

A full refund will be provided if the component does not work as described and we are unable to resolve the issue. Refunds are not available for any other reasons such as accidental purchases, change of mind, expectations of features that were not clearly listed or lack of use. For any queries and support, contact kopai.designstudio@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"019d9093-e7ef-7bc8-ac7f-de2e5d52b77f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b12f0aac-9ce7-4918-ba83-c7a38e7faff4","name":"Kopai Studio","slug":"kopai-studio","avatar":"https://framerusercontent.com/avatars/users/b12f0aac-9ce7-4918-ba83-c7a38e7faff4/rmhx41i_D","followed":false,"followsYou":false},"media":[],"resources":[{"id":"C0cCuAypxZ8VWzZuGrxO","resolved":true,"title":"Real-Time Cursors","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-Time Cursors lets you simulate live collaboration directly on your website. Add up to 5 independent cursors and define exactly how each one moves, behaves and looks."}]},{"type":"paragraph","content":[{"type":"text","text":"Each cursor can be configured individually, allowing you to create subtle background interaction or dynamic, attention-grabbing motion scenes."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Path Control"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Define how each cursor moves across the canvas. All positions are set in percentages, ensuring fully responsive behavior across different layouts and screen sizes. You can choose between 2 movement types: Linear and Path."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Linear:","marks":[{"type":"bold"}]},{"type":"text","text":" move the cursor from point A to point B. Ideal for directional gestures or repeated motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Path:","marks":[{"type":"bold"}]},{"type":"text","text":" create custom routes using up to 5 coordinate points. Perfect for guided or complex movement patterns."}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Complete Customization"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Customize the visual style of every cursor. Each cursor is independent, allowing you to match them perfectly with your brand or interface style. Key features include:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font: ","marks":[{"type":"bold"}]},{"type":"text","text":"type, size, weight and color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Chip:","marks":[{"type":"bold"}]},{"type":"text","text":" name, color, stroke, shadow, radius, padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor:","marks":[{"type":"bold"}]},{"type":"text","text":" size, color, stroke, shadow, position, motion"}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Motion Control"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Define how each cursor moves and behaves. Every cursor can be configured independently, making layered and natural motion easy to achieve."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose between Linear or Path movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enable or disable looping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose between Spring, Ease or Instant transitions"}]}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Best For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Simulating live collaboration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS and startup landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product demos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"UI storytelling and walkthroughs"}]}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Support & Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A full refund will be provided if the component does not work as described and we are unable to resolve the issue. Refunds are not available for any other reasons such as accidental purchases, change of mind, expectations of features that were not clearly listed or lack of use. For any queries and support, contact "},{"type":"text","text":"kopai.designstudio@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:kopai.designstudio@gmail.com","class":null,"target":"_blank"}}]}]}]},"introduction":"Simulate Live Collaboration","slug":"real-time-cursors","author":{"framerUserId":"b12f0aac-9ce7-4918-ba83-c7a38e7faff4","name":"Kopai Studio","slug":"kopai-studio","avatar":"https://framerusercontent.com/avatars/users/b12f0aac-9ce7-4918-ba83-c7a38e7faff4/rmhx41i_D","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b12f0aac-9ce7-4918-ba83-c7a38e7faff4/heq144o6","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-08T17:05:07.107Z","updatedAt":"2026-06-16T19:38:08.971Z","publishedAt":"2026-04-15T09:58:25.519Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://real-time-cursors.framer.website","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_GvhLOnK1w150P4Z9R6EidGBTRYphjwSF9eo2y4Yr4jJ","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"fDXr22pSptstYTCEU6Dy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":51,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T09:58:25.519Z","updatedAt":"2026-04-15T09:58:25.519Z","reported":false}}],"$L5f"]

Suggested for you