Two equal halves, two different brand stories — or audiences, or products. Hover one and it expands; the other dims. The choose-your-path landing pattern.
A landing-page hero that divides the screen vertically into two halves, each holding a parallel story — often "for individuals / for teams" or "shop men's / shop women's" or product A vs product B. Hovering one half expands it while dimming the other, signaling "click here." Used heavily on e-commerce (Sephora, Nike), B2B sites with split audiences, and conference launches that announce two related products.
A single container with display: grid; grid-template-columns: 1fr 1fr. Each side is a full-bleed coloured panel with its own typography, CTA, and accent. On mouseenter of either side, JS updates a data-expand attribute on the parent ("left" or "right"), which triggers a CSS transition: the grid columns animate to 1.6fr 1fr (or reversed) and the OTHER side gets a .dim class that filters its brightness down. A circular "VS" badge in the middle slides with the new center line.
Hover either side. Watch it grow while the other dims.
Tools, raw materials, and workshops for the people who still want to make things.
Limited pieces, signed and shipped. Once they're gone, they're gone.
Build a split-screen hero. Container: display:grid, grid-template-columns:1fr 1fr, height ~620px, border-radius and overflow:hidden. Two equal panels: LEFT is a dark gradient (#1A1814 → #4a4742) with white text; RIGHT is a warm amber gradient (#E8B339 → #D96F5A) with dark text. Each panel has padding:60px 40px, a small uppercase mono tag ("★ For makers"), a big italic-mix display headline (clamp(36,5.5vw,56)), a paragraph max-width 38ch, and a pill CTA at the bottom. Add a circular "VS" badge centered at the demo's midpoint (position:absolute, white circle, dark text, big shadow, z-index:10). On mouseenter of either panel, set a data-expand="left"|"right" attribute on the parent — that triggers a CSS transition of grid-template-columns to 1.6fr 1fr (or reversed), and adds .dim class to the OTHER panel which applies filter:brightness(0.55). The VS badge also transitions its left position to follow the new midpoint. On mouseleave the layout returns to 1fr 1fr. On mobile, switch to grid-template-rows:1fr 1fr (stacked vertically) and disable the hover-expand.