SDF Hero
The Baselumen hero — a dark, full-bleed headline section with supporting copy and a floating card cluster.
A short, declarative headline that lands.
Two lines of supporting copy that explain the value without repeating the headline. Keep it scannable.
Where do you want to start?
The full source is for members
Sign in and choose a plan to view and copy BaselumenHero.tsx. The live preview above is free to explore.
How to use. Copy BaselumenHero.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.
