Flowing Menu

Liquid menu with preview images and smooth GSAP transitions

Open in

Configuring your account...

Please wait while we prepare everything for you

Usage

import FlowingMenu from './FlowingMenu'

const demoItems = [
  { link: '#', text: 'Mojave', image: 'https://picsum.photos/600/400?random=1' },
  { link: '#', text: 'Sonoma', image: 'https://picsum.photos/600/400?random=2' },
  { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
  { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
];

<div style={{ height: '600px', position: 'relative' }}>
  <FlowingMenu items={demoItems} />
</div>

Props

PropTypeDefaultDescription
itemsFlowingMenuItem[]-Array of menu items
classNamestring''Additional CSS classes

FlowingMenuItem Interface

interface FlowingMenuItem {
  link: string;
  text: string;
  image: string;
}

Features

  • Liquid animations: Smooth GSAP-powered transitions
  • Image previews: Dynamic image previews on hover
  • 3D effects: Perspective and rotation animations
  • Responsive design: Adapts to mobile and desktop
  • Customizable styling: Easy to theme and customize