Scroll-driven image-sequence hero with floating glass step cards. Pin the page, scrub through hundreds of frames as the user scrolls, and reveal contextual cards at each segment. Inspired by Apple's product pages.
import { FrameSequenceHero, type FrameSequenceStep } from "@/components/ui/mac-book-neo-hero";
const FRAME_COUNT = 941;
const framePath = (i: number) =>
`https://raw.githubusercontent.com/duthiljean/hero-apple/main/frames/frame_${String(i).padStart(4, "0")}.jpg`;
const steps: FrameSequenceStep[] = [
{ from: 0.02, to: 0.28, color: "#ff9f3a", num: "01", total: "04", icon: "✦",
title: "Five vivid colors.",
description: "Bright yellow, soft pink, deep blue, silver, and midnight. Pick the one that's you.",
label: "Colors" },
{ from: 0.28, to: 0.55, color: "#ff6f9c", num: "02", total: "04", icon: "◐",
title: "A refined silhouette.",
description: "11.3 mm thin, 1.24 kg light. The most portable MacBook ever built.",
label: "Design" },
{ from: 0.55, to: 0.82, color: "#5e9bff", num: "03", total: "04", icon: "▣",
title: "A display that captivates.",
description: "Liquid Retina XDR, 1,000 nits sustained. ProMotion 120 Hz for silky-smooth motion.",
label: "Display" },
{ from: 0.82, to: 1.01, color: "#a37bff", num: "04", total: "04", icon: "⌁",
title: "Built to last all day.",
description: "Up to 22 hours of battery life. Whisper-quiet, wherever you go.",
label: "Battery" },
];
export default function Demo() {
return (
<FrameSequenceHero
frameCount={FRAME_COUNT}
framePath={framePath}
eagerCount={140}
scrollHeight="600vh"
brand={
<>
<span className="fsh-brand-dot" />
neo.
</>
}
navLinks={[
{ label: "Overview", href: "#" },
{ label: "Specs", href: "#" },
{ label: "Colors", href: "#" },
{ label: "Support", href: "#" },
]}
ctaLabel="Buy"
ctaHref="#"
title={
<>
<span className="fsh-title-dark">MacBook</span>{" "}
<span className="fsh-title-rainbow">Neo</span>
</>
}
subtitle="Scroll to explore."
steps={steps}
/>
);
}