https://lusion.co

Page structure & technical metrics

Words

832

Action candidates

7

Images

0

HTML

58 KB

Copy

Title chars
52
Meta chars
136
H1
1
H2
1

Action

Primary

LET'S TALK

Forms
2/ 2 fields
On-site links
20
Off-site links
4

Security & metadata

HTTPS
yes
HSTS
yes
CSP
no
nosniff
yes
viewport
yes
Icon
yes
JSON-LD
no
Analytics
GA4

Page

Tailwind

Scripts
2 ext / 1 inline
Lang
en
Third-party hosts
1

Lighthouse

Simulated mobile · Performance

70 / 100

2026-09-05 · Lab data, not field data.

View details

Simulated mobile · Lab data, not field data
2026-09-05T04:02:31.000Z · Lighthouse 13.4.1

Performance70/ 100
Accessibility85/ 100
Best practices77/ 100
SEO100/ 100
LCP · Largest content4,086 ms
CLS · Layout shift0.000
TBT · Blocking time564 ms
FCP · First content1,079 ms
SI · Speed index4,438 ms

Results vary by server, network and environment, independently of taste/conversion scores. Diagnostics retain Lighthouse wording.

Uses third-party cookies

2 cookies found

Third-party cookies may be blocked in some contexts. Learn more about preparing for third-party cookie restrictions.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://player.vimeo.com/video/761102167?title=0&byline=0&controls=0&app_id=122963",
      "name": "__cf_bm"
    },
    {
      "url": "https://player.vimeo.com/video/761102167?title=0&byline=0&controls=0&app_id=122963",
      "name": "vuid"
    }
  ],
  "headings": [
    {
      "key": "name",
      "label": "Name",
      "valueType": "text"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    }
  ]
}

Minimize main-thread work

5.8 s

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work

Elements & resources
{
  "type": "table",
  "items": [
    {
      "group": "scriptEvaluation",
      "duration": 4208.719999999849,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "other",
      "duration": 908.8400000000122,
      "groupLabel": "Other"
    },
    {
      "group": "styleLayout",
      "duration": 363.644,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "paintCompositeRender",
      "duration": 137.9360000000037,
      "groupLabel": "Rendering"
    },
    {
      "group": "parseHTML",
      "duration": 126.83999999999983,
      "groupLabel": "Parse HTML & CSS"
    },
    {
      "group": "scriptParseCompile",
      "duration": 35.31999999999999,
      "groupLabel": "Script Parsing & Compilation"
    },
    {
      "group": "garbageCollection",
      "duration": 15.515999999999964,
      "groupLabel": "Garbage Collection"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

Reduce JavaScript execution time

4.2 s

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://lusion.co/_astro/hoisted.CUO_IjfL.js",
      "total": 4968.3319999998575,
      "scripting": 4106.259999999852,
      "scriptParseCompile": 3.636
    },
    {
      "url": "https://lusion.co/",
      "total": 362.332,
      "scripting": 4.0600000000000005,
      "scriptParseCompile": 1.1680000000000001
    },
    {
      "url": "Unattributable",
      "total": 334.6120000000029,
      "scripting": 4.183999999999999,
      "scriptParseCompile": 0
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-W2XC5XK9QJ",
      "total": 124.67200000000079,
      "scripting": 92.8480000000008,
      "scriptParseCompile": 30.516
    }
  ],
  "summary": {
    "wastedMs": 4242.671999999853
  },
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "total",
      "label": "Total CPU Time",
      "valueType": "ms",
      "granularity": 1
    },
    {
      "key": "scripting",
      "label": "Script Evaluation",
      "valueType": "ms",
      "granularity": 1
    },
    {
      "key": "scriptParseCompile",
      "label": "Script Parse",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "total"
  ]
}

Missing source maps for large first-party JavaScript

Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more about source maps.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "error": "Large JavaScript file is missing a source map"
          }
        ]
      },
      "scriptUrl": "https://lusion.co/_astro/hoisted.CUO_IjfL.js"
    }
  ],
  "headings": [
    {
      "key": "scriptUrl",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "error"
      }
    },
    {
      "key": "sourceMapUrl",
      "label": "Map URL",
      "valueType": "url"
    }
  ]
}

