Era Strata Layout

An accordion layout that stacks eras or phases into horizontal strata — the expanded band opens vertically while the rest compress, and the content inside floats up with parallax.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/era-strata-layout.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Triggertrigger

Layout heightheight

440

Collapsed row heightcollapsedSize

Parallax liftparallax

<EraStrataLayout />

Installation

npx shadcn@latest add "https://webberui.com/r/era-strata-layout.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/era-strata-layout.

Usage

import {
  EraStrataLayout,
  type EraStratumData,
} from "@/components/ui/era-strata-layout";

const eras: EraStratumData[] = [
  {
    id: "1998",
    era: "1998",
    title: "Founded in a garage",
    summary: "Three people and one server.",
    content: "The first version shipped late at night.",
    accentClassName: "bg-amber-400 dark:bg-amber-500",
  },
  // ...
];

<EraStrataLayout items={eras} height={440} defaultActive={0} />;

trigger switches how expansion is triggered: click (the default), hover to expand on hover, or scroll to advance stratum by stratum as the page scrolls.

// Advance on scroll: when scrolling inside a nested container, pass that container's ref to container
<EraStrataLayout items={eras} trigger="scroll" height={480} />

Props

Prop	Type	Default	Description
`items`	`EraStratumData[]`	—	Strata data, stacked top to bottom in order
`active`	`number`	—	Controlled expanded index (applies in click / hover modes)
`defaultActive`	`number`	`0`	Initial expanded index in uncontrolled mode
`onActiveChange`	`(index: number) => void`	—	Fires when the expanded index changes
`trigger`	`"click" \| "hover" \| "scroll"`	`"click"`	How expansion is triggered
`height`	`number \| string`	`440`	Total layout height (a number means px)
`collapsedSize`	`number`	`72`	Height of a collapsed stratum / title bar (px)
`parallax`	`boolean`	`true`	Whether the content floats up with parallax
`container`	`RefObject<HTMLElement \| null>`	—	Nested scroll container ref for scroll mode
`label`	`string`	`"年代地層"`	Accessible label
`className`	`string`	—	Class on the outer container
`stratumClassName`	`string`	—	Class applied to each stratum band

EraStratumData

Field	Type	Description
`id`	`string`	Stable identifier, used as the accessibility anchor and the key
`era`	`ReactNode`	Era / phase marker, still visible when collapsed
`title`	`ReactNode`	Section title, still visible when collapsed
`summary`	`ReactNode`	The one-line summary that floats up first on expand
`content`	`ReactNode`	The main content that floats up with parallax on expand
`accentClassName`	`string`	Accent color class for the stratum color bar on the left

How it works

The expanded stratum opens vertically on a spring transition while the rest compress back to collapsedSize in sync, leaving only their title bars visible
Remaining space is distributed with flexbox flex-grow, and exactly one stratum is expanded at a time; make sure height ≥ collapsedSize × number of strata
Inside a stratum, summary and content float up in sequence from different starting offsets to create parallax layering; with parallax={false} only the fade in remains
scroll mode extends the matching scroll height and pins to the viewport, mapping scroll progress onto the expanded stratum; clicking a stratum smoothly scrolls to it

Accessibility

Each stratum title is a native button with aria-expanded and aria-controls, and the content area is a role="region" labeled by its title through aria-labelledby
The title bars use a roving tabindex: after Tab moves in, ↑ / ↓ (or ← / →) move between strata, Home / End jump to the first and last, and Enter / Space expand
Collapsed content areas are marked inert and aria-hidden, so neither the keyboard nor assistive technology wanders into them
When the user has "reduce motion" enabled at the system level, it becomes a fully expanded static list showing all the content at once, with no compression and no animation