5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T7e5,

Add a stunning interactive 3D rock effect to your Framer site, turning flat vector logos into photorealistic stone artifacts with procedural depth, realistic lighting, and glowing magma cracks.

Features

Real-time procedural GLSL rock texture generation
Automatic SVG extrusion into 3D meshes
Interactive drag-to-rotate mouse physics
Dynamic surface cracks and crater depth control
Emissive magma glow for deep crevices
Realistic soft shadows and physical sun lighting
Smooth continuous auto-rotation option
High-performance WebGL optimization
Responsive sizing with Retina support
Zero-code setup for fast publishing

Customization Options

Primary and crevice stone colors
Surface roughness and texture bump scale
Edge chipping and displacement intensity
Crack density, depth, and visibility
Magma glow color and emission brightness
Logo scale, extrusion thickness, and edge bevel
Auto-rotate toggle and spin speed

How to Use

Drop the 3D Rock Logo component onto your Framer canvas
Upload your brand's flat SVG vector file
Adjust the primary and crevice tones to fit your theme
Dial in the crack density and toggle the glowing magma
Set the 3D thickness and bevel for optimal shape
Publish for an immersive 3D brand experience

Use Cases

Web3 and crypto project branding
Immersive 3D landing page hero sections
Gaming studio logos and headers
Bold agency portfolios
Dark mode SaaS branding
Futuristic UI systems
Extreme sports and outdoor brand sites
Interactive product features

5a:[["$","$L5d",null,{"post":{"id":"01a00390-bb65-704f-8958-834eae6691ee","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Er3HDqDhAxKPHHpPhSkC","resolved":true,"title":"3D Rock Logo","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a stunning interactive 3D rock effect to your Framer site, turning flat vector logos into photorealistic stone artifacts with procedural depth, realistic lighting, and glowing magma cracks."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time procedural GLSL rock texture generation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic SVG extrusion into 3D meshes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive drag-to-rotate mouse physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic surface cracks and crater depth control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Emissive magma glow for deep crevices"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Realistic soft shadows and physical sun lighting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth continuous auto-rotation option"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-performance WebGL optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive sizing with Retina support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero-code setup for fast publishing"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Primary and crevice stone colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Surface roughness and texture bump scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge chipping and displacement intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Crack density, depth, and visibility"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Magma glow color and emission brightness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo scale, extrusion thickness, and edge bevel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-rotate toggle and spin speed"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the 3D Rock Logo component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your brand's flat SVG vector file"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the primary and crevice tones to fit your theme"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dial in the crack density and toggle the glowing magma"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the 3D thickness and bevel for optimal shape"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish for an immersive 3D brand experience"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Web3 and crypto project branding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive 3D landing page hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gaming studio logos and headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bold agency portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark mode SaaS branding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Futuristic UI systems"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Extreme sports and outdoor brand sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive product features"}]}]}]}]},"introduction":"Turn flat SVGs into 3D stone","slug":"3d-rock-logo","author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/682fc11e-0644-4920-8b94-8b794b0ece9e/01a00390-a47f-7264-9e02-b9a6fb014edd.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-15T03:56:51.457Z","updatedAt":"2026-09-14T08:14:47.494Z","publishedAt":"2026-08-15T03:56:51.450Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sociable-interfaces-912305.framer.app","price":"9","paymentUrl":"https://designsbysadat.lemonsqueezy.com/checkout/buy/7d56dcf3-966e-41e9-9fce-e7e6c6788c6c","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"v6Kxh8l8G7tLALcaQSqK","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-08-15T03:56:51.941Z","updatedAt":"2026-08-15T03:56:51.941Z","reported":false}}],"$L5f"]

Suggested for you