{"id":6,"date":"2026-04-03T17:18:52","date_gmt":"2026-04-03T17:18:52","guid":{"rendered":"https:\/\/2.dev-web.work\/?page_id=6"},"modified":"2026-04-22T07:38:33","modified_gmt":"2026-04-22T07:38:33","slug":"home","status":"publish","type":"page","link":"https:\/\/2.dev-web.work\/","title":{"rendered":"Home"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_0 et_pb_row et_pb_gutters1 et_block_row\">\n<div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div id=\"my-gl-slider\" class=\"swiper-gl\" style=\"width:100%; height:100vh;\">\n  <div class=\"swiper-wrapper\">\n    \n    <div class=\"swiper-slide\">\n      <img decoding=\"async\" class=\"swiper-gl-image\" src=\"https:\/\/2.dev-web.work\/wp-content\/uploads\/2026\/04\/Ferreira-De-Sa-1.webp\" \/>\n    <\/div>\n    <div class=\"swiper-slide\">\n      <img decoding=\"async\" class=\"swiper-gl-image\" src=\"https:\/\/2.dev-web.work\/wp-content\/uploads\/2026\/04\/Ferreira-De-Sa-2.webp\" \/>\n    <\/div>\n\t\t<div class=\"swiper-slide\">\n      <img decoding=\"async\" class=\"swiper-gl-image\" src=\"https:\/\/2.dev-web.work\/wp-content\/uploads\/2026\/04\/Ferreira-De-Sa-3.webp\" \/>\n    <\/div>\n    <div class=\"swiper-slide\">\n      <img decoding=\"async\" class=\"swiper-gl-image\" src=\"https:\/\/2.dev-web.work\/wp-content\/uploads\/2026\/04\/Ferreira-De-Sa-4.webp\" \/>\n    <\/div>\n    \n  <\/div>\n<\/div>\n\n\n<style>\n  #my-gl-slider {\n    width: 100%;\n    height: 100vh;\n  }\n  #my-gl-slider .swiper-slide {\n    overflow: hidden;\n  }\n  #my-gl-slider .swiper-gl-image {\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n  #my-gl-slider canvas {\n    width: 100% !important;\n    height: 100% !important;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n<\/style>\n\n<script>\nsetTimeout(function () {\n\n    const filterId = 'glass-transition';\n    $('body').append(`\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n             style=\"position:absolute;width:0;height:0;overflow:hidden\">\n            <defs>\n                <filter id=\"${filterId}\" x=\"-10%\" y=\"-10%\" width=\"120%\" height=\"120%\"\n                        color-interpolation-filters=\"sRGB\">\n                    <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.025\"\n                        numOctaves=\"3\" seed=\"5\" result=\"noise\"\/>\n                    <feDisplacementMap id=\"glass-disp\"\n                        in=\"SourceGraphic\" in2=\"noise\"\n                        scale=\"0\"\n                        xChannelSelector=\"R\" yChannelSelector=\"G\"\n                        result=\"displaced\"\/>\n                    <feColorMatrix in=\"displaced\" type=\"saturate\"\n                        values=\"0.8\" result=\"desat\"\/>\n                    <feComponentTransfer in=\"desat\" result=\"contrasted\">\n                        <feFuncR type=\"linear\" slope=\"1.05\" intercept=\"-0.025\"\/>\n                        <feFuncG type=\"linear\" slope=\"1.05\" intercept=\"-0.025\"\/>\n                        <feFuncB type=\"linear\" slope=\"1.05\" intercept=\"-0.025\"\/>\n                    <\/feComponentTransfer>\n                    <feComposite in=\"contrasted\" in2=\"SourceGraphic\" operator=\"in\"\/>\n                <\/filter>\n            <\/defs>\n        <\/svg>`);\n\n    const dispMap   = document.getElementById('glass-disp');\n    const speed     = 3500;\n    const peakScale = 80;\n    let animFrame   = null;\n    let startTime   = null;\n    let glCanvas    = null;\n    let isAnimating = false;\n\n    \/\/ Smooth bell: easeIn on the way up, easeOut on the way down\n    function smoothBell(t) {\n        const b = Math.sin(t * Math.PI);         \/\/ sine bell 0\u21921\u21920\n        return b * b * b;                        \/\/ cubic ease: very gentle at both ends\n    }\n\n    function animateGlass(timestamp) {\n        if (!startTime) startTime = timestamp;\n        const elapsed  = timestamp - startTime;\n        const progress = Math.min(elapsed \/ speed, 1);\n\n        const scale = peakScale * smoothBell(progress);\n        dispMap.setAttribute('scale', scale.toFixed(3));\n\n        if (progress < 1) {\n            animFrame = requestAnimationFrame(animateGlass);\n        } else {\n            \/\/ Animation done, scale back to exactly 0 \u2014 filter stays applied\n            dispMap.setAttribute('scale', '0');\n            isAnimating = false;\n        }\n    }\n\n    function startEffect() {\n        \/\/ Grab canvas once after SwiperGL creates it\n        if (!glCanvas) {\n            glCanvas = document.querySelector('#my-gl-slider canvas');\n            \/\/ Apply filter permanently \u2014 we only animate the scale value\n            if (glCanvas) glCanvas.style.filter = `url(#${filterId})`;\n        }\n\n        if (animFrame) cancelAnimationFrame(animFrame);\n        startTime   = null;\n        isAnimating = true;\n        animFrame   = requestAnimationFrame(animateGlass);\n    }\n\n    function stopEffect() {\n        \/\/ Do NOT cancel the animation here \u2014 let it finish naturally\n        \/\/ This avoids the jerk caused by abruptly stopping mid-curve\n        \/\/ If called before animation ends, just let it run to completion\n    }\n\n    new Swiper(\"#my-gl-slider\", {\n        modules: [SwiperGL],\n        effect: \"gl\",\n        speed: speed,\n        gl: { shader: \"morph-x\" },\n        loop: true,\n        autoplay: {\n            delay: 2500,\n            disableOnInteraction: false,\n        },\n        on: {\n            slideChangeTransitionStart: startEffect,\n            slideChangeTransitionEnd:   stopEffect,\n        }\n    });\n\n}, 500);\n<\/script><\/div><\/div>\n\n<div class=\"et_pb_image_0 et_pb_image et_pb_module et_flex_module\"><span class=\"et_pb_image_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/2.dev-web.work\/wp-content\/uploads\/2026\/04\/Group-81.svg\" title=\"Group 81\" width=\"755\" height=\"216\" srcset=\"https:\/\/2.dev-web.work\/wp-content\/uploads\/2026\/04\/Group-81.svg 755w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 755px, 100vw\" class=\"wp-image-87\" \/><\/span>\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>L\u2019agence de communication qui connecte<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>                        marques, architectes et designers.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":74,"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/2.dev-web.work\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}