🍡 Mochi Motion

🍡 Mochi Motion

Professional spring animations for React & Next.js that feel like butter.

Mochi Motion brings world-class animation to your React applications with zero configuration. Built on Framer Motion with intelligent defaults, it delivers the smooth, bouncy animations you see in the best modern web apps.

✨ Why Mochi Motion?

It just works. Drop it in your React or Next.js app and get beautiful animations instantly. No complex configuration, no performance headaches, no framework lock-in.

Universal compatibility — Works with React, Next.js App Router, Pages Router, Vite, and Create React App
Professional spring physics — Four carefully tuned presets plus full customization
Performance optimized — Intersection Observer API with smart defaults
TypeScript native — Written in TypeScript with comprehensive type definitions
Production ready — 8KB compressed, battle-tested in real applications

📦 Installation

npm install mochi-motion framer-motion react-intersection-observer

That's it. No additional setup required.

🚀 Quick Start

React (Vite, CRA, or any React app)

import { ReactTransition, RevealOnScroll } from 'mochi-motion'

function App() {
  return (
    <ReactTransition>
      <RevealOnScroll effect="fade-up">
        <h1>Welcome to the future</h1>
      </RevealOnScroll>
    </ReactTransition>
  )
}

Next.js App Router

// app/layout.tsx
import { AppRouterTransition } from 'mochi-motion'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AppRouterTransition>
          {children}
        </AppRouterTransition>
      </body>
    </html>
  )
}

Next.js Pages Router

// pages/_app.tsx
import { PageTransition } from 'mochi-motion'

export default function App({ Component, pageProps }) {
  return (
    <PageTransition>
      <Component {...pageProps} />
    </PageTransition>
  )
}

🎬 Animation Effects

Mochi Motion includes eight carefully crafted animation effects. Each one uses professional spring physics that respond naturally to user interaction.

Fade Animations

<RevealOnScroll effect="fade-up">Content slides up smoothly</RevealOnScroll>
<RevealOnScroll effect="fade-down">Content drops down elegantly</RevealOnScroll>
<RevealOnScroll effect="fade-left">Content sweeps in from the right</RevealOnScroll>
<RevealOnScroll effect="fade-right">Content glides in from the left</RevealOnScroll>

Scale Animations

<RevealOnScroll effect="scale-up">Content zooms in with perfect timing</RevealOnScroll>
<RevealOnScroll effect="scale-down">Content emerges from larger scale</RevealOnScroll>

Special Effects

<RevealOnScroll effect="blur-up">Content focuses into clarity</RevealOnScroll>
<RevealOnScroll effect="rotate-up">Content spins into position</RevealOnScroll>

⚙️ Spring Physics

The magic happens in the spring configurations. We've spent months tuning these presets to feel just right in real applications.

Gentle

Soft, premium feel. Perfect for luxury brands and professional interfaces.

<RevealOnScroll preset="gentle">
  <Card>Elegant and refined</Card>
</RevealOnScroll>

Wobbly

Bouncy and engaging. Adds personality without being distracting.

<RevealOnScroll preset="wobbly">
  <Button>Fun and interactive</Button>
</RevealOnScroll>

Stiff

Quick and responsive. Great for dashboards and productivity apps.

<RevealOnScroll preset="stiff">
  <MenuItem>Snappy and efficient</MenuItem>
</RevealOnScroll>

Slow

Deliberate and thoughtful. Commands attention for important content.

<RevealOnScroll preset="slow">
  <CallToAction>Considered and impactful</CallToAction>
</RevealOnScroll>

🔥 Advanced Usage

Custom Spring Physics

When the presets aren't enough, dive into the physics:

<RevealOnScroll 
  preset="custom"
  spring={{
    stiffness: 200,  // How bouncy (80-300)
    damping: 12,     // How much it oscillates (8-30)
    mass: 1.2        // How heavy it feels (0.8-1.5)
  }}
>
  <Component />
</RevealOnScroll>

Staggered Animations

Create cascading effects that guide user attention:

function FeatureGrid({ features }) {
  return (
    <div className="grid">
      {features.map((feature, index) => (
        <RevealOnScroll
          key={feature.id}
          effect="fade-up"
          delay={index * 0.1}
        >
          <FeatureCard {...feature} />
        </RevealOnScroll>
      ))}
    </div>
  )
}

Performance Optimization

Fine-tune when animations trigger:

<RevealOnScroll 
  effect="fade-up"
  threshold={0.2}        // Trigger when 20% visible
  rootMargin="50px"      // Start 50px before entering viewport
  triggerOnce={true}     // Animate only once
>
  <ExpensiveComponent />
</RevealOnScroll>

💙 TypeScript Support

Mochi Motion is written in TypeScript with comprehensive type definitions. Everything is fully typed for the best developer experience.

Core Types

type AnimationEffect = 
  | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right'
  | 'scale-up' | 'scale-down' 
  | 'blur-up' | 'rotate-up'

type SpringPreset = 'gentle' | 'wobbly' | 'stiff' | 'slow' | 'custom'

interface SpringConfig {
  stiffness?: number  // 80-300
  damping?: number    // 8-30
  mass?: number       // 0.8-1.5
}

Component Props

interface RevealOnScrollProps {
  effect?: AnimationEffect
  preset?: SpringPreset
  spring?: SpringConfig
  delay?: number
  distance?: number
  scale?: number
  threshold?: number
  triggerOnce?: boolean
  children: React.ReactNode
  className?: string
}

Type-Safe Usage

import { RevealOnScroll, SpringConfig } from 'mochi-motion'

