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

About Gooey Liquid Cursor

Two shapes: one follows the pointer, one trails behind. When they get close, they merge into a single liquid mass. It stretches with speed, breathes when idle, and morphs from circle to drop on hover.

Two ways to use it

Automatic — drop it on the page and it works: pointer tracking, hover and click response, system cursor hidden.

Framer Cursor — place it inside your own cursor component and drive it with variants.

Hover that works on your own layers

Most cursor components only react to links and buttons. This one also targets layers by name: rename a frame to Project Card, type that name in the Layer Names field, and the whole card triggers the hover state, children included. Commas target several names, and a CSS selector option is there too.

Controls

Cursor — Mode, Color, Shape (circle or drop), Rotation, Size

Hover — Targets, Layer Names, Scale, Color, Shape, Rotation

Trail — Size, Delay, Max Distance Liquid — Fusion, Sharpness

Motion — Follow Delay, Transition, Stretch, Breathing, Speed

Other — Press Scale, Hide Pointer, Native Inputs, Blend, Layer Order

Built for real sites

Native SVG filter, not WebGL: same result in Safari, Chrome, Firefox and Edge, with no libraries and no custom code. Color is applied after the liquid mask, so transparency and blend modes keep the effect intact. Native Inputs returns the system pointer over form fields and media controls. One animation loop, only while the pointer is on the page. Hidden on touch, respects reduced motion.

Quick start

Paste the component URL into your project, drop it on the page, keep the frame at 32 × 32 and set Position to Absolute inside Stacks. Open Preview and move the mouse.

Includes a full user guide.

Support: jpedrosporto.design@gmail.com

53:T718,

Animated Liquid Divider replaces hard edges between sections with a living, layered wave — rendered on canvas, animated in real time, and reactive to scroll: scrolling agitates the surface like real liquid, with ripples that travel in the direction you scroll.

Features

Up to 5 depth layers with organic, non-repeating motion
Scroll agitation: waves churn and ripple as the user scrolls
4 directions (up, down, left, right) — works as a horizontal or vertical divider
Full transparency support: fade either color to 0 and the liquid effect stays intact
Waves never clip outside the component bounds, at any amplitude
10 property controls, zero code required

Performance

Lightweight 2D canvas (no WebGL, no libraries). Pauses automatically when off-screen, renders a static frame in the editor, and respects prefers-reduced-motion.

How to use

Drag onto your canvas and set Position to Absolute
Pin it to the section edges: set Left and Right to 0 so the divider stretches edge to edge (setting Width to 100% or Fill also works)
Set Height to your transition size (e.g. 160px) and place it overlapping the edge between two sections. Tip: use the top/bottom pin toggle to anchor the divider to the right edge — this is the most reliable method, especially when using transparency. Any placement that sits the component over the section boundary will work.
Match Color 1 and Color 2 to your section backgrounds — or use transparency

