5f:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 60:T63b,

I built a scroll-driven narrative engine called Kinetic Scenes.

Preview: https://kineticparticlescenes.framer.website

It's six interactive particle components woven into one continuous story — as you scroll, each scene fades smoothly into the next. Flow field → living network → spherical arcs → spatial wireframe → microbial growth → schooling fish. Six completely different visual systems, but they share the same restrained visual language, so the transitions feel like one continuous piece rather than six demos stitched together.

A few things I'm proud of:

Every scene is written from scratch on raw <canvas> — no WebGL, no animation libraries. Just hand-written rendering loops.

Offscreen scenes pause entirely via IntersectionObserver. Running six animation loops at once would be brutal — this way it costs about the same as running one.

There's a text wheel at the top that lets visitors click any scene name to jump straight to it. Small detail, but it makes the whole thing feel more like a product than a demo.

Every component exposes 12–20 properties, so you can tune count, speed, color, gradient, size, and more without touching code. Each one also works standalone as an ambient background for individual sections.

This was the most ambitious thing I've built in Framer. Curious what you think.

(Flow Field Particles from the set is free if you want to try one first.)

61:T9c5,

Kinetic Scenes

A scroll-driven narrative engine — six generative art scenes woven into one continuous story. As visitors scroll, each scene fades smoothly into the next, sharing the same restrained visual language.

It's not just a background. It's a framework for telling a story with motion.

How it works

Six scenes stack in a fixed, full-viewport container behind your content. Scroll progress maps to scene visibility — each fades in and out within its own range. A text wheel navigation lets visitors click any scene name to jump to it.

Every scene is a standalone Framer code component built on raw <canvas> — no WebGL, no libraries. Offscreen scenes pause via IntersectionObserver, so six scenes cost about the same as one.

What's included

Six interactive components:

- Flow Field Particles — Particles flowing along elliptical orbits, repelled by your cursor. Auto-morph and gradient colors supported.

- Living Network — Drifting nodes connected by proximity lines that stretch around your cursor.

- Spherical Arcs — 3D curves wrapping a sphere. Hovering triggers a light spreading from the contact point.

- Spatial Wireframe — 3D mesh with draggable vertices. Reshape the structure in real time.

- Microbial Growth — A branching tree that grows and retracts with scroll.

- Schooling Fish — Boids flocking simulation with cursor avoidance.

Plus:

- Text Wheel Selector — Infinite scroll navigation with click-to-jump.

- Full scroll story template — Complete page structure and scroll mapping, ready to remix.

Key Features

- Scroll-driven transitions — scenes fade with page progress

- Fully customizable — 12–20 exposed properties per scene

- Cursor interaction — repulsion, drag, and hover activation

- Gradient colors — single or dual-color across all scenes

- Performance-first — viewport-aware pausing

- Pure Canvas — no WebGL, no libraries

Best for

Brand landing pages, product launches, portfolio sites, and agency homepages. Each component also works standalone.

62:T441,

I just released Flow Field Particles, a generative background with thousands of particles flowing along elliptical orbital paths.

What makes it different: every particle has its own lane, speed, and size, so the field never repeats. Move your cursor and particles are pushed away in real time — creating a tactile, immersive feel that's hard to get from a static animation.

It's built for:

- Hero sections that need motion without distraction

- Ambient backgrounds for tech and SaaS landing pages

- Loading screens that actually feel alive

17 exposed properties let you control count, size, length, tilt, density, speed, and more. Auto-morph mode is also included for optional shape-shifting over time.

Try the live preview here: https://kineticparticlescenes.framer.website/preview-flow-field-particles

Curious where you'd use this — hero section? product page? Let me know in the replies.

63:T4c8,

I just made Flow Field Particles free.

Preview: https://kineticparticlescenes.framer.website/preview-flow-field-particles

It's one of six interactive particle components I built from scratch on raw <canvas> — thousands of particles flowing along elliptical orbital paths, repelled by your cursor in real time. No WebGL, no libraries, just a hand-written rendering loop.

