51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/2560d2n15vwt0.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/139qrzcz9lv4a.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/29nnfbif7huoh.js","/creators-assets/_next/static/immutable/chunks/0wtdx5gy0autr.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/1jp3s4ouxoyr3.js","/creators-assets/_next/static/immutable/chunks/2ghns2teubdvo.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3ogkzi2dwy7m5.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2hnfu5uxkt8n0.js","/creators-assets/_next/static/immutable/chunks/0hkuwyfzgyt29.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/0_fhuyoczujnr.js","/creators-assets/_next/static/immutable/chunks/0b95zai6bhh8l.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2qhn_o-66b-q9.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3lqafyeq6rldt.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.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/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/1zvmc9yy7z5jg.js"],"S"] 52:T6ff,

Vibrant Spheres Animated Background Component :

Description

Bring your designs to life without compromising site performance.

Vibrant Spheres is a beautifully crafted, smooth, and lightweight animated background component built 100% inside the Framer Editor. Designed with clean native shapes and fluid motion, it creates a subtle, captivating visual layer that elevates any Hero Section or web page instantly.

Unlike heavy Canvas, WebGL, or Shader scripts, this component relies purely on native Framer motion. This means zero complex setup, ultra-fast loading times, and smooth 60fps performance across all modern browsers and mobile devices.

Key Features:

• Ultra-Lightweight & Fast: Built natively without heavy WebGL, Shaders, or external JavaScript libraries.

• Soft & Smooth Palette: Carefully balanced gradient blends that complement typography without distracting from your content.

• 100% No-Code & Customizable: Tweak colors, animation speed, scale, and layering directly from the Framer sidebar.

• Fully Responsive: Adapts seamlessly to Desktop, Tablet, and Mobile viewports.

• One-Click Remix: Simply copy, paste, and customize in seconds.

Preview link : https://collaborative-dragon-941115.framer.app/

---

Tags & Keywords

