类型：Site模板 · 收录：2026-10-26 23:38:39 · 源码：会员可见
# Prompt: Vexa Studio agency hero ("Cobalt Chrome")
Build a single-file, one-screen **landing hero for a fictional digital design agency, Vexa Studio**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a clean, light editorial grid on `#FAFAFA` with one strong cobalt accent and glossy iridescent liquid-chrome imagery:
- **Headline:** a huge black headline inside a thin dashed frame with cobalt star corners.
- **Inline images:** image "chips" sit inside the headline lines.
- **Left column:** a looping chrome portrait reel with a play button.
- **Bottom row:** a services list, a 2×2 chrome image grid, a laptop photo and a solid cobalt "Let's start a project" card.
## Scale
- **Units:** a fixed design-unit system, `--u` = one reference pixel scaled to the viewport. Every position below is absolute in `--u`.
- **Tablet and phone:** the layout reflows into flex columns.
## Colour and type
- **Font:** **Inter Tight** 400/500/600.
- **Colours:**
- page `#FAFAFA`
- headline `#000`; brand and labels `#181818`; nav and list `#262626`
- counters `#767676`
- accent **cobalt `#003BF8`**
- lines `#D4D4D4` / `#BDBDBD`
## Header
- **Header bar:** a white bar with a soft shadow, holding:
- the cobalt three-blob logo mark and "VEXA STUDIO" (Inter Tight 600)
- nav "Home · Work · Insights · Services · Studio · Contact"
- **Button:** to the right, a solid cobalt "View Our Work" button.
- **Phone:** a burger menu.
## Hero
- **Labels:** small labels "✦ [Vexa Agency]" on the left and "[Trusted Clients]" with an overlapping row of three round client avatars on the right.
- **Frame:** a thin dashed frame with four small cobalt four-point stars at its corners, holding the headline at about 112u in Inter Tight 500, tight tracking:
- **Line 1:** "Elevating Brands"
- **Line 2:** "to thrive", then an inline chip of iridescent chrome swirl, then a cobalt chip "WHO WE ARE" (white caps, over a blurred cobalt gradient image), then "in a"
- **Line 3:** a cobalt text block "We transform ambitious ideas into immersive digital products, brands and experiences." (white, 18u), then "digital world"
- **Reel (left):** a square-ish panel showing a woman wrapped in flowing iridescent cobalt-and-silver liquid chrome. A dark round play button sits in the centre, with "WATCH OUR WORK" below.
- **Motion:** a muted 4s loop plays over the still with the same cover rules: the chrome flows and morphs around her head and the camera pushes in slowly. Its last second crossfades into the first, so it never plays in reverse.
- **Fade-in:** fade it in once it's ready.
- **Reduced motion:** hide it.
## Bottom row
- **Services:** a numbered list with thin rules: "(1) Branding · (2) UI/UX Design · (3) Web Development · (4) Motion Graphics · (5) Digital Marketing".
- **Image grid:** a 2×2 grid of chrome images:
- a profile in iridescent visor glasses
- a twisting liquid-chrome blob
- a flowing chrome wave
- a chrome sphere with droplets
- **Laptop photo:** hands coding on a laptop in a bright room.
- **Cobalt card:** "LET'S / START A PROJECT" in white bold caps at the bottom left, and a thin white ↗ arrow at the top right.
## Motion
- **Entrance:** one Web Animations timeline, about 2.5s.
- The header fades down.
- The dashed frame draws in.
- The headline lines wipe up, then the chips scale in.
- The intro block wipes from the left.
- The reel, play button and label appear.
- The services list and the tiles rise in turn.
- **Hover:**
- The play button grows.
- The tiles zoom slightly.
- **Reduced motion:** no entrance.
## Acceptance check (1440×960)
- The light grid shows the black headline in its dashed frame with cobalt stars, plus the chrome swirl chip and the cobalt "WHO WE ARE" chip.
- The chrome portrait reel moves on the left.
- The bottom row is services, the chrome 2×2 grid, the laptop and the cobalt CTA card.
- **Content:** no real brands.