Angled Gallery Hero

A landing-page hero: an eyebrow, headline, supporting copy and two CTAs on the left, and a gallery tilted with rotateY on the right. Each row of cards loops slowly sideways, neighbouring rows run in opposite directions at slightly different speeds, and both edges fade out with a gradient mask. Hovering or keyboard-focusing the gallery pauses it, and the card under the pointer lifts forward. With no images supplied, it draws warm-gradient placeholders with mountain, sun and window-pane geometry.

Playground

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<AngledGalleryHero/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/angled-gallery-hero.en.json

Usage

import { AngledGalleryHero } from "@/components/ui/angled-gallery-hero";

<AngledGalleryHero
  eyebrow="穗光攝影工作室"
  title="把每一次快門，排成一面會呼吸的牆"
  subtitle="婚禮、商品與街拍作品集中展示。"
  primaryAction={{ label: "預約拍攝", href: "/booking" }}
  secondaryAction={{ label: "看完整作品", href: "/works" }}
  images={[
    { src: "/works/01.jpg", alt: "海邊婚禮" },
    { src: "/works/02.jpg", alt: "手沖咖啡商品照" },
    // 6–12 images work well
  ]}
/>

The sample copy reads: eyebrow "Ember Grain Studio", headline "Every shutter click, arranged into a wall that breathes", buttons "Book a shoot" and "See all work".

Props

AngledGalleryHeroAction

AngledGalleryHeroImage

How it works

• The gallery container has perspective: 1200px; the inner layer is rotateY(var(--wb-angled-gallery-hero-angle, -18deg)) rotateX(6deg).
• Each row's content is duplicated, and translateX runs linearly from 0 to -50% before looping seamlessly. The period is --wb-angled-gallery-hero-duration (default 40s); row two runs in reverse at 1.25×, row three forward at 1.5×.
• Entrance: eyebrow, headline, copy and CTAs rise 16px and fade in one after another, 80ms apart, over --wb-angled-gallery-hero-enter-duration (default 600ms).
• Accent: --wb-angled-gallery-hero-accent (default #0d9488 in light mode, #2dd4bf in dark), used for the eyebrow, primary button and focus ring.
• From md up it is a 5 / 7 two-column layout; on narrow screens the gallery moves below the headline.

Accessibility

• The root is a section labelled by the headline via aria-labelledby; the heading level comes from as.
• The gallery is a region with an aria-label and can be focused with Tab; focus always pauses the drift (regardless of pauseOnHover) so keyboard users can stop the moving content.
• The duplicate loop copy and the cards in rows after the first are aria-hidden, so screen readers hear each image's alt text once.
• CTAs are a or type="button" with a clear focus-visible ring.
• When the system's reduce motion setting is on, all looping drift stops and a static composition is shown, and the entrance becomes a 150ms fade; a CSS media query applies this from the first paint.