Built on Motion (Framer Motion)

Animation on Scroll,
Made Simple

A lightweight, declarative animation library with 80+ ready-to-use animations. Just spread and go.

import { motion } from "motion/react";
import { fadeUpBlur } from "cnippet-aos";

function Hero() {
  return (
    <motion.h1 {...fadeUpBlur({ scroll: true, y: 50 })}>
      Hello World
    </motion.h1>
  );
}

Why cnippet-aos?

Everything you need for scroll animations, nothing you don't.

Zero Config

Sensible defaults out of the box. Just spread the props and you're done.

80+ Animations

Fades, slides, zooms, bounces, flips, reveals, and more.

TypeScript First

Full TypeScript support with autocomplete for all options.

Scroll & Hover

Scroll-triggered animations plus hover and tap interactions.

Animation Gallery

Explore all available animations. Hover to replay and copy code.

Smooth opacity transitions

fadeIn

fadeUp

fadeDown

fadeLeft

fadeRight

fadeInOut

fadeUpOut

Stagger Animations

Animate lists and grids with cascading delays. Perfect for card grids, navigation menus, and content reveals.

const containerProps = staggerFadeUp({
  staggerChildren: 0.1,
  delayChildren: 0.2,
  scroll: true,
});

<motion.ul {...containerProps}>
  {items.map((item) => (
    <motion.li
      key={item.id}
      variants={containerProps.variants.item}
    >
      {item.name}
    </motion.li>
  ))}
</motion.ul>

staggerFadeUp

Hover & Tap Interactions

Ready-made interaction states for buttons and interactive elements.

hoverLift

hoverGrow

hoverShrink

hoverTilt

hoverBounce

hoverShake

hoverPulse

fast

{"duration":0.3,"ease":"easeOu...

default

{"duration":0.6,"ease":"easeOu...

slow

{"duration":1,"ease":"easeInOu...

slower

{"duration":1.4,"ease":"easeIn...

bouncy

{"type":"spring","bounce":0.5,...

gentle

{"type":"spring","stiffness":1...

elastic

{"type":"spring","stiffness":4...

smooth

{"duration":0.6,"ease":[0.25,0...

apple

{"duration":0.5,"ease":[0.25,0...

snappy

{"duration":0.4,"ease":[0.16,1...

Built-in Presets

Common timing configurations ready to use. Mix and match with any animation.

import { presets, fadeUp } from "cnippet-aos";

// Use a preset
<motion.div {...fadeUp({ ...presets.bouncy })}>
  Bouncy fade up
</motion.div>

// Available presets:
// fast, default, slow, slower
// bouncy, gentle, elastic
// smooth, apple, snappy

Get Started in Seconds

Install the package and start animating. It's that simple.

npm install cnippet-aos motion

import { motion } from "motion/react";
import { fadeUpBlur } from "cnippet-aos";

export function MyComponent() {
  return (
    <motion.div {...fadeUpBlur({ scroll: true })}>
      ✨ Animated content
    </motion.div>
  );
}