---
id: "aw-site-58178"
source: https://www.awwwards.com/sites/zentry
author: "Resn (resn)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Masked Heroine Gaming Hero with Giant Type

## Summary
The first screen of a gaming and entertainment platform site: a painterly illustration of a masked heroine in violet and ember light fills the frame, two giant compressed uppercase words sit in opposite corners, and a tilted quadrilateral window cut into the image previews a glowing cyan scene. Worth studying for the bold diagonal type composition and the shaped clip window that hints at the next scene.

## Style
- Theme: dark (violet, indigo and ember)
- Mood: bold, cinematic, energetic, mysterious, epic
- Tags: gaming, hero-section, compressed-type, painterly-illustration, clip-path, diagonal-layout, pill-button
- Category: Hero, Typography

## Palette
| Role | Hex |
|---|---|
| Outer dark | #0A0F15 |
| Night navy | #1B1D30 |
| Plum shadow | #6F4257 |
| Indigo | #322A4F |
| Lavender type | #D9D4E5 |
| Electric blue | #507BD5 |
| Ember rose | #A06874 |
| Acid yellow CTA | #EDFF66 |

## Typography
- Display words: ultra-compressed heavy grotesk, black (900), uppercase, very tight tracking, pale lavender #D9D4E5, each about 14% of frame height; one top left, one bottom right. Closest free font: Anton or Bebas Neue (heavier: Big Shoulders Display 900).
- Nav links and button label: monospace-flavoured grotesk, bold, uppercase, tracked +0.05em, about 1% of height. Closest free font: Space Mono 700 or JetBrains Mono 700.
- Intro paragraph: neo-grotesk sans, regular, sentence case, white, about 1.3% of height, three lines. Inter 400.

## Layout
- 4:3 presentation frame (1600x1200); the site window is about 94% wide and 16:9, centred over a darker blurred version of the same artwork.
- Header row: placeholder angular logo mark top left, a white pill dropdown labelled products beside it, three text links and an audio-bars icon top right.
- First word: top left, starting at about 3% from the left edge, under the header. Intro text and the yellow pill beneath it at left.
- Second word: bottom right, flush to about 3% from the right edge, partly overlapping the character's shoulder.
- Clip window: a tilted quadrilateral (roughly 15% of width) over the character's lower face with a dark 2px outline, showing a different scene inside.
- Square window corners, no shadows beyond the painted lighting.

## Elements
- Painterly digital illustration of an original masked heroine with flowing lavender hair, a high-collared jacket and ember sparks drifting across.
- Tilted quad mask revealing a cyan, glowing interior scene (a skull-like mask with blue light).
- White products pill with a small chevron.
- Acid yellow pill button with a black play triangle and uppercase label.
- Audio toggle shown as four vertical bars.

## Motion
Static image. Idea: let the quad window follow the cursor with a slight 3D tilt (spring, about 300ms) and expand to full screen on click to transition into the next scene.

## Rebuild it
1. Hero `relative h-screen overflow-hidden bg-[#0A0F15]` with the artwork as a `object-cover` image.
2. Display words: `font-black uppercase leading-[0.8] tracking-[-0.02em] text-[#D9D4E5] text-[clamp(64px,13vw,220px)]`, absolutely placed top left and bottom right.
3. Clip window: a second image layer with `clip-path: polygon(14% 0, 100% 10%, 86% 100%, 0 78%)`, sized about 15vw and outlined with an SVG polygon stroke.
4. Animate the polygon points with Motion: map pointer position to small offsets per vertex using `useMotionValue` and `useSpring`; on click animate to `polygon(0 0,100% 0,100% 100%,0 100%)` over 700ms ease `[0.76, 0, 0.24, 1]`.
5. Header: `flex justify-between items-center px-8 pt-6`; products pill `rounded-full bg-white text-black px-3 py-1 text-xs font-bold uppercase`.
6. CTA: `rounded-full bg-[#EDFF66] text-black px-4 py-2 text-xs font-bold uppercase tracking-wider` with a play icon; add `whileHover={{ scale: 1.05 }}`.

## Generation prompt
A cinematic gaming website hero: a painterly digital illustration of an original masked heroine with flowing lavender hair bathed in violet, indigo and ember orange light, two giant ultra-compressed pale lavender uppercase words placed top left and bottom right, a tilted quadrilateral window cut into the image revealing a glowing cyan scene, minimal uppercase navigation and an acid yellow pill button; bold, epic, energetic, no real logos or brand names.