--- title: Building 4WIDE: Turning Distortion, Blur, and Motion... description: A case study on building the 4WIDE business website, covering the tech stack (Astro, GSAP, Three.js, headless WordPress, Swup) and three key interactive... canonical: https://daily.dev/posts/building-4wide-turning-distortion-blur-and-motion-into-a-coherent-experience-tygwihlhu twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience | daily.dev og:description: A case study on building the 4WIDE business website, covering the tech stack (Astro, GSAP, Three.js, headless WordPress, Swup) and three key interactive... og:url: https://daily.dev/posts/building-4wide-turning-distortion-blur-and-motion-into-a-coherent-experience-tygwihlhu og:image: https://api.daily.dev/og/posts/tyGwihlHu.png og:image:alt: Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience **[Codrops](https://daily.dev/sources/codrops)** · 6 min read · 3 upvotes · 0 comments ## Summary A case study on building the 4WIDE business website, covering the tech stack (Astro, GSAP, Three.js, headless WordPress, Swup) and three key interactive features: a curved distortion and blur effect on the About page with mobile performance optimizations, a parallax and RGB shift showcase page, and a dual-mode top page video with fisheye distortion. The author shares shader code snippets, GSAP ScrollTrigger parallax implementation, and specific mobile performance strategies including WebP images, reduced geometry segments, disabling blur on mobile, and setting low-power renderer preference. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Building Horeca: Advanced Motion Design in Webflow Without the Performance Trade-Offs](https://daily.dev/posts/building-horeca-advanced-motion-design-in-webflow-without-the-performance-trade-offs-isagsxnpf) · Codrops · 1 upvotes · 0 comments - [Building Seamless 3D Transitions with Webflow, GSAP, and Three.js](https://daily.dev/posts/building-seamless-3d-transitions-with-webflow-gsap-and-three-js-vkf3mp1qr) · Codrops · 3 upvotes · 0 comments - [Behind the KAI Design Dept. Experience: WebGL Line Blur, Video Scrubbing, and 3D Animation](https://daily.dev/posts/behind-the-kai-design-dept-experience-webgl-line-blur-video-scrubbing-and-3d-animation-stqjfzaua) · Codrops · 0 upvotes · 0 comments --- Tags: [#astro](https://daily.dev/tags/astro), [#threejs](https://daily.dev/tags/threejs), [#web-animation](https://daily.dev/tags/web-animation), [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/building-4wide-turning-distortion-blur-and-motion-into-a-coherent-experience-tygwihlhu) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience","url":"https://daily.dev/posts/building-4wide-turning-distortion-blur-and-motion-into-a-coherent-experience-tygwihlhu","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-4wide-turning-distortion-blur-and-motion-into-a-coherent-experience-tygwihlhu"},"datePublished":"2026-04-23T14:31:35.208Z","dateModified":"2026-05-28T02:14:21.242Z","description":"A case study on building the 4WIDE business website, covering the tech stack (Astro, GSAP, Three.js, headless WordPress, Swup) and three key interactive...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f90e945de4face83d7d6e980be07a7ef?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f90e945de4face83d7d6e980be07a7ef?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-4wide-turning-distortion-blur-and-motion-into-a-coherent-experience-tygwihlhu","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"astro,threejs,web-animation,webdev","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience"}]} ```