Particle Effect<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: black;\n overflow: hidden;\n position: fixed;\n width: 100%;\n height: 100%;\n touch-action: none;\n }\n\n canvas {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n font-family: 'Sigmar';\n background: transparent;\n }\n <\/style>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sigmar&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body>\n <canvas id=\"canvas1\"><\/canvas>\n\n <script>\n window.addEventListener('load', function() {\n const canvas = document.getElementById('canvas1');\n const ctx = canvas.getContext('2d', { willReadFrequently: true });\n \n function getSettings() {\n const isMobile = window.innerWidth < 768;\n const screenRatio = Math.min(1, window.innerWidth \/ 400);\n return {\n fontSize: isMobile ? Math.floor(60 * screenRatio) : 200,\n gap: isMobile ? 2 : 3,\n mouseRadius: isMobile ? window.innerWidth * 10 : 20000,\n text: \"3DFXLAB\",\n letterSpacing: isMobile ? \"2px\" : \"5px\",\n lineWidth: isMobile ? 2 : 3\n };\n }\n \n let settings = getSettings();\n \n function initCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n settings = getSettings();\n }\n \n initCanvas();\n\n class Particle {\n constructor(effect, x, y, color) {\n this.effect = effect;\n this.x = Math.random() * this.effect.width;\n this.y = Math.random() * this.effect.height;\n this.originX = x;\n this.originY = y;\n this.size = this.effect.gap;\n this.color = color;\n this.vx = 0;\n this.vy = 0;\n this.friction = Math.random() * 0.6 + 0.3;\n this.ease = Math.random() * 0.1 + 0.1;\n }\n \n update() {\n const dx = this.effect.mouse.x - this.x;\n const dy = this.effect.mouse.y - this.y;\n const distance = dx * dx + dy * dy;\n \n if (distance < this.effect.mouse.radius) {\n const angle = Math.atan2(dy, dx);\n const force = -this.effect.mouse.radius \/ distance;\n this.vx += force * Math.cos(angle);\n this.vy += force * Math.sin(angle);\n }\n \n this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease;\n this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease;\n }\n \n draw() {\n this.effect.ctx.fillStyle = this.color;\n this.effect.ctx.fillRect(this.x, this.y, this.size, this.size);\n }\n }\n\n class Effect {\n constructor(canvas, ctx, settings) {\n this.canvas = canvas;\n this.ctx = ctx;\n this.width = canvas.width;\n this.height = canvas.height;\n this.settings = settings;\n \n this.particles = [];\n this.gap = settings.gap;\n this.mouse = {\n x: this.width \/ 2,\n y: this.height \/ 2,\n radius: settings.mouseRadius\n };\n \n canvas.addEventListener(\"mousemove\", e => {\n this.mouse.x = e.clientX;\n this.mouse.y = e.clientY;\n });\n \n canvas.addEventListener(\"touchmove\", e => {\n e.preventDefault();\n if (e.touches.length > 0) {\n this.mouse.x = e.touches[0].clientX;\n this.mouse.y = e.touches[0].clientY;\n }\n }, { passive: false });\n }\n \n wrapText(text) {\n this.ctx.font = `${this.settings.fontSize}px Sigmar`;\n this.ctx.textAlign = 'center';\n this.ctx.textBaseline = 'middle';\n this.ctx.strokeStyle = 'white';\n this.ctx.lineWidth = this.settings.lineWidth;\n this.ctx.letterSpacing = this.settings.letterSpacing;\n \n const gradient = this.ctx.createLinearGradient(\n 0, 0, \n this.width, this.height\n );\n gradient.addColorStop(0.2, 'red');\n gradient.addColorStop(0.5, 'fuchsia');\n gradient.addColorStop(1, 'purple');\n this.ctx.fillStyle = gradient;\n \n \n const fullTextWidth = this.ctx.measureText(text).width;\n const maxWidth = this.width * 0.85; \n if (fullTextWidth > maxWidth) {\n const scaleFactor = maxWidth \/ fullTextWidth;\n this.settings.fontSize = Math.max(20, this.settings.fontSize * scaleFactor * 0.85);\n this.ctx.font = `${this.settings.fontSize}px Sigmar`;\n }\n \n \n const textHeight = this.settings.fontSize * 1.2;\n const y = this.height \/ 2;\n \n this.ctx.fillText(text, this.width \/ 2, y);\n this.ctx.strokeText(text, this.width \/ 2, y);\n \n this.convertToParticles();\n }\n \n convertToParticles() {\n this.particles = [];\n const pixels = this.ctx.getImageData(0, 0, this.width, this.height).data;\n \n for (let y = 0; y < this.height; y += this.gap) {\n for (let x = 0; x < this.width; x += this.gap) {\n const index = (y * this.width + x) * 4;\n if (pixels[index + 3] > 0) {\n const color = `rgb(${pixels[index]},${pixels[index + 1]},${pixels[index + 2]})`;\n this.particles.push(new Particle(this, x, y, color));\n }\n }\n }\n \n this.ctx.clearRect(0, 0, this.width, this.height);\n }\n \n render() {\n this.particles.forEach(particle => {\n particle.update();\n particle.draw();\n });\n }\n }\n\n const effect = new Effect(canvas, ctx, settings);\n effect.wrapText(settings.text);\n\n function animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n effect.render();\n requestAnimationFrame(animate);\n }\n animate();\n\n window.addEventListener('resize', function() {\n initCanvas();\n effect.width = canvas.width;\n effect.height = canvas.height;\n effect.settings = getSettings();\n effect.wrapText(settings.text);\n });\n });\n <\/script>\n<\/body>\n<\/html> <\/div>\n<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"builder_content":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"> <title>Particle Effect<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sigmar&display=swap\" rel=\"stylesheet\"> <\/head> <body> <canvas id=\"canvas1\"><\/canvas>\n <\/body> <\/html>","_links":{"self":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":15,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages\/2\/revisions\/128"}],"wp:attachment":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n \n

