Search blocks by description or jump to a page.
A hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.
Floating Elements is a full viewport hero. A frosted glass card sits centered on screen and holds a small badge with an icon and label, a bold headline with a two word highlighted phrase, a short supporting paragraph, and two buttons. Ringing the card on all sides are ten floating shapes: three icon tiles (palette, code, layers), a color swatch grid, two small image thumbnails, a wide pill with two stacked lines, and three small dot and square accents. Each shape drifts in a looping path with a staggered delay so the screen always feels in motion, over a faint grid pattern that adds subtle texture.
All copy inside the card is independent of the floating layer, so the badge label, headline, paragraph, and button text can each be changed freely. The shapes are purely decorative, so add, remove, or reposition them at will; the two image thumbnails accept any square crop.
Reach for this block when the portfolio belongs to a creative working across design and development and the opening screen needs to communicate energy before a visitor scrolls. It suits a personal site landing page or a candidate showcase inside an HR or hiring platform. The motion layer sets it apart from the static and image led heroes in this group, making it the right pick when personality matters more than showing specific work up front.
A natural flow around it on a Portfolio page:
Before
After
Three distinct layers you can adjust independently:
Tip: keep the two buttons to one clear split between work and contact so the card stays focused and the floating layer stays the feature.