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:T8fe,

A premium WebGL fluid shader for Framer that creates soft, flowing colour fields with organic movement, atmospheric depth, and subtle texture. Sky Flow transforms your canvas into a dynamic visual background inspired by drifting skies, liquid gradients, and smooth natural motion.

Choose from 10 curated colour presets including Glacier Blue, Golden Hour, Lilac Mist, Mint Current, Rose Quartz, Peach Silk, Lagoon, Orchid Haze, Olive Glow, and Silver Drift. Adjust animation speed, wind, fluid depth, softness, zoom, grain, flow scale, and rendering quality directly through Framer Property Controls.

Sky Flow uses custom GLSL shaders with procedural noise, FBM distortion, texture grain, and responsive WebGL rendering to create continuously evolving visuals. It also includes an interactive colour preset menu that works directly in Preview and on published sites.

Features

Premium animated GLSL fluid shader
WebGL powered rendering
10 curated colour presets
Interactive colour preset menu
Customisable animation and flow
Adjustable fluid depth and warp
Softness and zoom controls
Grain and texture controls
Eco, Balanced, and High quality modes
Fully customizable with Framer Property Controls, no code required

Use Cases

Hero backgrounds
Creative websites
Portfolio websites
Agency websites
Design studio websites
SaaS landing pages
Product launches
Modern brand websites
Digital experiences
Framer templates

Why You’ll Love It

Sky Flow adds a calm, atmospheric layer of motion to your Framer projects without overwhelming your content. Its fluid shader creates constantly evolving colour movement, while curated palettes and detailed controls make it easy to match the visual style of any project. From subtle backgrounds to vibrant hero sections, Sky Flow gives you a polished WebGL effect without writing any code.

Original work by Sabo Sugi, used, developed, and commercially sold with full permission.

5a:[["$","$L5d",null,{"post":{"id":"01a0a9c6-6147-75fc-aa48-00499e751244","title":null,"body":"

Sky Flow

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Sky Flow"}]}]},"author":{"framerUserId":"ca05e506-1465-479c-9098-193c2ad13a2b","name":"Design Foundry","slug":"designfoundry","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ca05e506-1465-479c-9098-193c2ad13a2b/xcfk0umu","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mcbPdcKVhyDxcJiPIp0C","resolved":true,"title":"Sky Flow","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A premium WebGL fluid shader for Framer that creates soft, flowing colour fields with organic movement, atmospheric depth, and subtle texture. Sky Flow transforms your canvas into a dynamic visual background inspired by drifting skies, liquid gradients, and smooth natural motion."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from 10 curated colour presets including Glacier Blue, Golden Hour, Lilac Mist, Mint Current, Rose Quartz, Peach Silk, Lagoon, Orchid Haze, Olive Glow, and Silver Drift. Adjust animation speed, wind, fluid depth, softness, zoom, grain, flow scale, and rendering quality directly through Framer Property Controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Sky Flow uses custom GLSL shaders with procedural noise, FBM distortion, texture grain, and responsive WebGL rendering to create continuously evolving visuals. It also includes an interactive colour preset menu that works directly in Preview and on published sites."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium animated GLSL fluid shader"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL powered rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"10 curated colour presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive colour preset menu"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customisable animation and flow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable fluid depth and warp"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Softness and zoom controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grain and texture controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Eco, Balanced, and High quality modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable with Framer Property Controls, no code required"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern brand websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer templates"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why You’ll Love It"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Sky Flow adds a calm, atmospheric layer of motion to your Framer projects without overwhelming your content. Its fluid shader creates constantly evolving colour movement, while curated palettes and detailed controls make it easy to match the visual style of any project. From subtle backgrounds to vibrant hero sections, Sky Flow gives you a polished WebGL effect without writing any code."}]},{"type":"paragraph","content":[{"type":"text","text":"Original work by "},{"type":"text","text":"Sabo Sugi","marks":[{"type":"bold"}]},{"type":"text","text":", used, developed, and commercially sold with full permission."}]}]},"introduction":"Soft Fluid Sky Gradient","slug":"sky-flow","author":{"framerUserId":"ca05e506-1465-479c-9098-193c2ad13a2b","name":"Design Foundry","slug":"designfoundry","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ca05e506-1465-479c-9098-193c2ad13a2b/xcfk0umu","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ca05e506-1465-479c-9098-193c2ad13a2b/01a0a9c6-3d9a-76a8-bf34-ddee456ec96a.png","metadata":{"tint":{"h":213,"s":93,"l":31},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T10:32:25.032Z","updatedAt":"2026-10-02T09:43:41.649Z","publishedAt":"2026-09-16T10:32:25.029Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://skyflowpro.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_KOFEQbD08FN8yr7HuMy2mryfYpUMhEOFRO5jr4eTKhf","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"biYsRDOoq6T7EAoGogqp","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T10:32:25.671Z","updatedAt":"2026-09-16T10:32:25.671Z","reported":false}}],"$L5f"]

Suggested for you