Scroll Manifesto

Installation

pnpm dlx shadcn@latest add @spaceui/components-spaceui-scroll-manifesto

Usage

import { ScrollManifesto } from '@/components/spaceui/scroll-manifesto'

export default function Mission() {
  return (
    <ScrollManifesto
      text="Ship the product only you can build. We made the rest move, sound and feel right."
      highlight={['only you']}
    />
  )
}

The statement stays pinned while the reader scrolls through scrollLength viewport heights, then lets the page continue. It pins inside the nearest scrolling ancestor (a preview pane, a modal) or the window, and shows the text fully revealed when the reader prefers reduced motion.