Fieldwork Studio Hero
Free React Hero Section built with CSS, TypeScript.
An editorial studio hero in lavender (#CBB3E8), lime (#D4FF3F) and vermilion (#E34234). A giant vermilion wordmark, set tight by the letters’ ink with small even gaps, set in Sora SemiBold, drawn a fifth shorter than its natural height, and sized to run slightly past both edges of the page, so it is cropped for tension; wherever the lime fluid flows across it, the letters turn ink, spans the page and rises in letter by letter, with three small editorial details set on the grid above it. On load, a lime fluid sweep flows once across the word before the mouse takes over, and a fine film grain gives the flat colour a printed feel. A nav carries a short logo, a live Indian time clock with a blinking dot, and uppercase links with sliding underlines. Beneath, on a 12-column grid that shares one left edge with the logo and the word, sit a large statement whose closing words get a lime highlight, a small numbered index of services, and a round lime scroll badge with text spinning around a dark disc and a nudging arrow. It stacks cleanly on narrow screens and respects reduced motion.
More Hero Sections
- Lime Studio Hero – React Hero Section
- Ember Desk Hero – React Hero Section
- Perspective Dashboard Hero – React Hero Section
- Formline Studio Hero – React Hero Section
- Card Conveyor Upload Hero – React Hero Section
- Resonance Arch Hero – React Hero Section