Animated Background, Framer Component, Gradient Background, Free Component, Fluid Animation, Hero Background, Lightweight background, No code background framer, Smooth gradient background, Aura gradient framer, Interactive background, Minimal background component, Framer hero section, Abstract animated wallpaper

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-2ed94a3f-3c88-4eee-9eab-625fd4c5b724-all:/unified/creator/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/activity/":[{"data":[{"id":"019ff6c2-0a40-7694-8df3-fa9fcbe2246c","type":"component.liked","target":{"type":"component","id":"SydXchhmCVxPAyj4ftEB","preview":"Parallax Hero Slider","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0719432c-b301-4978-a14f-5e7950d02aca/019fb76c-a43d-701d-bf67-b654e2f3f7c3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-12T16:15:39.580Z","latestAt":"2026-08-12T16:15:39.580Z"},{"id":"019fcc60-991b-712d-8e6f-bbd26fe8daca","type":"component.liked","target":{"type":"component","id":"wNsSsnXxJKhDOXwxZ9xB","preview":"Bouncy Jelly Buttons","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/wNsSsnXxJKhDOXwxZ9xB/bouncy-jelly-buttons-s0B1DU6OxYKc4NI3zoufKjZI2Uz9kN","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-04T10:45:10.545Z","latestAt":"2026-08-04T10:45:10.545Z"},{"id":"019fc6b8-fc11-733d-b3a9-22aac4762e11","type":"component.liked","target":{"type":"component","id":"3D890cMp4bJ1HOl9AOU5","preview":"Cipher","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a2bb11d6-7104-4422-8c4d-b1eb4387cc8a/6f62q7wv","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-03T08:23:59.755Z","latestAt":"2026-08-03T08:23:59.755Z"},{"id":"019fc6b6-37cb-72f3-bb0e-8ade8bab180d","type":"component.liked","target":{"type":"component","id":"hbsOwj68pbBtaO6dGYbc","preview":"Animated FitText Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/hbsOwj68pbBtaO6dGYbc/animated-fittext-pro-dgbcRYi9RpSY9YyvK2nNGKac2FAb7k","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-03T08:20:58.438Z","latestAt":"2026-08-03T08:20:58.438Z"},{"id":"019fc1f5-5e37-777c-b78a-52733518c9c6","type":"component.liked","target":{"type":"component","id":"i3AW7CmqSykGQMvjeWc2","preview":"Tilt Image3D","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/i3AW7CmqSykGQMvjeWc2/tilt-image3d-AmPCNkLneSsW91VM9rYLgydevBTHly","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-02T10:11:50.960Z","latestAt":"2026-08-02T10:11:50.960Z"},{"id":"019fa392-45f2-7129-bd9b-2889ed259691","type":"component.created","target":{"type":"component","id":"35XxeGt5w1FqB7ZzpwdE","preview":"Vibrant Spheres","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/019fa391-045b-7198-8473-97366e2992a1.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-27T12:35:00.210Z","latestAt":"2026-07-27T12:35:00.210Z"},{"id":"019f5d69-0f0e-728f-8614-c584fc214025","type":"component.liked","target":{"type":"component","id":"kDuSaTMcqKUQA9GDZvVL","preview":"Preloader","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/kDuSaTMcqKUQA9GDZvVL/preloader-rOvzEfRANKPQEipDCvmf1kWrmjUzWP","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-13T21:36:34.048Z","latestAt":"2026-07-13T21:36:34.048Z"},{"id":"019f5592-c7c7-7088-aab1-920eb1503b56","type":"creator.followed","target":{"type":"creator","id":"4164956a-7177-4789-b8ea-5567983998f4","preview":"Domenico Griffo","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4164956a-7177-4789-b8ea-5567983998f4/oft9a3s0","slug":"domegriffo","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-12T09:05:10.593Z","latestAt":"2026-07-12T09:05:10.593Z"},{"id":"019f3f9c-0d9b-77f8-bd60-1ffb9d24ef3f","type":"component.liked","target":{"type":"component","id":"Qs7TuEdYNIATh6AqWwZi","preview":"Dock","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Qs7TuEdYNIATh6AqWwZi/dock-DYIksu1Mc15xYqwjMFwmTYg60TZdrm","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-08T02:43:39.542Z","latestAt":"2026-07-08T02:43:39.542Z"},{"id":"019f3f85-26ed-7341-9268-d12c26eb1f40","type":"component.liked","target":{"type":"component","id":"aboTYBf8rLGoShnFEtQy","preview":"Pill Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/55210991-209c-40a4-b3e3-ed0b38410caa/bnytfmjm","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-08T02:18:38.687Z","latestAt":"2026-07-08T02:18:38.687Z"},{"id":"019f3f42-e7c9-72f8-a849-fe948e945dc8","type":"component.created","target":{"type":"component","id":"KCP1Y8AghYGl0BJcorQo","preview":"Animated Orbiting","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/jthzjqkf","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-08T01:06:17.161Z","latestAt":"2026-07-08T01:06:17.161Z"},{"id":"019f164a-5128-768c-a7ec-bad0e2361a96","type":"component.liked","target":{"type":"component","id":"ApqhcInEtH043AWi0KVi","preview":"Filterable Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ApqhcInEtH043AWi0KVi/filterable-gallery-ikW5J9kcBjnWDR4sZ6mdJzqcFGRF4P","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-30T02:09:57.026Z","latestAt":"2026-06-30T02:09:57.026Z"},{"id":"019f10ea-4140-77b3-8861-cbface662ba8","type":"component.liked","target":{"type":"component","id":"8m7szpyM4NNO4YprpIZL","preview":"Apex Loop","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/8m7szpyM4NNO4YprpIZL/apex-loop-tRjxcxpei04k5VZI88bzHB3B5XN7vk","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-29T01:06:55.420Z","latestAt":"2026-06-29T01:06:55.420Z"},{"id":"019f10c3-51c1-7177-8571-0131386e1331","type":"component.liked","target":{"type":"component","id":"fdqrKMCm2PUHboCkcbNL","preview":"Metalmorphism","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fdqrKMCm2PUHboCkcbNL/metalmorphism-aSYhBE0UeMMqgjbcJ8q3guPLb6xVvZ","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-29T00:24:23.741Z","latestAt":"2026-06-29T00:24:23.741Z"},{"id":"019f10b2-52cd-7264-829e-becc9fe243b7","type":"component.liked","target":{"type":"component","id":"IgbeSXTNLrtzCXDhNnNf","preview":"LiquidMercuryButton","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/IgbeSXTNLrtzCXDhNnNf/liquidmercurybutton-xav7IJtAaJwhXbnoKKJGvyW67u6kaf","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-29T00:05:49.898Z","latestAt":"2026-06-29T00:05:49.898Z"},{"id":"019f062a-6e7d-7765-8d66-48415fae01b0","type":"component.liked","target":{"type":"component","id":"ZTYxvWWzwxxfmK6WP2oy","preview":"Glass","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ZTYxvWWzwxxfmK6WP2oy/glass-XPE5MM1qxBOW0k9SQU0aD8HvTSlm3F","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-26T23:01:11.925Z","latestAt":"2026-06-26T23:01:11.925Z"},{"id":"019ef253-185e-71da-a165-36ad232b212d","type":"component.created","target":{"type":"component","id":"K6SB3ovaqOTBhTVKLEBW","preview":"ChromaShift Centered","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/j8hh8933","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","avatar":null,"slug":"nader-al-sayed","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-23T02:33:12.542Z","latestAt":"2026-06-23T02:33:12.542Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2ed94a3f-3c88-4eee-9eab-625fd4c5b724:/unified/posts/?creator=2ed94a3f-3c88-4eee-9eab-625fd4c5b724&with=reposts":[{"data":[{"id":"01a012dd-8c01-727a-80ae-f2e7577e2c3f","title":null,"body":"