Heading elements are not in a sequentially-descending order

Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-H4",
        "path": "1,HTML,1,BODY,1,DIV,1,DIV,0,DIV,0,DIV,1,DIV,0,H4",
        "type": "node",
        "snippet": "<h4 id=\"home-reel-title\">",
        "selector": "div#page-container-inner > div#home > div#home-reel > h4#home-reel-title",
        "nodeLabel": "Bold Ideas,\nBrought to Life",
        "explanation": "Fix any of the following:\n  Heading order invalid",
        "boundingRect": {
          "top": 930,
          "left": 23,
          "right": 385,
          "width": 362,
          "bottom": 1260,
          "height": 330
        }
      }
    },
    {
      "node": {
        "lhId": "1-1-H4",
        "path": "1,HTML,1,BODY,1,DIV,1,DIV,0,DIV,0,DIV,2,DIV,0,DIV,0,DIV,0,H4",
        "type": "node",
        "snippet": "<h4 id=\"home-featured-title\">",
        "selector": "div#home-featured > div#home-featured-title-top > div#home-featured-title-wrapper > h4#home-featured-title",
        "nodeLabel": "Featured Work",
        "explanation": "Fix any of the following:\n  Heading order invalid",
        "boundingRect": {
          "top": 2265,
          "left": 21,
          "right": 387,
          "width": 366,
          "bottom": 2407,
          "height": 142
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "best-practice"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-2-A",
        "path": "1,HTML,1,BODY,1,DIV,0,HEADER,0,DIV,4,DIV,2,BUTTON,0,A",
        "type": "node",
        "snippet": "<a href=\"mailto:hello@lusion.co\">",
        "selector": "div#header-container > div#header-menu > button#header-menu-talk > a",
        "nodeLabel": "div#header-container > div#header-menu > button#header-menu-talk > a",
        "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute",
        "boundingRect": {
          "top": 485,
          "left": 23,
          "right": 389,
          "width": 367,
          "bottom": 597,
          "height": 112
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.name-role-value",
      "wcag2a",
      "wcag244",
      "wcag412",
      "section508",
      "section508.22.a",
      "TTv5",
      "TT6.a",
      "EN-301-549",
      "EN-9.2.4.4",
      "EN-9.4.1.2",
      "ACT",
      "RGAAv4",
      "RGAA-6.2.1"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

`[user-scalable="no"]` is used in the `<meta name="viewport">` element or the `[maximum-scale]` attribute is less than 5.

Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more about the viewport meta tag.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-3-META",
        "path": "1,HTML,0,HEAD,2,META",
        "type": "node",
        "snippet": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">",
        "selector": "head > meta",
        "nodeLabel": "head > meta",
        "explanation": "Fix any of the following:\n  user-scalable=no on <meta> tag disables zooming on mobile devices",
        "boundingRect": {
          "top": 0,
          "left": 0,
          "right": 0,
          "width": 0,
          "bottom": 0,
          "height": 0
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.sensory-and-visual-cues",
      "wcag2aa",
      "wcag144",
      "EN-301-549",
      "EN-9.1.4.4",
      "ACT",
      "RGAAv4",
      "RGAA-10.4.2"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

Avoid enormous network payloads

Total size was 10,132 KiB

Large network payloads cost users real money and are highly correlated with long load times. Learn how to reduce payload sizes.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://i.vimeocdn.com/video/1529299672-f98fa04e999fec05f09d355d7c11a516b04709848a9c2920a3a5d7dadd1a81a6-d",
      "totalBytes": 502471
    },
    {
      "url": "https://lusion.dev/assets/textures/tunnels/astronaut/astronaut_wearpack_nor.webp",
      "totalBytes": 461452
    },
    {
      "url": "https://lusion.dev/assets/textures/tunnels/astronaut/astronaut_glove_shoes_nor.webp",
      "totalBytes": 437098
    },
    {
      "url": "https://lusion.dev/assets/models/tunnels/tunnel_block_wall.buf",
      "totalBytes": 364623
    },
    {
      "url": "https://lusion.dev/assets/textures/tunnels/astronaut/astronaut_helmet_nor.webp",
      "totalBytes": 358393
    },
    {
      "url": "https://lusion.dev/assets/textures/tunnels/astronaut/astronaut_glove_shoes_base.webp",
      "totalBytes": 356701
    },
    {
      "url": "https://lusion.dev/assets/textures/tunnels/grids/greeble_arm.webp",
      "totalBytes": 354833
    },
    {
      "url": "https://lusion.dev/assets/models/tunnels/astronaut_animations.buf",
      "totalBytes": 336843
    },
    {
      "url": "https://lusion.dev/assets/textures/tunnels/astronaut/astronaut_wearpack_base.webp",
      "totalBytes": 331170
    },
    {
      "url": "https://lusion.dev/assets/models/tunnels/broken_glass_animation.buf",
      "totalBytes": 313206
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    }
  ],
  "sortedBy": [
    "totalBytes"
  ]
}

Reduce unused JavaScript

Est savings of 181 KiB

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.

Elements & resources
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://lusion.co/_astro/hoisted.CUO_IjfL.js",
      "totalBytes": 301340,
      "wastedBytes": 113976,
      "wastedPercent": 37.82298023011867
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-W2XC5XK9QJ",
      "totalBytes": 172873,
      "wastedBytes": 71585,
      "wastedPercent": 41.409042224431744
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "source",
        "valueType": "code"
      }
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "sourceBytes"
      }
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "sourceWastedBytes"
      }
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "metricSavings": {
      "FCP": 0,
      "LCP": 750
    }
  },
  "overallSavingsMs": 750,
  "overallSavingsBytes": 185561
}

