Suffle Hero

ShuffleHero: Dynamic Image Grid with Engaging Headline Elevate your landing pages with ShuffleHero, a captivating React component that combines a compelling headline and call to action with a mesmerizing, auto-shuffling image grid. This component is perfect for drawing immediate attention and showcasing visual content in a dynamic and unique way. Features Dynamic Image Grid: A 4x4 grid of images that automatically shuffles and re-arranges itself every three seconds. This subtle, continuous animation creates an engaging visual effect without being distracting. Smooth Transitions: Powered by Framer Motion, the image shuffling includes smooth, spring-like transitions, ensuring a polished and professional feel as the images re-position. Prominent Call to Action: The hero section includes a clear headline, a supportive paragraph, and a stylish button, designed to immediately convey your message and encourage user interaction. Responsive Layout: The component adapts gracefully to different screen sizes, displaying the text and image grid effectively on both mobile and desktop devices. How it Works ShuffleHero uses a combination of React's state management and Framer Motion for its animations: Image Shuffling Logic: A shuffle utility function randomly reorders the array of image data. useState and useEffect: These React hooks manage the state of the image grid, triggering re-renders and the shuffling animation at regular intervals. motion.div with layout: Framer Motion's motion.div and the layout prop are crucial for animating the position changes of the grid items when the squares state updates, creating the smooth shuffle effect. This component is an excellent choice for websites looking to make a strong visual impact, such as portfolios, creative agencies, or product landing pages that benefit from showcasing a variety of images.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Suffle Hero to your project and fits it to your theme.

import ShuffleHero from "@/components/ui/suffle-hero";

const DemoOne = () => {
  return <ShuffleHero />;
};

export { DemoOne };