Skip to content

About this site

A landscape that learns

Why the site looks the way it does, and how it was made.

What is this landscape?

The surface behind the site is a loss landscape. When a machine-learning model is trained, every possible setting of the model has an error, its “loss”. Drawn as terrain, low valleys are good solutions and high ridges are poor ones.

Training is a search for the valleys. Its most common method, gradient descent, keeps stepping downhill until it settles in a minimum. The particles streaming into the valleys follow exactly those downhill paths.

As you move through the chapters, the camera travels from valley to valley, one per chapter: a picture of the kind of learning behind COASSESS’s models. It is an illustration, not real data.

Design choices

One idea per screen
A short story in chapters, each one reachable from the menu. Depth lives on separate pages.
Conceptual visuals, no invented numbers
Scenes illustrate how COASSESS works. Figures appear only with their source and year.
People decide
Every flow ends with a person reviewing and deciding, as it does in the product.

Built with

  • Astro

    Static site generation: every page is plain HTML, CSS and a little JavaScript.

  • TypeScript

    Typed code for the components and the animations.

  • Tailwind CSS

    Utility-first styling for a consistent layout system.

  • three.js

    The 3D landscape and the chapter scenes, rendered with WebGL.

  • GSAP

    The chapter-by-chapter scrolling and its transitions.

The site is served as static files: no database, no server-side code.

Privacy and accessibility

  • Analytics: if you accept, we use Google Analytics 4 to count visits and page views (pages visited, approximate location, browser and device type, referrer), using cookies. It stays off until you accept, nothing else is tracked, and the site has no forms that collect your data. The login page does not load analytics.
  • To opt out, choose Reject in the banner, or use “Cookie settings” in the footer at any time to change your choice. Your choice is remembered in your browser only.
  • Motion respects your system’s “reduce motion” setting; on phones and with reduced motion, the site scrolls normally.
  • Keyboard navigation and semantic markup throughout. We design to WCAG 2.2 AA and keep testing against it.

Designed and built by COVARIANCE with AI assistance.

Back to the overview