Tendero has a home page: a 41-second film, and music, made of code

TL;DR

• Tendero now has a landing page: what it is for, where each part stands, and how to run it.
• Its 41-second film is not a video file. It is a web page, drawn with the design system, and rendered to MP4 from the same code.
• The music is written in code too, and it ends on a three-note identity: TEN-de-ro.

The film plays muted, as browsers require — turn the sound on for the music.

Until today, the only way to understand Tendero was to read a README. That is fine for a developer who already decided to look. It is not fine for anybody else. So Tendero has a home page now: https://tendero.elguerre.com.

What the page says

It says what Tendero is for, and not only what it sells. A credible commerce platform. Commerce that AI agents can use. Production-grade AI in .NET. How to build with an AI coding agent without the project falling apart. Learning in public, through these articles. And permissive licences for everything it uses.

There is also a drawing of the architecture you can open: from outside, one system that people and agents use; inside, its ten containers. A check holds it to the architecture model, so it cannot show a box the code does not run.

Every feature on the page says where it stands. The MCP server is shipped. UCP checkout says phase 11, because it does not exist yet. A landing page is the easiest place in the world to claim things that are not built. This one tries not to.

A film that is really a web page

The film in the hero is not an MP4. It is a small web page that draws one 1920×1080 stage as a function of time: at second t, every element has one position and one opacity, and nothing else decides it. The page plays it live, in silence. It stays sharp at any size, weighs a few kilobytes, and its text is real text that a screen reader and a search engine can read.

The same page becomes the video. A script opens it in a headless browser, asks for each frame at exactly n / 30 seconds, and takes a screenshot: 1,230 frames. ffmpeg joins them with the music into a 2.7 MB MP4. A slow computer gives a slow render, never a jerky film.

Everything on screen is true of the repository: a real product from the seed catalogue with its real price, the real states of an order, the search quality numbers from the CI gate, and a trace from the shopper’s click to Elasticsearch that I measured the same day.

Music written as code

The sound is Tendero’s own. A script of under 300 lines builds every sample: a marimba, the bell over a shop door, soft chords, and — from second 14, when the agents appear on screen — an electronic pulse. It is original, it owes nothing to anybody’s licence, and it produces the same file every time. The film opens and closes on three marimba notes, one per syllable: TEN-de-ro.

How it was made

I built it with a coding agent, in six steps, and none of them needed a video editor or a music app.

1. Start from the design system. The page and the film use only Tendero’s design tokens, fonts and logo, copied in when the site is built. Nothing is written twice, and a test fails if a stylesheet contains a colour that is not a token.
2. Write the film as a timeline. One table says when each scene starts: 0, 6, 14, 22, 30 and 36 seconds. Every element on screen has keyframes, and one function draws the whole stage for any second t.
3. Compose the music on the same table. At 120 beats per minute a bar lasts two seconds, so every scene change falls on a bar. The script builds the marimba, the bell and the pulse from simple waveforms and writes a WAV file.
4. Render it frame by frame. A headless Chromium opens the film, moves it to each 1/30 of a second and takes a screenshot. ffmpeg turns the 1,230 frames and the music into an MP4 for every browser, and a smaller WebM. On a laptop the whole render takes about a minute and a half.
5. Check it before trusting it. A few still frames first, to review the design. Then the page in a real browser, on a desktop and on a phone. The architecture drawing has its own check in CI: it must match the architecture model, box by box and connection by connection.

Go and look

The page is at https://tendero.elguerre.com. Press Watch the film to hear it — browsers only allow sound after a click. The page’s code lives in the repository, in landing-page/, and reaches the public repository with a later article.

Next article: Design before code — the design system this page is built from, and why it came before the first screen.

Tendero — commerce for humans and agents.