51: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"] 52:T455,Here is a breakdown for our main effect on our newest template - Strand We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable. We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it. The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader. Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime. Copy the points over to our main effect and done!53:T455,Here is a breakdown for our main effect on our newest template - Strand We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable. We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it. The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader. Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime. Copy the points over to our main effect and done!54:T455,Here is a breakdown for our main effect on our newest template - Strand We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable. We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it. The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader. Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime. Copy the points over to our main effect and done!55:T455,Here is a breakdown for our main effect on our newest template - Strand We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable. We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it. The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader. Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime. Copy the points over to our main effect and done!56:T455,Here is a breakdown for our main effect on our newest template - Strand We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable. We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it. The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader. Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime. Copy the points over to our main effect and done!57:T455,Here is a breakdown for our main effect on our newest template - Strand We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable. We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it. The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader. Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime. Copy the points over to our main effect and done!58:Tb66,

About this Component

A modern floating navigation bar built for Framer — clean, responsive, and designed to blend seamlessly into any project. Featuring dual light and dark palettes, smooth interactions, and a polished floating layout, this component delivers a premium navigation experience right out of the box.

Crafted with flexibility in mind, every part of the navigation is easily customizable, from colors and spacing to icons and links. Lightweight, snappy, and optimized across devices, it’s ideal for landing pages, portfolios, SaaS products, and modern web experiences.

Features

Dual PalettesBuilt-in light and dark styles for effortless integration into any design system.

Modern Floating DesignMinimal floating navigation with soft spacing, clean layering, and a refined visual feel.

Responsive by DefaultOptimized for desktop, tablet, and mobile layouts with smooth adaptability across screen sizes.

Smooth InteractionsSubtle hover animations and polished transitions create a responsive, premium experience.

Fully CustomizableEasily adjust colors, icons, spacing, typography, blur, borders, and navigation links directly in Framer.

Lightweight & SnappyDesigned to feel fast and fluid without unnecessary complexity.

Customization

The component is fully customizable through Framer properties:

Light & dark palette switching
Navigation links and labels
Icons and active states
Background blur, borders, and corner radius
Padding, spacing, and layout sizing
Hover and interaction styles
Mobile responsiveness settings

Perfect For

SaaS websites
Personal portfolios
Startup landing pages
Creative agencies
Product showcases
Modern web apps

Includes

Floating navigation component
Dual palette support (light & dark)
Responsive layouts
Smooth built-in animations
Easy-to-edit properties and styles

Tip

Use the remix link instead of copying the component directly. This preserves all built-in interactions, responsive behavior, and pre-configured styles — making customization much easier inside Framer.

You’ll also be able to quickly edit global colors, navigation items, spacing, and palettes without digging through nested layers.

