{"id":7354,"date":"2024-08-28T12:43:25","date_gmt":"2024-08-28T12:43:25","guid":{"rendered":"https:\/\/mondesignweb.com\/?p=7354"},"modified":"2025-09-16T09:40:35","modified_gmt":"2025-09-16T09:40:35","slug":"curseur-neon","status":"publish","type":"post","link":"https:\/\/mondesignweb.com\/en\/neon-cursor\/","title":{"rendered":"Create a Neon Cursor Effect with Three.js: HTML, CSS, and JavaScript Tutorial"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"7354\" class=\"elementor elementor-7354\" data-elementor-post-type=\"post\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-038f71e elementor-hidden-desktop elementor-hidden-tablet e-flex e-con-boxed e-con e-child\" data-id=\"038f71e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;fixed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6335d6e elementor-widget elementor-widget-heading\" data-id=\"6335d6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Web Development<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d1f54f elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"1d1f54f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Create a Neon Cursor Effect with Three.js: HTML, CSS, and JavaScript Tutorial<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-7ac08a3 e-con-full e-flex e-con e-parent\" data-id=\"7ac08a3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-74cceee elementor-hidden-mobile e-flex e-con-boxed e-con e-child\" data-id=\"74cceee\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-effbc5c elementor-widget elementor-widget-heading\" data-id=\"effbc5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Web Development<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2b4727 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"a2b4727\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Create a Neon Cursor Effect with Three.js: HTML, CSS, and JavaScript Tutorial<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-7c09a26 elementor-hidden-desktop elementor-hidden-tablet e-flex e-con-boxed e-con e-child\" data-id=\"7c09a26\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-8946b8a e-flex e-con-boxed e-con e-child\" data-id=\"8946b8a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19d111d elementor-widget elementor-widget-heading\" data-id=\"19d111d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-4e66fbb e-con-full e-flex e-con e-child\" data-id=\"4e66fbb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25485ee elementor-widget elementor-widget-table-of-contents\" data-id=\"25485ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;exclude_headings_by_selector&quot;:[],&quot;headings_by_tags&quot;:[&quot;h2&quot;,&quot;h3&quot;],&quot;marker_view&quot;:&quot;bullets&quot;,&quot;icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;no_headings_message&quot;:&quot;Aucun titre n\\u2019a \\u00e9t\\u00e9 trouv\\u00e9 sur cette page.&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"table-of-contents.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-toc__header\">\n\t\t\t<h2 class=\"elementor-toc__header-title\">\n\t\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t<\/div>\n\t\t<div id=\"elementor-toc__25485ee\" class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<i class=\"elementor-toc__spinner eicon-animation-spin eicon-loading\" aria-hidden=\"true\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1676f5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"c1676f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-7c94de8 e-flex e-con-boxed e-con e-child\" data-id=\"7c94de8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-999ca60 elementor-widget elementor-widget-heading\" data-id=\"999ca60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introduction<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bafbbf2 elementor-widget elementor-widget-text-editor\" data-id=\"bafbbf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\">In this tutorial, we will learn how to create an impressive neon cursor effect using <strong>Three.js<\/strong>, <strong>HTML<\/strong>, <strong>CSS<\/strong>, and <strong>JavaScript<\/strong>. This effect adds a modern and interactive touch to your website. We will break down each part of the code so you can easily understand and customize this effect for your own projects.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5ed294 elementor-widget elementor-widget-heading\" data-id=\"b5ed294\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why Use a Neon Cursor Effect?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80ada11 elementor-widget elementor-widget-text-editor\" data-id=\"80ada11\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The neon cursor effect is an elegant visual addition that can enhance the user experience on your website. It follows the movement of the mouse, creating a dynamic glowing trail that captures attention. This type of effect is particularly suitable for portfolio websites, landing pages, or any site aiming to provide a unique and engaging user interaction. By using modern visual effects like a neon cursor, you can differentiate your website and make navigation more immersive.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d3f787 elementor-widget elementor-widget-heading\" data-id=\"0d3f787\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Required Tools and Technologies<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-548103b elementor-widget elementor-widget-text-editor\" data-id=\"548103b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To create this neon cursor effect, we will need several technologies and tools:<\/p><ul><li class=\"translation-block\"><strong>Three.js<\/strong>: a powerful JavaScript library for creating 3D graphics in the browser.<\/li><li class=\"translation-block\"><strong>HTML and CSS<\/strong>: to structure and style our web page.<\/li><li class=\"translation-block\"><strong>JavaScript<\/strong>: to animate and manage the user interaction with the cursor effect.<\/li><li class=\"translation-block\"><strong>Code Editor (such as VS Code)<\/strong>: to write and modify the code.<\/li><li class=\"translation-block\"><strong>Compatible Browsers<\/strong>: Modern browsers such as Chrome, Firefox, or Edge that support WebGL, which is required for running Three.js.<\/li><\/ul><p>This combination of tools will allow you to implement a high-performance and visually appealing neon cursor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a33f43f elementor-widget elementor-widget-heading\" data-id=\"a33f43f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML Page Structure<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b49771 elementor-widget elementor-widget-text-editor\" data-id=\"7b49771\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To begin, we will establish the basic HTML structure that will serve as the foundation for our neon cursor effect. Here is the basic HTML code:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5549c3 elementor-widget elementor-widget-code-highlight\" data-id=\"c5549c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard\">\n\t\t\t<pre data-line=\"10\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Neon Cursor<\/title>\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div id=\"app\">\r\n        <section class=\"hero\">\r\n            <div class=\"wrap-content\">\r\n              <h1 class=\"main-title\">Digital marketing agency <br> <strong>MonDesign Web<\/strong><\/h1>\r\n            <\/div>\r\n          <\/section>\r\n    <\/div>\r\n    <script src=\"index.js\" type=\"module\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da0ba8c elementor-widget elementor-widget-heading\" data-id=\"da0ba8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Explanation of the HTML Structure<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b14cc8 elementor-widget elementor-widget-text-editor\" data-id=\"5b14cc8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>DOCTYPE and HTML Structure<\/strong><\/span>: This document begins with the declaration <span style=\"color: #ffb200\"><code><\/code><\/span> to define the HTML version. Then, the document language is set to English using <code>lang=\"en\"<\/code>.<\/li>\n<li><span style=\"color: #ffb200;\"><strong>Head Section<\/strong><\/span> :\n<ul>\n<li class=\"translation-block\">The <span style=\"color: #ffb200\"><code>meta charset=\"UTF-8\"<\/code><\/span> ensures that the document uses UTF-8 character encoding.<\/li>\n<li class=\"translation-block\"><code><span style=\"color: #ffb200\">meta http-equiv=\"X-UA-Compatible\"<\/span><\/code> ensures compatibility with Internet Explorer.<\/li>\n<li><span style=\"color: #ffb200;\"><code>meta name=\"viewport\"<\/code><\/span> Make the page responsive.<\/li>\n<li>The link to the stylesheet <span style=\"color: #ffb200;\"><code>styles.css<\/code><\/span> defines the styles of the page.<\/li>\n<li>The script of <strong>Three.js<\/strong> is included via a CDN to facilitate the creation of graphical effects.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Body Section<\/strong> :\n<ul>\n<li>the <span style=\"color: #ffb200;\"><code>div<\/code><\/span> with the id <span style=\"color: #ffb200;\"><code>app<\/code><\/span> is the main container for our content.<\/li>\n<li>The section <span style=\"color: #ffb200;\"><code>hero<\/code><\/span> is where we place the main text with a centered layout.<\/li>\n<li>The script <span style=\"color: #ffb200;\"><code>index.js<\/code><\/span> is loaded at the end to ensure that the DOM is fully loaded before the JavaScript is executed.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8305a00 elementor-widget elementor-widget-heading\" data-id=\"8305a00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Setting Up CSS Styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89446ea elementor-widget elementor-widget-text-editor\" data-id=\"89446ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\">Next, we define the base styles for our effect in the <span style=\"color: #ffb200\">styles.css<\/span> file. Here is an example of CSS code:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dad505a elementor-widget elementor-widget-code-highlight\" data-id=\"dad505a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>:root {\r\n    --surface-900: #131320;\r\n    --primary-100: #B89CFC;\r\n}\r\n\r\nbody, html, #app {\r\n    margin: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n#app {\r\n    overflow: hidden;\r\n    touch-action: pan-up;\r\n    color: #ffffff;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    text-align: center;\r\n}\r\n\r\n#app canvas {\r\n    display: block;\r\n    position: fixed;\r\n    z-index: -1;\r\n    top: 0;\r\n    left: 0;\r\n}\r\n\r\n.hero {\r\n    height: 100vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: #FFFFFF;\r\n}\r\n\r\n.main-title {\r\n    font-size: 24px;\r\n    font-weight: 400;\r\n    color: #FFFFFF;\r\n}\r\n\r\n.main-title strong {\r\n    color: var(--primary-100);\r\n}\r\n\r\n@media screen and (min-width: 640px) {\r\n    .main-title {\r\n        font-size: 34px;\r\n    }\r\n}\r\n\r\n@media screen and (min-width: 1024px) {\r\n    .main-title {\r\n        font-size: 42px;\r\n    }\r\n}\r\n\r\n@media screen and (min-width: 1536px) {\r\n    .main-title {\r\n        font-size: 60px;\r\n    }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4027d2 elementor-widget elementor-widget-heading\" data-id=\"c4027d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">CSS Analysis:<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b347c8 elementor-widget elementor-widget-text-editor\" data-id=\"5b347c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>Base Styles<\/strong><\/span>: Default margins are removed, and the height and width are set to 100% for <span style=\"color: #ffb200\">body<\/span>, <span style=\"color: #ffb200\">html<\/span>, and <span style=\"color: #ffb200\">#app<\/span> so the cursor effect can cover the entire screen.<\/li><li class=\"translation-block\"><strong><span style=\"color: #ffb200\">#app Styles<\/span><\/strong>: <span style=\"color: #ffb200\">overflow: hidden<\/span> prevents unwanted scrolling, while <span style=\"color: #ffb200\">touch-action: pan-up<\/span> optimizes behavior on touch screens. The text is centered using <span style=\"color: #ffb200\">text-align: center<\/span>, and a dark background is used to highlight the neon effect.<\/li><li class=\"translation-block\"><strong><span style=\"color: #ffb200\">Canvas Positioning<\/span><\/strong>: The <span style=\"color: #ffb200\">canvas<\/span> used to draw the neon effect is positioned in the background with <span style=\"color: #ffb200\">z-index: -1<\/span>, allowing it to remain behind other elements.<\/li><li class=\"translation-block\"><strong><span style=\"color: #ffb200\">CSS Variables<\/span><\/strong>: CSS variables are used to easily manage colors and page themes.<\/li><li class=\"translation-block\"><strong><span style=\"color: #ffb200\">Responsive Design<\/span><\/strong>: Font sizes for <span style=\"color: #ffb200\">.main-title<\/span> adjust according to screen width to ensure good readability on all devices.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24a2bf7 elementor-widget elementor-widget-heading\" data-id=\"24a2bf7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introduction to Three.js<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4038de7 elementor-widget elementor-widget-text-editor\" data-id=\"4038de7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\"><strong>Three.js<\/strong> is a JavaScript library that simplifies the creation of complex 3D graphics in the browser. It is essential for producing sophisticated visual effects, such as the neon cursor, by leveraging WebGL, an API used for 3D rendering.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c628ed elementor-widget elementor-widget-heading\" data-id=\"0c628ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Why Choose Three.js?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1262b8b elementor-widget elementor-widget-text-editor\" data-id=\"1262b8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\"><strong>Three.js<\/strong> is widely adopted for its ease of use compared to other more complex 3D libraries. It offers great flexibility and a wide range of features for creating animations and interactive graphics. For our neon cursor, Three.js allows us to easily manipulate shaders and 3D objects needed to produce realistic glowing effects.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ddeca78 elementor-widget elementor-widget-heading\" data-id=\"ddeca78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Implementing JavaScript for the Neon Effect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6e8ce1 elementor-widget elementor-widget-text-editor\" data-id=\"c6e8ce1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>JavaScript is the key to animating and managing the behavior of the neon cursor. We will use <strong>Three.js<\/strong> to initialize and control this effect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21175c7 elementor-widget elementor-widget-heading\" data-id=\"21175c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Basic JavaScript Code<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-861ea0c elementor-widget elementor-widget-text-editor\" data-id=\"861ea0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\">The following script should be placed in the <span style=\"color: #ffb200\">index.js<\/span> file:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4e6c6a elementor-widget elementor-widget-code-highlight\" data-id=\"f4e6c6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard\">\n\t\t\t<pre data-line=\"4\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import { neonCursor } from 'https:\/\/unpkg.com\/threejs-toys@0.0.8\/build\/threejs-toys.module.cdn.min.js';\r\n\r\nconst root = document.getElementById(\"app\");\r\n\r\nconst options = {\r\n    el: root,\r\n    shaderPoints: 20,\r\n    curvePoints: 88,\r\n    curveLerp: 0.8,\r\n    radius1: 5,\r\n    radius2: 25,\r\n    velocityTreshold: 10,\r\n    sleepRadiusY: 200,\r\n    sleepRadiusX: 200,\r\n    sleepTimeCoefX: 0.0025,\r\n    sleepTimeCoefY: 0.0025\r\n};\r\n\r\nneonCursor(options);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58b5a65 elementor-widget elementor-widget-heading\" data-id=\"58b5a65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Explanation of the JavaScript Code<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-537b21f elementor-widget elementor-widget-text-editor\" data-id=\"537b21f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>Importing Three.js<\/strong><\/span>: We import the <span style=\"color: #ffb200\">neonCursor<\/span> function from the <span style=\"color: #ffb200\">threejs-toys<\/span> library, a module that simplifies the use of <span style=\"color: #ffb200\">Three.js<\/span> for this specific effect.<\/li><li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>Cursor Options<\/strong><\/span>: The code uses several parameters to define the behavior and appearance of the neon cursor, such as <span style=\"color: #ffb200\">shaderPoints<\/span> (number of glowing points), <span style=\"color: #ffb200\">curvePoints<\/span> (number of curve points), and <span style=\"color: #ffb200\">radius1<\/span> and <span style=\"color: #ffb200\">radius2<\/span> (the radii of the cursor trail). These options allow you to customize the effect very precisely.<\/li><li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>Initialization<\/strong><\/span>: By calling <span style=\"color: #ffb200\">neonCursor(options)<\/span>, we apply the neon effect to the specified HTML element, here the container with the id <span style=\"color: #ffb200\">app<\/span>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-339fde7 elementor-widget elementor-widget-code-highlight\" data-id=\"339fde7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard\">\n\t\t\t<pre data-line=\"4\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const options = {\r\n    el: root,\r\n    shaderPoints: 20,\r\n    curvePoints: 88,\r\n    curveLerp: 0.8,\r\n    radius1: 5,\r\n    radius2: 25,\r\n    velocityTreshold: 10,\r\n    sleepRadiusY: 200,\r\n    sleepRadiusX: 200,\r\n    sleepTimeCoefX: 0.0025,\r\n    sleepTimeCoefY: 0.0025\r\n};\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc2e433 elementor-widget elementor-widget-text-editor\" data-id=\"fc2e433\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>el: root<\/code><\/strong><\/span>: Specifies the HTML element where the neon effect will be applied (the element with the id \u201capp\u201d).<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>shaderPoints: 20<\/code><\/strong><\/span>: Defines the number of glowing points of the cursor.<\/p><\/li><li><p><span style=\"color: #ffb200;\"><strong><code>curvePoints: 88<\/code><\/strong> <\/span>: Defines the number of points that form the curve followed by the cursor.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>curveLerp: 0.8<\/code><\/strong><\/span>: Controls the smoothness of the curve transitions for a smoother movement.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>radius1: 5<\/code><\/strong><\/span>: Determines the radius of the small sphere that represents the start of the cursor.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>radius2: 25<\/code><\/strong><\/span>: Determines the radius of the large sphere that forms the cursor trail.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>velocityTreshold: 10<\/code><\/strong><\/span>: Sets the minimum speed at which the cursor begins to move.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>sleepRadiusY: 200<\/code> and <code>sleepRadiusX: 200<\/code><\/strong><\/span>: Specify the cursor sensitivity when the mouse is idle.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>sleepTimeCoefX: 0.0025<\/code> and <code>sleepTimeCoefY: 0.0025<\/code><\/strong><\/span>: Control the cursor\u2019s reaction time when the mouse stops moving.<\/p><\/li><li><p class=\"translation-block\"><span style=\"color: #ffb200\"><strong><code>neonCursor(options)<\/code><\/strong><\/span>: Applies the neon effect using the options defined above.<\/p><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-036c499 elementor-widget elementor-widget-heading\" data-id=\"036c499\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Troubleshooting and Optimization<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-208d43b elementor-widget elementor-widget-text-editor\" data-id=\"208d43b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Even with well-structured code, adjustments may be necessary to optimize performance or resolve specific issues. Here are a few tips:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2be418 elementor-widget elementor-widget-text-editor\" data-id=\"e2be418\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>Error Checking<\/strong><\/span>: Use the browser console to identify JavaScript errors that might prevent the cursor from functioning correctly.<\/li><li class=\"translation-block\"><span style=\"color: #ffb200\"><strong>Performance Optimization<\/strong><\/span>: Reduce the number of glowing points or adjust parameters to lighten the load on the GPU, especially on mobile devices.<\/li><li class=\"translation-block\"><strong><span style=\"color: #ffb200\">Browser Compatibility<\/span><\/strong>: Make sure your effect works well on all modern browsers. Test regularly on different platforms to avoid incompatibilities.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2ed40c elementor-widget elementor-widget-heading\" data-id=\"a2ed40c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Tests et Validation<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68a7e05 elementor-widget elementor-widget-text-editor\" data-id=\"68a7e05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It is crucial to test your neon cursor effect on various browsers and devices to ensure a consistent and high-performance user experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c2770a elementor-widget elementor-widget-text-editor\" data-id=\"9c2770a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li class=\"translation-block\"><strong>Performance Testing<\/strong>: <span style=\"color: #ffffff\">Use tools like Google Lighthouse to analyze performance and the impact on your page\u2019s loading time.<\/span><\/li><li class=\"translation-block\"><strong>Compatibility Testing<\/strong>: <span style=\"color: #ffffff\">Check the display and behavior of the effect on browsers such as Chrome, Firefox, Edge, and Safari.<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2a7d60 elementor-widget elementor-widget-heading\" data-id=\"f2a7d60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Advanced Improvements<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a41d959 elementor-widget elementor-widget-text-editor\" data-id=\"a41d959\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #ffffff;\">Once you have mastered the basic effect, you can go further by adding advanced features to enhance your website\u2019s interactivity:<\/span><\/p><ul><li class=\"translation-block\"><strong>Custom Interactions<\/strong>: <span style=\"color: #ffffff\">For example, change the trail color based on user clicks or in response to specific events.<\/span><\/li><li class=\"translation-block\"><strong>Integration with Other Libraries<\/strong>: <span style=\"color: #ffffff\">Combine Three.js with other JavaScript libraries to add additional animations or more complex interactions.<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be0119d elementor-widget elementor-widget-heading\" data-id=\"be0119d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ef1ce4 elementor-widget elementor-widget-text-editor\" data-id=\"3ef1ce4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\">This tutorial has guided you step by step to create an impressive neon cursor effect using <strong>Three.js<\/strong>, <strong>HTML<\/strong>, <strong>CSS<\/strong>, and <strong>JavaScript<\/strong>. This effect adds a modern and dynamic touch to your website, making navigation more engaging. Feel free to customize the parameters and experiment with different configurations to adapt this effect to your specific needs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91f1114 elementor-widget elementor-widget-heading\" data-id=\"91f1114\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Share it<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-7fa02c8 e-con-full e-flex e-con e-child\" data-id=\"7fa02c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb11230 elementor-widget elementor-widget-button\" data-id=\"fb11230\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-whatsapp\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8bec4d elementor-widget elementor-widget-button\" data-id=\"e8bec4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-facebook-f\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df29a39 elementor-widget elementor-widget-button\" data-id=\"df29a39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-x-twitter\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c4fde2 elementor-widget-mobile__width-initial elementor-post-navigation-borders-yes elementor-widget elementor-widget-post-navigation\" data-id=\"5c4fde2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-navigation.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-post-navigation\" role=\"navigation\" aria-label=\"Post Navigation\">\n\t\t\t<div class=\"elementor-post-navigation__prev elementor-post-navigation__link\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/design-system\/\" rel=\"prev\"><span class=\"post-navigation__arrow-wrapper post-navigation__arrow-prev\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"171px\" height=\"171px\" viewbox=\"-2.4 -2.4 28.80 28.80\" fill=\"none\" stroke=\"#464951\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><rect x=\"-2.4\" y=\"-2.4\" width=\"28.80\" height=\"28.80\" rx=\"14.4\" fill=\"#464951\"><\/rect><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"><path d=\"M5 12H19M5 12L11 6M5 12L11 18\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/g><\/svg><span class=\"elementor-screen-only\">Prev<\/span><\/span><span class=\"elementor-post-navigation__link__prev\"><span class=\"post-navigation__prev--label\">Previous<\/span><\/span><\/a>\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-post-navigation__separator-wrapper\">\n\t\t\t\t\t<div class=\"elementor-post-navigation__separator\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"elementor-post-navigation__next elementor-post-navigation__link\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/visual-identity\/\" rel=\"next\"><span class=\"elementor-post-navigation__link__next\"><span class=\"post-navigation__next--label\">Next<\/span><\/span><span class=\"post-navigation__arrow-wrapper post-navigation__arrow-next\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"184px\" height=\"184px\" viewbox=\"-2.4 -2.4 28.80 28.80\" fill=\"none\" stroke=\"#ffffff\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><rect x=\"-2.4\" y=\"-2.4\" width=\"28.80\" height=\"28.80\" rx=\"14.4\" fill=\"#F8B018\"><\/rect><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"><path d=\"M5 12H19M19 12L13 6M19 12L13 18\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/g><\/svg><span class=\"elementor-screen-only\">Next<\/span><\/span><\/a>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-f9a2f51 e-flex e-con-boxed e-con e-child\" data-id=\"f9a2f51\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ebb5be5 elementor-widget elementor-widget-heading\" data-id=\"ebb5be5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\">Recent Post<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7753f2c elementor-widget__width-initial elementor-pagination-type-bullets elementor-pagination-position-outside elementor-widget elementor-widget-loop-carousel\" data-id=\"7753f2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;template_id&quot;:&quot;11966&quot;,&quot;_skin&quot;:&quot;post&quot;,&quot;slides_to_show&quot;:&quot;3&quot;,&quot;slides_to_show_tablet&quot;:&quot;2&quot;,&quot;slides_to_show_mobile&quot;:&quot;1&quot;,&quot;slides_to_scroll&quot;:&quot;1&quot;,&quot;edit_handle_selector&quot;:&quot;.elementor-loop-container&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;offset_sides&quot;:&quot;none&quot;,&quot;pagination&quot;:&quot;bullets&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"loop-carousel.post\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"swiper elementor-loop-container elementor-grid\" role=\"list\" dir=\"ltr\">\n\t\t\t\t<div class=\"swiper-wrapper\" aria-live=\"off\">\n\t\t<style id=\"loop-dynamic-11966\">.e-loop-item-9562 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .e-loop-item-9562 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/11\/19b4da95cac5abc45cd5fecee222fb7d-1.png\");}<\/style><style id=\"loop-11966\">.elementor-11966 .elementor-element.elementor-element-e0b6fe6{--display:flex;--min-height:420px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.84;--border-radius:30px 30px 30px 30px;--padding-top:6%;--padding-bottom:6%;--padding-left:6%;--padding-right:6%;}.elementor-11966 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .elementor-11966 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-11966 .elementor-element.elementor-element-e0b6fe6::before, .elementor-11966 .elementor-element.elementor-element-e0b6fe6 > .elementor-background-video-container::before, .elementor-11966 .elementor-element.elementor-element-e0b6fe6 > .e-con-inner > .elementor-background-video-container::before, .elementor-11966 .elementor-element.elementor-element-e0b6fe6 > .elementor-background-slideshow::before, .elementor-11966 .elementor-element.elementor-element-e0b6fe6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11966 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#020101A3;}.elementor-11966 .elementor-element.elementor-element-e0b6fe6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-theme-post-title .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-theme-post-title .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-11966 .elementor-element.elementor-element-d156807 .elementor-heading-title{font-family:\"Poppins\", Sans-serif;font-size:20px;font-weight:500;color:#FCFCFC;}.elementor-11966 .elementor-element.elementor-element-d156807 .elementor-heading-title a:hover, .elementor-11966 .elementor-element.elementor-element-d156807 .elementor-heading-title a:focus{color:#F8B018;}.elementor-11966 .elementor-element.elementor-element-d156807 .elementor-heading-title a{transition-duration:0s;}.elementor-widget-post-info .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-post-info .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-text, .elementor-widget-post-info .elementor-icon-list-text a{color:var( --e-global-color-secondary );}.elementor-widget-post-info .elementor-icon-list-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-post-info .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-post-info .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-11966 .elementor-element.elementor-element-566bb8c .elementor-icon-list-icon{width:14px;}.elementor-11966 .elementor-element.elementor-element-566bb8c .elementor-icon-list-icon i{font-size:14px;}.elementor-11966 .elementor-element.elementor-element-566bb8c .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}.elementor-11966 .elementor-element.elementor-element-566bb8c .elementor-icon-list-text, .elementor-11966 .elementor-element.elementor-element-566bb8c .elementor-icon-list-text a{color:#F8B018;}.elementor-11966 .elementor-element.elementor-element-566bb8c .elementor-icon-list-item{font-family:\"Poppins\", Sans-serif;font-size:14px;font-weight:700;}@media(min-width:768px){.elementor-11966 .elementor-element.elementor-element-e0b6fe6{--width:90%;}}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"11966\" class=\"elementor elementor-11966 swiper-slide e-loop-item e-loop-item-9562 post-9562 post type-post status-publish format-standard has-post-thumbnail hentry category-marketing-digital\" data-elementor-post-type=\"elementor_library\" role=\"group\" aria-roledescription=\"slide\" data-custom-edit-handle=\"1\">\n\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e0b6fe6 e-con-full e-flex e-con e-parent\" data-id=\"e0b6fe6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d156807 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d156807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/mondesignweb.com\/en\/your-hotel-or-riad-reservations\/\">Maximize Your Hotel or Riad Bookings with an Outstanding Website in 2024<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566bb8c elementor-widget elementor-widget-post-info\" data-id=\"566bb8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-5c35027 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/category\/marketing-digital\/\" class=\"elementor-post-info__terms-list-item\">Digital Marketing<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<style id=\"loop-dynamic-11966\">.e-loop-item-9493 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .e-loop-item-9493 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/11\/132577.jpg\");}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"11966\" class=\"elementor elementor-11966 swiper-slide e-loop-item e-loop-item-9493 post-9493 post type-post status-publish format-standard has-post-thumbnail hentry category-marketing-digital\" data-elementor-post-type=\"elementor_library\" role=\"group\" aria-roledescription=\"slide\" data-custom-edit-handle=\"1\">\n\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e0b6fe6 e-con-full e-flex e-con e-parent\" data-id=\"e0b6fe6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d156807 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d156807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/mondesignweb.com\/en\/creation-of-content-for-a-beauty-center\/\">The Recipe for Success: Producing Effective and Relevant Content for Your Beauty Center<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566bb8c elementor-widget elementor-widget-post-info\" data-id=\"566bb8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-5c35027 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/category\/marketing-digital\/\" class=\"elementor-post-info__terms-list-item\">Digital Marketing<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<style id=\"loop-dynamic-11966\">.e-loop-item-9325 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .e-loop-item-9325 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/11\/planMesa-de-trabajo-4.svg\");}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"11966\" class=\"elementor elementor-11966 swiper-slide e-loop-item e-loop-item-9325 post-9325 post type-post status-publish format-standard has-post-thumbnail hentry category-seo\" data-elementor-post-type=\"elementor_library\" role=\"group\" aria-roledescription=\"slide\" data-custom-edit-handle=\"1\">\n\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e0b6fe6 e-con-full e-flex e-con e-parent\" data-id=\"e0b6fe6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d156807 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d156807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/mondesignweb.com\/en\/seo-backlinks\/\">The Best SEO Backlink Strategies in 2024 for Optimal Ranking<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566bb8c elementor-widget elementor-widget-post-info\" data-id=\"566bb8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-5c35027 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/category\/seo\/\" class=\"elementor-post-info__terms-list-item\">Seo<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<style id=\"loop-dynamic-11966\">.e-loop-item-9251 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .e-loop-item-9251 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/11\/ai-technology-brain-background-digital-transformation-concept-scaled.jpg\");}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"11966\" class=\"elementor elementor-11966 swiper-slide e-loop-item e-loop-item-9251 post-9251 post type-post status-publish format-standard has-post-thumbnail hentry category-design-graphique\" data-elementor-post-type=\"elementor_library\" role=\"group\" aria-roledescription=\"slide\" data-custom-edit-handle=\"1\">\n\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e0b6fe6 e-con-full e-flex e-con e-parent\" data-id=\"e0b6fe6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d156807 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d156807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/mondesignweb.com\/en\/ui-ux\/\">Optimize your user experience with artificial intelligence: how AI can improve UI\/UX design<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566bb8c elementor-widget elementor-widget-post-info\" data-id=\"566bb8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-5c35027 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/category\/design-graphique\/\" class=\"elementor-post-info__terms-list-item\">Graphic Design<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<style id=\"loop-dynamic-11966\">.e-loop-item-9105 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .e-loop-item-9105 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/11\/6670554403818192bbd6eb06_UGC-creators-Kolsquare.webp\");}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"11966\" class=\"elementor elementor-11966 swiper-slide e-loop-item e-loop-item-9105 post-9105 post type-post status-publish format-standard has-post-thumbnail hentry category-marketing-digital\" data-elementor-post-type=\"elementor_library\" role=\"group\" aria-roledescription=\"slide\" data-custom-edit-handle=\"1\">\n\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e0b6fe6 e-con-full e-flex e-con e-parent\" data-id=\"e0b6fe6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d156807 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d156807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/mondesignweb.com\/en\/ugc-strategy\/\">Enhance the Impact of Your Content Strategy with UGC: How to Leverage User-Generated Content<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566bb8c elementor-widget elementor-widget-post-info\" data-id=\"566bb8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-5c35027 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/category\/marketing-digital\/\" class=\"elementor-post-info__terms-list-item\">Digital Marketing<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<style id=\"loop-dynamic-11966\">.e-loop-item-8950 .elementor-element.elementor-element-e0b6fe6:not(.elementor-motion-effects-element-type-background), .e-loop-item-8950 .elementor-element.elementor-element-e0b6fe6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/11\/121271.jpg\");}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"11966\" class=\"elementor elementor-11966 swiper-slide e-loop-item e-loop-item-8950 post-8950 post type-post status-publish format-standard has-post-thumbnail hentry category-marketing-digital\" data-elementor-post-type=\"elementor_library\" role=\"group\" aria-roledescription=\"slide\" data-custom-edit-handle=\"1\">\n\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-e0b6fe6 e-con-full e-flex e-con e-parent\" data-id=\"e0b6fe6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d156807 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d156807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/mondesignweb.com\/en\/public-cible\/\">Discover Your Target Audience in 5 Essential Steps<\/a><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566bb8c elementor-widget elementor-widget-post-info\" data-id=\"566bb8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-5c35027 elementor-inline-item\" itemprop=\"about\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-post-info__terms-list\">\n\t\t\t\t<a href=\"https:\/\/mondesignweb.com\/en\/category\/marketing-digital\/\" class=\"elementor-post-info__terms-list-item\">Digital Marketing<\/a>\t\t\t\t<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Developpement web Developpement web Sommaire Introduction Dans ce tutoriel, nous allons apprendre \u00e0 cr\u00e9er un effet de curseur n\u00e9on impressionnant en utilisant Three.js, HTML, CSS, et JavaScript. Cet effet apporte une touche moderne et interactive \u00e0 votre site web. Nous allons d\u00e9composer chaque partie du code pour que vous puissiez comprendre et personnaliser facilement cet [&hellip;]<\/p>","protected":false},"author":1,"featured_media":7370,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_vp_format_video_url":"","_vp_image_focal_point":[],"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[36],"tags":[],"class_list":["post-7354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.4 (Yoast SEO v25.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js | Mondesign Web<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ez un effet de curseur n\u00e9on avec Three.js, HTML, CSS et JavaScript. Suivez ce tutoriel pour un design web moderne et interactif.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mondesignweb.com\/en\/neon-cursor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js : Tutoriel HTML, CSS, et JavaScript\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9ez un effet de curseur n\u00e9on avec Three.js, HTML, CSS et JavaScript. Suivez ce tutoriel pour un design web moderne et interactif.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mondesignweb.com\/en\/neon-cursor\/\" \/>\n<meta property=\"og:site_name\" content=\"Mondesign Web\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Mondesign.Web\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-28T12:43:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-16T09:40:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"MondesignWeb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"MondesignWeb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/\"},\"author\":{\"name\":\"MondesignWeb\",\"@id\":\"https:\/\/mondesignweb.com\/#\/schema\/person\/029a8fe68cc473fa7ee0cedf60614932\"},\"headline\":\"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js : Tutoriel HTML, CSS, et JavaScript\",\"datePublished\":\"2024-08-28T12:43:25+00:00\",\"dateModified\":\"2025-09-16T09:40:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/\"},\"wordCount\":1431,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/mondesignweb.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif\",\"articleSection\":[\"d\u00e9veloppement web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/mondesignweb.com\/curseur-neon\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/\",\"url\":\"https:\/\/mondesignweb.com\/curseur-neon\/\",\"name\":\"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js | Mondesign Web\",\"isPartOf\":{\"@id\":\"https:\/\/mondesignweb.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif\",\"datePublished\":\"2024-08-28T12:43:25+00:00\",\"dateModified\":\"2025-09-16T09:40:35+00:00\",\"description\":\"Cr\u00e9ez un effet de curseur n\u00e9on avec Three.js, HTML, CSS et JavaScript. Suivez ce tutoriel pour un design web moderne et interactif.\",\"breadcrumb\":{\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mondesignweb.com\/curseur-neon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage\",\"url\":\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif\",\"contentUrl\":\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif\",\"width\":640,\"height\":360,\"caption\":\"curseur n\u00e9on\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mondesignweb.com\/curseur-neon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mondesignweb.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js : Tutoriel HTML, CSS, et JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mondesignweb.com\/#website\",\"url\":\"https:\/\/mondesignweb.com\/\",\"name\":\"Mondesign Web\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/mondesignweb.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mondesignweb.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mondesignweb.com\/#organization\",\"name\":\"Mondesign Web\",\"url\":\"https:\/\/mondesignweb.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mondesignweb.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/02\/MW-black-sign.png\",\"contentUrl\":\"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/02\/MW-black-sign.png\",\"width\":1541,\"height\":1732,\"caption\":\"Mondesign Web\"},\"image\":{\"@id\":\"https:\/\/mondesignweb.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Mondesign.Web\/\",\"https:\/\/www.instagram.com\/mondesign_web\/\",\"https:\/\/www.linkedin.com\/company\/mondesignweb\/\",\"https:\/\/www.tiktok.com\/@mondesign_web\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/mondesignweb.com\/#\/schema\/person\/029a8fe68cc473fa7ee0cedf60614932\",\"name\":\"MondesignWeb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mondesignweb.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9846aeac3b29bd86453edbaecdf847a57fe3289baef9034693df1f8ce41b2dd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9846aeac3b29bd86453edbaecdf847a57fe3289baef9034693df1f8ce41b2dd8?s=96&d=mm&r=g\",\"caption\":\"MondesignWeb\"},\"sameAs\":[\"https:\/\/mondesignweb.com\"],\"url\":\"https:\/\/mondesignweb.com\/en\/author\/mondesignweb\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Neon Cursor Effect with Three.js | Mondesign Web","description":"Create a Neon Cursor Effect with Three.js, HTML, CSS, and JavaScript. Follow this tutorial for a modern and interactive web design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mondesignweb.com\/en\/neon-cursor\/","og_locale":"en_US","og_type":"article","og_title":"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js : Tutoriel HTML, CSS, et JavaScript","og_description":"Cr\u00e9ez un effet de curseur n\u00e9on avec Three.js, HTML, CSS et JavaScript. Suivez ce tutoriel pour un design web moderne et interactif.","og_url":"https:\/\/mondesignweb.com\/en\/neon-cursor\/","og_site_name":"Mondesign Web","article_publisher":"https:\/\/www.facebook.com\/Mondesign.Web\/","article_published_time":"2024-08-28T12:43:25+00:00","article_modified_time":"2025-09-16T09:40:35+00:00","og_image":[{"url":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif","width":640,"height":360,"type":"image\/gif"}],"author":"MondesignWeb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"MondesignWeb","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mondesignweb.com\/curseur-neon\/#article","isPartOf":{"@id":"https:\/\/mondesignweb.com\/curseur-neon\/"},"author":{"name":"MondesignWeb","@id":"https:\/\/mondesignweb.com\/#\/schema\/person\/029a8fe68cc473fa7ee0cedf60614932"},"headline":"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js : Tutoriel HTML, CSS, et JavaScript","datePublished":"2024-08-28T12:43:25+00:00","dateModified":"2025-09-16T09:40:35+00:00","mainEntityOfPage":{"@id":"https:\/\/mondesignweb.com\/curseur-neon\/"},"wordCount":1431,"commentCount":0,"publisher":{"@id":"https:\/\/mondesignweb.com\/#organization"},"image":{"@id":"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage"},"thumbnailUrl":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif","articleSection":["d\u00e9veloppement web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mondesignweb.com\/curseur-neon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mondesignweb.com\/curseur-neon\/","url":"https:\/\/mondesignweb.com\/curseur-neon\/","name":"Create a Neon Cursor Effect with Three.js | Mondesign Web","isPartOf":{"@id":"https:\/\/mondesignweb.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage"},"image":{"@id":"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage"},"thumbnailUrl":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif","datePublished":"2024-08-28T12:43:25+00:00","dateModified":"2025-09-16T09:40:35+00:00","description":"Create a Neon Cursor Effect with Three.js, HTML, CSS, and JavaScript. Follow this tutorial for a modern and interactive web design.","breadcrumb":{"@id":"https:\/\/mondesignweb.com\/curseur-neon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mondesignweb.com\/curseur-neon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mondesignweb.com\/curseur-neon\/#primaryimage","url":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif","contentUrl":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif","width":640,"height":360,"caption":"curseur n\u00e9on"},{"@type":"BreadcrumbList","@id":"https:\/\/mondesignweb.com\/curseur-neon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mondesignweb.com\/"},{"@type":"ListItem","position":2,"name":"Cr\u00e9er un Effet de Curseur N\u00e9on avec Three.js : Tutoriel HTML, CSS, et JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/mondesignweb.com\/#website","url":"https:\/\/mondesignweb.com\/","name":"Mondesign Web","description":"","publisher":{"@id":"https:\/\/mondesignweb.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mondesignweb.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/mondesignweb.com\/#organization","name":"Mondesign Web","url":"https:\/\/mondesignweb.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mondesignweb.com\/#\/schema\/logo\/image\/","url":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/02\/MW-black-sign.png","contentUrl":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/02\/MW-black-sign.png","width":1541,"height":1732,"caption":"Mondesign Web"},"image":{"@id":"https:\/\/mondesignweb.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Mondesign.Web\/","https:\/\/www.instagram.com\/mondesign_web\/","https:\/\/www.linkedin.com\/company\/mondesignweb\/","https:\/\/www.tiktok.com\/@mondesign_web"]},{"@type":"Person","@id":"https:\/\/mondesignweb.com\/#\/schema\/person\/029a8fe68cc473fa7ee0cedf60614932","name":"MondesignWeb","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mondesignweb.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9846aeac3b29bd86453edbaecdf847a57fe3289baef9034693df1f8ce41b2dd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9846aeac3b29bd86453edbaecdf847a57fe3289baef9034693df1f8ce41b2dd8?s=96&d=mm&r=g","caption":"MondesignWeb"},"sameAs":["https:\/\/mondesignweb.com"],"url":"https:\/\/mondesignweb.com\/en\/author\/mondesignweb\/"}]}},"jetpack_featured_media_url":"https:\/\/mondesignweb.com\/wp-content\/uploads\/2024\/08\/curseur.gif","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/posts\/7354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/comments?post=7354"}],"version-history":[{"count":0,"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/posts\/7354\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/media\/7370"}],"wp:attachment":[{"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/media?parent=7354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/categories?post=7354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mondesignweb.com\/en\/wp-json\/wp\/v2\/tags?post=7354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}