Component Browser
BrowseBuild
Home/Browse/Header 153

Header 153

ImageButtonsList76 nodes ยท 44 styles
Header 153

Description

A centered hero with headline, text, and dual buttons surrounded by animated floating image placeholders creating a scattered gallery effect.

Detailed Analysis

This dynamic header features centered content (headline, paragraph, two CTA buttons) surrounded by multiple floating image placeholders positioned around the viewport edges. The images appear in various sizes and positions - corners, edges, and partially off-screen - creating a scattered, organic gallery effect. The animated positioning suggests scroll or hover-triggered motion. The light background keeps focus on the centered text while the peripheral images add visual richness and depth.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

heroheadercenteredfloating imagesscatteredgalleryanimatedbentoCTA buttonsdynamic layoutcreativeportfolioorganic positioningparallax

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-4247",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-927",
              "playInReverse": false,
              "autoStopEventId": "e-4248",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_START_ACTION"
          },
          "config": {
            "loop": false,
            "delay": null,
            "effectIn": null,
            "direction": null,
            "playInReverse": false,
            "scrollOffsetUnit": "%",
            "scrollOffsetValue": 0
          },
          "target": {
            "id": "66822dd4dbd5c943b7333591|7644c3de-1d3e-7239-ed3b-0eb73b5f93d1",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "66822dd4dbd5c943b7333591|7644c3de-1d3e-7239-ed3b-0eb73b5f93d1",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1762165595182,
          "eventTypeId": "SCROLL_INTO_VIEW",
          "mediaQueries": [
            "main",
            "medium",
            "small",
            "tiny"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-4248",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-926",
              "playInReverse": false,
              "autoStopEventId": "e-4247",
              "affe
... (truncated)