Experiminerings
Del Maphcase

Experiments

  • Circle Text Hover

    Circled text that's visible on hover.

    Hengoan

  • DVD Screensaver

    The classic DVD screensaver made as a web component.

    Hengoan

  • Fit To Width Text

    Fit to width-text using css only.

    Hengoan

  • Interactive video

    Interactive video testing with a web component.

    Hengoan

  • Marquee

    Marquee setup for Thempo Theam.

    Hengoan

  • Mesh gradients

    Animated css mesh gradients for stylish backgrounds.

    Hengoan

  • Responsive tables

    Responsive tables using table-saw by Zach Leatherman.

    Hengoan

  • Shader thingy

    A WebGL fragment shader renderer web component.

    Hengoan

  • Sharing

    Share pages on socials and optionally use native share options.

    Hengoan

  • SVG Logo

    Creating the maphcase logo in SVG by hand, as far as possible

    Hengoan

  • View/scroll timeline

    Some testungs with scroll and view timeline animations.

    Hengoan

View transitions and speculation rules

This site utilizes the View Transitions API. The logo in the header has a view-transition-name. When you navigate to a page with the same view-transition-name defined on the logo, the logo will animate. (it's defined in the css for the a element that contains the logo)

View Transitions work by fetching the new page, rendering it and then animating 'screenshots' of the elements on the current page and on the new page. The screenshots are then animated from the old 'state' to the new. This might not go so smoothly when the request for the new page takes a while, it may appear the site is 'hanging'. This is where the Speculation Rules API comes in handy.

On some pages you can find a script tag of type speculationrules. It contains a json object describing what to prefetch and what to prerender. I'm still testing things out, but this should improve loading times for follow up requests and thus improve cross-page view transitions.