--- title: Magnetic Commerce: Building the Dash Creative Website description: A case study on building the Dash Creative agency website, centered on a 'magnetic commerce' branding concept. Covers the full stack (Figma, Webflow, GSAP,... canonical: https://daily.dev/posts/magnetic-commerce-building-the-dash-creative-website-piz3anoft twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Magnetic Commerce: Building the Dash Creative Website | daily.dev og:description: A case study on building the Dash Creative agency website, centered on a 'magnetic commerce' branding concept. Covers the full stack (Figma, Webflow, GSAP,... og:url: https://daily.dev/posts/magnetic-commerce-building-the-dash-creative-website-piz3anoft og:image: https://api.daily.dev/og/posts/pIZ3AnOfT.png og:image:alt: Magnetic Commerce: Building the Dash Creative Website 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. # Magnetic Commerce: Building the Dash Creative Website **[Codrops](https://daily.dev/sources/codrops)** · 6 min read · 2 upvotes · 0 comments ## Summary A case study on building the Dash Creative agency website, centered on a 'magnetic commerce' branding concept. Covers the full stack (Figma, Webflow, GSAP, custom WebGL) and dives deep into the hero background implementation: a fullscreen fragment shader that distorts a live video texture in response to cursor movement. Includes actual GLSL and JavaScript code showing the wave function, UV remapping, motion smoothing, and decay logic. Reflections touch on the challenge of cursor-only interactions on touch devices and the discipline of knowing when to stop adding effects. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I create a cursor-reactive distortion effect on a video background using a WebGL fragment shader? Remap the video's texture coordinates directly in a fragment shader rather than layering effects on top. Use the cursor position to define an area of influence via a smoothstep-based mask, and use the movement direction to control how a damped sine wave propagates the distortion, so the surface appears pulled rather than rippled around a fixed point. _See the full shader and JS smoothing code for cursor-driven video distortion curated on daily.dev._ ### How do you make a WebGL cursor effect feel like momentum instead of a simple hover reaction? Smooth and decay the interaction state in JavaScript before sending it to the shader: decay a motion target each frame, clamp and map it to a 0-1 range, then ease both the motion value and the direction vector toward their targets using per-frame interpolation. This lets the distortion keep drifting and settle gradually after the cursor stops, rather than snapping off instantly. _Developers refining pointer-driven motion design can track shader techniques like this on daily.dev._ ## Similar posts on daily.dev - [Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI](https://daily.dev/posts/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai-we76kcyl9) · Codrops · 33 upvotes · 2 comments - [Explore This Tactile UI Powered By Real-Time WebGL Shader](https://daily.dev/posts/explore-this-tactile-ui-powered-by-real-time-webgl-shader-unjsszd7a) · 80 LEVEL · 1 upvotes · 0 comments - [The Spark: Engineering an Immersive, Story-First Web Experience](https://daily.dev/posts/the-spark-engineering-an-immersive-story-first-web-experience-djgui8twi) · Codrops · 3 upvotes · 0 comments - [The Geometry of Movement: A Shopify-Powered Digital Tribute to Raymond Templier’s Modernist Vision](https://daily.dev/posts/the-geometry-of-movement-a-shopify-powered-digital-tribute-to-raymond-templier-s-modernist-vision-ecj9tp4kg) · Codrops · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#game-development](https://daily.dev/tags/game-development), [#nocode](https://daily.dev/tags/nocode), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/magnetic-commerce-building-the-dash-creative-website-piz3anoft) ```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":"Magnetic Commerce: Building the Dash Creative Website","url":"https://daily.dev/posts/magnetic-commerce-building-the-dash-creative-website-piz3anoft","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/magnetic-commerce-building-the-dash-creative-website-piz3anoft"},"datePublished":"2026-07-21T12:50:43.734Z","dateModified":"2026-09-14T06:26:01.172Z","description":"A case study on building the Dash Creative agency website, centered on a 'magnetic commerce' branding concept. Covers the full stack (Figma, Webflow, GSAP,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8882acc37dff885b5c729fe8ec8c3856?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8882acc37dff885b5c729fe8ec8c3856?_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/magnetic-commerce-building-the-dash-creative-website-piz3anoft","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,game-development,nocode,creative-coding","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":"Magnetic Commerce: Building the Dash Creative Website"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/magnetic-commerce-building-the-dash-creative-website-piz3anoft#faq","mainEntity":[{"@type":"Question","name":"How can I create a cursor-reactive distortion effect on a video background using a WebGL fragment shader?","acceptedAnswer":{"@type":"Answer","text":"Remap the video's texture coordinates directly in a fragment shader rather than layering effects on top. Use the cursor position to define an area of influence via a smoothstep-based mask, and use the movement direction to control how a damped sine wave propagates the distortion, so the surface appears pulled rather than rippled around a fixed point. See the full shader and JS smoothing code for cursor-driven video distortion curated on daily.dev."}},{"@type":"Question","name":"How do you make a WebGL cursor effect feel like momentum instead of a simple hover reaction?","acceptedAnswer":{"@type":"Answer","text":"Smooth and decay the interaction state in JavaScript before sending it to the shader: decay a motion target each frame, clamp and map it to a 0-1 range, then ease both the motion value and the direction vector toward their targets using per-frame interpolation. This lets the distortion keep drifting and settle gradually after the cursor stops, rather than snapping off instantly. Developers refining pointer-driven motion design can track shader techniques like this on daily.dev."}}]} ```