framer-motionでページをふわっと表示させたい場合は以下のようにします。
<motion.div
animate={{opacity: 1}}
initial={{opacity: 0}}
exit={{opacity: 1}}
transition={{duration: 1.0}}>
現れる時(initial)は完全な透過状態にしておいて、終わりにopacityを0にして
完全に見えるように仕向けます。
animateはinitial~exitが終わった後の一連の状態を表します。
transtionで描画されるまでの間隔を指定します。
framer-motionを使うと透過の動きもここまで簡単にできます。