A Humble Little “Video”
Sometimes, the simplest tricks are the most delightful. While making a sign-in page, I wanted to add a bit of life to an otherwise static image. Instead of embedding a video or GIF, I just animated the image slightly using Motion (Framer Motion’s successor).
The result? The background looks subtly alive, as if it were a video, but it’s really just a PNG moving gently within its container.
The Approach
All it took was wrapping the image in a <motion.div> and animating its position:
<motion.div
className="absolute inset-0"
animate={{
x: [0, 5, 0, -5, 0],
y: [0, -5, 0, 5, 0],
}}
transition={{
duration: 20,
ease: 'easeInOut',
repeat: Number.POSITIVE_INFINITY,
repeatType: 'mirror',
}}
>
<Image
src="/images/anime-bg.png"
alt="Background"
fill
className="object-cover"
priority
/>
</motion.div>No fancy assets, no performance hit—just a touch of motion. Sometimes, that’s all you need.
The code
Repository: github.com/feremabraz/reacreating-kling