Banja Lab / Benchmarks / Test
The same task, run on 28 models. Compare the outputs side by side, or open any one in a popup to inspect it.
Top result: Cass Werner (Opus 4.8) (high reasoning) at 87.5% composite. Lowest: Cass Werner (deepseek-v4-pro) at 0.0%. 28 models compared on this task.
# Client brief: the Aurel Halo launch You are designing and building an interactive launch microsite for a real product. The brief below gives you the business facts, the goal, the audience, the sections the site must have, and the exact content to use. It gives you no visual direction on purpose. Every design decision - layout, type, colour, imagery, motion, tone - is yours to make. Read the whole brief, form a point of view on how this product should be revealed, and build it. ## The company Aurel Acoustics is a small audio company based in Brunswick, Victoria. It was started in 2019 by two people, Priya Raman, who came from industrial design, and Daniel Osei, who came from acoustic engineering, after years of designing audio hardware for other companies. The Halo is the first product they have released under their own name. They are launching it with pre-orders before the first production run ships. ## What the site is for This is a launch page for one product, the Aurel Halo, a wireless home speaker. The single most important thing the page must do is get a visitor to reserve one. A reservation is a fully refundable fifty dollar deposit that holds a unit from the first production run. Everything on the page builds toward that action. ## Who it is for People buying a considered, premium home speaker: someone who cares how a thing is made and how it sounds, is comparing it against other high-end speakers, and wants to understand the product properly before putting money down. ## The experience the company wants The company's one request about the experience, not the look: they want the whole page to be an immersive, scroll-driven three-dimensional world with the Halo at the centre of it. As a visitor scrolls, the product should be revealed and moved through space, turning, and opening up so its parts and features are shown one at a time, inside an environment rather than on a flat page. The hero should present the product arriving or being revealed in real 3D, rendered with WebGL, and the feature sections should each be a distinct 3D moment that reveals one feature. Build the product itself entirely in code from geometry, materials, and lighting: construct it from primitives and procedural geometry, with no external 3D model files and no downloaded assets of any kind. How you achieve all of this is entirely your call. This is a note about the experience, not a style instruction. Two firm rules come with it. First, any motion must respect a visitor's reduced-motion preference. Second, the page must not depend on WebGL to be usable: if 3D is unavailable or reduced motion is requested, the whole page must still present every section and all of the content below as a calm, readable, static page, with no information conveyed only through movement or through the 3D scene. Never leave a visitor with a blank screen or a missing section because a canvas failed to start. ## What the site must contain (all of these sections, as scenes in the experience) - an opening hero that reveals the product in 3D and carries the product name, the brand, and the primary reserve action, - the product story (why the company built the Halo), - the feature scenes: one distinct 3D moment for each of the five features below, each presenting that feature with its fixed benefit and spec, - the full specifications table, - the pricing and reserve section, with the price, the deposit, the availability, and the reserve action, - a final call to action and a footer with the company's contact details. ## Content to use Use the content below substantially as written, in Australian English. You may write your own section headings and any short connective microcopy (button labels, captions, form labels), but the facts, figures, names, and numbers are fixed. Do not invent extra features, drop any of the five, or change the specifications, the price, or the availability. ### The product The Aurel Halo is a wireless home speaker. It has a one-piece cylindrical body machined from a single billet of aluminium, with a band of acoustic fabric around its middle and a control dial on top. It stands 230 millimetres high and is 120 millimetres in diameter. It fires sound in every direction rather than at one seat. ### The product story Aurel Acoustics was started in 2019 in a Brunswick workshop by two people who had spent years designing audio hardware for other companies and wanted to build one speaker properly, under their own name. The Halo is that speaker. It took three years and eleven prototypes. The body is machined from a single billet of aluminium so there are no seams to buzz or rattle. The drivers fire in every direction so the sound fills a room instead of pointing at one seat. It is meant to be lived with for a decade, not replaced in two. ### The five features Present all five. Each has a benefit line and a fixed spec. - 360-degree sound. It fills a room from anywhere you put it, with no single listening seat. Spec: one 130 mm downward-firing woofer and four 45 mm full-range drivers arranged around the body. - Room calibration. It tunes itself to wherever it sits, so it sounds right on a shelf or in a corner. Spec: a six-microphone array measures the room and adjusts the sound in about 30 seconds. - One-piece aluminium body. No seams, nothing to rattle, made to last. Spec: CNC-machined anodised aluminium, 2.1 kg, in three finishes. - Multi-room and streaming. Play it on its own or group speakers together across the home. Spec: Wi-Fi 6, Bluetooth 5.3, AirPlay 2, and Spotify Connect; group up to eight speakers. - The dial. Control it by touch, and it wakes as your hand reaches for it. Spec: a capacitive top dial with haptic feedback and a presence sensor. ### The full specifications - Drivers: one 130 mm woofer, four 45 mm full-range - Amplification: 200 W total, Class-D - Frequency response: 40 Hz to 20 kHz - Connectivity: Wi-Fi 6, Bluetooth 5.3, AirPlay 2, Spotify Connect - Dimensions: 230 mm high, 120 mm diameter - Weight: 2.1 kg - Materials: anodised aluminium body, acoustic fabric band - Finishes: Graphite, Sand, Slate - Power: 100 to 240 V, 45 W in typical use - In the box: Halo speaker, 2 m braided power cable, quick-start guide - Warranty: three years ### Pricing and availability - The Halo is 649 Australian dollars. - Reserve one now with a fully refundable 50 dollar deposit that holds a unit from the first production run. - The first units ship in March 2027. - Shipping is Australia-wide. Reservations are limited to the first production run. ### Contact Aurel Acoustics, 14 Weston Street, Brunswick VIC 3056. Email hello@aurelacoustics.com.au. ## Output contract (React, single page) Build one single-page site. Output exactly two files: - `App.tsx` - a default-exported React component. Define any subcomponents in this same file. This is the whole page. - `theme.css` - a Tailwind v4 `@theme` token block, your `font-family` choices from the shared font menu below, and any custom CSS you need. The only imports allowed in `App.tsx` are `react`, `framer-motion`, `lucide-react` (never the Sparkles icon), and, for 3D, `three`, `@react-three/fiber`, and `@react-three/drei`. No other packages, no network requests, and no external assets: all imagery must be inline SVG, CSS, drawn in code on a canvas, or rendered with WebGL. The fonts are bundled offline, so use only the shared menu: Archivo (including Archivo Expanded), Instrument Sans, Space Grotesk, Work Sans, IBM Plex Sans, IBM Plex Mono, JetBrains Mono, Fraunces, Instrument Serif, Playfair Display, Lora, Caveat. Make it responsive across mobile, tablet, and desktop. The page must also remain fully readable and usable if WebGL is unavailable: never leave a visitor with a blank screen or a missing section because a 3D canvas failed to start.
Anthropic: Every required section is present and content-accurate: hero with brand/name/reserve CTA, story with 2019/3yrs/10yrs stats, all five numbered features with benefit and spec, the full specifications table, pricing with $649 and refundable $50 deposit plus finish picker and reserve form, and a final CTA with the Brunswick contact footer. The dark, gold-accented editorial treatment with a tall Fraunces-style serif and the alternating ghost-numbered feature layout is coherent, modern, and genuinely premium. Craft is clean and consistent though the code-built speaker render reads a little plain and
Anthropic: Every required section is present and correct: a 3D-rendered hero carrying the Halo name, brand, and reserve CTA; the "Why we built the Halo" story with the 3yr/11-prototype stats; all five feature scenes (360 sound, room calibration, one-piece body, multi-room, the dial) each with benefit and spec; the full "Every detail" specs table; a $649 pricing/reserve block with the $50 deposit, March 2027 availability, finish picker and form; and a final CTA plus contact footer. The dark, warm-amber palette with a Fraunces-style serif wordmark and left/right offset feature cards reads premium and disti
Anthropic: Every required element is present and correct: hero with product name/brand/reserve CTA, the story, all five feature scenes each with benefit and spec, a full specs table, the $649 pricing with $50 deposit and March 2027 availability plus a reservation form, a closing CTA, and the footer contact details. The dark, restrained aesthetic with a single warm orange accent reads as a genuinely premium audio brand, and the code-rendered cylindrical speaker with its fabric band and dashed feature-highlight callouts is consistent and well-crafted across sections. It loses a little on visual_design and
Anthropic: Every required section is present and correct: hero with brand, name and reserve action; the "Three years. Eleven prototypes." story with the 2019/11/3/10yr stats; all five feature scenes (360 sound, room calibration, one-piece aluminium, multi-room, the dial); a full specs table; the $649 price with $50 refundable deposit and March 2027 availability; and a final CTA plus footer contact block. The visual language is coherent and premium - a warm-on-dark palette, elegant italic serif headings against clean mono/sans body, generous spacing, and alternating left/right feature layouts. Craft is fi
Anthropic: Every required section is present and correct: a 3D-rendered hero with the "Halo" wordmark, brand, and reserve CTA; the product story; all five features with their benefit lines and specs; the full specifications table; pricing ($649, $50 refundable deposit, March 2027, Australia-wide) with a reserve action; a final CTA and a footer with the Brunswick address and email. The dark palette, elegant Fraunces-style serif wordmark, and softly lit floating aluminium speaker read as genuinely premium and coherent, with clean, consistent typography and no visible broken bits. Impact is dampened in this
Anthropic: Every required section is present and content is correct: an AUREL/Halo hero with a rendered speaker and reserve CTA, the "Why we built the Halo" story, all five feature scenes with benefit lines and specs, a full specifications table, a $649 pricing block with $50-deposit reserve and finish swatches, plus a final "Hold a unit" CTA and a footer with the Brunswick address and email. The aesthetic is coherent and premium: dark palette, restrained amber accent, clean type hierarchy, and an asymmetric scattered-card feature layout that feels modern. The main weakness is the large empty black voids
Anthropic: Content fidelity is high: the hero (Halo, brand, reserve CTA), story, all five features with their benefits and specs, the full specifications table, pricing at A$649 with the $50 refundable deposit and March 2027 shipping, a final CTA, and a footer with the Brunswick address and email are all present and correct. The execution is a coherent, restrained Swiss/blueprint editorial style - off-white ground, red accent, monospace figure captions (FIG. 01...) and well-aligned spec rows - which reads as premium and consistent, though the product is shown only as minimal flat line diagrams rather tha
Anthropic: Content fidelity is strong: hero with brand/product name/reserve CTA, the "Why we built it" story, all five features with benefit lines and specs, the full spec table, the $649 pricing/deposit/March 2027 availability with email capture, and a final CTA plus footer contact are all present and accurate. The warm cream-and-terracotta palette with serif display headings is coherent, calm, and tastefully spaced, and the alternating left/right feature cards read cleanly. However this is clearly the static fallback (no visible WebGL 3D world), the hero product is a small flat SVG rather than a render
Anthropic: All required content is present and correct: hero with product name/brand/reserve action, the product story, all five feature scenes with their benefit lines and specs, the full specifications table, the $649 pricing block with the $50 refundable deposit and Graphite/Sand/Slate finishes, a final CTA, and a footer with the Brunswick contact details. The dark, warm-amber palette with serif display type and monospace labels is coherent and appropriately premium, and detailing is clean with no broken bits. However, the promised immersive 3D product journey is barely evident in the static capture -
Anthropic: Every required section is present and content-correct: hero with Halo name, AUREL brand and Reserve CTA; the story with 2019/11 prototypes/3 yrs stats; all five numbered features with their benefit lines and specs; a full specifications table; the A$649 pricing block with the refundable $50 deposit and reserve form; and a final CTA plus footer with the Brunswick address and email. Visually it is a calm, coherent editorial layout with a warm off-white ground, graphite product and a single rust accent for actions, tasteful type and generous spacing, and no broken or misaligned elements. Judged a
Anthropic: Every required section is present and correct: bold editorial hero with product name/brand/reserve CTA, the "built slowly" story with the decade quote, all five features (each with benefit and spec), a complete specifications table, the $649/$50 deposit/March 2027 pricing block with a reserve form, a final CTA and a footer with the Brunswick address and email. The visual language is coherent and distinctive - Archivo Expanded caps, serif italic accents, and a confident red/yellow/cream/black palette that reads premium and modern in the composed sections. The major weakness is the enormous stre
Anthropic: All required content is present and correct: hero with brand/name/reserve CTA, product story quote, all five features with benefit and spec, the full specs table, $649 pricing with the refundable $50 deposit and March 2027 ship date, and a footer with the Brunswick address and email. The palette is bold and editorial (red/cream/yellow/black with strong Playfair-style serif display), coherent and reasonably composed. The major weakness is the hero: where the brief's central 3D product reveal should be, there is only an empty outlined red square with faint "HALO" text, which reads as a missing/b
Anthropic: All required sections are present and correct: hero with HALO name/brand/reserve CTA, the "built properly" story, all five feature scenes with benefit and spec lines, a full specifications table, a $649 pricing/reserve block with the $50 deposit and March 2027 ship date, a final "EVERY SEAT" CTA, and a footer with the Brunswick address and email. The aesthetic is a coherent, technical dark editorial system with monospace labels and section numbering, but it reads austere and sparse: the WebGL speaker renders are small, dim grey cylinders floating in large empty black fields, and much of the bo
Anthropic: All required content is present and correct: hero with brand/name and reserve CTA, the product story, all five features with benefit lines and specs, the full specs table, pricing ($649, $50 refundable deposit, March 2027, Australia-wide), final CTA, and the footer contact block, in Australian English. The palette (warm cream, sage-green buttons, terracotta and Caveat script accents) and serif display type are tasteful and coherent, but the layout reads as the static fallback with no visible 3D: features are plain text with tiny generic icons and the hero's speaker is a small, crude illustrati
Anthropic: All required content is present and correct: hero with brand/name/reserve CTA, product story with the eleven-prototypes/decade framing, all five features each with benefit and spec, the full specs table, the $649 / $50-deposit / March-2027 pricing card, a final CTA, and the Brunswick contact footer. The type is clean and the green-accent hero is tidy, but the five feature scenes are small text cards stranded in vast empty bands, so the page reads sparse and unbalanced through its middle rather than immersive. The static renders are modest and the overall result feels thin and unfinished for a
Anthropic: All required content is present and correct: hero with brand/name/reserve CTA, product story, all five features with benefit lines and specs, the full specifications table, $649 pricing with the refundable $50 deposit and March 2027 availability, and a footer with contact details. However, the brief's signature request - an immersive scroll-driven 3D world with distinct WebGL moments per feature - is essentially absent; the hero shows only a plain, slightly crude cylinder render and the feature sections are flat text blocks, so this reads as the static fallback rather than the intended experie
Anthropic: All required sections are present and content-accurate: hero with name/brand/reserve, story, all five features with their benefit and spec, the full spec table, AU$649 pricing with the $50 deposit and March 2027 shipping, final CTA, and footer contact. The aesthetic is a restrained editorial one (serif headings, small-caps labels, dotted-grid background, generous whitespace), which is coherent, but the 3D/product visuals fall flat as a static render: the hero is a plain black rectangle with dimension callouts and the feature "moments" are crude black circles, dots and blobs that read as accide
Anthropic: The content is complete and correct: hero with brand/name/reserve, story, all five features with benefit and spec, the full specs table, a pricing/reserve block with finish selector and email field, and a footer with contact, so brief fidelity is high. Visually, though, the page reads as nearly unstyled - tiny left-aligned black body text with no hierarchy, and default blue underlined links ("Reserve yours for $50", "Meet the Halo", the email) that look like broken CSS rather than deliberate design. Craft suffers from run-together nav labels ("AurelAcoustics", "StoryFeaturesSpecifications") an
Anthropic: All required content is present and correct: hero with product name/brand/reserve CTA, story with the stat callouts, all five features each with benefit and spec, the full specifications table, pricing (A$649, refundable A$50 deposit, March 2027, Australia-wide), final CTA and a footer with the Brunswick address and email. But the execution is weak: nearly everything below the hero is tiny, default-weight text jammed against the left edge with almost no typographic hierarchy, so it reads like an unstyled document rather than a premium, composed launch page. The one bright spot is the coded spe
Anthropic: All required content is present and correct: hero with the Halo name, brand, and reserve CTA; the three-years story; all five features with benefit and spec; the full specs table; $649 AUD pricing with the refundable $50 deposit and March 2027 shipping; and a footer with the Brunswick address and email. But the brief's core immersive 3D speaker reveal is essentially absent - the hero product is a crude outlined rectangle with a grey band that reads as a broken placeholder, and the feature sections carry vast empty vertical gaps that make the page feel unfinished rather than premium. Typography
Anthropic: All required content is present and correct - the 3D hero with product name/brand/reserve CTA, the story with stat callouts, all five features with benefit and spec, the full spec sheet, pricing/deposit/availability, final CTA, and footer contact - so brief fidelity is strong. But visually the page collapses below the hero: the top nav concatenates as "AUREL ACOUSTICSReserve - A$50", and the story, features, specs and reserve form all render as tiny unstyled text crammed into a narrow left column with no grid, cards, or spacing. The 3D speaker render is genuinely nice and premium, but the brok
Anthropic: All required content is present and correct - a 3D-rendered cylindrical speaker in the hero and a feature scene, the story, all five features with their specs, the full specifications table, pricing with the $649 price and refundable $50 deposit, a reserve form, and footer contact details - so brief fidelity is strong. But the surrounding page is largely unstyled: the top nav and inline links render as raw blue underlined text, body copy is tiny low-contrast grey on black, and the feature/section headings carry broken tofu-glyph icon characters (e.g. the box before "01 / Sound"). Aside from th
Anthropic: All required content is present and correct: hero with the Halo name, Aurel brand and reserve action, the product story with stats, all five features each with benefit and spec, the full specifications, pricing (A$649 / A$50 deposit / March 2027), finish picker, reserve form and footer contact - strong brief fidelity. But visually it reads as an almost-unstyled document: default-looking serif headings mixed with tiny body text, no colour system, no spacing hierarchy, plain browser form controls and radio-style finish buttons, and a rudimentary flat-shaded cylinder standing in for the speaker.
Anthropic: All required content is present (hero with name/brand/reserve action, story, all five features with benefit and spec, full specs table, pricing/deposit/availability, final CTA and contact footer), and the hero renders a credible procedural 3D speaker, so the brief is substantially covered. But the page renders essentially unstyled: default browser serif type, default-blue underlined links, no layout, spacing system, colour palette, or component styling, so the whole thing reads as a broken raw HTML document rather than a premium microsite. Visual design, craft, and impact are near-zero because
Anthropic: Content is complete and correct - hero with product name, brand and reserve CTA, the story, all five features with benefit and spec lines, the full specifications table, pricing with the refundable $50 deposit and March 2027 ship date, and the footer contact - so all the brief's required information is present. However this is the raw unstyled fallback: default black-on-white text with a faint dot grid, no colour system, no type hierarchy, no imagery, and none of the requested 3D or visual design. Craft is broken too (cramped table cells such as 'Frequency response40 Hz'), leaving it with no p
Anthropic: The screenshot shows a completely blank near-black page with no visible content whatsoever: no hero, no product, no headings, no sections, no pricing, no footer. None of the brief's required content is present, and the brief explicitly warned never to leave a visitor with a blank screen. There is nothing to evaluate for design, craft, or impact because nothing rendered.
Anthropic: The screenshot is entirely blank - a fully white page with no visible content of any kind. None of the required sections (hero, product story, five feature scenes, specifications table, pricing/reserve, footer) are present, and there is no static fallback. This is precisely the failure the brief forbade: leaving a visitor with a blank screen when the 3D scene fails to start, with no readable content behind it.