A scroll-driven 3D hero with a fanned deck, detailed branching workflows, animated connection paths and a database-to-code-to-website sequence. Includes phone and landscape layouts, light and dark themes with navy canvases and colorful nodes, chapter navigation and a reduced-motion reading mode.
"use client";
import DimensionalWorkflowHero, { defaultHeroContent, type ScrollExperienceContent } from "@/components/ui/dimensional-workflow-hero";
const content: ScrollExperienceContent = {
...defaultHeroContent,
skip: { label: "Skip animated demonstration", target: "#original-end" },
finale: {
...defaultHeroContent.finale,
cta: { label: "Visit Automate Flows", href: "https://automateflows.io/" },
},
chapters: defaultHeroContent.chapters.map(chapter => chapter.kind === "build" ? {
...chapter,
finishedSite: {
src: "https://cdn.21st.dev/assets/mirror/a3/a30b6f9e3594c5496d9b4f2049ccc0bdaefb7e037398a6760782ba3aa67d5e1f.png",
alt: "YourPeptideIQ finished landing page with the See the whole protocol headline and vial artwork",
label: "YourPeptideIQ · Finished website",
width: 1292,
height: 778,
},
} : chapter),
};
export default function DimensionalWorkflowDemo() {
return <>
<DimensionalWorkflowHero content={content} />
<div id="original-end" tabIndex={-1} style={{ height: 1 }} />
</>;
}