Introducing an artistic, lightweight alternative to complex WebGL shaders, designed directly within Framer

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing an artistic, lightweight alternative to complex WebGL shaders, designed directly within Framer"}]}]},"author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/01a012dd-72af-70ce-993b-73809f282df7.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":720,"height":397}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-18T03:15:04.327Z","updatedAt":"2026-08-18T03:15:04.327Z"},{"id":"019fd6d3-0271-728b-9fd4-18c61b9614ee","title":null,"body":"

I'm building a 360° Interactive Logo Mockup Kit for Framer — would you use this for your portfolio? 🤔

(Read More)

Hey Framer Community! 👋

I noticed a gap in the marketplace for Interactive Logo Mockups specifically designed for branding showcases. Most mockups are static PSD files, but this Framer Component brings logos to life!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm building a 360° Interactive Logo Mockup Kit for Framer — would you use this for your portfolio? ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"thinking","emoji":"🤔"}}]},{"type":"paragraph","content":[{"type":"text","text":""},{"type":"text","text":"(Read More)","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hey Framer Community! "},{"type":"emoji","attrs":{"name":"wave","emoji":"👋"}}]},{"type":"paragraph","content":[{"type":"text","text":"I noticed a gap in the marketplace for "},{"type":"text","text":"Interactive Logo Mockups","marks":[{"type":"bold"}]},{"type":"text","text":" specifically designed for branding showcases. Most mockups are static PSD files, but this Framer Component brings logos to life!"}]}]},"author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/019fd6d2-dd83-7394-8662-1dc344c4ec10.jpg","metadata":{"tint":{"h":0,"s":0,"l":9},"width":555,"height":388}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-06T11:26:20.788Z","updatedAt":"2026-08-06T11:26:20.788Z"},{"id":"019fa87a-5d29-75c3-93a9-3dc8ca8dd0c5","title":null,"body":"

