Motion Fossil

WebGPUThree.jsGesture HandlerSource

Prerequisites

This animation is built on the following libraries. expo install pins the versions that match your SDK, and the CLI tells you exactly which ones are missing when you add the component.


npx expo install three @react-three/fiber react-native-webgpu react-native-gesture-handler expo-blur expo-glass-effect expo-haptics react-native-safe-area-context @hugeicons/react-native @hugeicons/core-free-icons

Add @types/three as a dev dependency, and the react-native-webgpu plugin to your app.json:

{
  "expo": {
    "plugins": ["react-native-webgpu"]
  }
}

WebGPU also needs Metro to resolve three to its WebGPU build, and @react-three/fiber to its module entry on native:

metro.config.js

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName.startsWith('three')) {
    moduleName = 'three/webgpu';
  }

  if (platform !== 'web' && moduleName.startsWith('@react-three/fiber')) {
    return context.resolveRequest(
      {
        ...context,

        unstable_conditionNames: ['module'],

        mainFields: ['module'],
      },

      moduleName,

      platform,
    );
  }

  return context.resolveRequest(context, moduleName, platform);
};

Install


npx @rslab/cli add motion-fossil

Needs a custom development build, it does not run in Expo Go.

Usage

import { MotionFossil } from '@/components/ui/MotionFossil';

<MotionFossil accent="#D8663C" />;

How it works

Finger to 3D path. Gesture Handler samples the touch every few pixels and maps screen position plus velocity into three dimensional points. Fast strokes dive deeper into the scene, so the trace has real depth.
One ribbon buffer, no allocations. The trace lives in a single pre-allocated BufferGeometry. Each frame writes four vertices per point around the path tangent and grows the draw range, so the ribbon extends under your finger without rebuilding the mesh.
Crystallize on release. While drawing the material is emissive clay. On release one medium haptic commits the fossil and the material animates to reflective metal. Further drags rotate the preserved object.

Tuning

The 5 pixel sampling distance: trace density
The ribbon width in MotionFossilScene.tsx: physical weight
The gesture velocity multiplier: how dramatic the depth is

See exactly how this works with an RSLAB subscription.

Get Pro

Motion Fossil

Prerequisites

Install

Usage

On this page