Portfolio Case Parallax

ProNew

Use this when a portfolio leads with a few big projects: a parallax showcase with a details panel under it for the year, role, tags and a link to the case study.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it on a studio or personal site where each project deserves a large picture and a short fact sheet before the click-through.

Do not use it for a long archive or when the details are the main content. List the projects instead.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`cases`	`PortfolioCase[]`	`-`	Each case has an id, title, caption, background node, year, role, tags and href.
`label`	`string`	`-`	Accessible name of the carousel.

Accessibility

The details panel is a labelled region that follows the current slide, and its link names the project ("View case study: Harbour").
The drifting background is hidden from assistive technology; the title and caption carry the meaning.
With prefers-reduced-motion the layers stay still.
Keyboard: Left / Right: previous or next project
Keyboard: Tab: reach the case study link

Testing

The pattern ships with a Testing Library test (portfolio-case-parallax.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.