Overlapping Slider

A full-width landing row of portrait cards. They sit flat until you move — then the card on the left scales back.

Installation

terminal

pnpm dlx layro-cli add @iurvish/overlapping-slider

npx layro-cli add @iurvish/overlapping-slider

npx layro-cli add @iurvish/overlapping-slider

bunx layro-cli add @iurvish/overlapping-slider

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

Code

Demo

"use client";

import React, { useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export function sliderStep(cardWidth: number, overlapFactor: number, cardGap: number) {
  return Math.round(cardWidth - cardWidth * overlapFactor + cardGap);
}

export function snapSliderIndex(
  offsetX: number,
  step: number,
  velocity: number,
  total: number,