Fade-Up Reveal
Fades and slides content up as it scrolls into view. The clean scroll-entrance.
import { motion } from "framer-motion";
export function FadeUpReveal({ children }) {
return (
<motion.div
initial={{ opacity: 0, y: 26 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.6 }}
transition={{ duration: 0.6, ease: "easeOut" }}
>{children}</motion.div>
);
}How it works
Fade-Up Reveal is a hand-built scroll component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components