Docs·Scroll Split Card

Scroll Split Card

A scroll-driven interactive card component that separates into three panels and flips to reveal custom content, inspired by high-end landing page motion.

Installation

pnpm dlx shadcn@latest add @componentry/scroll-split-card

Usage

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?

Contact on@harshjdhv

Scroll down

Going Zero to One

If you've navigating a new business unit, or a new venture entirely, or breaking into a new market.

Scaling from One to N

If you've achieved Product/Market Fit, and are looking to scale your business to new heights.

Need Quick Solutions

If you know exactly what you want and need a team that can step in and quickly help you with it.

So cool, right?

import { useRef } from "react"
import { ScrollSplitCard } from "@/components/ui/scroll-split-card"
export function Example() {
  const containerRef = useRef<HTMLDivElement>(null)

  return (
    <div ref={containerRef} className="h-full w-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
      <ScrollSplitCard
        containerRef={containerRef}
        imageSrc="https://images.unsplash.com/photo-1773058373644-74e4120bfc77?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        cards={[
        {
          title: "Going Zero to One",
          description: "If you've navigating a new business... breaking into a new market.",
          bgColor: "#e2e2e2",
          textColor: "#111111"
        },
        {
          title: "Scaling from One to N",
          description: "If you've achieved Product/Market Fit...",
          bgColor: "#1a5bcf",
          textColor: "#ffffff"
        },
        {
          title: "Need Quick Solutions",
          description: "If you know exactly what you want and need...",
          bgColor: "#1c1c1c",
          textColor: "#ffffff"
        }
      ]}
    />
  )
}