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

Interactive 3D Elements

Built by Erigo Kreatif Innovations, Mark transforms simple canvas geometry into living 3D marks that turn, tumble, and come apart on hover. Built for Framer, it gives designers a fast way to create kinetic logos, hero icons, and section markers without touching WebGL or writing custom animation code.

Choose from ten distinct bodies (sphere, cube, rings, helix, DNA, wave, vortex, cylinder, lattice, and orbit), each with its own motion: bands that twist, a slice that turns like a Rubik's cube, two circles counter-rotating, a coil that breathes. Every body is cut from one of ten unit shapes (capsule, cube, bar, pyramid, hexagon, diamond, cylinder, plate, bead, or cross), so the same motion can read as soft and organic or hard-edged and mechanical.

Hover any mark and it comes apart: each unit leaves on its own beat, travels outward, grows, and squares off, then reassembles the moment the cursor leaves. Fine-tune unit count, unit size, hover spread, hover growth, speed, and color directly from the Framer side panel. No code editor required.

Features

Animated 3D mark component for Framer, drawn on canvas. No WebGL
Ten selectable bodies: sphere, cube, rings, helix, DNA, wave, vortex, cylinder, lattice, orbit
Ten selectable unit shapes: capsule, cube, bar, pyramid, hexagon, diamond, cylinder, plate, bead, cross
One color accent with automatic lit/shadow shading per body
Adjustable unit count, unit size, and overall size
Adjustable hover spread and hover growth per instance
Adjustable animation speed
Smooth take apart / reassemble hover interaction on every body
Respects prefers reduced motion and pauses off screen for performance
Great for hero eyebrows, kinetic logos, section markers, and loading marks

5a:[["$","$L5d",null,{"post":{"id":"01a00b9f-17e9-76d0-8f82-5760b88b7e3b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4b29601a-3312-4d0c-94d0-519ed4fcd600","name":"Erigo Kreatif Innovations","slug":"erigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/557355/avatar-uzQHIYlwVsdJVT0EHYdYTxwKYjV0LM.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"RFTnsLlfRQzmtmcVl4BR","resolved":true,"title":"Kinetic Marks","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive 3D Elements","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built by Erigo Kreatif Innovations, Mark transforms simple canvas geometry into living 3D marks that turn, tumble, and come apart on hover. Built for Framer, it gives designers a fast way to create kinetic logos, hero icons, and section markers without touching WebGL or writing custom animation code."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from ten distinct bodies (sphere, cube, rings, helix, DNA, wave, vortex, cylinder, lattice, and orbit), each with its own motion: bands that twist, a slice that turns like a Rubik's cube, two circles counter-rotating, a coil that breathes. Every body is cut from one of ten unit shapes (capsule, cube, bar, pyramid, hexagon, diamond, cylinder, plate, bead, or cross), so the same motion can read as soft and organic or hard-edged and mechanical."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover any mark and it comes apart: each unit leaves on its own beat, travels outward, grows, and squares off, then reassembles the moment the cursor leaves. Fine-tune unit count, unit size, hover spread, hover growth, speed, and color directly from the Framer side panel. No code editor required."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated 3D mark component for Framer, drawn on canvas. No WebGL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ten selectable bodies: sphere, cube, rings, helix, DNA, wave, vortex, cylinder, lattice, orbit"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ten selectable unit shapes: capsule, cube, bar, pyramid, hexagon, diamond, cylinder, plate, bead, cross"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One color accent with automatic lit/shadow shading per body"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable unit count, unit size, and overall size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable hover spread and hover growth per instance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth take apart / reassemble hover interaction on every body"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respects prefers reduced motion and pauses off screen for performance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Great for hero eyebrows, kinetic logos, section markers, and loading marks"}]}]}]}]},"introduction":"Living Geometry","slug":"kinetic-marks","author":{"framerUserId":"4b29601a-3312-4d0c-94d0-519ed4fcd600","name":"Erigo Kreatif Innovations","slug":"erigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/557355/avatar-uzQHIYlwVsdJVT0EHYdYTxwKYjV0LM.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4b29601a-3312-4d0c-94d0-519ed4fcd600/01a00b9e-f8cb-722b-962b-96fb1c9e7143.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2382,"height":1496}}],"post":null,"createdAt":"2026-08-16T17:29:30.352Z","updatedAt":"2026-08-16T17:29:30.352Z","publishedAt":"2026-08-16T17:29:30.349Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Mark-YcI5jK.js@ZlpGOGYy0myCtlcHRPoJ","previewUrl":"https://kineticmarks.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"ZlpGOGYy0myCtlcHRPoJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-16T17:29:30.857Z","updatedAt":"2026-08-16T17:29:30.857Z","reported":false}}],"$L5f"]

Suggested for you