lusion.co Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
High-end 3D creative studio aesthetic combining minimal UI with immersive WebGL content. Clean, spacious layout with precision typography and sophisticated micro-interactions. Industrial digitalism meets organic fluidity.

## Design System
### 1. Core Style
Neo-brutalist minimalism with high-gloss 3D immersion. Light, airy interface layers float above deep, dark media containers. Emphasis on negative space and typographic experimentation.

### 2. Color Palette
- **Background**: Off-white/Light gray (warm neutral)
- **Text**: Near-black charcoal
- **Accent**: Electric blue (derived from 3D renders)
- **UI Surfaces**: White pills, Dark charcoal pills (near-black), Glassmorphism overlays
- **Media Containers**: Deep matte black

### 3. Font Stack
Geometric sans-serif with humanist proportions (similar to Inter or SF Pro), featuring fluid viewport scaling for headlines and uppercase tracking for UI elements.

### 4. Texture
- High-gloss 3D renders (plastic, metallic, soft-touch materials)
- Clean vector cross markers
- Subtle glass blur on overlays
- Matte paper-like backgrounds

### 5. Motion Design
- Inertia-based smooth scrolling
- 3D parallax on mouse movement
- Text stretching and compression on hover
- Magnetic button interactions
- Kinetic typography with character duplication

## Component Guidelines
### Button
Fully rounded pill shape (semi-circular ends) with generous horizontal padding. Two distinct variants: **Dark** (charcoal bg, white text) and **Light** (off-white bg, dark text). Decorative dot indicators follow text (single dot for primary actions, double dot for secondary).

### Navigation
Fixed transparent header utilizing a three-zone layout: Logo lockup left, fluid descriptive tagline center, action cluster right. No background blur or border, allowing content to breathe.

### Media Frame
Large rounded rectangle containing WebGL canvas or video. Consistent large border-radius (20-24px) creating a "portal" effect. Dark interior contrasts sharply with light page background.

### Typography
**Display**: Large fluid sizing, medium weight, tight leading for impact.
**UI**: Uppercase, small size (12-14px), wide letter-spacing (0.1em+).
**Artistic**: Extreme horizontal stretching with character stuttering/doubling for creative headings.

## Distinctive Element Few-shot Examples
### 1. Hero WebGL Canvas with Scroll Crosses
**Purpose:**
Immersive entry point establishing technical 3D capability while serving as the primary visual hook. Cross markers function as decorative grid anchors and scroll indicators.

**Evidence:**
Screenshots show large rounded media container with abstract 3D geometry (interlocking cross joints in blue, white, and black). DOM shows multiple `div.home-hero-scroll-container-cross` elements positioned at bottom of viewport. Body text confirms "scroll to explore" functionality.

**Visual Rules:**
- **Layout:** Full-width media container with 16:9 aspect ratio, centered with generous viewport margins (4-6%). Four cross markers (+) evenly distributed across bottom edge at 0%, 33%, 66%, and 100% positions.
- **Color:** Media frame has deep black background. Cross markers are simple black vector crosses on the light page background.
- **Typography:** "SCROLL TO EXPLORE" in uppercase, small size (12px), wide tracking, centered between middle crosses.
- **Spacing:** Media frame sits below the split header with ample vertical breathing room (80-120px).
- **Radius / border / shadow:** Large consistent border-radius (20-24px) on media frame. No visible border. Flat design without drop shadows.
- **Motion:** 3D content features subtle ambient rotation and mouse-responsive parallax. Cross markers may rotate 90 degrees or fade on scroll initiation.

**Recreation Prompt:**
Create a hero section with a large rounded media frame (aspect ratio 16:9, border-radius 24px) containing a dark background with an immersive WebGL canvas showing abstract 3D geometry (interlocking cross-shaped joints in electric blue, white, and black with glossy finishes). Below the frame, place four evenly spaced "+" symbols across the width, with "SCROLL TO EXPLORE" text centered between the middle crosses. Use an off-white page background. Implement subtle parallax movement on the 3D scene responding to mouse position.

**Structure Sketch:**
```html
<section class="hero">
  <div class="hero-media-frame">
    <canvas class="webgl-canvas"></canvas>
  </div>
  <div class="hero-scroll-indicator">
    <span class="cross">+</span>
    <span class="cross">+</span>
    <span class="scroll-text">SCROLL TO EXPLORE</span>
    <span class="cross">+</span>
    <span class="cross">+</span>
  </div>
</section>
```

### 2. Split Header with Central Tagline
**Purpose:**
Unconventional navigation prioritizing brand narrative over traditional compact menus. The descriptive tagline occupies the visual center, positioning the studio as thought leaders while actions remain accessible but peripheral.