For support, DM me at @aliceinnny.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-f4c785ba-38c2-4383-ab10-e32d676b4c7e-all:/unified/creator/f4c785ba-38c2-4383-ab10-e32d676b4c7e/activity/":[{"data":[{"id":"01a09d7d-551b-71e2-90b7-18ed725c44a9","type":"comment.liked","target":{"type":"comment","id":"01a011af-5885-768a-8947-a6f6c4f4cb1d","preview":"@ETHAN CARTER \nUnfortunately we can't really answer any of those questions this early on. Putting effort and polishing your work will pay off in different ways. We believe good work stands on its own, someone will notice. If anything you will have an excellent live portfolio piece that you can show potential clients in the future.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"mention","attrs":{"id":"319fb817-3ad9-4dd6-b034-0f407f52c545","slug":"ethanf16","label":"ETHAN CARTER","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Unfortunately we can't really answer any of those questions this early on. Putting effort and polishing your work will pay off in different ways. We believe good work stands on its own, someone will notice. If anything you will have an excellent live portfolio piece that you can show potential clients in the future."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":2,"liked":false},"reply":{"parentCommentId":"01a00f29-bf54-768a-a628-5c0054518874"},"repost":null}},"context":{"type":"post","id":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","preview":"$52","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a breakdown for our main effect on our newest template - "},{"type":"text","text":"Strand","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/tFzLAFX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader."}]},{"type":"paragraph","content":[{"type":"text","text":"Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good "},{"type":"text","text":"input","marks":[{"type":"bold"}]},{"type":"text","text":"? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy the points over to our main effect and done!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/938b42d5-4518-4924-be18-128f9df69bc3/019fe8c1-8f99-733c-bec4-067ee99fccd5.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T01:17:11.829Z","latestAt":"2026-09-14T01:17:11.829Z"},{"id":"01a09d70-ce9e-75ae-b706-f9cde24c1d6e","type":"post.reply","target":{"type":"post","id":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","preview":"$53","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a breakdown for our main effect on our newest template - "},{"type":"text","text":"Strand","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/tFzLAFX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader."}]},{"type":"paragraph","content":[{"type":"text","text":"Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good "},{"type":"text","text":"input","marks":[{"type":"bold"}]},{"type":"text","text":"? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy the points over to our main effect and done!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/938b42d5-4518-4924-be18-128f9df69bc3/019fe8c1-8f99-733c-bec4-067ee99fccd5.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a09d70-ce81-7489-8435-3d10ba8eafa1","preview":"yes. investing on what you do will always be worth it, if you love what you do, that is.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"yes. investing on what you do will always be worth it, if you love what you do, that is."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a00f29-bf54-768a-a628-5c0054518874"},"repost":null}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T01:03:30.974Z","latestAt":"2026-09-14T01:03:30.974Z"},{"id":"01a09d70-ce96-7596-b609-6022790f0a6f","type":"comment.reply","target":{"type":"post","id":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","preview":"$54","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a breakdown for our main effect on our newest template - "},{"type":"text","text":"Strand","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/tFzLAFX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader."}]},{"type":"paragraph","content":[{"type":"text","text":"Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good "},{"type":"text","text":"input","marks":[{"type":"bold"}]},{"type":"text","text":"? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy the points over to our main effect and done!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/938b42d5-4518-4924-be18-128f9df69bc3/019fe8c1-8f99-733c-bec4-067ee99fccd5.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a09d70-ce81-7489-8435-3d10ba8eafa1","preview":"yes. investing on what you do will always be worth it, if you love what you do, that is.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"yes. investing on what you do will always be worth it, if you love what you do, that is."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a00f29-bf54-768a-a628-5c0054518874"},"repost":null}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T01:03:30.966Z","latestAt":"2026-09-14T01:03:30.966Z"},{"id":"01a09d70-8002-7315-a56c-7c9152166372","type":"comment.liked","target":{"type":"comment","id":"01a00f3b-57e3-723d-8996-8d23a64e8641","preview":"Hey Ethan, we're happy you like our work! It's our first paid template on Framer 3.0 so it was a bit of a gamble for us as well. We believe that it's worth it so far, keep in mind sales don't make up the full picture. Potential clients can see the effort you put in your work, and won't hesitate to reach out for projects.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey Ethan, we're happy you like our work! It's our first paid template on Framer 3.0 so it was a bit of a gamble for us as well. We believe that it's worth it so far, keep in mind sales don't make up the full picture. Potential clients can see the effort you put in your work, and won't hesitate to reach out for projects. "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":3,"liked":false},"reply":{"parentCommentId":"01a00f29-bf54-768a-a628-5c0054518874"},"repost":null}},"context":{"type":"post","id":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","preview":"$55","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a breakdown for our main effect on our newest template - "},{"type":"text","text":"Strand","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/tFzLAFX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader."}]},{"type":"paragraph","content":[{"type":"text","text":"Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good "},{"type":"text","text":"input","marks":[{"type":"bold"}]},{"type":"text","text":"? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy the points over to our main effect and done!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/938b42d5-4518-4924-be18-128f9df69bc3/019fe8c1-8f99-733c-bec4-067ee99fccd5.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T01:03:10.847Z","latestAt":"2026-09-14T01:03:10.847Z"},{"id":"01a09d70-6583-774e-ae4c-3da5ac65f9ab","type":"comment.created","target":{"type":"post","id":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","preview":"$56","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a breakdown for our main effect on our newest template - "},{"type":"text","text":"Strand","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/tFzLAFX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader."}]},{"type":"paragraph","content":[{"type":"text","text":"Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good "},{"type":"text","text":"input","marks":[{"type":"bold"}]},{"type":"text","text":"? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy the points over to our main effect and done!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/938b42d5-4518-4924-be18-128f9df69bc3/019fe8c1-8f99-733c-bec4-067ee99fccd5.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a09d70-6561-71b5-800d-c50244288533","preview":"so fucking refreshing to see someone put sooo much effort and precision and intention on their craft at these times. amazing job, thank you for sharing!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"so fucking refreshing to see someone put sooo much effort and precision and intention on their craft at these times. amazing job, thank you for sharing!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a09d70-6561-71b5-800d-c50244288533"},"repost":null}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T01:03:04.067Z","latestAt":"2026-09-14T01:03:04.067Z"},{"id":"01a09d6f-c455-706a-8f60-fcfc49275940","type":"post.liked","target":{"type":"post","id":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","preview":"$57","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a breakdown for our main effect on our newest template - "},{"type":"text","text":"Strand","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/tFzLAFX","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable."}]},{"type":"paragraph","content":[{"type":"text","text":"We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it."}]},{"type":"paragraph","content":[{"type":"text","text":"The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader."}]},{"type":"paragraph","content":[{"type":"text","text":"Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good "},{"type":"text","text":"input","marks":[{"type":"bold"}]},{"type":"text","text":"? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy the points over to our main effect and done!"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/938b42d5-4518-4924-be18-128f9df69bc3/019fe8c1-8f99-733c-bec4-067ee99fccd5.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fe8c2-8b22-706b-a7f0-503c738b2cdd","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T01:02:22.800Z","latestAt":"2026-09-14T01:02:22.800Z"},{"id":"01a09d6a-ff27-7540-a8a7-483f244b107d","type":"creator.followed","target":{"type":"creator","id":"938b42d5-4518-4924-be18-128f9df69bc3","preview":"Kreativnik","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1211512/avatar-VO9m4gaeQiBP7V250qzpIfsWFUMlyE.jpg","slug":"kreativnik","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-14T00:57:10.179Z","latestAt":"2026-09-14T00:57:10.179Z"},{"id":"01a092de-e4d3-76d9-ad1c-4ce19dace56e","type":"post.reply","target":{"type":"post","id":"01a02f32-04a2-70d0-ab38-b7f7b5d04d4d","preview":"Hey guys, I have recently become a framer affiliate\nBut I am not able to figure out where all to add affiliate links to, can you help me with some of the places where I should add affiliate links?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey guys, I have recently become a framer affiliate"}]},{"type":"paragraph","content":[{"type":"text","text":"But I am not able to figure out where all to add affiliate links to, can you help me with some of the places where I should add affiliate links?"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a02f32-04a2-70d0-ab38-b7f7b5d04d4d","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a092de-e4ac-715b-b40f-1776c71f5f09","preview":"hey @Hani ! where did you see this info? i'm trying to figure out how to make sure that the links i share are tracked back to me in case they upgrade, thanks!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hey "},{"type":"mention","attrs":{"id":"8b5b6411-55a5-4287-9ff6-6879c6a5dd3f","slug":"hani","label":"Hani","mentionSuggestionChar":"@"}},{"type":"text","text":" ! where did you see this info? i'm trying to figure out how to make sure that the links i share are tracked back to me in case they upgrade, thanks!"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a02f32-04a2-70d0-ab38-b7f7b5d04d4d","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a02f3e-2f7b-77a9-9efe-e5b99266df29"},"repost":null}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-11T23:47:56.243Z","latestAt":"2026-09-11T23:47:56.243Z"},{"id":"01a092de-e4c9-74db-96d4-cbe5d04bfa86","type":"comment.reply","target":{"type":"post","id":"01a02f32-04a2-70d0-ab38-b7f7b5d04d4d","preview":"Hey guys, I have recently become a framer affiliate\nBut I am not able to figure out where all to add affiliate links to, can you help me with some of the places where I should add affiliate links?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hey guys, I have recently become a framer affiliate"}]},{"type":"paragraph","content":[{"type":"text","text":"But I am not able to figure out where all to add affiliate links to, can you help me with some of the places where I should add affiliate links?"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a02f32-04a2-70d0-ab38-b7f7b5d04d4d","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a092de-e4ac-715b-b40f-1776c71f5f09","preview":"hey @Hani ! where did you see this info? i'm trying to figure out how to make sure that the links i share are tracked back to me in case they upgrade, thanks!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hey "},{"type":"mention","attrs":{"id":"8b5b6411-55a5-4287-9ff6-6879c6a5dd3f","slug":"hani","label":"Hani","mentionSuggestionChar":"@"}},{"type":"text","text":" ! where did you see this info? i'm trying to figure out how to make sure that the links i share are tracked back to me in case they upgrade, thanks!"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a02f32-04a2-70d0-ab38-b7f7b5d04d4d","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a02f3e-2f7b-77a9-9efe-e5b99266df29"},"repost":null}},"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-11T23:47:56.233Z","latestAt":"2026-09-11T23:47:56.233Z"},{"id":"019f95a3-1c65-73bf-a985-bf4a763a6b53","type":"component.liked","target":{"type":"component","id":"IU6iYtonpABGO5kFF8ih","preview":"Paper Background","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/IU6iYtonpABGO5kFF8ih/paper-background-VHeGtBIjs2JRE1LMiv80hCfk5evCUw","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-24T19:38:42.655Z","latestAt":"2026-07-24T19:38:42.655Z"},{"id":"019f95a1-db97-7309-8bf8-25496d1a45c6","type":"component.liked","target":{"type":"component","id":"eenbwfd8ZUym9OnmqLGP","preview":"Stamp Scrapbook","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/633d8efd-512f-4afc-808d-66a180c25d90/019f8ea1-adbf-766b-abbb-411897cf29b6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-24T19:37:20.531Z","latestAt":"2026-07-24T19:37:20.531Z"},{"id":"019f95a0-f04a-77fb-93ce-bb7cdad0e0fc","type":"template.liked","target":{"type":"template","id":"58323","preview":"Love Moments","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/58323/love-moments-bvfnFTwzFk6Cj5AZj9rtO32t5BS81w","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-07-24T19:36:20.292Z","latestAt":"2026-07-24T19:36:20.292Z"},{"id":"019edd0e-907b-7036-931e-cc34f4176422","type":"post.liked","target":{"type":"post","id":"019ed401-ebf5-761e-a61c-510f03c9dcb5","preview":"Booted up a whole arcade inside a green-phosphor CRT 🕹 Scanlines, glitch, glow. Play Snake, Flappy & a tense Crash game with bot players. All built with Framer Agents.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Booted up a whole arcade inside a green-phosphor CRT "},{"type":"emoji","attrs":{"name":"joystick","emoji":"🕹"}},{"type":"text","text":" Scanlines, glitch, glow. Play Snake, Flappy & a tense Crash game with bot players. All built with Framer Agents."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed401-ebf5-761e-a61c-510f03c9dcb5","like":{"count":64,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:26:19.766Z","latestAt":"2026-06-18T23:26:19.766Z"},{"id":"019edd0e-119e-71fa-babb-4a296e14e5e8","type":"creator.followed","target":{"type":"creator","id":"2be00f77-058f-4dbd-8802-cf71c9965628","preview":"Makora Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2be00f77-058f-4dbd-8802-cf71c9965628/hkcn7zip","slug":"thekartikbansal","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:47.290Z","latestAt":"2026-06-18T23:25:47.290Z"},{"id":"019edd0d-f8df-7338-a9f3-47a5fdb792aa","type":"creator.followed","target":{"type":"creator","id":"b200b664-ca64-4bc3-93f1-403457d933dd","preview":"Dario Grigoletti","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/157756/avatar-Z6JpOzjtXXDc2o9DWh8zEM4aOEtqAs.jpg","slug":"grigoletti","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:40.955Z","latestAt":"2026-06-18T23:25:40.955Z"},{"id":"019edd0d-f1d3-70cc-87bd-3dd4a1cdf555","type":"creator.followed","target":{"type":"creator","id":"9c14edca-e23c-482b-a655-c6afdb6ef917","preview":"Sparkling studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1252743/avatar-bsQbCMYtejiEqqfIlDeMbVgxdcGf2a.jpg","slug":"sparkling-studio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:39.151Z","latestAt":"2026-06-18T23:25:39.151Z"},{"id":"019edd0d-edd6-725d-9b50-95f22ba181e3","type":"creator.followed","target":{"type":"creator","id":"e57aca30-955f-448e-a756-0720288b0755","preview":"Collins Abrusu","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/871081/avatar-nuZaS4LzB7Jpuff4nbNklyxBVXYcYc.jpg","slug":"collins-abrusu","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:38.130Z","latestAt":"2026-06-18T23:25:38.130Z"},{"id":"019edd0d-e548-7669-91cb-23ad3dcc0bf8","type":"creator.followed","target":{"type":"creator","id":"eff58e40-71eb-450e-b0c5-9a9dd83ebf8b","preview":"Kyne J.","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/444767/avatar-zcT6lOT6JHpfegSa0Bz3aYdOCPGMOy.jpg","slug":"kyne-design","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:35.935Z","latestAt":"2026-06-18T23:25:35.935Z"},{"id":"019edd0d-c9f9-75a8-a0c1-3f93804171b1","type":"creator.followed","target":{"type":"creator","id":"b8b6483c-7b10-401c-8739-c9ee412960ea","preview":"Aio Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b8b6483c-7b10-401c-8739-c9ee412960ea/y34kwryz","slug":"aio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:28.949Z","latestAt":"2026-06-18T23:25:28.949Z"},{"id":"019edd0d-c803-75bd-b458-dbfe87d2656e","type":"creator.followed","target":{"type":"creator","id":"6b661f6f-65ba-40fa-bb6a-619d72ab1bd4","preview":"VLADIMIR KOTENEV","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/6b661f6f-65ba-40fa-bb6a-619d72ab1bd4/7rgavo7j","slug":"vonexdesign","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","slug":"lunedesign","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T23:25:28.447Z","latestAt":"2026-06-18T23:25:28.447Z"}],"pagination":{"next":"MjAyNi0wNi0xOFQyMzoyNToyOC40NDdafDAxOWVkZDBkLWM4MDMtNzViZC1iNDU4LWRiZmU4N2QyNjU2ZQ","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:f4c785ba-38c2-4383-ab10-e32d676b4c7e:/unified/posts/?creator=f4c785ba-38c2-4383-ab10-e32d676b4c7e&with=reposts":[{"data":[{"id":"019eda3a-2061-7b31-b522-5afd59ff0785","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","slug":"lunedesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dTct9dSfv1d3NRfKIDnn","resolved":true,"title":"Float Bar","body":"$58","bodyJson":null,"introduction":"Dynamic and clean floating nav bar","slug":"float-bar","author":{"framerUserId":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","slug":"lunedesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dTct9dSfv1d3NRfKIDnn/float-bar-gnX8A9M7OyY45pFN8hKpRa90IFA8GR","metadata":{"tint":{"h":210,"s":13,"l":24},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-27T05:38:24.154Z","updatedAt":"2026-06-07T19:50:03.127Z","publishedAt":"2026-06-18T10:15:03.009Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Floating-Navigation-8mcO7f.js@HSyy8mfD1TaUgYngZKD1","previewUrl":"https://floatingnavigation.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"HSyy8mfD1TaUgYngZKD1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T10:15:03.009Z","updatedAt":"2026-06-18T10:15:03.009Z"},{"id":"019ed6a1-c024-716f-9b41-bcb238c05cd5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","slug":"lunedesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed6a1-c024-716f-9b41-c3dc6ac55156","contestId":"agents-hackathon","author":{"framerUserId":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","slug":"lunedesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7"},"title":"Lune Design Bento","body":"

A visually striking bento layout combining immersive 3D elements with AI-generated imagery. Designed in Framer, this concept blends depth, motion, and intelligent creativity to create a modern, interactive experience that feels both futuristic and refined.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A visually striking bento layout combining immersive 3D elements with AI-generated imagery. Designed in Framer, this concept blends depth, motion, and intelligent creativity to create a modern, interactive experience that feels both futuristic and refined."}]}]},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/c33tevpn","metadata":{"tint":{"h":0,"s":0,"l":58},"width":994,"height":688}}],"post":null,"data":{"previewUrl":"https://lunedesignbento.framer.website"},"winner":false,"createdAt":"2026-06-17T17:29:45.316Z","updatedAt":"2026-06-17T17:29:45.316Z"}],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T17:29:45.272Z","updatedAt":"2026-06-17T17:29:45.272Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L59"}]