How an AI built this site — and what it means for the AI-era web

Can you build a cursor-reactive WebGL hero without Three.js?

Yes — the hero on this site is 88 lines of GLSL running on raw WebGL, with no Three.js and no 3D library. Three.js is convenient but ships hundreds of kilobytes for work a single shader can do. When the goal is one full-screen effect rather than a 3D scene, raw WebGL is smaller and faster.

The technique: render one full-screen triangle, then do all the work in the fragment shader. The aurora is fractal Brownian motion over simplex noise, domain-warped for an organic drift, and driven by three uniforms — elapsed time, the cursor position, and scroll progress. Device-pixel-ratio is capped at 2 (1.5 on mobile) and the render loop pauses when the canvas leaves the viewport, which keeps it at 60 frames per second without a measurable battery cost.

The full shader is viewable in js/shader.js in the public repository. The lesson: for a single hero effect, a hand-written shader beats a library on both weight and control.

Does banning stock images make AI-generated design more original?

In this build, removing every image forced the model to create rather than assemble — and that produced a more distinctive result than unlimited resources would have. The finished site contains zero images, zero video and zero stock assets; the only file on disk is one hand-drawn SVG favicon. Every visual is computed: WebGL shaders, pure CSS, and hand-drawn SVG.

The mechanism is worth naming. Given unconstrained choices, a generative model drifts toward its most probable output, which is also the most generic — the texture people now recognize as "AI slop." A hard constraint removes the easy average and pushes the model off that mean. Banning stock did not add effort so much as close the lazy path: the model could not drop in a hero photo, so it computed an aurora instead; it could not source product mockups for six landing-page templates, so it drew them as SVG.

The practical takeaway for anyone directing these models: the constraint is the craft. Many complaints that "AI output is too generic" are really briefs that were too open.

Which 2026 CSS features does this site use in production?

The site ships eight recently-shipped CSS platform features as live, progressively-enhanced production code — not demos. Each is used where it removes JavaScript or improves fidelity:

• OKLCH & wide-gamut P3 color — a perceptual color space; on a P3 display the site's accent sits outside the older sRGB range entirely.
• Scroll-driven animations (animation-timeline) — the scroll-progress bar and reveal effects run on the compositor, off the main thread, with no scroll listener.
• Anchor positioning — tooltips tether to their trigger in pure CSS, with no positioning library.
• Popover & invoker commands — top-layer panels with light-dismiss and focus handling, zero JavaScript.
• @property animated gradients — a registered <angle> custom property makes a conic gradient itself animatable.
• Container queries — components respond to their own width rather than the viewport.
• @starting-style — entry animations for elements arriving in the top layer.
• interpolate-size & ::details-content — native accordions that animate to height: auto.

All eight degrade safely: where a browser lacks a feature, the content remains usable. Browser support for each can be checked on caniuse.com (verified June 2026).

Which conversion patterns held across all six industry templates?

Across SaaS, e-commerce, fintech, healthcare, real estate and restaurant templates, six conversion patterns recurred regardless of industry. They are drawn from 2025–2026 conversion-rate-optimization research and implemented identically in each template:

1. One conversion goal per page, repeated, with no competing call to action. In Unbounce's analysis of 18,639 landing pages, single-CTA pages converted higher than pages with several competing actions.
2. A doubt-remover directly under the primary button — "no credit card", "free cancellation", "no obligation" — placed where hesitation peaks.
3. Social proof adjacent to each call to action, not quarantined in one carousel: a rating with a review count, or a named result.
4. Objection-phrased FAQs written as the questions a skeptic actually asks, using native disclosure widgets.
5. A sticky mobile call-to-action bar. Contentsquare's 2026 mobile study reported sticky bottom CTAs lifting mobile conversions materially; the effect is mobile-specific.
6. No dark patterns — no fake countdowns, no fake scarcity, no confirmshaming; transparency used as the conversion tactic instead.

Each template is a live page, viewable from the showcase. The pattern, not the palette, is what transfers between industries.

Why does a showcase site publish machine-readable notes at all?

Because a beautiful site that an AI engine cannot read does not exist in an answer. A large share of AI crawlers do not execute JavaScript, so any content that appears only after scripts run is invisible to them. This site keeps all meaning in the first HTML payload, mirrors it in llms.txt and markdown, and aligns its structured data with the visible text.

That is the wider point of these notes: the human layer — motion, shaders, 3D — is progressive enhancement; the machine layer carries the meaning. Getting cited by an answer engine is downstream of being readable by one.

Glossary

Generative Engine Optimization (GEO)

The practice of structuring content so AI answer engines quote and cite it inside a generated answer. The unit of success is a citation, not a ranked position.

Cost of Retrieval

The computational effort an agent or search engine spends to discover, read and trust a site's content. Clean HTML, structured data and machine-readable files lower it.

Agent-readiness

The degree to which a website is legible to machines — discoverable, readable without JavaScript, and trustworthy via structured data.

Regression to the mean (in generative models)

Given unconstrained choices, a generative model tends toward its most probable, most generic output. A hard constraint pushes it toward a more distinctive result.

Frequently asked