MCPcopy Index your code
hub / github.com/nandorojo/moti

github.com/nandorojo/moti @v0.30.0

repository ↗ · DeepWiki ↗ · release v0.30.0 ↗ · + Follow
156 symbols 419 edges 111 files 0 documented · 0% 1 cross-repo links updated 16mo agov0.30.0 · 2025-01-29★ 4,54430 open issues
README

The universal React Native animation library, powered by Reanimated 3.

<MotiView from={{ opacity: 0 }} animate={{ opacity: 1 }} />

Documentation & Examples

Next.js Conf

Screen Shot 2021-10-22 at 3 00 05 PM

I spoke at at Next.js Conf 2021 on October 26 about React Native + Next.js. Watch the video to see how we do it.

Highlights

  • Universal: works on all platforms
  • 60 FPS animations on the native thread
  • Mount/unmount animations, like framer-motion
  • Powered by Reanimated 3
  • Web support, out-of-the-box
  • Expo support
  • Intuitive API
  • Variants
  • Strong TypeScript support
  • Highly-configurable animations
  • Sequence animations
  • Loop & repeat animations

Preview

Follow

Follow me on Twitter to stay up to date.

Sponsor

Sponsorships via GitHub are appreciated.

Analytics by Splitbee.io

License

Moti has an MIT license. That said, a lot of free work goes into it, so if your company uses it, please sponsor, write a blog post, or tweet about it!

Extension points exported contracts — how you extend this code

HoverableProps (Interface)
(no doc)
packages/moti/src/interactions/pressable/hoverable.tsx
MotiPressableInteractionIds (Interface)
(no doc)
packages/moti/src/interactions/pressable/context.tsx
MotiProps (Interface)
(no doc)
packages/moti/src/core/types.ts

Core symbols most depended-on inside this repo

animation
called by 9
packages/moti/src/core/use-motify.ts
useMotiPressableContext
called by 7
packages/moti/src/interactions/pressable/context.tsx
useMotiPressable
called by 6
packages/moti/src/interactions/pressable/use-pressable.ts
motify
called by 6
packages/moti/src/core/motify.tsx
updateInteraction
called by 4
packages/moti/src/interactions/pressable/pressable.tsx
useFactory
called by 4
packages/moti/src/interactions/pressable/use-validate-factory-or-id.ts
useAnimationState
called by 4
packages/moti/src/core/use-animator/index.ts
interpolateProgress
called by 4
examples/sample/src/Gallery.tsx

Shape

Function 152
Interface 3
Class 1

Languages

TypeScript100%

Modules by API surface

packages/moti/src/core/use-motify.ts9 symbols
examples/sample/src/Moti.PressableMenu.tsx8 symbols
examples/sample/src/Gallery.tsx8 symbols
examples/sample/src/Ideas.tsx7 symbols
packages/moti/src/interactions/pressable/hoverable.tsx6 symbols
packages/moti/src/skeleton/skeleton.tsx4 symbols
packages/moti/src/core/use-dynamic-animation/index.ts4 symbols
packages/moti/src/core/use-animator/index.ts4 symbols
examples/sample/src/Perf.List.tsx4 symbols
examples/sample/src/Moti.Variants.tsx4 symbols
examples/sample/src/Measure.tsx4 symbols
docs/src/plugins/remark-npm2yarn/index.js4 symbols

Used by 1 indexed graphs manifest dependencies, hub-wide

Dependencies from manifests, versioned

@babel/core7.20.0 · 1×
@babel/helper-string-parser7.22.5 · 1×
@commitlint/config-conventional11.0.0 · 1×
@docusaurus/core2.0.0-alpha.70 · 1×
@docusaurus/preset-classic2.0.0-alpha.70 · 1×
@expo/next-adapter2.1.0 · 1×
@manypkg/cli0.17.0 · 1×
@mdx-js/react1.6.21 · 1×
@react-navigation/native6.1.18 · 1×
@types/jest26.0.15 · 1×
@typescript-eslint/eslint-plugin4.14.1 · 1×

For agents

$ claude mcp add moti \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact