I built a collection of production-quality interaction prototypes to explore complex gestures, animations, and rendering techniques in React Native. Each project focuses on solving a single interaction challenge that can later be reused in production applications.

I keep a repository of standalone Expo apps where each project focuses on solving a single interaction challenge from gesture-driven interfaces and physics-based animations to custom rendering techniques. Each experiment is built from scratch with React Native, Reanimated, Gesture Handler, and Skia when needed, without relying on heavy UI libraries. The three below are a good cross-section of that practice: one is a rendering trick, one is a physics-style simulation, one is a gesture problem disguised as a UI component. Technologies

React Native

Expo

TypeScript

React Native Reanimated

React Native Gesture Handler

Skia

Most floating action buttons simply fade or scale into view. I wanted to create something that felt physically connected, where every button appeared to separate from a single liquid surface.

Built a metaball animation using Skia and Reanimated that allows multiple buttons to merge and separate naturally while remaining responsive to user interaction.

Custom metaball rendering

Physics-inspired motion

Smooth 60 FPS animations

Gesture-driven interactions

A chat app's floating action button that, on tap, splits into two action buttons with a liquid metaball look, the buttons visually fuse and separate like drops of liquid instead of just fading in.

The trick isn't really animation, it's rendering. Each circle (the FAB and its two actions) is drawn in a single Skia canvas layer with a blur pass followed by a color matrix that hard-thresholds the alpha. Blurred shapes that overlap blend into one soft blob, then the threshold snaps the edges back to solid, which is what makes two separate circles look like they're melting into and out of each other as they move apart. The actual tap targets are plain transparent buttons layered on top, positioned from the same spring-driven values that move the Skia circles, so the visual and the interaction stay in sync without duplicating logic.

Create a delete animation that feels satisfying instead of abruptly removing content.

Developed a particle-based dissolve effect where cards break into thousands of animated fragments before disappearing. The animation is fully reversible, allowing deleted items to seamlessly reappear when restored.

Particle simulation

Seeded random generation

Reverse animation support

High-performance rendering

A bookmarks board where deleting a card doesn't just remove it, the card crumbles into a cloud of tiles that scatter, spin, shrink, and fade before the card is actually gone (and it can run in reverse to "materialize" a card back in).

Under the hood, the card gets sliced into a grid of tiles and rendered as a single Skia sprite atlas rather than individual components, that's what keeps hundreds of moving tiles smooth on the UI thread. Every tile gets its own seeded random values for scatter angle, wind drift, lift, fall, wobble frequency, and spin, so the crumble reads as organic instead of a uniform grid falling apart in sync. A short frosted-blur cross-fade at the start hides the handoff between the static card and the particle version so there's no visible pop.

Recreate the experience of peeling a real sticky note from its corner instead of dragging a flat card.

Implemented custom geometry calculations that dynamically generate the fold based on the user's finger position. The interaction tracks gesture movement in real time, applies haptic feedback, and smoothly animates the note into contextual action zones.

Custom geometry calculations

Real-time gesture tracking

Dynamic fold rendering

Dock snapping animations

Haptic feedback

A notes screen where you long-press a note, drag it like you're peeling up its corner, and drop it onto one of a few action buttons in a dock, complete with a real paper-fold visual under your finger.

The fold isn't a fake corner graphic, it's computed geometry: given where your finger is, I calculate the actual fold line, clip the note's rectangle along it, and reflect the corner triangle across that line to get the "flap" shape, the same math you'd use for a literal paper fold. The gesture layer tracks proximity to each dock button in real time, fires haptics on hover and drop, and either snaps the note back with a spring or animates it into the dock and out of existence depending on where you let go. Why Expo for this

The whole point of these is speed from idea to something you can actually feel on a device. Expo removes the native build step for almost everything on this list, npx expo start, scan the QR code, and I'm testing gesture timing on a real phone within a couple of minutes. When I do need something native-feeling like Skia's canvas rendering, it's still a plain Expo project, no ejecting, no separate native module setup. That loop, idea in the morning, working prototype by the evening, is the only reason this repo has 17 of these instead of 2 or 3. Engineering Approach Every prototype follows the same principles:

Build interactions from first principles rather than relying on UI libraries.

Keep each project isolated for rapid experimentation.

Maintain smooth 60 FPS performance.

Design reusable implementations that can be adapted to production applications.

Explore advanced animation techniques while keeping the codebase clean and maintainable.

This collection has become my personal engineering playground for exploring advanced interaction design in React Native. Many of the techniques developed here have influenced production applications and serve as reusable references for future client work.

Advanced gesture systems

Physics-based animations

Skia rendering

Particle effects

Custom geometry

Performance optimization

Mobile interaction design

Animation architecture

Repo: https://github.com/onoja123/Mobile-experiments

Gooey FAB: https://github.com/onoja123/Mobile-experiments/tree/main/gooey-fab

Bookmark Dissolve: https://github.com/onoja123/Mobile-experiments/tree/main/bookmark-dissolve

Sticky Note Peel: https://github.com/onoja123/Mobile-experiments/tree/main/sticky-note-peel