Scroll Split Cards

One photograph that splits into three panels as you scroll, then flips to copy.

Installation

terminal

pnpm dlx layro-cli add @iurvish/scroll-split-cards

npx layro-cli add @iurvish/scroll-split-cards

npx layro-cli add @iurvish/scroll-split-cards

bunx layro-cli add @iurvish/scroll-split-cards

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import React, { useRef, type RefObject } from "react";
import { motion, useScroll, useTransform } from "framer-motion";

export type SplitCard = {
  title: string;
  description: string;
  bgColor: string;
  textColor: string;
  kicker?: string;
};

export type ScrollSplitCardsProps = {