{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "features-5", "title": "Features 5: scrolling product tour", "author": "Ballmac ", "description": "Numbered steps on the left; as each scrolls into view, a sticky panel on the right crossfades to its picture. On phones every step carries its own picture.", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/blocks/features-5/features-5.tsx", "content": "// Ballmac UI: Features 5. https://ui.ballmac.com/blocks/features-5\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Inbox, Link2, Lock, Sparkles, Tag, Workflow, Zap } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { Avatar, AvatarFallback } from \"@/components/ballmac/avatar\"\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype Features5Step = {\n /** Step title. */\n title: string\n /** One or two sentences. */\n description: string\n /** Short checked points under the description. */\n points?: string[]\n /** The sample picture shown beside the steps while this step is in view. Decorative: describe it in the text. Replaced by `image` when you set one. */\n visual?: React.ReactNode\n /** Your own picture for this step: an image URL (give it imageAlt), an object with alt text and a dark-mode file, or your own element. */\n image?: MediaSource\n /** Describes `image` when it is a plain URL. */\n imageAlt?: string\n}\n\ntype Features5Props = Omit, \"title\"> & {\n /** Label above the heading. */\n eyebrow?: string\n /** Section heading. */\n title?: string\n /** One sentence under the heading. */\n description?: string\n /** The steps, in order. */\n steps?: Features5Step[]\n}\n\n/* ----------------------------------------------------------------------------------------------\n * Sample visuals: small product panels drawn with theme tokens.\n * --------------------------------------------------------------------------------------------*/\n\nconst panel = \"bg-card w-full max-w-sm rounded-2xl border p-5 shadow-[0_30px_70px_-35px_rgb(0_0_0/0.4)]\"\n\nfunction CaptureVisual() {\n const items = [\n { t: \"Pricing page feedback from Maya\", tag: \"Customer\", tone: \"bg-chart-1\" },\n { t: \"Ship the invoice export before Friday\", tag: \"Task\", tone: \"bg-chart-3\" },\n { t: \"Idea: weekly digest for admins\", tag: \"Idea\", tone: \"bg-chart-5\" },\n ]\n return (\n
\n
\n Inbox 3 new\n
\n
    \n {items.map((i) => (\n
  • \n \n {i.t}\n {i.tag}\n
    • \n ))}\n
\n
\n Paste a link or just start typing\n
\n
\n )\n}\n\nfunction OrganizeVisual() {\n const cols = [\n { name: \"Backlog\", cards: [\"Export to CSV\", \"Dark mode polish\"] },\n { name: \"In progress\", cards: [\"Invoice export\", \"Team roles\", \"Audit log\"] },\n { name: \"Done\", cards: [\"SSO setup\"] },\n ]\n return (\n
\n
\n Q4 roadmap\n
\n
\n {cols.map((c) => (\n
\n

{c.name}

\n
\n {c.cards.map((card) => (\n
{card}
\n ))}\n
\n
\n ))}\n
\n
\n )\n}\n\nfunction AutomateVisual() {\n const steps = [\n { icon: Zap, label: \"When\", value: \"An invoice is overdue 7 days\" },\n { icon: Workflow, label: \"Then\", value: \"Send a friendly reminder email\" },\n { icon: Link2, label: \"And\", value: \"Post to #finance in Slack\" },\n ]\n return (\n
\n
\n Overdue invoices Active\n
\n
    \n \n {steps.map(({ icon: Icon, label, value }) => (\n
  1. \n \n
    \n

    {label}

    \n

    {value}

    \n
    \n
    2. \n ))}\n
\n
\n )\n}\n\nfunction ShareVisual() {\n const people = [\n [\"MK\", \"Maya Kim\", \"Can edit\", \"bg-chart-1/25\"],\n [\"JO\", \"Jonas Ortiz\", \"Can comment\", \"bg-chart-3/25\"],\n [\"AS\", \"Amara Singh\", \"Can view\", \"bg-chart-5/25\"],\n ]\n return (\n
\n

Share “Q4 roadmap”

\n
\n {people.map(([i, n, r, c]) => (\n
\n {i}\n {n}\n {r}\n
\n ))}\n
\n
\n Only people with the link\n \n
\n
\n )\n}\n\nconst defaultSteps: Features5Step[] = [\n {\n title: \"Capture anything in seconds\",\n description: \"Notes, links and ideas land in one inbox the moment you have them, from the web, your phone or an email forward.\",\n points: [\"Paste a link to unfurl it\", \"Forward email to your inbox address\"],\n visual: ,\n },\n {\n title: \"Turn it into a plan\",\n description: \"Drag items onto a board, set an owner and a date, and watch the roadmap assemble itself.\",\n points: [\"Board, list and timeline views\", \"Owners and due dates on everything\"],\n visual: ,\n },\n {\n title: \"Automate the busywork\",\n description: \"Describe what should happen and when. Reminders, handoffs and status updates run on their own.\",\n points: [\"No code, no scripts\", \"Works with the tools you already use\"],\n visual: ,\n },\n {\n title: \"Share with exactly who needs it\",\n description: \"Invite teammates or send a link. Permissions are per item, and you can see who looked at what.\",\n points: [\"View, comment or edit\", \"Revoke access in one click\"],\n visual: ,\n },\n]\n\nfunction Features5({\n eyebrow = \"How it works\",\n title = \"From a loose idea to a shipped plan.\",\n description = \"Four steps, one workspace. Scroll to see each one.\",\n steps = defaultSteps,\n className,\n ...props\n}: Features5Props) {\n const [active, setActive] = React.useState(0)\n const refs = React.useRef<(HTMLLIElement | null)[]>([])\n const reduce = useReducedMotion()\n\n React.useEffect(() => {\n if (typeof IntersectionObserver === \"undefined\") return\n const nodes = refs.current.filter((n): n is HTMLLIElement => !!n)\n // A step becomes active when it crosses the middle band of the viewport.\n const observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) setActive(Number((entry.target as HTMLElement).dataset.index))\n }\n },\n { rootMargin: \"-45% 0px -45% 0px\" }\n )\n nodes.forEach((n) => observer.observe(n))\n return () => observer.disconnect()\n }, [steps.length])\n\n return (\n
\n
\n

{eyebrow}

\n

{title}

\n

{description}

\n
\n\n
\n
    \n {steps.map((step, i) => (\n {\n refs.current[i] = n\n }}\n data-index={i}\n data-active={active === i}\n className=\"group/step relative lg:flex lg:min-h-[26rem] lg:items-center\"\n >\n
    \n
    \n {/* Phones and tablets: the picture sits right under its step. */}\n
    {step.image ? : step.visual}
    \n \n ))}\n
\n\n
\n
\n
\n \n \n {steps[active]?.image ? : steps[active]?.visual}\n \n \n
\n
\n
\n
\n )\n}\n\nexport { Features5, type Features5Props, type Features5Step }\n", "type": "registry:component", "target": "@components/ballmac/blocks/features-5/features-5.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "features", "tour", "sticky", "scroll", "steps", "how it works" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A how-it-works section that shows the product as you read. Pass steps=[{ title, description, points?, visual }] where visual is any ReactNode.", "whenToUse": [ "Explaining a workflow in three to five steps", "Products where each step has a distinct screen" ], "whenNotToUse": [ "Long feature lists (use features-2)", "Pages without room to scroll" ], "composesWith": [ "hero-7", "logo-cloud-1", "testimonials-1", "cta-1" ], "a11y": [ { "keys": "Scroll", "action": "The picture is decorative and hidden from assistive technology, so every step must state what it shows in text" } ], "customization": [ "steps: { title, description, points?, visual }[]", "eyebrow, title, description props" ] }, "examples": [ "features-5-demo", "features-5-custom" ], "url": "https://ui.ballmac.com/components/features-5" }, "categories": [ "blocks", "features" ], "type": "registry:block" }