Issues were logged in the `Issues` panel in Chrome Devtools

Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "url": "https://player.vimeo.com/video/761102167?title=0&byline=0&controls=0&app_id=122963"
          },
          {
            "url": "https://arclight.vimeo.com/add/player-stats?beacon=1&session-id=51315618e2a295944f005c4d0ca8a4139d657d7d1788580953"
          },
          {
            "url": "https://vimeo.com/ablincoln/vuid?pid=51315618e2a295944f005c4d0ca8a4139d657d7d1788580953"
          }
        ]
      },
      "issueType": "Cookie"
    }
  ],
  "headings": [
    {
      "key": "issueType",
      "label": "Issue type",
      "valueType": "text",
      "subItemsHeading": {
        "key": "url",
        "valueType": "url"
      }
    }
  ]
}
Environment & raw metrics
{
  "finalUrl": "https://lusion.co/",
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/151.0.0.0 Safari/537.36",
  "formFactor": "mobile",
  "throttlingMethod": "simulate",
  "throttling": {
    "rttMs": 150,
    "throughputKbps": 1638.4,
    "requestLatencyMs": 562.5,
    "uploadThroughputKbps": 675,
    "cpuSlowdownMultiplier": 4,
    "downloadThroughputKbps": 1474.5600000000002
  },
  "metrics": [
    {
      "id": "largest-contentful-paint",
      "unit": "millisecond",
      "value": 4085.9020000000005
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.0001402791994775251
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 564.0000000000005
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 1079.242
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 4438.108293342046
    }
  ]
}

01 / WHAT WORKS

What makes it work

Materials and color create recognition

Blue, black and white objects overlap against a dark scene, contrasting with the pale surrounding canvas.

Navigation stays calm around complexity

Simple brand text, positioning and pill controls keep the scene as the focus.

02 / NEXT STEPS

Where to go next

  1. 01

    Keep contact visible on mobile

    Desktop exposes LET’S TALK, while the mobile header mainly offers an ellipsis menu.

    Add a contact entry below the mobile scene or retain a short header label, reserving the menu for secondary navigation.

03 / DESIGN LANGUAGE

A design system you can reuse

Colors

Background

#ffffff

Text

#000000

Accent

#2b2e3a

Typography

Display font
Aeonik
Body font
Aeonik
Heading / body
36px / 16px

Spacing & shape

Section gap
Component inset
Card radius
Button radius
87.5px

Parameters are element samples. Empty values are unknown, and individual samples are not site-wide rules.

04 / EVIDENCE

The detail behind the report

Values come from one capture. Fonts, radii and spacing are element samples, not a universal site-wide specification. Empty values are unknown. HTML bytes are source size, not compressed transfer size; script counts are DOM tags, not network requests.

Conversion1 observations

Keep contact visible on mobile

Desktop exposes LET’S TALK, while the mobile header mainly offers an ellipsis menu.

Add a contact entry below the mobile scene or retain a short header label, reserving the menu for secondary navigation.

mobile.png: contact action hidden behind menu
Launch1 observations

No Content-Security-Policy

A CSP is the standard way to limit script sources. Vibe-coded pages often load anything, including injected scripts.

Start with a report-only CSP, then default-src 'self' and an explicit script-src.

content-security-policy missing
Link preview

05 / MAKE IT HAPPEN

Give your AI a clear next step

Use the improvement prompt for this page, or the design prompt to borrow its visual language. “Recreate” includes references and implementation steps. Paste either into your coding assistant.

Preview full instructions
Improve the current project using the 2026-09-05T03:22:54.221Z snapshot of https://lusion.co. First identify changes since capture; do not revert newer behavior to the old snapshot.

Design baseline
Brand, positioning and contact/menu actions share the header. A large rounded 3D scene anchors the hero; crosshair details and a scroll cue lead into approach, featured projects and contact. Mobile places positioning above a vertical crop. This records the static scene only; interaction and animation timing require separate implementation and verification.
{
  "colors": [
    {
      "role": "bg",
      "hex": "#ffffff"
    },
    {
      "role": "ink",
      "hex": "#000000"
    },
    {
      "role": "accent",
      "hex": "#2b2e3a"
    }
  ],
  "fonts": {
    "body": "Aeonik",
    "display": "Aeonik",
    "stack": [
      "Aeonik"
    ]
  },
  "radius": {
    "button": "87.5px",
    "card": "",
    "field": "18px"
  },
  "space": {
    "section": "",
    "card": ""
  },
  "type": {
    "h1": "36px",
    "body": "16px",
    "weight": "400",
    "lineHeight": "18.4px",
    "letterSpacing": "normal"
  }
}
Values come from one capture. Fonts, radii and spacing are element samples, not a universal site-wide specification. Empty values are unknown. HTML bytes are source size, not compressed transfer size; script counts are DOM tags, not network requests.

Actions
1. Keep contact visible on mobile
Add a contact entry below the mobile scene or retain a short header label, reserving the menu for secondary navigation.
Evidence: mobile.png: contact action hidden behind menu

2. No Content-Security-Policy
Start with a report-only CSP, then default-src 'self' and an explicit script-src.
Evidence: content-security-policy missing

Acceptance
- Check text, layout and the main action “LET'S TALK” at 1440×900 and 390×844.
- Preserve branding, authentication and business behavior. A screenshot does not prove broken interaction.
- Change only evidence-backed issues. Validate security headers against existing resources and authentication in report-only mode where supported.
- Compare before/after screenshots and run relevant functional tests. Do not claim untested behavior passed.