A sophisticated React component for displaying music portfolios, discographies, or creative project collections with stunning interactive effects. Features include text scrambling animations on hover using GSAP, dynamic background image transitions, automatic idle animations, and full support for system dark/light themes.
Perfect for musicians, record labels, music producers, or creative agencies looking to showcase their work in an engaging, modern interface. The component offers a minimalist grid layout that transforms into an immersive visual experience through smooth animations and hover interactions
import MusicPortfolio from "@/components/ui/music-portfolio";
export default function DemoOne() {
const projectsData = [
{
id: 1,
artist: "YOUNG BROKE & LONELY",
album: "LONELY BOY",
category: "SINGLE",
label: "SELF RELEASED",
year: "2024",
image: "https://cdn.21st.dev/assets/mirror/d4/d4340c726554d9982f86c18eed4d079a4c5a6bf97055be6ac02c432b7b7d0359.jpg"
},
{
id: 2,
artist: "YOUNG BROKE & LONELY",
album: "IN YOUR MEMORY",
category: "SINGLE",
label: "SELF RELEASED",
year: "2024",
image: "https://cdn.21st.dev/assets/mirror/cb/cb0f44451826df84a363c19df179175775fe90c02e6b69207beb6e932e73c02c.jpg"
},
{
id: 3,
artist: "YOUNG BROKE & LONELY",
album: "WHO AM I?",
category: "SINGLE",
label: "SELF RELEASED",
year: "2023",
image: "https://cdn.21st.dev/assets/mirror/aa/aa85ff48215569a86fb50a604a38a5d189b48304e84c5c935bbc9fee321161c8.jpg"
},
{
id: 4,
artist: "YOUNG BROKE & LONELY",
album: "SINGLE MOM",
category: "SINGLE",
label: "SELF RELEASED",
year: "2023",
image: "https://cdn.21st.dev/assets/mirror/3d/3d17231b16fc5c76167dd50839c09d427403ead2a74e5c77fd4573a829fa0e25.jpg"
},
{
id: 5,
artist: "YOUNG BROKE & LONELY",
album: "GHOST",
category: "SINGLE",
label: "SELF RELEASED",
year: "2023",
image: "https://cdn.21st.dev/assets/mirror/12/1244231e754ad9955ba3d36d43d3333ec1d3b6d55cd156e1caa5e8b54d4e6668.jpg"
},
{
id: 6,
artist: "YOUNG BROKE & LONELY",
album: "DIFFICULTY",
category: "SINGLE",
label: "SELF RELEASED",
year: "2022",
image: "https://cdn.21st.dev/assets/mirror/2d/2dbbdeff8004bc7a38f63933de78195015f38a9d59553aef0755f38271208771.jpg"
},
// ... more projects
];
const config = {
timeZone: "America/New_York",
timeUpdateInterval: 1000,
idleDelay: 4000,
debounceDelay: 100
};
const socialLinks = {
spotify: "https://spotify.com/your-profile",
email: "mailto:your-email@example.com",
x: "https://x.com/your-handle"
};
const location = {
latitude: "40.7128° N",
longitude: "74.0060° W",
display: true
};
const callbacks = {
onProjectHover: (project) => console.log('Hovering:', project),
onProjectLeave: () => console.log('Left project'),
onContainerLeave: () => console.log('Left container'),
onIdleStart: () => console.log('Idle animation started'),
onThemeChange: (theme) => console.log(`Theme changed to: ${theme}`)
};
return (
<MusicPortfolio
PROJECTS_DATA={projectsData}
CONFIG={config}
SOCIAL_LINKS={socialLinks}
LOCATION={location}
CALLBACKS={callbacks}
/>
);
}