keeps visitors hooked on your site? Try Vibrant Spheres—a dynamic, high-energy animated background

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":" keeps visitors hooked on your site? Try "},{"type":"text","text":"Vibrant Spheres","marks":[{"type":"bold"}]},{"type":"text","text":"—a dynamic, high-energy animated background "}]},{"type":"paragraph"}]},"author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/019fa872-f4a5-737f-99ad-a0b7be539f8f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":750,"height":563}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-28T11:26:59.373Z","updatedAt":"2026-07-28T11:26:59.373Z"},{"id":"019fa392-4466-731e-bfd9-4c2546b990b3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"35XxeGt5w1FqB7ZzpwdE","resolved":true,"title":"Vibrant Spheres","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Vibrant Spheres Animated Background Component :"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":" Description"}]},{"type":"paragraph","content":[{"type":"text","text":"Bring your designs to life without compromising site performance."}]},{"type":"paragraph","content":[{"type":"text","text":"Vibrant Spheres is a beautifully crafted, smooth, and lightweight animated background component built 100% inside the Framer Editor. Designed with clean native shapes and fluid motion, it creates a subtle, captivating visual layer that elevates any Hero Section or web page instantly."}]},{"type":"paragraph","content":[{"type":"text","text":"Unlike heavy Canvas, WebGL, or Shader scripts, this component relies purely on native Framer motion. This means zero complex setup, ultra-fast loading times, and smooth 60fps performance across all modern browsers and mobile devices."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Ultra-Lightweight & Fast: Built natively without heavy WebGL, Shaders, or external JavaScript libraries."}]},{"type":"paragraph","content":[{"type":"text","text":"• Soft & Smooth Palette: Carefully balanced gradient blends that complement typography without distracting from your content."}]},{"type":"paragraph","content":[{"type":"text","text":"• 100% No-Code & Customizable: Tweak colors, animation speed, scale, and layering directly from the Framer sidebar."}]},{"type":"paragraph","content":[{"type":"text","text":"• Fully Responsive: Adapts seamlessly to Desktop, Tablet, and Mobile viewports."}]},{"type":"paragraph","content":[{"type":"text","text":"• One-Click Remix: Simply copy, paste, and customize in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview link : "},{"type":"text","text":"https://collaborative-dragon-941115.framer.app/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://collaborative-dragon-941115.framer.app/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"---"}]},{"type":"paragraph","content":[{"type":"text","text":" Tags & Keywords"}]},{"type":"paragraph","content":[{"type":"text","text":"Animated Background, Framer Component, Gradient Background, Free Component, Fluid Animation, Hero Background, Lightweight background, No code background framer, Smooth gradient background, Aura gradient framer, Interactive background, Minimal background component, Framer hero section, Abstract animated wallpaper"}]}]},"introduction":"Smooth & Lightweight Animated BG","slug":"vibrant-spheres","author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/019fa391-045b-7198-8473-97366e2992a1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-27T12:34:59.442Z","updatedAt":"2026-07-27T12:34:59.442Z","publishedAt":"2026-07-27T12:34:59.439Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Vibrant-Spheres-tUq05b.js@tshERWpNEdGYcUi90q15","previewUrl":"https://collaborative-dragon-941115.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"tshERWpNEdGYcUi90q15","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-27T12:34:59.814Z","updatedAt":"2026-07-27T12:34:59.814Z"},{"id":"019f3f42-e792-743f-84e7-4c904bf71ba6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"KCP1Y8AghYGl0BJcorQo","resolved":true,"title":"Animated Orbiting","body":"

Description

A premium, lightweight SVG animated graphic art designed specifically for the right side of hero sections. It features a stylized cluster of vibrant metallic gradient spheres (pink, purple, and gold) adorned with dynamic wavy cutouts that create an illusion of depth.

The animation is applied to the entire composition as a single unified group, creating a smooth, continuous global micro-rotation around a central axis.

Interactive Hover Effect: When a user hovers over the graphic, the global rotation gently accelerates or shifts angle (or the entire cluster scales up subtly with a smooth spring transition), creating an engaging, responsive feedback loop that connects the user directly to the motion graphics.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Description"}]},{"type":"paragraph","content":[{"type":"text","text":"A premium, lightweight SVG animated graphic art designed specifically for the right side of hero sections. It features a stylized cluster of vibrant metallic gradient spheres (pink, purple, and gold) adorned with dynamic wavy cutouts that create an illusion of depth."}]},{"type":"paragraph","content":[{"type":"text","text":"The animation is applied to the entire composition as a single unified group, creating a smooth, continuous global micro-rotation around a central axis."}]},{"type":"paragraph","content":[{"type":"text","text":"Interactive Hover Effect: When a user hovers over the graphic, the global rotation gently accelerates or shifts angle (or the entire cluster scales up subtly with a smooth spring transition), creating an engaging, responsive feedback loop that connects the user directly to the motion graphics."}]}]},"introduction":"Animated Orbiting Spheres","slug":"animated-orbiting","author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/jthzjqkf","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1176}}],"post":null,"createdAt":"2026-07-08T01:06:17.022Z","updatedAt":"2026-07-08T01:06:17.022Z","publishedAt":"2026-07-08T01:06:17.015Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/hero-art-animation-ThTEjU.js@rIMM2cDxou6rYYYCFoLF","previewUrl":"https://regular-trip-923836.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"rIMM2cDxou6rYYYCFoLF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-08T01:06:17.106Z","updatedAt":"2026-07-08T01:06:17.106Z"},{"id":"019ef253-1811-71b8-bd16-ccb8f67311f6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"K6SB3ovaqOTBhTVKLEBW","resolved":true,"title":"ChromaShift Centered","body":"