Built with procedural canvas animation and real-time scroll physics — motion that goes beyond what preset effects can do.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-5fd0509e-1497-49c2-9b9c-c184468f3d8d-all:/unified/creator/5fd0509e-1497-49c2-9b9c-c184468f3d8d/activity/":[{"data":[{"id":"01a0d92d-1a33-7751-8693-ae50fe835ed9","type":"component.created","target":{"type":"component","id":"sy3alghdptj82kyVaonV","preview":"Gooey Liquid Cursor","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/01a0d929-139a-75d1-b34c-bdc75460850d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-25T15:26:46.835Z","latestAt":"2026-09-25T15:26:46.835Z"},{"id":"01a0d5e3-85d2-72c7-a828-bc187c540a80","type":"comment.liked","target":{"type":"comment","id":"01a0ca39-3ae4-723c-a232-8928fb040706","preview":"Love seeing wins like this. Well deserved man, congrats!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Love seeing wins like this. Well deserved man, congrats!","marks":[{"type":"bold"}]}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0c997-234d-717d-8ccb-62156c981557","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0ca39-3ae4-723c-a232-8928fb040706"},"repost":null}},"context":{"type":"post","id":"01a0c997-234d-717d-8ccb-62156c981557","preview":"a few years ago I had a phone with a screen that kept falling out. for real. \nthis week I bought a macbook pro M5 24gb and a few other accessories I never thought I'd own.\nthank God for this, and for every step that got me here as a professional. @framer, you played a big part in this one.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"a few years ago I had a phone with a screen that kept falling out. for real. "}]},{"type":"paragraph","content":[{"type":"text","text":"this week I bought a macbook pro M5 24gb and a few other accessories I never thought I'd own."}]},{"type":"paragraph","content":[{"type":"text","text":"thank God for this, and for every step that got me here as a professional. @framer, you played a big part in this one."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/01a0c996-b89e-77de-85f2-9eb20f2bad8a.jpg","targetDeleted":false,"owned":true,"actions":{"postId":"01a0c997-234d-717d-8ccb-62156c981557","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-25T00:07:33.064Z","latestAt":"2026-09-25T00:07:33.064Z"},{"id":"01a0d5e3-8312-741d-833f-48b8f40a6ecb","type":"comment.liked","target":{"type":"comment","id":"01a0cca5-f05a-71ed-9083-6c026e7b475a","preview":"From a phone whose screen kept falling out to this setup — what a journey. Really happy for you, congrats 🙌","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"From a phone whose screen kept falling out to this setup — what a journey. Really happy for you, congrats "},{"type":"emoji","attrs":{"name":"raised_hands","emoji":"🙌"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0c997-234d-717d-8ccb-62156c981557","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0cca5-f05a-71ed-9083-6c026e7b475a"},"repost":null}},"context":{"type":"post","id":"01a0c997-234d-717d-8ccb-62156c981557","preview":"a few years ago I had a phone with a screen that kept falling out. for real. \nthis week I bought a macbook pro M5 24gb and a few other accessories I never thought I'd own.\nthank God for this, and for every step that got me here as a professional. @framer, you played a big part in this one.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"a few years ago I had a phone with a screen that kept falling out. for real. "}]},{"type":"paragraph","content":[{"type":"text","text":"this week I bought a macbook pro M5 24gb and a few other accessories I never thought I'd own."}]},{"type":"paragraph","content":[{"type":"text","text":"thank God for this, and for every step that got me here as a professional. @framer, you played a big part in this one."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/01a0c996-b89e-77de-85f2-9eb20f2bad8a.jpg","targetDeleted":false,"owned":true,"actions":{"postId":"01a0c997-234d-717d-8ccb-62156c981557","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-25T00:07:32.363Z","latestAt":"2026-09-25T00:07:32.363Z"},{"id":"01a0d5e2-761b-7678-a355-c4a4baeeee0b","type":"comment.liked","target":{"type":"comment","id":"01a0d245-9a61-7048-ab6e-066e9d163c1c","preview":"The stretch-on-velocity part is what usually sells a custom cursor. How are you driving the morph on hover (Framer Effect vs override on pointer events)?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The stretch-on-velocity part is what usually sells a custom cursor. How are you driving the morph on hover (Framer Effect vs override on pointer events)?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0d245-9a61-7048-ab6e-066e9d163c1c"},"repost":null}},"context":{"type":"post","id":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","preview":"built 3 different cursors for this site before this one. all of them worked. none of them felt like the brand. \nthis one did the second i saw it move. liquid, stretches when you move fast, morphs on hover. stopped there. \nthinking about releasing it as a @framer component. would you use it?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"built 3 different cursors for this site before this one. all of them worked. none of them felt like the brand. "}]},{"type":"paragraph","content":[{"type":"text","text":"this one did the second i saw it move. liquid, stretches when you move fast, morphs on hover. stopped there. "}]},{"type":"paragraph","content":[{"type":"text","text":"thinking about releasing it as a "},{"type":"text","text":"@framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/framer","target":"_blank"}}]},{"type":"text","text":" component. would you use it?"}]}]},"thumbnail":"https://image.mux.com/eIJzntAQSF8VijRmqWg1wBNanyNCR02OCvaQXml4Qdck/thumbnail.webp?time=5.933","targetDeleted":false,"owned":true,"actions":{"postId":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-25T00:06:23.506Z","latestAt":"2026-09-25T00:06:23.506Z"},{"id":"01a0d5e2-7276-72ae-b960-28fbb519e87d","type":"comment.reply","target":{"type":"post","id":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","preview":"built 3 different cursors for this site before this one. all of them worked. none of them felt like the brand. \nthis one did the second i saw it move. liquid, stretches when you move fast, morphs on hover. stopped there. \nthinking about releasing it as a @framer component. would you use it?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"built 3 different cursors for this site before this one. all of them worked. none of them felt like the brand. "}]},{"type":"paragraph","content":[{"type":"text","text":"this one did the second i saw it move. liquid, stretches when you move fast, morphs on hover. stopped there. "}]},{"type":"paragraph","content":[{"type":"text","text":"thinking about releasing it as a "},{"type":"text","text":"@framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/framer","target":"_blank"}}]},{"type":"text","text":" component. would you use it?"}]}]},"thumbnail":"https://image.mux.com/eIJzntAQSF8VijRmqWg1wBNanyNCR02OCvaQXml4Qdck/thumbnail.webp?time=5.933","targetDeleted":false,"owned":true,"actions":{"postId":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0d5e2-7264-71d9-a125-092dfe75873b","preview":"pointer events inside the component, no external override. \nit hit-tests on every frame and you can target your own layers by name: rename a frame to \"Project Card\", type that in the panel, and the whole card triggers the hover state. nothing to add to your markup. \nthe morph runs in the same loop as the liquid, so the shape change and the fusion never fight each other.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"pointer events inside the component, no external override. "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"it hit-tests on every frame and you can target your own layers by name: rename a frame to \"Project Card\", type that in the panel, and the whole card triggers the hover state. nothing to add to your markup. "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"the morph runs in the same loop as the liquid, so the shape change and the fusion never fight each other."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0d245-9a61-7048-ab6e-066e9d163c1c"},"repost":null}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-25T00:06:22.582Z","latestAt":"2026-09-25T00:06:22.582Z"},{"id":"01a0c0ef-2a86-73ae-9c92-46fbede9df27","type":"comment.liked","target":{"type":"comment","id":"019f68f1-1bce-7181-a0b5-1629be76040b","preview":"Cool","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Cool"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f6825-8a24-738c-9b5c-0651fb7358bb","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f68f1-1bce-7181-a0b5-1629be76040b"},"repost":null}},"context":{"type":"post","id":"019f6825-8a24-738c-9b5c-0651fb7358bb","preview":"i was ready to scrap this whole template. \nweeks of rewrites, classic perfectionist trap, nothing felt done. \nbut this section made me stick with it.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"i was ready to scrap this whole template. "}]},{"type":"paragraph","content":[{"type":"text","text":"weeks of rewrites, classic perfectionist trap, nothing felt done. "}]},{"type":"paragraph","content":[{"type":"text","text":"but this section made me stick with it."}]}]},"thumbnail":"https://image.mux.com/V47OlTwtTKI023y6GdYIltbx8X8wjrFV6gT5xZG13L5k/thumbnail.webp?time=1.383","targetDeleted":false,"owned":true,"actions":{"postId":"019f6825-8a24-738c-9b5c-0651fb7358bb","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T22:28:14.591Z","latestAt":"2026-09-20T22:28:14.591Z"},{"id":"01a0c0ef-28ae-70be-bcbe-46525fc1d21c","type":"comment.liked","target":{"type":"comment","id":"019f6927-5d0b-74fc-ac2c-06990d2b2ade","preview":"Very polished!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Very polished!","marks":[{"type":"bold"}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f6825-8a24-738c-9b5c-0651fb7358bb","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f6927-5d0b-74fc-ac2c-06990d2b2ade"},"repost":null}},"context":{"type":"post","id":"019f6825-8a24-738c-9b5c-0651fb7358bb","preview":"i was ready to scrap this whole template. \nweeks of rewrites, classic perfectionist trap, nothing felt done. \nbut this section made me stick with it.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"i was ready to scrap this whole template. "}]},{"type":"paragraph","content":[{"type":"text","text":"weeks of rewrites, classic perfectionist trap, nothing felt done. "}]},{"type":"paragraph","content":[{"type":"text","text":"but this section made me stick with it."}]}]},"thumbnail":"https://image.mux.com/V47OlTwtTKI023y6GdYIltbx8X8wjrFV6gT5xZG13L5k/thumbnail.webp?time=1.383","targetDeleted":false,"owned":true,"actions":{"postId":"019f6825-8a24-738c-9b5c-0651fb7358bb","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T22:28:14.111Z","latestAt":"2026-09-20T22:28:14.111Z"},{"id":"01a0c0ef-2705-759e-98ec-2bd853d46471","type":"comment.liked","target":{"type":"comment","id":"019f6955-2c61-7049-a651-eaa7b3c28668","preview":"Nice","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nice"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f6825-8a24-738c-9b5c-0651fb7358bb","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f6955-2c61-7049-a651-eaa7b3c28668"},"repost":null}},"context":{"type":"post","id":"019f6825-8a24-738c-9b5c-0651fb7358bb","preview":"i was ready to scrap this whole template. \nweeks of rewrites, classic perfectionist trap, nothing felt done. \nbut this section made me stick with it.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"i was ready to scrap this whole template. "}]},{"type":"paragraph","content":[{"type":"text","text":"weeks of rewrites, classic perfectionist trap, nothing felt done. "}]},{"type":"paragraph","content":[{"type":"text","text":"but this section made me stick with it."}]}]},"thumbnail":"https://image.mux.com/V47OlTwtTKI023y6GdYIltbx8X8wjrFV6gT5xZG13L5k/thumbnail.webp?time=1.383","targetDeleted":false,"owned":true,"actions":{"postId":"019f6825-8a24-738c-9b5c-0651fb7358bb","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T22:28:13.694Z","latestAt":"2026-09-20T22:28:13.694Z"},{"id":"01a0c0ef-08fd-7522-bc47-bf7daf98dd9b","type":"comment.liked","target":{"type":"comment","id":"01a08b5a-3865-7643-8b62-4a61bce2c6f5","preview":"Clear and refined.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Clear and refined."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f8512-b53c-773d-a316-8b40e8b6cad3","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a08b5a-3865-7643-8b62-4a61bce2c6f5"},"repost":null}},"context":{"type":"post","id":"019f8512-b53c-773d-a316-8b40e8b6cad3","preview":"\"we don't want photos of the team on the site.\" ok... so how do you show a team working together without showing the team? \nbuilt this with claude: three editors with cursors writing and deleting real code, live. draggable, parallax, custom for vertex. \nthis is where framer + ai is actually going.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"\"we don't want photos of the team on the site.\"","marks":[{"type":"bold"}]},{"type":"text","text":" ok... so how do you show a team working together without showing the team? "}]},{"type":"paragraph","content":[{"type":"text","text":"built this with claude: three editors with cursors writing and deleting real code, live. draggable, parallax, custom for vertex. "}]},{"type":"paragraph","content":[{"type":"text","text":"this is where framer + ai is actually going."}]}]},"thumbnail":"https://image.mux.com/CL00WAzuIt3Kv6wPDw5xGLn3rjfTV8EK53FewiahVeMQ/thumbnail.webp?time=6.133","targetDeleted":false,"owned":true,"actions":{"postId":"019f8512-b53c-773d-a316-8b40e8b6cad3","like":{"count":15,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T22:28:06.007Z","latestAt":"2026-09-20T22:28:06.007Z"},{"id":"019f81f2-53b1-74e7-9d9b-4657310ea0d5","type":"vector.liked","target":{"type":"vector","id":"DIqg42wYSs2Mpuhk84UR","preview":"Health Icons","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/vector-sets/health-icons/he8ds890-Sy4ERkQGq5ovWXT7XpteukoW7XuuiY","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"vector","visibility":"public","startedAt":"2026-07-20T23:52:49.838Z","latestAt":"2026-07-20T23:52:49.838Z"},{"id":"019f81f2-4fdd-708c-b420-9a888bc576be","type":"site.liked","target":{"type":"site","id":"12118","preview":"Bonjour Bliss","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/sites/12118/thumbnail-UseIW7QSARXpxghWbRpPFaEz864Oxv.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-07-20T23:52:48.856Z","latestAt":"2026-07-20T23:52:48.856Z"},{"id":"019f81f2-4c2d-748d-b86a-52810fa0d8f8","type":"template.liked","target":{"type":"template","id":"60373","preview":"Lumier","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/60373/lumier-U55nNYTCYC0yoxQOkYvw7iRdd2xraA","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-07-20T23:52:47.904Z","latestAt":"2026-07-20T23:52:47.904Z"},{"id":"019f81f2-4872-77bd-99ee-71cf7ef31c45","type":"post.liked","target":{"type":"post","id":"019f1944-2c17-74ea-925f-2c121b864aa9","preview":"Alhamdulillah... My 1st commission from new agency template \"Serviq\"","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Alhamdulillah... My 1st commission from new agency template \"Serviq\""}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9c206fb7-2e2e-40ad-8a0a-e2e959b6e470/bt2de190","targetDeleted":false,"owned":false,"actions":{"postId":"019f1944-2c17-74ea-925f-2c121b864aa9","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-20T23:52:46.956Z","latestAt":"2026-07-20T23:52:46.956Z"},{"id":"019f81f2-43e6-77ab-a36a-576cbe2ba0ea","type":"post.liked","target":{"type":"post","id":"019f2d0d-a950-705c-a291-965e8c80a766","preview":"Alexa Modern Portfolio Template...Link in the comment box","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Alexa Modern Portfolio Template...Link in the comment box"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9c206fb7-2e2e-40ad-8a0a-e2e959b6e470/3jo5lpc2","targetDeleted":false,"owned":false,"actions":{"postId":"019f2d0d-a950-705c-a291-965e8c80a766","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-20T23:52:45.793Z","latestAt":"2026-07-20T23:52:45.793Z"},{"id":"019f81f2-399a-7255-a599-64e7527df43d","type":"post.liked","target":{"type":"post","id":"019f3787-e045-726d-b691-9f158653da2f","preview":"Hero section smooth transition image bg component","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero section smooth transition image bg component"}]},{"type":"paragraph"}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9c206fb7-2e2e-40ad-8a0a-e2e959b6e470/iw2kgg9a","targetDeleted":false,"owned":false,"actions":{"postId":"019f3787-e045-726d-b691-9f158653da2f","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-20T23:52:43.158Z","latestAt":"2026-07-20T23:52:43.158Z"},{"id":"019f81f2-3649-740c-933d-a08d718d3c7e","type":"template.liked","target":{"type":"template","id":"69722","preview":"JACK STEVENS","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9c206fb7-2e2e-40ad-8a0a-e2e959b6e470/019f73f3-9fb3-7568-b6c3-9b6cbb24c3e6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-07-20T23:52:42.306Z","latestAt":"2026-07-20T23:52:42.306Z"},{"id":"019f81f2-2c02-768b-9559-cf2c83a2bd4c","type":"post.liked","target":{"type":"post","id":"019ed2bf-79e1-7083-855c-9f4f7fa08096","preview":"Just a small memory game that's very blue :)","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just a small memory game that's very blue :)"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed2bf-79e1-7083-855c-9f4f7fa08096","like":{"count":56,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-20T23:52:39.677Z","latestAt":"2026-07-20T23:52:39.677Z"},{"id":"019f81f2-2723-75df-a3dc-7ae60b163c56","type":"post.liked","target":{"type":"post","id":"019ed757-f5b0-772a-be74-3f7cfd54d505","preview":"Hero section concept for an automotive videography studio 🚗","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero section concept for an automotive videography studio "},{"type":"emoji","attrs":{"name":"car","emoji":"🚗"}}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9cd5b634-bc39-4733-b5b7-faeec6428481/97oy1rdm","targetDeleted":false,"owned":false,"actions":{"postId":"019ed757-f5b0-772a-be74-3f7cfd54d505","like":{"count":19,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-20T23:52:38.414Z","latestAt":"2026-07-20T23:52:38.414Z"},{"id":"019f81f2-2298-7558-b9b7-1e7bbb02234c","type":"post.liked","target":{"type":"post","id":"019edacf-5ca2-7040-ae46-a22bef1155ed","preview":"Added my own small music that I composed in background of my memory game :D\nStayed up until 2am for that, I'm so proud of it hahaha (tho i'm no expert)\nhttps://hy.chujiqiqi.com/community/contests/agents-hackathon/submissions/LpebufrM1BP4UiZ3NQqy2x/","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Added my own small music that I composed in background of my memory game :D"}]},{"type":"paragraph","content":[{"type":"text","text":"Stayed up until 2am for that, I'm so proud of it hahaha (tho i'm no expert)"}]},{"type":"paragraph","content":[{"type":"text","text":"https://hy.chujiqiqi.com/community/contests/agents-hackathon/submissions/LpebufrM1BP4UiZ3NQqy2x/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://hy.chujiqiqi.com/community/contests/agents-hackathon/submissions/LpebufrM1BP4UiZ3NQqy2x/","target":"_blank"}}]}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9cd5b634-bc39-4733-b5b7-faeec6428481/xiwpsv9u","targetDeleted":false,"owned":false,"actions":{"postId":"019edacf-5ca2-7040-ae46-a22bef1155ed","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-20T23:52:37.260Z","latestAt":"2026-07-20T23:52:37.260Z"},{"id":"019f81f2-1d14-74d2-ba85-8e17553b29e8","type":"component.liked","target":{"type":"component","id":"8Gat0yeP1Gyr9PTyludP","preview":"Scroll Social Proof","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9d7ecef3-640b-49b0-b3b9-dc3405b85d0a/ptucgkd6","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","slug":"joaoportodesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-20T23:52:35.855Z","latestAt":"2026-07-20T23:52:35.855Z"}],"pagination":{"next":"MjAyNi0wNy0yMFQyMzo1MjozNS44NTVafDAxOWY4MWYyLTFkMTQtNzRkMi1iYTg1LThlMTc1NTNiMjllOA","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:5fd0509e-1497-49c2-9b9c-c184468f3d8d:/unified/posts/?creator=5fd0509e-1497-49c2-9b9c-c184468f3d8d&with=reposts":[{"data":[{"id":"01a0e838-2fcf-74aa-86dd-87fef2166469","title":null,"body":"

just dropped my second @framer component 🔥

Gooey Liquid Cursor: two shapes that follow the pointer at different speeds, merge when they get close, stretch with speed and react on hover.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"just dropped my second "},{"type":"text","text":"@framer ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/framer","target":"_blank"}}]},{"type":"text","text":"component "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Gooey Liquid Cursor: two shapes that follow the pointer at different speeds, merge when they get close, stretch with speed and react on hover."}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/z3PuKdg918b9b019h1kK25E5ifpaQh2o7aAYnUrp1tl00.m3u8","metadata":{"posterUrl":"https://image.mux.com/z3PuKdg918b9b019h1kK25E5ifpaQh2o7aAYnUrp1tl00/thumbnail.webp?time=5.5","aspectRatio":"31:18","duration":8.366667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-28T13:34:13.512Z","createdAt":"2026-09-28T13:33:11.556Z","updatedAt":"2026-09-28T13:34:13.512Z"},{"id":"01a0d92d-17e4-72e9-b0d8-4acfb83cab35","title":null,"body":"

Shipped my second @framer component.! Gooey Liquid Cursor is now on the marketplace. 🫟

I wanted a cursor that feels physical. Two shapes follow the pointer at different speeds and merge into one liquid mass when they get close.

Open the preview and move your mouse around.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Shipped my second @framer component.! Gooey Liquid Cursor is now on the marketplace. 🫟"}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted a cursor that feels physical. Two shapes follow the pointer at different speeds and merge into one liquid mass when they get close."}]},{"type":"paragraph","content":[{"type":"text","text":"Open the preview and move your mouse around."}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[],"resources":[{"id":"sy3alghdptj82kyVaonV","resolved":true,"title":"Gooey Liquid Cursor","body":"$52","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About Gooey Liquid Cursor","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Two shapes: one follows the pointer, one trails behind. When they get close, they merge into a single liquid mass. It stretches with speed, breathes when idle, and morphs from circle to drop on hover.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Two ways to use it","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Automatic — drop it on the page and it works: pointer tracking, hover and click response, system cursor hidden.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Framer Cursor — place it inside your own cursor component and drive it with variants.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Hover that works on your own layers","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Most cursor components only react to links and buttons. This one also targets layers by name: rename a frame to Project Card, type that name in the Layer Names field, and the whole card triggers the hover state, children included. Commas target several names, and a CSS selector option is there too.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Controls","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Cursor — Mode, Color, Shape (circle or drop), Rotation, Size","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hover — Targets, Layer Names, Scale, Color, Shape, Rotation","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Trail — Size, Delay, Max Distance Liquid — Fusion, Sharpness","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Motion — Follow Delay, Transition, Stretch, Breathing, Speed","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Other — Press Scale, Hide Pointer, Native Inputs, Blend, Layer Order","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Built for real sites","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Native SVG filter, not WebGL: same result in Safari, Chrome, Firefox and Edge, with no libraries and no custom code. Color is applied after the liquid mask, so transparency and blend modes keep the effect intact. Native Inputs returns the system pointer over form fields and media controls. One animation loop, only while the pointer is on the page. Hidden on touch, respects reduced motion.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Quick start","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Paste the component URL into your project, drop it on the page, keep the frame at 32 × 32 and set Position to Absolute inside Stacks. Open Preview and move the mouse.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Includes a full user guide.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support: ","marks":[{"type":"bold"}]},{"type":"text","text":"jpedrosporto.design@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:jpedrosporto.design@gmail.com","target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"Fluid gooey liquid cursor motion","slug":"gooey-liquid-cursor","author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/01a0d929-139a-75d1-b34c-bdc75460850d.png","metadata":{"tint":{"h":210,"s":29,"l":59},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T15:26:45.656Z","updatedAt":"2026-09-28T13:19:18.968Z","publishedAt":"2026-09-25T15:26:45.654Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gooeycursor.framer.website/","price":"6","paymentUrl":"https://joaoportodesign.gumroad.com/l/gooey-liquid-cursor","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"dnalXHssESYDSyN4nV2L","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":3,"edited":true,"editedAt":"2026-09-28T13:21:37.212Z","createdAt":"2026-09-25T15:26:46.244Z","updatedAt":"2026-09-28T13:21:37.212Z"},{"id":"01a0d1c4-06ff-724f-a670-e75a6d2bbb66","title":null,"body":"

built 3 different cursors for this site before this one. all of them worked. none of them felt like the brand.

this one did the second i saw it move. liquid, stretches when you move fast, morphs on hover. stopped there.

thinking about releasing it as a @framer component. would you use it?

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"built 3 different cursors for this site before this one. all of them worked. none of them felt like the brand. "}]},{"type":"paragraph","content":[{"type":"text","text":"this one did the second i saw it move. liquid, stretches when you move fast, morphs on hover. stopped there. "}]},{"type":"paragraph","content":[{"type":"text","text":"thinking about releasing it as a "},{"type":"text","text":"@framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/framer","target":"_blank"}}]},{"type":"text","text":" component. would you use it?"}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/eIJzntAQSF8VijRmqWg1wBNanyNCR02OCvaQXml4Qdck.m3u8","metadata":{"posterUrl":"https://image.mux.com/eIJzntAQSF8VijRmqWg1wBNanyNCR02OCvaQXml4Qdck/thumbnail.webp?time=5.933","aspectRatio":"46:27","duration":9.866667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-24T04:54:40.130Z","updatedAt":"2026-09-24T04:54:40.130Z"},{"id":"01a0c997-234d-717d-8ccb-62156c981557","title":null,"body":"

