Mixtape Hero

Heroes

About

Old tape Hero/ Use it for your website

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

Code

How Mixtape Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import MixtapeHero from "@/components/ui/mixtape-hero"

const settings = {
  videoSrc: "https://cdn.21st.dev/assets/mirror/78/78feb42a8fc76315310e4085c3415c69625e3dc0762d099b4593cf8b4c99ef36.mp4",
  title: "Mixtape",
  script: "rewind to your youth",
  eyebrow: "Old School Sound · Est. 1987",
  lead: "Warm analog sound, the hiss of the reel and a Side B nobody ever skipped. Scroll to wind the tape back into the cassette.",
  primaryLabel: "Play Side A",
  secondaryLabel: "Tracklist",
  accent: "#F78C2B",
  rewindVh: 260,
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <MixtapeHero
      videoSrc={s.videoSrc}
      title={s.title}
      script={s.script}
      eyebrow={s.eyebrow}
      lead={s.lead}
      primaryLabel={s.primaryLabel}
      secondaryLabel={s.secondaryLabel}
      accent={s.accent}
      rewindVh={s.rewindVh}
    />
  )
}