Header 109

ImageLightboxButtons26 nodes · 26 styles

Description

Full-bleed video background hero with centered play button, creating an immersive video-first landing experience.

Detailed Analysis

This hero presents an ultra-minimal video-focused layout featuring a full-bleed dark gray background (representing video content) with a single centered play button icon. The play button sits within a rounded rectangle container, using a simple white triangle icon. No text overlay is visible in this frame, suggesting the video itself carries the primary message or that text appears on interaction. The dark, cinematic aesthetic creates immediate visual impact and draws attention to the video content. This pattern suits brands prioritizing video storytelling or wanting dramatic, immersive first impressions.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

video herofull-bleed videoplay buttonvideo backgroundimmersive herocinematic layoutvideo-firstdark backgroundminimal herovideo landingmedia heroautoplay videovideo showcasedramatic entrancevideo storytelling

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3334",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-629",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-629-p"
            }
          ],
          "target": {
            "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d052",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d052",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1698055082258,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "small",
            "tiny"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-3331",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-625",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-3334", "name": "", "action": { "id": "", "config": { "actionListId": "a-629", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, "startsExiting": false, "addOffsetValue": 50, "addStartOffset": false, "endOffsetValue": 50, "startsEntering": true, "continuousParameterGroupId": "a-629-p" } ], "target": { "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d052", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "6540ac58fa7ea7efe569683a|1b3fc231-31b9-e9a8-08d7-e9eb4da1d052", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1698055082258, "eventTypeId": "SCROLLING_IN_VIEW", "mediaQueries": [ "small", "tiny" ], "animationType": "custom" }, { "id": "e-3331", "name": "", "action": { "id": "", "config": { "actionListId": "a-625", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, " ... (truncated)