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

Transform your background into a lively, modern playground with Interactive Cubes, a Framer component featuring animated 3D-like cubes that react both passively and interactively.

Even without interaction, the cubes move on their own, creating a dynamic ambient effect. On hover or mouse movement, they respond smoothly, following the cursor with fluid motion. When clicked, each cube triggers a playful effect animation, adding depth and interactivity.

Fully customizable, you can adjust the cube size, spacing, colors, and edge styles (solid, dashed, or dotted) to perfectly match your design.

Best Uses

Hero sections with an animated 3D-like background Portfolios and landing pages needing a modern interactive vibe Creative showcases, experimental projects, and artistic websites Interactive canvases where motion enhances engagement

Key Features

Autonomous Motion: Cubes animate by themselves even without interaction
Mouse-Responsive: Smoothly follow cursor movements in real-time
Click Effects: Each cube reacts with a unique visual effect on click
Customizable: Control cube size, spacing, colors, and edge styles (solid, dashed, dotted)
Responsive: Works seamlessly across desktop and mobile
Optimized: Lightweight, fluid animations built for Framer

Why Use Interactive Cubes?

Adds depth and energy to any layout
Boosts engagement through interactivity and motion
Easy to customize for any creative style
Perfect for modern hero sections, interactive portfolios, and playful backgrounds.

With Interactive Cubes, your website gets a living, breathing background full of motion, interaction, and creative possibilities.

5a:[["$","$L5d",null,{"post":{"id":"0199a580-aaae-7566-9c1e-9be665702665","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c1e1925b-2107-4ebe-8fec-5b2b3e9e1ae6","name":"Serafim 193","slug":"serafim-193","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"yhDW5krTtXFS3TdhTTaj","resolved":true,"title":"Interactive Cubes v2","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transform your background into a lively, modern playground with "},{"type":"text","text":"Interactive Cubes","marks":[{"type":"bold"}]},{"type":"text","text":", a Framer component featuring animated 3D-like cubes that react both passively and interactively."}]},{"type":"paragraph","content":[{"type":"text","text":"Even without interaction, the cubes "},{"type":"text","text":"move on their own","marks":[{"type":"bold"}]},{"type":"text","text":", creating a dynamic ambient effect. On hover or mouse movement, they respond smoothly, following the cursor with fluid motion. When clicked, each cube triggers a playful "},{"type":"text","text":"effect animation","marks":[{"type":"bold"}]},{"type":"text","text":", adding depth and interactivity."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable, you can adjust the "},{"type":"text","text":"cube size, spacing, colors, and edge styles (solid, dashed, or dotted)","marks":[{"type":"bold"}]},{"type":"text","text":" to perfectly match your design."}]},{"type":"customHeading","content":[{"type":"text","text":"Best Uses"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Hero sections with an animated 3D-like background Portfolios and landing pages needing a modern interactive vibe Creative showcases, experimental projects, and artistic websites Interactive canvases where motion enhances engagement"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autonomous Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Cubes animate by themselves even without interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse-Responsive:","marks":[{"type":"bold"}]},{"type":"text","text":" Smoothly follow cursor movements in real-time"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Each cube reacts with a unique visual effect on click"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable:","marks":[{"type":"bold"}]},{"type":"text","text":" Control cube size, spacing, colors, and edge styles (solid, dashed, dotted)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive:","marks":[{"type":"bold"}]},{"type":"text","text":" Works seamlessly across desktop and mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized:","marks":[{"type":"bold"}]},{"type":"text","text":" Lightweight, fluid animations built for Framer"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why Use Interactive Cubes?"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adds "},{"type":"text","text":"depth and energy","marks":[{"type":"bold"}]},{"type":"text","text":" to any layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Boosts "},{"type":"text","text":"engagement","marks":[{"type":"bold"}]},{"type":"text","text":" through interactivity and motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to customize for "},{"type":"text","text":"any creative style","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Perfect for "},{"type":"text","text":"modern hero sections, interactive portfolios, and playful backgrounds.","marks":[{"type":"bold"}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"With "},{"type":"text","text":"Interactive Cubes","marks":[{"type":"bold"}]},{"type":"text","text":", your website gets a living, breathing background full of motion, interaction, and creative possibilities."}]}]},"introduction":"Mouse activated","slug":"interactive-cubes-v2","author":{"framerUserId":"c1e1925b-2107-4ebe-8fec-5b2b3e9e1ae6","name":"Serafim 193","slug":"serafim-193","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/yhDW5krTtXFS3TdhTTaj/interactive-cubes-5C06hdyDvPkrEGTVhJH3eP0Wff2uVN","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-24T19:45:29.677Z","updatedAt":"2026-09-12T10:42:10.899Z","publishedAt":"2025-10-02T15:18:17.006Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactivecubes.framer.website/","price":"10","paymentUrl":"https://buy.stripe.com/28E7sKadxfHF0GJau3eQM0g","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"tEfMbMAd2erXyOHTtipw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-02T15:18:17.006Z","updatedAt":"2025-10-02T15:18:17.006Z","reported":false}}],"$L5f"]

Suggested for you