**Evidence:**
Screenshots confirm three-column layout: "LUSION" logo left, multi-line tagline "We create 3D visual storytelling..." center, pill buttons "LET'S TALK" and "MENU" right. DOM shows header containing both logo and newsletter subscription text, indicating layered functionality.

**Visual Rules:**
- **Layout:** Flex row with three distinct zones. Left: Logo (10% width). Center: Fluid tagline (60-70% width, wraps naturally). Right: Button cluster (20% width).
- **Color:** Logo and text in near-black. Buttons use charcoal (dark) and off-white (light) pill backgrounds.
- **Typography:** Logo is uppercase, bold, wide tracking. Tagline is sentence case, large fluid size (responsive scaling), medium weight. Buttons are uppercase, small size, with dot indicators (• or ••).
- **Spacing:** Header height accommodates 2-3 lines of tagline text. Horizontal padding 4-5% of viewport.
- **Radius / border / shadow:** Buttons fully rounded (pill shape, 999px radius). No borders or shadows on header container.
- **Motion:** Tagline may have subtle fade or line-by-line reveal on load. Buttons feature magnetic hover attraction and dot expansion.

**Recreation Prompt:**
Design a fixed header with three zones: left side has an uppercase bold logo "LUSION" with wide letter spacing; center features a large fluid headline reading "We create 3D visual storytelling and interactive web experiences that help brands stand out" wrapping to 2-3 lines with medium font weight; right side contains two pill buttons side-by-side—first is dark charcoal with white uppercase text "LET'S TALK" followed by a single dot, second is light gray with dark uppercase text "MENU" followed by two dots. Ensure generous whitespace and fluid typography scaling.

**Structure Sketch:**
```html
<header class="main-header">
  <div class="brand">LUSION</div>
  <h1 class="central-tagline">We create 3D visual storytelling and interactive web experiences that help brands stand out</h1>
  <div class="action-cluster">
    <button class="pill primary">LET'S TALK <span class="indicator">•</span></button>
    <button class="pill secondary">MENU <span class="indicator">••</span></button>
  </div>
</header>
```

### 3. Stretched Typography Project List
**Purpose:**
Artistic treatment of project titles creating visual rhythm and brand distinction. Horizontal stretching suggests motion blur, digital manipulation, and the "lusion" concept of altered perception.

**Evidence:**
DOM shows project links with heavily distorted text: "OOOOrrrryyyyzzzzooooAAAAIIII", "OOOOOffffTTTThhhheeeeOOOOaaaakkkk", "DDDDeeeevvvviiiinnnnAAAAIIII". Pattern indicates each character is quadrupled with horizontal stretching.

**Visual Rules:**
- **Layout:** Full-width stack with generous vertical padding between items (100-150px). Each item is a block-level link.
- **Color:** Near-black text on light background.
- **Typography:** Extreme horizontal scaling (300-400% width), uppercase, large display size (60-80px). Character stuttering effect where each letter is repeated 3-4 times (e.g., "Oryzo" becomes "OOOOrrrryyyyzzzzoooo").
- **Spacing:** Large line-height creating breathing room between projects. Meta tags (services) appear below in small uppercase text with bullet separators.
- **Radius / border / shadow:** None on text.
- **Motion:** On hover, text compresses to normal width (100%) with smooth easing, revealing readable project name. Cursor interaction may trigger horizontal slide.

**Recreation Prompt:**
Create a project list where titles are rendered with extreme horizontal stretching (scaleX 3-4) and character duplication. For "ORYZO AI", display as "OOOOrrrryyyyzzzzooooAAAAIIII" with each character repeated four times. Use large font sizes (60-80px) and generous vertical spacing (100px+ between items). On hover, animate the text to normal readable width. Below each title, add service tags in small uppercase with dot separators (e.g., "concept • web • design • development • 3d").

**Structure Sketch:**
```html
<ul class="project-list">
  <li class="project-item">
    <a href="#" class="project-title stretched" data-original="ORYZO AI">
      OOOOrrrryyyyzzzzooooAAAAIIII
    </a>
    <div class="project-meta">concept • web • design • development • 3d • animation</div>
  </li>
</ul>
```

### 4. Kinetic Duplicative CTA Text
**Purpose:**
Creates hallucinatory, dream-like typography reinforcing the "Lusion" brand concept. Suggests motion blur, digital glitch, or echo effects while maintaining readability through pattern recognition.

