{"id":4394,"date":"2024-02-16T05:42:18","date_gmt":"2024-02-16T05:42:18","guid":{"rendered":"https:\/\/shamsalmadina.com\/?page_id=4394"},"modified":"2026-07-24T10:49:07","modified_gmt":"2026-07-24T10:49:07","slug":"acoustic-panel","status":"publish","type":"page","link":"https:\/\/shamsalmadina.com\/index.php\/acoustic-panel\/","title":{"rendered":"Acoustic Panel"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n\n
\"\"<\/a><\/figure>\n<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPremium Metallic Ribbon Cursor<\/title>\r\n\r\n<style>\r\nhtml,body{\r\n margin:0;\r\n overflow:hidden;\r\n background:#050505;\r\n cursor:none;\r\n}\r\n\r\ncanvas{\r\n position:fixed;\r\n inset:0;\r\n pointer-events:none;\r\n}\r\n\r\n.info{\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n color:white;\r\n font-family:Arial;\r\n font-size:28px;\r\n letter-spacing:3px;\r\n opacity:.3;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"info\">Move Mouse<\/div>\r\n\r\n<canvas id=\"canvas\"><\/canvas>\r\n\r\n<script>\r\n\r\nconst canvas=document.getElementById(\"canvas\");\r\nconst ctx=canvas.getContext(\"2d\");\r\n\r\nfunction resize(){\r\n canvas.width=window.innerWidth;\r\n canvas.height=window.innerHeight;\r\n}\r\nresize();\r\nwindow.addEventListener(\"resize\",resize);\r\n\r\nconst points=[];\r\nconst total=60;\r\n\r\nfor(let i=0;i<total;i++){\r\n points.push({\r\n x:window.innerWidth\/2,\r\n y:window.innerHeight\/2\r\n });\r\n}\r\n\r\nlet mouse={\r\n x:window.innerWidth\/2,\r\n y:window.innerHeight\/2\r\n};\r\n\r\nwindow.addEventListener(\"mousemove\",e=>{\r\n mouse.x=e.clientX;\r\n mouse.y=e.clientY;\r\n});\r\n\r\nfunction animate(){\r\n\r\n requestAnimationFrame(animate);\r\n\r\n ctx.clearRect(0,0,canvas.width,canvas.height);\r\n\r\n points[0].x += (mouse.x-points[0].x)*0.35;\r\n points[0].y += (mouse.y-points[0].y)*0.35;\r\n\r\n for(let i=1;i<points.length;i++){\r\n\r\n let prev=points[i-1];\r\n\r\n points[i].x += (prev.x-points[i].x)*0.32;\r\n points[i].y += (prev.y-points[i].y)*0.32;\r\n }\r\n\r\n for(let i=0;i<points.length-1;i++){\r\n\r\n const p=points[i];\r\n const n=points[i+1];\r\n\r\n const dx=n.x-p.x;\r\n const dy=n.y-p.y;\r\n\r\n const angle=Math.atan2(dy,dx);\r\n\r\n const width=(2-(i*0.06)); \/\/ Thin ribbon\r\n\r\n const px=Math.sin(angle)*width;\r\n const py=-Math.cos(angle)*width;\r\n\r\n const hue=(i*8+performance.now()*0.05)%360;\r\n\r\n const grad=ctx.createLinearGradient(\r\n p.x-px,p.y-py,\r\n p.x+px,p.y+py\r\n );\r\n\r\n grad.addColorStop(0,\r\n `hsla(${hue},90%,85%,0.95)`);\r\n\r\n grad.addColorStop(.5,\r\n `hsla(${(hue+60)%360},100%,55%,1)`);\r\n\r\n grad.addColorStop(1,\r\n `hsla(${(hue+120)%360},90%,90%,0.95)`);\r\n\r\n ctx.strokeStyle=grad;\r\n ctx.lineWidth=width*2;\r\n\r\n ctx.lineCap=\"round\";\r\n\r\n ctx.shadowBlur=12;\r\n ctx.shadowColor=`hsla(${hue},100%,70%,0.8)`;\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(p.x,p.y);\r\n ctx.lineTo(n.x,n.y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Metallic pointer\r\n\r\n const metal=ctx.createRadialGradient(\r\n mouse.x-2,\r\n mouse.y-2,\r\n 2,\r\n mouse.x,\r\n mouse.y,\r\n 7\r\n );\r\n\r\n metal.addColorStop(0,\"#ffffff\");\r\n metal.addColorStop(.2,\"#ffe9a8\");\r\n metal.addColorStop(.45,\"#cfd3d8\");\r\n metal.addColorStop(.7,\"#8c8f95\");\r\n metal.addColorStop(1,\"#222\");\r\n\r\n ctx.beginPath();\r\n ctx.arc(mouse.x,mouse.y,6,0,Math.PI*2);\r\n ctx.fillStyle=metal;\r\n ctx.fill();\r\n\r\n ctx.shadowBlur=20;\r\n ctx.shadowColor=\"white\";\r\n}\r\n\r\nanimate();\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Premium Metallic Ribbon Cursor Move Mouse<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4394","page","type-page","status-publish","hentry","rishi-post","no-post-thumbnail"],"rishi__cb_customizer_meta":"","_links":{"self":[{"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/pages\/4394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/comments?post=4394"}],"version-history":[{"count":25,"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/pages\/4394\/revisions"}],"predecessor-version":[{"id":5179,"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/pages\/4394\/revisions\/5179"}],"wp:attachment":[{"href":"https:\/\/shamsalmadina.com\/index.php\/wp-json\/wp\/v2\/media?parent=4394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}