Core Products
Clean little interactions carrying the team on their back.
All
All
Clean little interactions carrying the team on their back.
A Telegram-inspired profile header where the avatar blob gooily detaches from a top pill and pops into a full profile photo as you pull the list down. The metaball merge/separation is rendered with a Skia ColorMatrix filter while a Reanimated scroll handler drives the radius, blur and snap behavior on the UI thread.
The gooey effect is a classic metaball trick: a Skia <Group> applies a Blur then a high-contrast alpha ColorMatrix so an overlapping Circle and RoundedRect visually merge and stretch apart. Scroll position is captured with useAnimatedScrollHandler and mapped through useDerivedValue/interpolate to the circle radius, blob scale and an expo-blur intensity, all on the UI thread via Reanimated v4 worklets. onEndDrag uses scrollTo to snap the avatar fully open or closed. Built on Expo SDK 56 with react-native-skia, react-native-reanimated and react-native-safe-area-context; the Skia layer keeps the gooey morph smooth on both iOS and Android. Note: notch / Dynamic Island offsets are device-specific, so pair with react-native-device-info to fine-tune positioning per device.
A denim zipper that unzips and parts the screen like a curtain. The pull rides down the seam, the teeth split open along a soft rounded V, then both fabric halves slide off-screen to reveal the app underneath. Great as a splash, intro, or screen-transition overlay.
An interactive x-ray effect that reveals a hidden image underneath a base photo through a circular mask the user drags around. Pan to move the lens and long-press to reset, perfect for product showcases, before/after reveals, or playful onboarding screens.
A full-screen animated swimming-pool water effect with drifting caustics, refraction ripples, and a buoyant rubber duck whose shadow wobbles on the tiled floor below. Built as a Skia runtime shader (SkSL) driven by Reanimated, it makes a great living background for splash screens, onboarding, or empty states.
