Overlap Sections

Stack page sections so the next rounded panel slides over the one you just read.

Dependencies: gsap
Size: 391 lines
Controls: 5 controls

example.tsx

1import { OverlapSections } from "@/components/onycx/overlap-sections";23export default function Example() {4  return (5    <OverlapSections6      radius={32}7      overlap={42}8      scrub={0.65}9      hold10      accent={"#ffc7c3"}11    />12  );13}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/overlap-sections.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/overlap-sections.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the overlap-sections.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
sections	OverlapSection[]	—	{ variant: 'atelier' \| 'nocturne' \| 'silk' \| 'invitation', eyebrow?, heading, body?, image?, imageAlt?, caption?, ctaLabel?, href? }; \| breaks heading lines.
radius	number	32	Settled radius; phones use min(25, radius).
overlap	number	42	Negative top margin of every chapter after the first (px); the inset nocturne adds 14px, phones use 34px.
scrub	number	0.65	Scrub smoothing of the rise.
hold	boolean	true	Make the previous chapter sticky (when shorter than 1.5 viewports) so the next sheet covers it.
accent	string	"#ffc7c3"	Blush: dark-surface pills, focus rings and the silk copy card.

Behaviour notes

Copy groups fade up 22px (0.9s, stagger .08, power3.out) at 'top 94%'; the invitation words scrub from opacity .58 to 1; the nocturne photo drifts ±3% on fine-pointer desktops.
Reduced motion keeps the overlap, radius and shadow but removes the rise, the hold and the reveals.
Each chapter is a real <section> with an <h2>, so document order and headings stay meaningful.
Default images point to /media/watch-showcase/... from the source project; replace them with your own.

Pattern origin

The watch template's [data-panel] home chapters (atelier, nocturne, silk and invitation): 32px radius (25px under 768px), −42px overlap (−56px for the inset nocturne, −34px on phones), z-index i + 2, shadow 0 −18px 45px rgba(0,0,0,.05), scrubbed from y 55, scale .965 and a 50px top radius to y 0 / scale 1 between 'top bottom' and 'top 34%' at scrub .65, with the outgoing chapter held by native sticky at min(0, 65vh − height).

#scroll#sections#sheets#layout#gsap