Studio lab

Techniques, live.

A playground of what modern websites can do. Every demo below is running right now in your browser, with a note on what it shows. Each one switches off its motion if your device asks for less.

  • three.js + WebGL

    A field of light

    Thousands of points drawn by your graphics chip, rippling in real time and leaning toward your pointer. Its code loads only once you start to scroll, tap or move your pointer, so it never slows the first view.

  • CSS scroll-driven animation

    Moves as you scroll

    These bars grow as the card scrolls through the screen, run entirely by the browser with no JavaScript at all.

  • Variable fonts

    One font, every weight

    A single font file holds every weight from regular to extra bold. Slide to change it live.

  • Container queries

    Layouts that fit their box

    This card rearranges itself based on the space it has, not the size of the screen. Make the box narrower to see it change.

  • GSAP SplitText

    Letters that land

    A headline split into letters, each animated on its own. Screen readers still hear the whole word, once.

  • Get a free quote

    Pointer physics

    Magnetic button and 3D tilt

    With a mouse, the button leans toward your pointer and the card tilts in 3D. On touch screens they simply sit still.

  • View Transitions API

    Smooth changes of state

    The browser animates between two versions of this card: the wireframe and the finished design. The same feature fades between pages as you move around this site.

  • CSS @property

    A living gradient

    Colour stops registered as real properties, so the browser can animate the gradient smoothly. Pure CSS.