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

FlowCurrent is a WebGL shader background that renders a soft, continuously flowing color field, like dye drifting through water. Flip one Trigger control and it changes behavior entirely: let it drift on its own, bend it toward your cursor, or tie it to scroll speed. It's built to work as a hero background, a section divider, a card background, or a low-opacity overlay on top of other content, not just a one-off hero visual.

Customize in Framer:

3 color stops for the gradient — any brand palette
Pattern Scale, Speed, and Warp Strength to shape how the flow looks
Trigger: Ambient Drift, Cursor Reactive, or Scroll Reactive
Reactivity to control how strongly cursor/scroll movement pushes the flow
Grain for subtle texture and banding reduction
Opacity and Blend Mode (Normal, Screen, Multiply, Overlay, Soft Light) to layer it over other content
Freeze toggle for a still frame instead of animating

Use it for:

A hero section background that matches your brand colors out of the box
A section divider or full-bleed atmosphere layer between static content blocks
A faint Screen-blended overlay on top of a product shot or photo grid

Additional details

Trigger modes — Ambient, Cursor, or Scroll reactive, switchable with one control
Color controls — 3 gradient stops, works with any brand palette
Blend mode — Normal, Screen, Multiply, Overlay, or Soft Light, so it can sit on top of other content
Graceful fallback — static CSS gradient in the canvas editor, static exports, and browsers without WebGL
Performance-aware — pauses its render loop when scrolled off-screen

5a:[["$","$L5d",null,{"post":{"id":"01a00843-102c-773b-b611-90c2b0baa872","title":null,"body":"

New component is here! Check it out!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component is here! Check it out!"}]}]},"author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PqtAg2rHIN6ZfRUWYLXW","resolved":true,"title":"Flow Current","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FlowCurrent is a WebGL shader background that renders a soft, continuously flowing color field, like dye drifting through water. Flip one Trigger control and it changes behavior entirely: let it drift on its own, bend it toward your cursor, or tie it to scroll speed. It's built to work as a hero background, a section divider, a card background, or a low-opacity overlay on top of other content, not just a one-off hero visual."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize in Framer:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3 color stops for the gradient — any brand palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pattern Scale, Speed, and Warp Strength to shape how the flow looks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger: Ambient Drift, Cursor Reactive, or Scroll Reactive"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reactivity to control how strongly cursor/scroll movement pushes the flow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain for subtle texture and banding reduction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity and Blend Mode (Normal, Screen, Multiply, Overlay, Soft Light) to layer it over other content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Freeze toggle for a still frame instead of animating"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A hero section background that matches your brand colors out of the box"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A section divider or full-bleed atmosphere layer between static content blocks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A faint Screen-blended overlay on top of a product shot or photo grid"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Additional details"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trigger modes","marks":[{"type":"bold"}]},{"type":"text","text":" — Ambient, Cursor, or Scroll reactive, switchable with one control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color controls","marks":[{"type":"bold"}]},{"type":"text","text":" — 3 gradient stops, works with any brand palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blend mode","marks":[{"type":"bold"}]},{"type":"text","text":" — Normal, Screen, Multiply, Overlay, or Soft Light, so it can sit on top of other content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Graceful fallback","marks":[{"type":"bold"}]},{"type":"text","text":" — static CSS gradient in the canvas editor, static exports, and browsers without WebGL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance-aware","marks":[{"type":"bold"}]},{"type":"text","text":" — pauses its render loop when scrolled off-screen"}]}]}]}]},"introduction":"Flowing color that reacts to you","slug":"flow-current","author":{"framerUserId":"bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6","name":"Artem Kireev","slug":"artem-kireev","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/o2v0i524","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bf2e20dd-750d-4d91-8dfd-dbc4eb54fdd6/01a00842-c94b-76ac-9527-3373495dc920.png","metadata":{"tint":{"h":192,"s":94,"l":25},"width":864,"height":671}}],"post":null,"createdAt":"2026-08-16T01:50:07.400Z","updatedAt":"2026-08-16T01:50:07.400Z","publishedAt":"2026-08-16T01:50:07.397Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dazzled-path-837074.framer.app/","price":"5","paymentUrl":"https://kireevtimothy.gumroad.com/l/flow-current","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"oDLUPwooVVq4P60nJlP1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-16T01:50:07.916Z","updatedAt":"2026-08-16T01:50:07.916Z","reported":false}}],"$L5f"]

Suggested for you