Split Layout Before After Slider Hero Block for React

Both sides are drawn by one component, ReportLayer, from two objects at the top of the file: BEFORE and AFTER, each with a label, a score (the ring's fill, in percent) and three metrics. Edit those, or replace either layer's contents with your own markup; keep both layers in the same layout so the handle swaps values in place. Update the figure's hidden caption too, since it's what a screen reader says about the two sides.

Both layers sit in the same grid cell, so they always share one height. The input's value is written to the figure as a CSS variable, --split, and the before layer's clip-path: inset() cuts it off at that point, while a 1 px handle sits at inset-inline-start the same value. The figure is dir="ltr", so before is always on the left, like a ruler. The browser does the rest: nothing is measured in JavaScript, so it stays smooth while you drag.

They are the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column (max-w-6xl, the same in every block) has Guides bleed marks="top" rules="top": two side rails that run the section's full height, so they join the rails of the blocks above and below, and one rule along the top edge that runs to the page's edges, with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. Inside, the divider is the report cell's lg:border-s with Guides marks="start" rules="none" sides={false} for the plus where it meets the top rule. The report is flush with the divider and the end rail, so it needs no frame. Every line is solid and is the theme's border colour, so it follows any preset.

Yes. The control is a native input type="range" named Compare before and after: the arrow keys move it one step, Home and End take it to either side, and its value reads as, for example, 50% before, 50% after. The figure shows a focus ring when the input has keyboard focus. The report's layers are decoration, hidden from assistive technology, and an invisible caption gives the figures on each side instead. The headline is the block's one h1.

Below the lg breakpoint the two columns stack, with the report under the copy behind a ruled line, 24rem tall, and the headline wraps, balanced. The three metrics keep three columns down to 320 px, the input works with touch (touch-action: pan-y, so the page still scrolls), and the Shine Button is on the first screen of a phone.

Use this split layout when the copy needs room beside the comparison: a longer subtitle, a line of terms, two calls to action. Use the full-width before and after slider hero when the comparison is striking enough to carry the hero on its own, with a handle you drag across the whole panel.