Hero Centered
A centred hero with an announcement pill, a headline whose lines rise out of their masks, one sentence and two pill buttons. CSS only, the entrance plays on load.
View codeThe library
Hero
9 hero components in plain HTML, CSS and JS.
Hero Cover
A cover hero: a full-width picture under a monochrome veil with the title at the bottom left. The picture opens from the top edge and settles, the title lines rise. CSS only.
View code
Hero Focus
A title sharp over a blurred picture. On scroll the focus moves to the picture, the title blurs and leaves, a readout counts the distance, then notes point out the details. It rewinds.
View code
Hero Showcase
A title over a wall of project thumbnails laid back like prints on a table. On scroll the rows slide in opposite directions and click into line as the wall stands up, every thumbnail a link.
View code
Hero Statement
A studio statement set very large over a mono line with the city, a live local time and the booking window. The words rise out of their masks one after the other on load.
View code
Hero Exit
A centred title in two big lines. On scroll the scene holds, the lines part, a picture opens between them and tightens into a card, then the next section slides over it.
View code
Hero Screen
A centred title and its buttons over a screenshot of the product, leaning back in perspective. On scroll the screen stands up to face you and grows while the title steps back.
View code
Hero Expand
A big title with a small picture set between two words. On scroll the scene pins, the picture opens to full screen and pushes the words aside, then a caption and a button rise. Scroll back up: it rewinds.
View code
Hero Split
A split hero, words on the left and a 4:5 picture on the right: the title lines rise out of their masks while the picture opens from the top edge down.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it