blast-motion

Name: blast-motion
Availability: InStock
Author: nabole05

Choreograph physics-based UI motion in React Native with Reanimated spring dynamics.

Updated Jan 25, 2026

Search Tags:#animation #react-native #motion #gestures #shared-element #reanimated #spring-physics

Ready to run

npx skills add https://github.com/Nabole05/mytrip-guru --skill blast-motion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: blast-motion
Source: https://github.com/Nabole05/mytrip-guru/tree/main/.agent/skills/blast-motion
Command: npx skills add https://github.com/Nabole05/mytrip-guru --skill blast-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a framework to design and implement fluid, physics-based UI motion in React Native, reducing stiff, linear transitions and bringing lifelike behavior to interfaces.

Core Features & Use Cases

Realistic spring physics using mass, damping, and stiffness to create natural motion.
Interactive interruptions and "Catch the view" behavior for responsive UIs.
Support for shared element transitions and staggered loading for lively screens.
Stack-ready with React Native Reanimated, react-native-gesture-handler, and Skia-based visuals for particles.

Quick Start

Create a motion sequence in a React Native app using Reanimated with spring physics to animate a view from start to end.

Frequently Asked Questions about blast-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create physics-based animations in React Native with spring dynamics?▼

Physics-based animations in React Native use spring dynamics with mass, damping, and stiffness to create natural motion. This approach replaces stiff, linear transitions with lifelike, fluid UI behavior orchestrated through Reanimated.

How do I implement shared element transitions and gesture interactions in React Native?▼

Shared element transitions and interactive gesture interruptions are implemented by stacking React Native Reanimated with react-native-gesture-handler. This enables responsive screens with staggered loading and interactive catch-the-view behavior.

What's the best way to handle interactive interruptions during a React Native animation?▼

Handling interactive interruptions requires deterministic motion control using spring physics. By adjusting mass, damping, and stiffness, your UI responsively catches views mid-animation and adapts to user gestures without breaking.

Does this physics-based motion approach work with React Native Skia for visual effects?▼

Yes, physics-based motion works with React Native Skia. The framework is stack-ready with Skia-based visuals, allowing you to render complex particle effects and custom visuals driven by the same spring dynamics.

Why do my React Native transitions look stiff and how can spring physics fix this?▼

Transitions look stiff when using linear animation curves. Applying mass, damping, and stiffness parameters introduces lifelike behavior, reducing mechanical motion and creating fluid micro-interactions across mobile interfaces.

Can I use Reanimated gesture handler for deterministic motion control in mobile apps?▼

Yes, Reanimated gesture handler can be used for deterministic motion control. It allows you to orchestrate physics-based UI motion by precisely tuning spring parameters for interactive mobile screens.