16. Ordinals & view transitions

The template context for rendering posts has an new metadata field, ordinal. This contains the number of the post, starting with 1 for the oldest post.

One possible use for this is just to add the number to the heading of the posts. Another is to facilitate view transitions.

View transitions

There is a fairly new CSS feature called view transitions that allows page authors to animate the replacement of a web page when following a link. When an element on the new page and one on the old page have the same view-transition-name property, the default animation transforms the old element to align with the new one, while cross-fading between them.

So for example, we can swoosh between the title of a post in the index and the article heading by giving the link title and the heading the same value for view-transition-name. For this to work we need CSS-style identifiers to use as the names, unique for each post, and since we can’t depend on the file names being valid identifiers, we can use ordinals.

For example, in the template post.html we can have something like this:

<article style="view-transition-name: post-{{ordinal}}">
    <header><h1>{{ordinal}}. {{ title }}</h1></header>
    …
</article>

This corresponds to a similar declaration in the index.html:

{{#reverse_chronological}}
<li>
    {{#published}}
    <time datetime="{{iso_date}}">{{day}} {{month_name}} {{year}}</time>
    {{/ published }}
    <a href="{{ href }}" style="view-transition-name: post-{{ordinal}}">{{ordinal}}. {{title}}</a>
</li>
{{/reverse_chronological}}

Finally the incantation that opts the page in to the view-transitions framework. This goes in inline.css so that it appears on every page:

@media not (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: auto;
    }
}

The result is that the title of the post seems to expand in to the post, and vice versa. We can pretend this is in order to help the user link the two together in their mental map of the site.

At time of writing (March 2026) this is not yet Baseline because it is not supported by Firefox, but for the limited use we are making of it on this site this is not much of a loss to Firefox users.