——Card · Free
Active Bento Tile
The 2025/2026 "Active Grid" bento pattern: hover doesn't just change color, it swaps in a second content layer (here, a stat flips to a mini bar chart). Pure opacity/translate on hover — no layout-shifting grid, no video — so it's one drop-in Card entry rather than a whole grid system.
Live traffic
12.4k
This week
import { motion } from "framer-motion";
export function ActiveBentoTile() {
const bars = [40, 65, 50, 80, 60, 95, 70];
return (
<motion.div
initial="rest"
whileHover="hover"
animate="rest"
className="relative h-[150px] w-full max-w-[320px] cursor-pointer overflow-hidden rounded-2xl border border-white/10 bg-[#0a0e1a] p-5"
>
<motion.div
variants={{ rest: { opacity: 1 }, hover: { opacity: 0 } }}
transition={{ duration: 0.2 }}
className="absolute inset-5"
>
<p className="text-[13px] font-medium text-white/70">Live traffic</p>
<p className="mt-1 text-[26px] font-semibold text-white">12.4k</p>
</motion.div>
<motion.div
variants={{ rest: { y: 20, opacity: 0 }, hover: { y: 0, opacity: 1 } }}
transition={{ duration: 0.25, ease: "easeOut" }}
className="absolute inset-5 flex flex-col justify-end"
>
<p className="text-[12px] text-white/60">This week</p>
<div className="mt-2 flex items-end gap-1.5">
{bars.map((h, i) => (
<span
key={i}
className="w-2.5 rounded-sm bg-[#4fa0ff]"
style={{ height: `${h * 0.5}px` }}
/>
))}
</div>
</motion.div>
</motion.div>
);
}How it works
Active Bento Tile is a hand-built card 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