Description :

Flip, click, and center! Micro-interactions that make your website feel alive.

ChromaShift is a bold, ultra-responsive Framer button component designed to transform boring clicks into an engaging user experience. Packed with smooth transitions and smart alignment tricks.

I nverted Hover Effect: Hovering triggers an instant, satisfying color inversion that commands attention.

Dynamic Pressed State Upon clicking, the decorative side graphic disappears while the text smoothly glides to the exact center, creating a balanced and tactile feedback loop.

Framer Ready: Fully responsive, zero code required, and completely customizable to fit your design system in seconds.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Description :"}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":" Flip, click, and center! Micro-interactions that make your website feel alive.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":" ChromaShift ","marks":[{"type":"bold"}]},{"type":"text","text":" is a bold, ultra-responsive Framer button component designed to transform boring clicks into an engaging user experience. Packed with smooth transitions and smart alignment tricks. "}]},{"type":"paragraph","content":[{"type":"text","text":" I nverted Hover Effect: ","marks":[{"type":"bold"}]},{"type":"text","text":" Hovering triggers an instant, satisfying color inversion that commands attention."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":" Dynamic Pressed State ","marks":[{"type":"bold"}]},{"type":"text","text":" Upon clicking, the decorative side graphic disappears while "},{"type":"text","text":" the text smoothly glides to the exact center","marks":[{"type":"bold"}]},{"type":"text","text":", creating a balanced and tactile feedback loop."}]},{"type":"paragraph","content":[{"type":"text","text":" "},{"type":"text","text":" Framer Ready:","marks":[{"type":"bold"}]},{"type":"text","text":" Fully responsive, zero code required, and completely customizable to fit your design system in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":" "}]}]},"introduction":"ChromaShift Centered – Interactive","slug":"chromashift-centered","author":{"framerUserId":"2ed94a3f-3c88-4eee-9eab-625fd4c5b724","name":"Nader Al-Sayed","slug":"nader-al-sayed","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2ed94a3f-3c88-4eee-9eab-625fd4c5b724/j8hh8933","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-23T02:33:12.413Z","updatedAt":"2026-06-23T02:33:12.413Z","publishedAt":"2026-06-23T02:33:12.405Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ChromaShift-Centered-OY8pas.js@t8n3pkfFueaHOSNNl1Cr","previewUrl":"https://modern-signposts-838936.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"t8n3pkfFueaHOSNNl1Cr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-23T02:33:12.465Z","updatedAt":"2026-06-23T02:33:12.465Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]