dark-motion

Cinematic animation toolkit for React Native. Dark, moody, beautiful.

Zero dependencies. Just React Native's built-in Animated API.

Install

npm install dark-motion

Or just copy src/ into your project — it's that simple.

Components

Entrance Animations

import { FadeIn, SlideUp, SlideDown, SlideFade, ScaleIn, CinematicEntrance } from 'dark-motion';

// Soft fade
<FadeIn delay={200} duration={800}>
  <Text>appears softly</Text>
</FadeIn>

// Rise from below
<SlideUp delay={100} distance={40}>
  <View style={styles.card} />
</SlideUp>

// Fall from above
<SlideDown>
  <Text style={styles.header}>title</Text>
</SlideDown>

// Slide from left or right (chat bubbles)
<SlideFade from="left" delay={100}>
  <View style={styles.bubble} />
</SlideFade>

// Spring pop
<ScaleIn delay={200}>
  <Text>noted.</Text>
</ScaleIn>

// Wrap entire screen — slow fade + zoom
<CinematicEntrance>
  <SafeAreaView>{/* your screen */}</SafeAreaView>
</CinematicEntrance>

List Animations

import { StaggerItem } from 'dark-motion';

// Items appear one by one
{items.map((item, i) => (
  <StaggerItem key={i} index={i} delay={80}>
    <Card data={item} />
  </StaggerItem>
))}

Loop Animations

import { Breathe, GlowPulse, Float } from 'dark-motion';

// Slow living pulse
<Breathe minOpacity={0.4} maxOpacity={0.9} duration={3000}>
  <Text>tap to begin</Text>
</Breathe>

// Scale + opacity throb (CTAs, badges)
<GlowPulse duration={2000}>
  <View style={styles.badge}><Text>PRO</Text></View>
</GlowPulse>

// Gentle vertical drift
<Float distance={6} duration={2500}>
  <Image source={logo} />
</Float>

Text Effects

import { TypewriterText } from 'dark-motion';

// Characters appear one by one
<TypewriterText
  text="hey. what's on your mind?"
  speed={30}
  style={{ color: '#666', fontSize: 15 }}
  onComplete={() => setReady(true)}
/>

Indicators

import { ThinkingDots } from 'dark-motion';

// AI typing indicator — three pulsing dots
{loading && <ThinkingDots color="#7c8cf0" size={6} />}

Decorative

import { WaveLine, BarGrow } from 'dark-motion';

// Shimmering divider
<WaveLine color="rgba(157, 78, 221, 0.2)" />

// Chart bar that grows from zero
<BarGrow targetHeight={60} delay={i * 60} color="#7c8cf0"
  style={{ width: 20, borderRadius: 3 }}
/>

Hooks

import { useMoodTransition } from 'dark-motion';

const { progress, morphTo } = useMoodTransition();
// Call morphTo() on mood change, use progress.interpolate() for colors

Screen Transitions

Drop-in configs for React Navigation:

import { fadeTransition, slideUpTransition, scaleFadeTransition } from 'dark-motion';

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Chat" component={ChatScreen} options={scaleFadeTransition} />
  <Stack.Screen name="Journal" component={JournalScreen} options={fadeTransition} />
  <Stack.Screen name="Detail" component={DetailScreen} options={slideUpTransition} />
</Stack.Navigator>

| Transition | Effect | Best for | |---|---|---| | fadeTransition | Cross-fade dissolve | Most screens | | slowFadeTransition | Slow dramatic dissolve | Splash → Main | | slideUpTransition | Modal slide from bottom | Detail, paywall | | scaleFadeTransition | Zoom + fade | Immersive transitions |

Combining Effects

Nest components for layered animations:

// Floating, breathing prompt
<Float distance={5}>
  <Breathe minOpacity={0.4} maxOpacity={0.8}>
    <Text>"what's on your mind?"</Text>
  </Breathe>
</Float>

// Staggered list with cinematic screen entrance
<CinematicEntrance>
  {items.map((item, i) => (
    <StaggerItem key={i} index={i}>
      <Card data={item} />
    </StaggerItem>
  ))}
</CinematicEntrance>

Props Reference

| Component | Props | Defaults | |---|---|---| | FadeIn | delay, duration, style | 0, 800 | | SlideUp | delay, duration, distance, style | 0, 700, 30 | | SlideDown | delay, duration, distance, style | 0, 700, -20 | | SlideFade | from, delay, duration, distance, style | 'left', 0, 500, 40 | | ScaleIn | delay, duration, style | 0, 400 | | CinematicEntrance | duration, style | 1200 | | StaggerItem | index, delay, duration, style | -, 80, 600 | | Breathe | minOpacity, maxOpacity, duration, style | 0.4, 1, 3000 | | GlowPulse | minScale, maxScale, duration, style | 0.95, 1.05, 2000 | | Float | distance, duration, style | 6, 2500 | | TypewriterText | text, speed, style, onComplete | -, 30 | | ThinkingDots | color, size, style | '#555', 6 | | WaveLine | color, width, style | 'rgba(157,78,221,0.2)', '60%' | | BarGrow | targetHeight, delay, duration, color, style | -, 0, 800 |

Requirements

• React Native >= 0.70
• React >= 18

No other dependencies. Works with Expo and bare React Native.

License

MIT

Built by N30 Web