Parallax Layers Hero React component
A drawn mountain range in depth layers that follow the pointer, with the headline set between the ridges so the near peaks pass in front of it. Takes your own artwork too.
About the Parallax Layers Hero component
Parallax Layers Hero builds depth out of flat layers. Stars, a sun, three ridges and a band of pines all move at their own speed with the pointer, and the headline sits between them so the near mountains pass in front of the letters.
The landscape is drawn in code, so it needs no image files and stays sharp at any size. Pass the layers prop to use your own artwork, with a depth for each layer and a front flag for anything that should cover the title.
When to use it
Use it for outdoor brands, games, travel, events and any landing page that can carry a strong illustration.
For a product screenshot or a busy page, a calmer hero will sell the product better.
Installation
Add the Parallax Layers Hero component to your project with the shadcn CLI. It lands in components/parallax-layers-hero.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/parallax-layers-heroOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ParallaxLayersHero /> accepts 9 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title Sits between the layers, so the near ridge passes in front of it. | string | "HIGHER" |
| eyebrow | string | "Trail season opens in May" |
| description | string | "Forty huts, six ranges and one map that works without a signal." |
| cta | { label: string; href?: string; onClick?: () => void } | null | { label: "Plan a route" } |
| layers Your own artwork. Leave it out for the drawn mountain range. | { src?: string; content?: React.ReactNode; depth: number; front?: boolean }[] | — |
| strength Multiplier for how far the layers travel. | number | 1 |
| idleSway Layers sway on their own when nothing is moving them. | boolean | true |
| minHeight Height from tablet width up, in px. | number | 720 |
- theme"dark" | "light"Default: "dark"
- title
Sits between the layers, so the near ridge passes in front of it.
stringDefault: "HIGHER" - eyebrowstringDefault: "Trail season opens in May"
- descriptionstringDefault: "Forty huts, six ranges and one map that works without a signal."
- cta{ label: string; href?: string; onClick?: () => void } | nullDefault: { label: "Plan a route" }
- layers
Your own artwork. Leave it out for the drawn mountain range.
{ src?: string; content?: React.ReactNode; depth: number; front?: boolean }[] - strength
Multiplier for how far the layers travel.
numberDefault: 1 - idleSway
Layers sway on their own when nothing is moving them.
booleanDefault: true - minHeight
Height from tablet width up, in px.
numberDefault: 720
Collections
Use-case pages that compare Parallax Layers Hero with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Parallax Layers Hero FAQ
- Does it need image files?
- No. The default landscape is drawn as SVG. Images are only needed if you pass your own layers.
- How do I put a layer in front of the title?
- Set front: true on that layer. Everything else draws behind the title.
- What happens on touch screens?
- With idleSway on, the layers drift slowly by themselves, so the depth still shows without a pointer.
- Is it heavy?
- Layers move with transforms from a single loop that stops when the hero leaves the screen, and React does not re-render while they move.