**Evidence:**
DOM contains specific strings: "PPllaayy RReeeell" and "LLeeett''ss wwoorrkk ttooggeetthheerr!!" demonstrating character doubling and tripling with mixed casing.

**Visual Rules:**
- **Layout:** Centered or left-aligned block text, treated as display heading (80-120px).
- **Color:** Standard dark text on light background, or inverted in dark sections.
- **Typography:** Mixed case with character multiplication (2-3x repetition). Alternating upper and lower case within the duplication pattern.
- **Spacing:** Tight letter-spacing within word groups, normal word spacing between.
- **Radius / border / shadow:** None.
- **Motion:** Individual character pairs may have subtle horizontal offset animation or "glitch" between states. Scroll-triggered horizontal drift.

**Recreation Prompt:**
Design a CTA section with kinetic text where characters are duplicated 2-3 times with alternating case patterns. Example: "Play Reel" renders as "PPllaayy RReeeell" and "Let's work together" as "LLeeett''ss wwoorrkk ttooggeetthheerr!!". Use large display font (80-120px), center-aligned. Add subtle horizontal drift on scroll to enhance the kinetic, unstable feel. Consider adding a "reveal" hover state where the text compresses to normal spelling.

**Structure Sketch:**
```html
<section class="cta-section">
  <h2 class="kinetic-headline">PPllaayy RReeeell</h2>
  <h2 class="kinetic-headline secondary">LLeeett''ss wwoorrkk ttooggeetthheerr!!</h2>
</section>
```

### 5. Integrated Newsletter Trigger
**Purpose:**
Seamlessly blends subscription functionality into the primary navigation layer rather than relegating it to footer. Reduces friction for user engagement.

**Evidence:**
DOM shows "Subscribe to our newsletter" text within the `header#header` landmark alongside primary navigation items. Indicates overlay or slide-out panel behavior rather than separate page.

**Visual Rules:**
- **Layout:** Positioned within header hierarchy, likely as expandable panel or modal triggered by dedicated button.
- **Color:** Inherits header light background or transitions to overlay with glassmorphism.
- **Typography:** Label in uppercase, small size, wide tracking. Input field uses same font family with generous padding.
- **Spacing:** Compact but touch-friendly target areas.
- **Radius / border / shadow:** Input fields follow pill aesthetic (fully rounded). Submit button matches dark pill style.
- **Motion:** Smooth expand/collapse or slide-in from top. Input focus states with subtle glow.

**Recreation Prompt:**
Add a newsletter subscription element within the main header structure. Use an uppercase label "Subscribe to our newsletter" that expands or reveals an inline input field when activated. The input should be minimal with a pill-shaped border (fully rounded), and the submit button should match the dark charcoal pill style of the "LET'S TALK" button. Implement with smooth height animation (0 to auto) or slide-down reveal.

**Structure Sketch:**
```html
<header class="main-header">
  <!-- ... other header elements ... -->
  <div class="newsletter-trigger">
    <button class="pill minimal">Subscribe to our newsletter</button>
    <form class="newsletter-form">
      <input type="email" placeholder="Enter your email" class="pill-input" />
      <button type="submit" class="pill dark">Subscribe</button>
    </form>
  </div>
</header>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** mixed

#### Color Roles
- **color.text.primary:** #000000 (37)
- **color.text.secondary:** #000000 (2)
- **color.surface.base:** #ffffff (3)
- **color.accent:** #000000 (60)
- **color.border.default:** #000000 (37)
- **color.focus.ring:** #000000 (37)

#### Typography Roles
- **font.family.primary:** Aeonik (41)
- **font.size.display:** 151.2px (5)
- **font.size.body:** 14px (3)
- **font.size.label:** 14px (7)
- **ratio:** display is 10.8x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 80px (16)
- **space.2:** 16px (12)
- **space.3:** 26px (12)
- **space.4:** 25px (5)
- **space.5:** 75.6px (5)

#### Radius Roles
- **radius.pill:** 87.5px (2)

#### Shadow Intent
- **level:** rare accent
- **usage:** 1
- **note:** single recurring elevation treatment

#### Motion Intent
- **level:** moderate
- **range:** 200-500ms
- **common durations:** 400ms (4), 200ms (1), 250ms (1)
- **easing style:** ease, ease (2), cubic-bezier(0.35, 0, 0, 1) (1)

### Distinctive Implementation Signals

- Frequent pill radius (87.5px) creates a soft/capsule interaction language.
- Motion is moderate, centered around 200-500ms.
- Type hierarchy is ratio-driven: display is 10.8x body.

### Extraction Diagnostics

- Sampled 43 visible elements from 1368 total DOM elements.
- Confidence: medium.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.