const customSpring: SpringConfig = {
  stiffness: 150,
  damping: 15,
  mass: 1.1
}

function TypedComponent() {
  return (
    <RevealOnScroll
      effect="scale-up"      // ✅ Fully typed
      preset="wobbly"        // ✅ Autocomplete works  
      spring={customSpring}  // ✅ Type checked
      delay={0.3}           // ✅ Number type enforced
    >
      <div>Perfectly type-safe animations</div>
    </RevealOnScroll>
  )
}

🌍 Real-World Examples

Landing Page Hero

function Hero() {
  return (
    <section>
      <RevealOnScroll effect="scale-up" preset="gentle" delay={0.1}>
        <h1>Your Product Name</h1>
      </RevealOnScroll>
      
      <RevealOnScroll effect="fade-up" preset="gentle" delay={0.3}>
        <p>The future of everything, available today.</p>
      </RevealOnScroll>
      
      <RevealOnScroll effect="fade-up" preset="wobbly" delay={0.5}>
        <button>Get Started</button>
      </RevealOnScroll>
    </section>
  )
}

Feature Showcase

function Features() {
  const features = [
    { title: "Lightning Fast", description: "Built for speed" },
    { title: "Rock Solid", description: "Never breaks" },
    { title: "Always Fresh", description: "Regular updates" }
  ]

  return (
    <div className="features-grid">
      {features.map((feature, i) => (
        <RevealOnScroll
          key={feature.title}
          effect="fade-up"
          preset="gentle"
          delay={i * 0.15}
        >
          <div className="feature-card">
            <h3>{feature.title}</h3>
            <p>{feature.description}</p>
          </div>
        </RevealOnScroll>
      ))}
    </div>
  )
}

Testimonial Section

function Testimonials() {
  return (
    <section>
      <RevealOnScroll effect="blur-up" preset="slow">
        <h2>What people are saying</h2>
      </RevealOnScroll>
      
      <div className="testimonials">
        <RevealOnScroll effect="fade-left" delay={0.2}>
          <TestimonialCard person="Sarah Chen" />
        </RevealOnScroll>
        
        <RevealOnScroll effect="scale-up" preset="wobbly" delay={0.4}>
          <TestimonialCard person="Marcus Johnson" featured />
        </RevealOnScroll>
        
        <RevealOnScroll effect="fade-right" delay={0.6}>
          <TestimonialCard person="Elena Rodriguez" />
        </RevealOnScroll>
      </div>
    </section>
  )
}

🔄 Migration Guide

From Pages Router to App Router

Before:

// pages/_app.tsx
import { PageTransition } from 'mochi-motion'

export default function App({ Component, pageProps }) {
  return (
    <PageTransition>
      <Component {...pageProps} />
    </PageTransition>
  )
}

After:

// app/layout.tsx
import { AppRouterTransition } from 'mochi-motion'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AppRouterTransition>
          {children}
        </AppRouterTransition>
      </body>
    </html>
  )
}

⚡ Performance Notes

Mochi Motion is built for production. Here's what we've optimized:

Intersection Observer API for efficient scroll detection
Hardware acceleration for all animations
Tree shaking support to keep bundles small
Smart defaults that work in 90% of cases
Minimal re-renders with optimized React patterns

Bundle Size

8.8 KB compressed (smaller than most images)
Tree shakable — import only what you use
Zero runtime dependencies — peer dependencies only

🌐 Browser Support

Mochi Motion works in all modern browsers:

Chrome/Edge: 88+
Firefox: 85+
Safari: 14+
React: 17.0.0+
Next.js: 12.0.0+

📖 API Reference

RevealOnScroll

The primary component for scroll-triggered animations.

Prop	Type	Default	Description
`effect`	`AnimationEffect`	`'fade-up'`	Animation type
`preset`	`SpringPreset`	`'gentle'`	Spring physics preset
`spring`	`SpringConfig`	—	Custom spring configuration
`delay`	`number`	`0`	Animation delay in seconds
`distance`	`number`	`50`	Slide distance in pixels
`scale`	`number`	`0.8`	Scale factor for scale animations
`threshold`	`number`	`0.1`	Intersection observer threshold
`triggerOnce`	`boolean`	`true`	Whether to animate only once

Page Transition Components

Component	Use Case
`ReactTransition`	Universal React apps (Vite, CRA)
`AppRouterTransition`	Next.js 13+ App Router
`PageTransition`	Next.js Pages Router

All transition components accept:

children: React node to animate
preset: Spring physics preset
className: Additional CSS classes

🤝 Contributing

Mochi Motion is open source and welcomes contributions. Found a bug or have a feature request? Open an issue.

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
node_modules		node_modules
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

License

mirayatech/mochi-motion

Folders and files

Latest commit

History

Repository files navigation

🍡 Mochi Motion

✨ Why Mochi Motion?

📦 Installation

🚀 Quick Start

React (Vite, CRA, or any React app)

Next.js App Router

Next.js Pages Router

🎬 Animation Effects

Fade Animations

Scale Animations

Special Effects

⚙️ Spring Physics

Gentle

Wobbly

Stiff

Slow

🔥 Advanced Usage

Custom Spring Physics

Staggered Animations

Performance Optimization

💙 TypeScript Support

Core Types

Component Props

Type-Safe Usage

🌍 Real-World Examples

Landing Page Hero

Feature Showcase

Testimonial Section

🔄 Migration Guide

From Pages Router to App Router

⚡ Performance Notes

Bundle Size

🌐 Browser Support

📖 API Reference

RevealOnScroll

Page Transition Components

🤝 Contributing

📄 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Languages