a few years ago I had a phone with a screen that kept falling out. for real.

this week I bought a macbook pro M5 24gb and a few other accessories I never thought I'd own.

thank God for this, and for every step that got me here as a professional. @framer, you played a big part in this one.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"a few years ago I had a phone with a screen that kept falling out. for real. "}]},{"type":"paragraph","content":[{"type":"text","text":"this week I bought a macbook pro M5 24gb and a few other accessories I never thought I'd own."}]},{"type":"paragraph","content":[{"type":"text","text":"thank God for this, and for every step that got me here as a professional. @framer, you played a big part in this one."}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/01a0c996-b89e-77de-85f2-9eb20f2bad8a.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2399}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-22T14:48:40.529Z","updatedAt":"2026-09-22T14:48:40.529Z"},{"id":"01a0c644-0ee8-738a-9c78-5dd35adb9e92","title":null,"body":"

the native cursor-follow image that I had in framer breaks the second your list comes from the CMS.

you can drop a component in as a custom cursor. you just can't tell it which image to show.

so i built one that can. the part i didn't see coming: once i owned the code, i could bend it to the brand. constraint made the component better.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"the native cursor-follow image that I had in framer breaks the second your list comes from the CMS. "}]},{"type":"paragraph","content":[{"type":"text","text":"you can drop a component in as a custom cursor. you just can't tell it which image to show. "}]},{"type":"paragraph","content":[{"type":"text","text":"so i built one that can. the part i didn't see coming: once i owned the code, i could bend it to the brand. constraint made the component better."}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/4iI005IuybJE4sd2mWVEDpuhCpg6STsozXWg8z0093g4M.m3u8","metadata":{"posterUrl":"https://image.mux.com/4iI005IuybJE4sd2mWVEDpuhCpg6STsozXWg8z0093g4M/thumbnail.webp?time=4.8","aspectRatio":"46:27","duration":10.3}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T23:19:04.171Z","updatedAt":"2026-09-21T23:19:04.171Z"},{"id":"019f8512-b53c-773d-a316-8b40e8b6cad3","title":null,"body":"

"we don't want photos of the team on the site." ok... so how do you show a team working together without showing the team?

built this with claude: three editors with cursors writing and deleting real code, live. draggable, parallax, custom for vertex.

this is where framer + ai is actually going.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"\"we don't want photos of the team on the site.\"","marks":[{"type":"bold"}]},{"type":"text","text":" ok... so how do you show a team working together without showing the team? "}]},{"type":"paragraph","content":[{"type":"text","text":"built this with claude: three editors with cursors writing and deleting real code, live. draggable, parallax, custom for vertex. "}]},{"type":"paragraph","content":[{"type":"text","text":"this is where framer + ai is actually going."}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/CL00WAzuIt3Kv6wPDw5xGLn3rjfTV8EK53FewiahVeMQ.m3u8","metadata":{"posterUrl":"https://image.mux.com/CL00WAzuIt3Kv6wPDw5xGLn3rjfTV8EK53FewiahVeMQ/thumbnail.webp?time=6.133","aspectRatio":"47:27","duration":19.583333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-07-21T14:27:20.329Z","createdAt":"2026-07-21T14:27:03.618Z","updatedAt":"2026-07-21T14:27:20.329Z"},{"id":"019f801e-b4bf-7201-92d4-daf05b51ed0c","title":null,"body":"

turned a paragraph nobody reads into a section nobody scrolls past.

vertex services, before and after

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"turned a paragraph nobody reads into a section nobody scrolls past. "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"vertex services, before and after"}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/019f801e-a8e6-75f5-9222-c51955462498.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1080,"height":1350}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-20T15:22:03.843Z","updatedAt":"2026-07-20T15:22:03.843Z"},{"id":"019f6c77-5ac2-7179-89d5-dc000052e17d","title":null,"body":"

