A Compose Multiplatform port of the WWDC-style touch distortion effect. Drag across the screen to smear text with velocity-based directional motion blur and chromatic aberration — powered by AGSL shaders.

HelloDistort demo — touch-reactive chromatic aberration

Ported from the viral SwiftUI Metal shader by Daniel Kuntz (@dankuntz):

View original tweet

The original uses SwiftUI's DragGesture velocity + a Metal [[stitchable]] layer effect to create a touch-reactive chromatic smear:

[[stitchable]]
half4 w(float2 p, SwiftUI::Layer a, float2 l, float2 v) {
 float2 m = -v * pow(clamp(1-length(l-p)/190,0.,1.),2) * 1.5;
 half3 c = 0;
 for (float i = 0; i < 10; i++) {
 float s = .175 + .005*i;
 c += half3(a.sample(p+s*m).r, a.sample(p+(s+.025)*m).g, a.sample(p+(s+.05)*m).b);
 }
 return half4(c/10, 1);
}

This project ports that exact shader to AGSL for Compose Multiplatform.

• Kotlin Multiplatform + Compose Multiplatform
• AGSL (Android Graphics Shading Language) via RuntimeShader
• Exponential velocity smoothing for fluid drag tracking
• Targets: Android (API 26+), iOS (stub)

New to AGSL? Read What is AGSL? — a full breakdown of this shader explained in Android/Compose terminology, with a Compose ↔ AGSL mapping table.

./gradlew :composeApp:assembleDebug

Original Metal shader by Daniel Kuntz (@dankuntz). AGSL port for Compose Multiplatform.