An interactive menu where hovering each item triggers a unique image sliding in from off-screen with a rotation animation. The previous image stays as the background while the new image animates on top — creating a cinematic layered reveal. Built for portfolios, creative agencies, and fashion sites that need navigation as visually striking as the content itself.
Hover any menu item to trigger a unique image animation
Images slide in from bottom-left with rotation effect
Previous image becomes background for a layered depth effect
Smooth 1.25s animation with custom cubic-bezier easing
Default background image shown before any hover
Configurable image rotation angle (−45° to 45°)
Separate text and hover text color controls
Full typography controls — size, weight, spacing, line height
Adjustable gap between menu items
Configurable component padding
Mobile responsive — vertical layout under 768px
Reduced font size, gap and padding on mobile automatically
No dependencies
Content
Menu Items — title and image pair per item (up to any count)
Default Image — background image shown on load
Typography — font size, weight, letter spacing, line height
Colors — text color, hover text color
Layout — gap between items, component padding (0–200px)
Image — rotation angle (−45° to 45°)
Initial state — image at 125% top, −50% left, rotated −30°
Final state — image at 0% top, 0% left, no rotation
Easing — cubic-bezier 0.22, 1, 0.36, 1 for smooth deceleration
AnimatePresence with wait mode for clean layered transitions
startTransition for React 18 performance
Portfolio navigation · Creative agency websites · Fashion and photography showcases · Product category browsers · Interactive landing pages · Editorial navigation · Luxury brand sites
SEO Keywords
framer hover menu · framer image menu · framer interactive menu · framer navigation component · framer menu animation · framer hover image · framer creative menu · framer portfolio navigation · framer menu reveal · framer animated menu · framer image navigation · framer agency component · framer hover animation · framer code component · framer visual menu
Hamim Reza