the trick to making a b2b tech site actually feel technical

service icons rebuilt as live drifting code, custom per service, in Framer

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"the trick to making a b2b tech site actually feel technical "}]},{"type":"paragraph","content":[{"type":"text","text":"service icons rebuilt as live drifting code, custom per service, in Framer"}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/LV6nUz8o2ekdurKM41t0142oAH5dLxq5JbIRd5npw654.m3u8","metadata":{"posterUrl":"https://image.mux.com/LV6nUz8o2ekdurKM41t0142oAH5dLxq5JbIRd5npw654/thumbnail.webp?time=4.5","aspectRatio":"47:27","duration":6.95}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-16T19:46:29.191Z","updatedAt":"2026-07-16T19:46:29.191Z"},{"id":"019f6825-8a24-738c-9b5c-0651fb7358bb","title":null,"body":"

i was ready to scrap this whole template.

weeks of rewrites, classic perfectionist trap, nothing felt done.

but this section made me stick with it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"i was ready to scrap this whole template. "}]},{"type":"paragraph","content":[{"type":"text","text":"weeks of rewrites, classic perfectionist trap, nothing felt done. "}]},{"type":"paragraph","content":[{"type":"text","text":"but this section made me stick with it."}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/V47OlTwtTKI023y6GdYIltbx8X8wjrFV6gT5xZG13L5k.m3u8","metadata":{"posterUrl":"https://image.mux.com/V47OlTwtTKI023y6GdYIltbx8X8wjrFV6gT5xZG13L5k/thumbnail.webp?time=1.383","aspectRatio":"469:270","duration":11.083333}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-15T23:38:38.504Z","updatedAt":"2026-07-15T23:38:38.504Z"},{"id":"019f380d-3412-751d-9e69-e797290edbe3","title":null,"body":"

Just published my first component: Liquid Wave Divider 🌊

An animated wave divider that reacts to scroll — the faster you scroll, the more the liquid stirs. Drop it between sections for a section transition that actually feels alive.

Fully customizable: colors, layers, frequency, amplitude, speed, scroll boost, smoothness, direction. Animate on/off.

Would love feedback from the community 🙏

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just published my first component: "},{"type":"text","text":"Liquid Wave Divider","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}}]},{"type":"paragraph","content":[{"type":"text","text":"An animated wave divider that reacts to scroll — the faster you scroll, the more the liquid stirs. Drop it between sections for a section transition that actually feels alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable: colors, layers, frequency, amplitude, speed, scroll boost, smoothness, direction. Animate on/off."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love feedback from the community "},{"type":"emoji","attrs":{"name":"pray","emoji":"🙏"}}]}]},"author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[],"resources":[{"id":"r62YsjXKpsYYVjXmof8q","resolved":true,"title":"Liquid Wave Divider","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Liquid Divider replaces hard edges between sections with a living, layered wave — rendered on canvas, animated in real time, and reactive to scroll: scrolling agitates the surface like real liquid, with ripples that travel in the direction you scroll."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 5 depth layers with organic, non-repeating motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll agitation: waves churn and ripple as the user scrolls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"4 directions (up, down, left, right) — works as a horizontal or vertical divider"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full transparency support: fade either color to 0 and the liquid effect stays intact"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Waves never clip outside the component bounds, at any amplitude"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"10 property controls, zero code required"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Performance","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Lightweight 2D canvas (no WebGL, no libraries). Pauses automatically when off-screen, renders a static frame in the editor, and respects prefers-reduced-motion."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag onto your canvas and set Position to Absolute"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pin it to the section edges: set Left and Right to 0 so the divider stretches edge to edge (setting Width to 100% or Fill also works)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Height to your transition size (e.g. 160px) and place it overlapping the edge between two sections. Tip: use the top/bottom pin toggle to anchor the divider to the right edge — this is the most reliable method, especially when using transparency. Any placement that sits the component over the section boundary will work."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Match Color 1 and Color 2 to your section backgrounds — or use transparency"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Built with procedural canvas animation and real-time scroll physics — motion that goes beyond what preset effects can do."}]}]},"introduction":"Animated wave that react to scroll","slug":"liquid-wave-divider","author":{"framerUserId":"5fd0509e-1497-49c2-9b9c-c184468f3d8d","name":"João Porto","slug":"joaoportodesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/e0hsnalz","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5fd0509e-1497-49c2-9b9c-c184468f3d8d/r52b4e28","metadata":{"tint":{"h":0,"s":0,"l":36},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-07-06T15:30:17.180Z","updatedAt":"2026-07-06T15:30:17.180Z","publishedAt":"2026-07-06T15:30:17.173Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://liquiddivider.framer.website/","price":"6","paymentUrl":"https://joaoportodesign.gumroad.com/l/liquid-divider","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"2gDdrGXNzU3Uw8CA50Pr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":51,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-06T15:30:17.234Z","updatedAt":"2026-07-06T15:30:17.234Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]