I originally had it priced, but I'd rather more people try it and see what's possible with pure Canvas in Framer. If you've been curious about adding subtle motion to a hero section, this is a good place to start.

The component exposes 17 properties — particle count, size, length, tilt, density, speed, gradient colors, and an optional auto-morph mode. Drop it on any page and it just works.

I also built a full scroll-driven narrative engine called Kinetic Scenes — six of these components woven into one story, plus a text-wheel navigation. That one's on the Marketplace if you want the whole package.

Curious what you'll use it for.

64:T7be,

Flow Field Particles

Flow Field Particles brings thousands of generative particles to your canvas, each one flowing along its own elliptical orbital path. Move your cursor and the field responds instantly — particles are pushed away in real time, creating a tactile, immersive backdrop that feels alive.

How it works

Every particle is assigned its own lane, speed, size, and length at render time. A shared time accumulator drives all particles forward at a consistent rate, so cursor movement only displaces them — it never changes the underlying flow. When the cursor leaves, particles smoothly drift back into their natural orbits.

Key Features

- Cursor repulsion — particles are pushed away from your pointer with distance-based falloff

- Auto-morph mode — optional animated shape-shifting over time

- Gradient color support — single color or dual-color gradient across the canvas

- 17 exposed properties — count, size, length, tilt, density, speed, and more

- Responsive canvas — automatically resizes to fit any container

- Hardware accelerated — rendered on a native <canvas> element with requestAnimationFrame

Properties

- Particle count multiplier — 0.25× to 6×

- Particle size range — min / median / max in px

- Particle length range — for streaked particles

- Density contrast — from uniform to clustered

- Orbit width & height — elliptical shape control

- Tilt angle — rotation of the entire field

- Curve / bend amount — organic waviness

- Speed, auto-morph period and amount

- Color mode — single or gradient

Best for

Hero sections, ambient backgrounds, loading screens, and any place that needs subtle motion without distraction.

