# One-Screen Operator — landing-page benchmark brief

Create an exceptional interactive landing page for the personal brand **Enrico Bachmann**. It must feel like a living, award-level digital instrument, not a conventional scrolling portfolio or a stack of website sections.

The result is one self-contained `index.html` file. CSS and JavaScript must be inline. No build step, external assets, fonts, libraries, analytics, APIs, or other network requests are permitted. Author every visible element in HTML, CSS, inline SVG, or canvas. Do not embed the reference PNG in the result.

## Shared visual north star

Use `public/benchmark/landing/one-screen-operator/concept.png` as the common visual reference. Translate its composition and ambition into a live **solar system**:

- a near-black full-viewport stage with a precise editorial grid;
- oversized, disciplined typography for Enrico Bachmann;
- one dominant central celestial body;
- multiple spheres of different sizes, materials, orbit radii, speeds, and apparent depths;
- visible orbital paths, partial occlusion, light falloff, and spatial layering;
- fine stardust, particles, glints, and restrained light trails around the system;
- a compact state indicator and a clear invitation to use the mouse wheel.

Treat the image as a visual north star, not an asset to trace or place behind the page. The implementation must be original. Do not reduce the idea to a static circular diagram, a generic gradient blob, a card grid, or a screenshot background.

## Subject and frozen content

Use German copy and preserve the following approved positioning:

- **Person:** Enrico Bachmann.
- **Role:** KI-Integrationsberater.
- **Hero:** „Ich mache Arbeit zu Systemen, die selbstständig weiterarbeiten.“
- **Explanation:** „Ich helfe Unternehmen und Einzelpersonen, geeignete Aufgaben mit agentbasierten KI-Systemen zuverlässig zu lösen.“
- **Story proof:** „Ich habe Hundeo mit einem Team aufgebaut und hochskaliert. Danach habe ich Aufgaben, an denen zuvor Mitarbeiter gearbeitet haben, Schritt für Schritt in agentbasierte Systeme überführt. Heute betreibe ich das Unternehmen profitabel allein – unterstützt von spezialisierten KI-Agenten.“
- **Approach:** „Ich automatisiere nicht um jeden Preis.“
- **Contact:** „Welches Projekt soll mit KI leichter werden?“

This benchmark is not a portfolio of product brands. **Hundeo is the only product name allowed**, and only as plain-text story proof. Do not draw a Hundeo logo or turn it into a planet. Do not name or draw any other companies, products, locations, improvised logos, unverifiable metrics, or biographical claims. The orbiting bodies represent tasks, agents, human control, and reliably operating systems abstractly.

## One viewport, four scenes

This is not a document-scroll assignment. Build a single stage that fits inside the viewport and presents exactly four in-place scenes in this order:

1. `data-scene="intro"` — identity, approved role, hero copy, primary action, and the complete solar-system visual.
2. `data-scene="system"` — use the approved Hundeo story to show the transition from team to tasks, agent-based systems, and one human operator.
3. `data-scene="approach"` — use the approved approach to explain that suitable tasks need clear goals, reviewable results, and human boundaries.
4. `data-scene="contact"` — use the approved contact question, a clear project-discussion action, and compact footer information.

Use these exact stable hooks: `id="one-screen-stage"`, `id="visual-core"`, `id="stardust-field"`, `id="body-detail"`, `id="scene-nav"`, and `id="state-indicator"`. Only one scene may be active and exposed to assistive technology at a time.

At both **1600×900** and **390×844**:

- explicitly lock the document with `html, body { overflow: hidden; }` (equivalent separate `html` and `body` rules are allowed);
- the document itself must not scroll vertically or horizontally;
- the active scene, navigation, state indicator, and primary action must remain inside the viewport;
- no important text or controls may be clipped;
- the composition must adapt rather than shrink the desktop page into illegibility.

## Required orbital behavior

The authored SVG or canvas visual must contain at least five visible celestial bodies in addition to the central body. At least three bodies must follow visibly different non-identical orbits. Their animation must preserve a convincing sense of front/back depth through scale, lighting, occlusion, blur, opacity, or draw order.

Fine stardust must be present across and around the system. It cannot be only a static CSS background. Some particles or light traces must visibly evolve over time.

## Required interaction and motion

Implement all of the following by hand:

- Mouse-wheel down/up moves exactly one scene forward/backward and advances or reverses the orbital composition without moving the document. Clamp at scenes 1 and 4; do not wrap.
- Arrow keys provide equivalent forward/backward control.
- Visible navigation buttons or scene markers allow direct scene selection and expose the active scene accessibly.
- A vertical touch swipe provides equivalent scene navigation at narrow/mobile widths.
- The `01 / 04`-style state indicator updates after every navigation method.
- Scene changes use choreographed motion involving both opacity and spatial transformation. The celestial system must visibly recompose or change camera emphasis; a text-only crossfade is insufficient.
- The visible cursor or cursor focus has a local effect: nearby stardust bends, scatters, brightens, or is displaced, and the nearest celestial body receives a distinct focus response.
- Cursor focus reveals a small contextual label, value, or visual detail associated with the nearest body.
- A local iridescent shimmer/specular highlight follows the pointer across the headline or a focused body. A generic page-wide cursor glow alone is insufficient.
- `prefers-reduced-motion: reduce` removes non-essential animation and pointer motion while preserving all content and navigation.

Keep input handling controlled: one normal wheel gesture should not skip multiple scenes, and touch interaction must not become trapped or accidental.

## Quality and accessibility bar

- Use a real authored inline SVG illustration or canvas scene as the dominant visual.
- Preserve high contrast, visible keyboard focus, semantic buttons/landmarks, and sensible reading order.
- Keep animation smooth and avoid console errors.
- Make the first 1600×900 load strong enough to compare directly with the shared reference image.
- Capture the submitted screenshot at exactly 1600×900 on the intro scene.

## Evaluation rubric (100 points)

- **Reference translation and composition — 25:** hierarchy, asymmetry, palette, editorial grid, and first-load impact.
- **Solar-system depth — 20:** central body, independent spheres, orbit quality, occlusion, lighting, stardust, and spatial layering.
- **Four-scene choreography — 20:** meaningful scene-specific composition and convincing orbital/camera transformation.
- **Interaction fidelity — 15:** wheel, keyboard, visible navigation, touch, cursor particle response, focus reveal, and local shimmer all feel intentional.
- **One-viewport responsiveness — 10:** no document scroll or clipping at either required viewport.
- **Accessibility and stability — 10:** focus, semantics, reduced motion, contrast, and error-free behavior.

Passing the static validator is only the floor. Visual quality and interaction polish are judged against this rubric and the reference image.