\n \n\n\n \n \n Particle Effect<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: black;\n overflow: hidden;\n position: fixed;\n width: 100%;\n height: 100%;\n touch-action: none;\n }\n\n canvas {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n font-family: 'Sigmar';\n background: transparent;\n }\n <\/style>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sigmar&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body>\n <canvas id=\"canvas1\"><\/canvas>\n\n <script>\n window.addEventListener('load', function() {\n const canvas = document.getElementById('canvas1');\n const ctx = canvas.getContext('2d', { willReadFrequently: true });\n \n function getSettings() {\n const isMobile = window.innerWidth < 768;\n const screenRatio = Math.min(1, window.innerWidth \/ 400);\n return {\n fontSize: isMobile ? Math.floor(60 * screenRatio) : 200,\n gap: isMobile ? 2 : 3,\n mouseRadius: isMobile ? window.innerWidth * 10 : 20000,\n text: \"3DFXLAB\",\n letterSpacing: isMobile ? \"2px\" : \"5px\",\n lineWidth: isMobile ? 2 : 3\n };\n }\n \n let settings = getSettings();\n \n function initCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n settings = getSettings();\n }\n \n initCanvas();\n\n class Particle {\n constructor(effect, x, y, color) {\n this.effect = effect;\n this.x = Math.random() * this.effect.width;\n this.y = Math.random() * this.effect.height;\n this.originX = x;\n this.originY = y;\n this.size = this.effect.gap;\n this.color = color;\n this.vx = 0;\n this.vy = 0;\n this.friction = Math.random() * 0.6 + 0.3;\n this.ease = Math.random() * 0.1 + 0.1;\n }\n \n update() {\n const dx = this.effect.mouse.x - this.x;\n const dy = this.effect.mouse.y - this.y;\n const distance = dx * dx + dy * dy;\n \n if (distance < this.effect.mouse.radius) {\n const angle = Math.atan2(dy, dx);\n const force = -this.effect.mouse.radius \/ distance;\n this.vx += force * Math.cos(angle);\n this.vy += force * Math.sin(angle);\n }\n \n this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease;\n this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease;\n }\n \n draw() {\n this.effect.ctx.fillStyle = this.color;\n this.effect.ctx.fillRect(this.x, this.y, this.size, this.size);\n }\n }\n\n class Effect {\n constructor(canvas, ctx, settings) {\n this.canvas = canvas;\n this.ctx = ctx;\n this.width = canvas.width;\n this.height = canvas.height;\n this.settings = settings;\n \n this.particles = [];\n this.gap = settings.gap;\n this.mouse = {\n x: this.width \/ 2,\n y: this.height \/ 2,\n radius: settings.mouseRadius\n };\n \n canvas.addEventListener(\"mousemove\", e => {\n this.mouse.x = e.clientX;\n this.mouse.y = e.clientY;\n });\n \n canvas.addEventListener(\"touchmove\", e => {\n e.preventDefault();\n if (e.touches.length > 0) {\n this.mouse.x = e.touches[0].clientX;\n this.mouse.y = e.touches[0].clientY;\n }\n }, { passive: false });\n }\n \n wrapText(text) {\n this.ctx.font = `${this.settings.fontSize}px Sigmar`;\n this.ctx.textAlign = 'center';\n this.ctx.textBaseline = 'middle';\n this.ctx.strokeStyle = 'white';\n this.ctx.lineWidth = this.settings.lineWidth;\n this.ctx.letterSpacing = this.settings.letterSpacing;\n \n const gradient = this.ctx.createLinearGradient(\n 0, 0, \n this.width, this.height\n );\n gradient.addColorStop(0.2, 'red');\n gradient.addColorStop(0.5, 'fuchsia');\n gradient.addColorStop(1, 'purple');\n this.ctx.fillStyle = gradient;\n \n \n const fullTextWidth = this.ctx.measureText(text).width;\n const maxWidth = this.width * 0.85; \n if (fullTextWidth > maxWidth) {\n const scaleFactor = maxWidth \/ fullTextWidth;\n this.settings.fontSize = Math.max(20, this.settings.fontSize * scaleFactor * 0.85);\n this.ctx.font = `${this.settings.fontSize}px Sigmar`;\n }\n \n \n const textHeight = this.settings.fontSize * 1.2;\n const y = this.height \/ 2;\n \n this.ctx.fillText(text, this.width \/ 2, y);\n this.ctx.strokeText(text, this.width \/ 2, y);\n \n this.convertToParticles();\n }\n \n convertToParticles() {\n this.particles = [];\n const pixels = this.ctx.getImageData(0, 0, this.width, this.height).data;\n \n for (let y = 0; y < this.height; y += this.gap) {\n for (let x = 0; x < this.width; x += this.gap) {\n const index = (y * this.width + x) * 4;\n if (pixels[index + 3] > 0) {\n const color = `rgb(${pixels[index]},${pixels[index + 1]},${pixels[index + 2]})`;\n this.particles.push(new Particle(this, x, y, color));\n }\n }\n }\n \n this.ctx.clearRect(0, 0, this.width, this.height);\n }\n \n render() {\n this.particles.forEach(particle => {\n particle.update();\n particle.draw();\n });\n }\n }\n\n const effect = new Effect(canvas, ctx, settings);\n effect.wrapText(settings.text);\n\n function animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n effect.render();\n requestAnimationFrame(animate);\n }\n animate();\n\n window.addEventListener('resize', function() {\n initCanvas();\n effect.width = canvas.width;\n effect.height = canvas.height;\n effect.settings = getSettings();\n effect.wrapText(settings.text);\n });\n });\n <\/script>\n<\/body>\n<\/html> <\/div>\n<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"builder_content":"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"> <title>Particle Effect<\/title> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sigmar&display=swap\" rel=\"stylesheet\"> <\/head> <body> <canvas id=\"canvas1\"><\/canvas>\n <\/body> <\/html>","_links":{"self":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":15,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/pages\/2\/revisions\/128"}],"wp:attachment":[{"href":"https:\/\/www.3dfxlab.it\/test\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}