Splitframe — Show the Difference
A warm sand/terracotta landing page for a draggable before/after image-comparison slider: a bold black 'Show the difference.' hero with a circular-grip comparison frame (warm dusk 'After' wiping over cool night 'Before'), a dark marquee, a 3-step how-it-works grid, a 2-up gallery of more sliders, a copy-the-prompt code block and a terracotta CTA. Inter, single terra accent on sand neutrals, sticky translucent nav, reflows to one column below lg.
Summary
A warm, editorial landing page for a before/after image-comparison slider component. The hero pairs a bold black serif-weight headline ('Show the difference.') and a stat row beside a draggable comparison frame that wipes a warm 'After' dusk render over a cool 'Before' night render via a circular center handle. Below: a dark uppercase marquee strip, a 3-step 'how it works' grid, a full-bleep two-card gallery of more comparison sliders, a copy-the-prompt code block, a 4-up features grid, a terracotta CTA band and a footer. Sticky translucent top nav; reflows from a 2-col hero to single column below lg.
Style
Warm sand/terracotta editorial aesthetic in the Inter typeface, set on a cream paper canvas with a single terracotta (terra) accent and near-black 'ink' text. Heavy black headline weights (font-black) with very tight negative tracking, a subtle radial grain texture, soft layered ink-tinted shadows, fully rounded pills and large 20-28px rounded card/frame corners. The signature surface is the comparison frame: two stacked SVG 'scenes' (a warm dusk gradient vs a desaturated cool night gradient) split by a 2px light divider with a 56px circular grip carrying twin carets, plus pill 'Before' (light glass) and 'After' (terracotta) labels.
Layout & Structure
A full-width sticky 64px nav over a stacked single-page layout, all centered in a max-w-[1200px] ('container') column: HERO (2-col on lg, copy + comparison frame), a dark marquee strip, a 'How it works' 3-card grid, a 'Gallery' section (sand-deep band, 2-col cards of more comparison sliders), a 'The prompt' 2-col block (copy + dark code panel), a 4-up 'Features' grid on a sand-soft band, a terracotta CTA band, and a footer. The hero grid is lg:grid-cols-[0.95fr_1.05fr] and collapses to one column below lg; gallery and features grids collapse to single column on mobile.
Sticky top nav
Hero (copy + comparison frame)
Dark marquee strip
How it works (3 steps)
Gallery (more comparison sliders)
The prompt (copy block)
Features (4-up)
CTA band + footer
Special Notes
Single-accent system: terracotta 'terra' #c4633f is the only chromatic color; everything else is the warm sand neutral scale (sand #efe7d8 / sand-deep #e6dcc8 / sand-soft #f6f1e7) plus near-black 'ink' #2b251d / 'ink-soft' #5c5346, so the accent always reads as the action. ONE typeface: Inter (weights 300-900) via Google Fonts; headlines use font-black with letter-spacing -0.04em (tracking-tightest). All hex values are exact and should be preserved, including the comparison-frame SVG gradient stops (dusk #f0c9a0/#dd9a6f/#9c5a3f, sun #fbe7c6; night #cdd9d0/#9aa39a/#5d645d) and the code-block syntax tint #e7c9a3. No em-dashes in any copy; the before/after relationship is shown via the draggable slider, not described. Icons are Iconify Phosphor (ph:*) glyphs. The whole page is centered in a max-w-[1200px] container and reflows from the 2-col hero to a single column below lg.