![Summertime Sadness](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Flana-del-rey.jpeg&w=256&q=75)
Summertime Sadness
Lana Del Rey
![Mitran Di Chhatri](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fbabbu-maan.jpeg&w=256&q=75)
Mitran Di Chhatri
Babbu Maan
![For Whom The Bell Tolls](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fmetallica.jpeg&w=256&q=75)
For Whom The Bell Tolls
Metallica
![Stairway To Heaven](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fled-zeppelin.jpeg&w=256&q=75)
Stairway To Heaven
Led Zeppelin
![Toh Phir Aao](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Ftoh-phir-aao.jpeg&w=256&q=75)
Toh Phir Aao
Mustafa Zahid
Installation
Install dependencies
npm i framer-motion clsx tailwind-merge
Add util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Add useOutsideClick
hook
hooks/use-outside-click.ts
import React, { useEffect } from "react";
export const useOutsideClick = (
ref: React.RefObject<HTMLDivElement>,
callback: Function
) => {
useEffect(() => {
const listener = (event: any) => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
callback(event);
};
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);
return () => {
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
}, [ref, callback]);
};
Examples
Standard
![Summertime Sadness](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Flana-del-rey.jpeg&w=256&q=75)
Summertime Sadness
Lana Del Rey
![Mitran Di Chhatri](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fbabbu-maan.jpeg&w=256&q=75)
Mitran Di Chhatri
Babbu Maan
![For Whom The Bell Tolls](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fmetallica.jpeg&w=256&q=75)
For Whom The Bell Tolls
Metallica
![Stairway To Heaven](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fled-zeppelin.jpeg&w=256&q=75)
Stairway To Heaven
Led Zeppelin
![Toh Phir Aao](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Ftoh-phir-aao.jpeg&w=256&q=75)
Toh Phir Aao
Mustafa Zahid
Grid
![Summertime Sadness](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Flana-del-rey.jpeg&w=256&q=75)
Summertime Sadness
Lana Del Rey
![Mitran Di Chhatri](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fbabbu-maan.jpeg&w=256&q=75)
Mitran Di Chhatri
Babbu Maan
![For Whom The Bell Tolls](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Fmetallica.jpeg&w=256&q=75)
For Whom The Bell Tolls
Metallica
![Aap Ka Suroor](/_next/image?url=https%3A%2F%2Fassets.aceternity.com%2Fdemos%2Faap-ka-suroor.jpeg&w=256&q=75)
Aap Ka Suroor
Lord Himesh