feat(example): add spin demo for infinite rotation

Adds SpinDemo with two examples:
- Infinite Z-axis rotation with loop: 'repeat'
- Rotation + scale with loop: 'reverse'

Author: EQuimper

example/src/demos/SpinDemo.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+import { Section } from '../components/Section';
+import { Button } from '../components/Button';
+
+export function SpinDemo() {
+  const [playing, setPlaying] = useState(false);
+  const [playingWithScale, setPlayingWithScale] = useState(false);
+  return (
+    <>
+      <Section title="Spin (Repeat Loop)">
+        {playing && (
+          <EaseView
+            initialAnimate={{ rotate: 0 }}
+            animate={{ rotate: 360 }}
+            transition={{
+              type: 'timing',
+              duration: 1000,
+              easing: 'linear',
+              loop: 'repeat',
+            }}
+            style={styles.box}
+          >
+            <View style={styles.indicator} />
+          </EaseView>
+        )}
+        <Button
+          label={playing ? 'Stop' : 'Start'}
+          onPress={() => setPlaying((p) => !p)}
+        />
+      </Section>
+      <Section title="Spin + Scale (Reverse Loop)">
+        {playingWithScale && (
+          <EaseView
+            initialAnimate={{ rotate: 0, scale: 0.8 }}
+            animate={{ rotate: 360, scale: 1.2 }}
+            transition={{
+              type: 'timing',
+              duration: 1500,
+              easing: 'easeInOut',
+              loop: 'reverse',
+            }}
+            style={styles.box}
+          >
+            <View style={styles.indicator} />
+          </EaseView>
+        )}
+        <Button
+          label={playingWithScale ? 'Stop' : 'Start'}
+          onPress={() => setPlayingWithScale((p) => !p)}
+        />
+      </Section>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: 80,
+    height: 80,
+    backgroundColor: '#4a90d9',
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingTop: 8,
+  },
+  indicator: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: '#fff',
+  },
+});

example/src/demos/index.ts

@@ -22,6 +22,7 @@ import { StyleReRenderDemo } from './StyleReRenderDemo';
 import { StyledCardDemo } from './StyledCardDemo';
 import { TransformOriginDemo } from './TransformOriginDemo';
 import { PerPropertyDemo } from './PerPropertyDemo';
+import { SpinDemo } from './SpinDemo';
 import { UniwindDemo } from './uniwind/UniwindDemo';
 
 interface DemoEntry {
@@ -75,6 +76,7 @@ export const demos: Record<string, DemoEntry> = {
     title: 'Uniwind',
     section: 'Style',
   },
+  'spin': { component: SpinDemo, title: 'Spin', section: 'Loop' },
   'pulse': { component: PulseDemo, title: 'Pulse', section: 'Loop' },
   'banner': { component: BannerDemo, title: 'Banner', section: 'Loop' },
   'interrupt': {