5e:["$","$L5f",null,{"value":{"fallback":{"$inf$activity-creator-08435883-2384-4aba-9ac1-db319f1c8b24-all:/unified/creator/08435883-2384-4aba-9ac1-db319f1c8b24/activity/":[{"data":[{"id":"01a0b5cb-eea3-70ea-b72f-048a1e561f83","type":"creator.followed","target":{"type":"creator","id":"1cc58a0e-e5a9-4e2a-ae11-a072ed39e4d5","preview":"Akın Gündoğan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/83577/avatar-6Ht6UcxZt6WmjCeqRcGEx5jbiiSE3Z.jpg","slug":"akn-gundogan","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"08435883-2384-4aba-9ac1-db319f1c8b24","name":"Yuliana You","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/bns2lrru","slug":"yuliana-you","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-18T18:33:56.120Z","latestAt":"2026-09-18T18:33:56.120Z"},{"id":"01a0b505-c926-71ab-8f54-f75760163383","type":"comment.reply","target":{"type":"post","id":"01a0b383-47ca-764c-abc7-bf5f9a98e456","preview":"I just released Flow Field Particles, a generative background with thousands of particles flowing along elliptical orbital paths.\nWhat makes it different: every particle has its own lane, speed, and size, so the field never repeats. Move your cursor and particles are pushed away in real time — creating a tactile, immersive feel that's hard to get from a static animation.\nIt's built for:\n- Hero sections that need motion without distraction\n- Ambient backgrounds for tech and SaaS landing pages\n- Loading screens that actually feel alive\n17 exposed properties let you control count, size, length, tilt, density, speed, and more. Auto-morph mode is also included for optional shape-shifting over time.\nTry the live preview here: https://kineticparticlescenes.framer.website/preview-flow-field-particles\nCurious where you'd use this — hero section? product page? Let me know in the replies.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released Flow Field Particles, a generative background with thousands of particles flowing along elliptical orbital paths."}]},{"type":"paragraph","content":[{"type":"text","text":"What makes it different: every particle has its own lane, speed, and size, so the field never repeats. Move your cursor and particles are pushed away in real time — creating a tactile, immersive feel that's hard to get from a static animation."}]},{"type":"paragraph","content":[{"type":"text","text":"It's built for:"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hero sections that need motion without distraction"}]},{"type":"paragraph","content":[{"type":"text","text":"- Ambient backgrounds for tech and SaaS landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Loading screens that actually feel alive"}]},{"type":"paragraph","content":[{"type":"text","text":"17 exposed properties let you control count, size, length, tilt, density, speed, and more. Auto-morph mode is also included for optional shape-shifting over time."}]},{"type":"paragraph","content":[{"type":"text","text":"Try the live preview here: "},{"type":"text","text":"https://kineticparticlescenes.framer.website/preview-flow-field-particles","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.com/m/Flow-Field-cncxsp.js@j029dYSno0yekqOeLsCB","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Curious where you'd use this — hero section? product page? Let me know in the replies."}]}]},"thumbnail":"https://image.mux.com/ixUr7hD012C00EDAPElImqaG02qkldqrfpouowJKBanEWY/thumbnail.webp?time=5.896","targetDeleted":false,"owned":true,"actions":{"postId":"01a0b383-47ca-764c-abc7-bf5f9a98e456","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0b505-c90d-75ca-8fed-c29f158a1d3b","preview":"I have set up an automatic random transformation here, so sometimes it will appear like this.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I have set up an automatic random transformation here, so sometimes it will appear like this."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0b383-47ca-764c-abc7-bf5f9a98e456","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0b4a9-ae01-73af-81a6-67e41671ca94"},"repost":null}},"actors":[{"id":"08435883-2384-4aba-9ac1-db319f1c8b24","name":"Yuliana You","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/bns2lrru","slug":"yuliana-you","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-18T14:57:30.406Z","latestAt":"2026-09-18T14:57:30.406Z"},{"id":"01a0b504-e97e-75ac-addb-e7c8eea8a547","type":"comment.reply","target":{"type":"post","id":"01a0b383-47ca-764c-abc7-bf5f9a98e456","preview":"I just released Flow Field Particles, a generative background with thousands of particles flowing along elliptical orbital paths.\nWhat makes it different: every particle has its own lane, speed, and size, so the field never repeats. Move your cursor and particles are pushed away in real time — creating a tactile, immersive feel that's hard to get from a static animation.\nIt's built for:\n- Hero sections that need motion without distraction\n- Ambient backgrounds for tech and SaaS landing pages\n- Loading screens that actually feel alive\n17 exposed properties let you control count, size, length, tilt, density, speed, and more. Auto-morph mode is also included for optional shape-shifting over time.\nTry the live preview here: https://kineticparticlescenes.framer.website/preview-flow-field-particles\nCurious where you'd use this — hero section? product page? Let me know in the replies.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I just released Flow Field Particles, a generative background with thousands of particles flowing along elliptical orbital paths."}]},{"type":"paragraph","content":[{"type":"text","text":"What makes it different: every particle has its own lane, speed, and size, so the field never repeats. Move your cursor and particles are pushed away in real time — creating a tactile, immersive feel that's hard to get from a static animation."}]},{"type":"paragraph","content":[{"type":"text","text":"It's built for:"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hero sections that need motion without distraction"}]},{"type":"paragraph","content":[{"type":"text","text":"- Ambient backgrounds for tech and SaaS landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Loading screens that actually feel alive"}]},{"type":"paragraph","content":[{"type":"text","text":"17 exposed properties let you control count, size, length, tilt, density, speed, and more. Auto-morph mode is also included for optional shape-shifting over time."}]},{"type":"paragraph","content":[{"type":"text","text":"Try the live preview here: "},{"type":"text","text":"https://kineticparticlescenes.framer.website/preview-flow-field-particles","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.com/m/Flow-Field-cncxsp.js@j029dYSno0yekqOeLsCB","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Curious where you'd use this — hero section? product page? Let me know in the replies."}]}]},"thumbnail":"https://image.mux.com/ixUr7hD012C00EDAPElImqaG02qkldqrfpouowJKBanEWY/thumbnail.webp?time=5.896","targetDeleted":false,"owned":true,"actions":{"postId":"01a0b383-47ca-764c-abc7-bf5f9a98e456","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0b504-e968-765c-a055-2ead91f7e3bc","preview":"The particles aren't distributed uniformly; they're grouped into orbital \"lanes,\" and each lane has its own bundle width. Some lanes are wider, some tighter, which creates those denser regions that read like nebulae. The default density is set fairly low (0.2), so the contrast is subtle but present.\nIf you want it more even, drop the \"Density Contrast\" property toward 0 — the field will smooth out. Push it higher and the clusters get much more pronounced.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The particles aren't distributed uniformly; they're grouped into orbital \"lanes,\" and each lane has its own bundle width. Some lanes are wider, some tighter, which creates those denser regions that read like nebulae. The default density is set fairly low (0.2), so the contrast is subtle but present."}]},{"type":"paragraph","content":[{"type":"text","text":"If you want it more even, drop the \"Density Contrast\" property toward 0 — the field will smooth out. Push it higher and the clusters get much more pronounced."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0b383-47ca-764c-abc7-bf5f9a98e456","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0b4a9-ae01-73af-81a6-67e41671ca94"},"repost":null}},"actors":[{"id":"08435883-2384-4aba-9ac1-db319f1c8b24","name":"Yuliana You","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/bns2lrru","slug":"yuliana-you","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-18T14:56:33.150Z","latestAt":"2026-09-18T14:56:33.150Z"},{"id":"01a0b500-38c6-71db-9bcb-15f21aa432c2","type":"template.created","target":{"type":"template","id":"73356","preview":"Kinetic Scenes","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/01a0b4f6-ce06-7709-9588-88e6b0e4db8a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"08435883-2384-4aba-9ac1-db319f1c8b24","name":"Yuliana You","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/bns2lrru","slug":"yuliana-you","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-09-18T14:51:25.766Z","latestAt":"2026-09-18T14:51:25.766Z"},{"id":"01a0b370-910f-74fe-ba0a-8172144a03b9","type":"creator.followed","target":{"type":"creator","id":"830039ba-56b1-42fc-a371-361e8f7a1e4c","preview":"RedDevs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70334/avatar-q9VjO21hdl19yEZkkQj3EgY306N2Yq.jpg","slug":"reddevs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"08435883-2384-4aba-9ac1-db319f1c8b24","name":"Yuliana You","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/bns2lrru","slug":"yuliana-you","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-18T07:34:53.957Z","latestAt":"2026-09-18T07:34:53.957Z"},{"id":"01a0b340-d3ee-750b-96fe-1ad4ec8a5620","type":"component.created","target":{"type":"component","id":"mp7GcDPjJHL6d0aSm4qc","preview":"Flow Field Particles","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/01a0b317-3a08-738b-a4df-9e87f9336c6c.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"08435883-2384-4aba-9ac1-db319f1c8b24","name":"Yuliana You","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08435883-2384-4aba-9ac1-db319f1c8b24/bns2lrru","slug":"yuliana-you","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-18T06:42:45.358Z","latestAt":"2026-09-18T06:42:45.358Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:08435883-2384-4aba-9ac1-db319f1c8b24:/unified/posts/?creator=08435883-2384-4aba-9ac1-db319f1c8b24&with=reposts":[{"data":[{"id":"01a0b500-368b-701b-922e-9a0ccfe664dd","title":null,"body":"$60","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built a scroll-driven narrative engine called Kinetic Scenes."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview: "},{"type":"text","text":"https://kineticparticlescenes.framer.website","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://kineticparticlescenes.framer.website","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"It's six interactive particle components woven into one continuous story — as you scroll, each scene fades smoothly into the next. Flow field → living network → spherical arcs → spatial wireframe → microbial growth → schooling fish. Six completely different visual systems, but they share the same restrained visual language, so the transitions feel like one continuous piece rather than six demos stitched together."}]},{"type":"paragraph","content":[{"type":"text","text":"A few things I'm proud of:"}]},{"type":"paragraph","content":[{"type":"text","text":"Every scene is written from scratch on raw