Demo: @zen/skia-motion från Gitea-registret, tre komponenter, gestbevis (biljett #72)

- .npmrc pekar på Gitea npm-registret (http://100.75.227.121:3030/api/packages/zenblazer/npm/)
- App.tsx importerar MotionProvider, CometTail (particles), HypnoticSpiral
  (hypnotic), MagneticButton (micro) i en GestureHandlerRootView
- bevis/ innehåller enhetsgrindens skärmdumpar (rörelse, gest, reduced
  motion) från Xiaomi 11T Pro, namngivna med apk_md5 e2adae75d6f789293d6504357ac810c3

App.tsx

@@ -1,20 +1,48 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { MotionProvider } from '@zen/skia-motion';
+import { CometTail } from '@zen/skia-motion/particles';
+import { HypnoticSpiral } from '@zen/skia-motion/hypnotic';
+import { MagneticButton } from '@zen/skia-motion/micro';
 
+// Demo-konsument för wayfinder-biljett #72 (karta #57): ett främmande
+// Expo SDK 57-projekt som installerar @zen/skia-motion från Gitea-registret
+// och ritar tre komponenter ur tre olika sub-exports.
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <GestureHandlerRootView style={styles.root}>
+      <MotionProvider>
+        <SafeAreaView style={styles.root}>
+          <ScrollView contentContainerStyle={styles.scroll}>
+            <Text style={styles.title}>@zen/skia-motion demo</Text>
+
+            <Text style={styles.label}>particles/CometTail — dra med fingret</Text>
+            <View style={styles.stage}>
+              <CometTail />
+            </View>
+
+            <Text style={styles.label}>hypnotic/HypnoticSpiral — håll för att strama åt</Text>
+            <View style={styles.stage}>
+              <HypnoticSpiral />
+            </View>
+
+            <Text style={styles.label}>micro/MagneticButton — dra knappen mot fingret</Text>
+            <View style={styles.stageSmall}>
+              <MagneticButton />
+            </View>
+          </ScrollView>
+        </SafeAreaView>
+      </MotionProvider>
+    </GestureHandlerRootView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+  root: { flex: 1, backgroundColor: '#0d0621' },
+  scroll: { padding: 16, gap: 12 },
+  title: { color: '#fff', fontSize: 20, fontWeight: '700', marginBottom: 8 },
+  label: { color: '#cbd5e1', fontSize: 14, marginTop: 16, marginBottom: 4 },
+  stage: { height: 260, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000' },
+  stageSmall: { height: 220, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000' },
 });