Articles

I sometimes write here, sometimes elsewhere. Find all my writings below 📜📕📰🖋️.

Filters

  • How to Animate the Details Element Using WAAPI

    Animating accordions in JavaScript has been one of the most asked animations on websites. Let's see how we can make it happen using the native details element and the Web Animations API!

    Read me on CSS Tricks
  • Abstract pattern made out of hundres of black lines drawn on a paper Random walkers

    Maybe you have heard about random walkers but you don't know how to use them in generative art.
    Today we will see how you can control walkers to make them less random and produce more interesting results like this.

    Read me on Generative Hut
  • Click on me written in a button. There are particles floating all around the button Playing With Particles Using the Web Animations API

    When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.

    Read me on CSS-Tricks
  • Louis Hoebregts and Lukas Liefsoens trying Instagram filters Digital Lab #1: Instagram filters

    Instagram is a hot spot. And now that everyone can create custom filters, it has turned even hotter.
    Instagram filters are all the hype right now. New ones pop up every day. Some go viral in a matter of days.

    - Article written together with Thomas Byttebier and Lukas Liefsoens

    Read me on Base Design
  • Hundres of mouse cursors Simulating Mouse Movement

    If you’ve ever had to display an interactive animation during a live talk or a class, then you may know that it’s not always easy to interact with your slides and while talking.

    Read me on CSS-Tricks
  • A 3D sphere made out of hundreds of black dots How to render 3D in 2D canvas

    As we were exploring options on how to best illustrate a brand story recently, we came up with a pretty interesting prototype: a multi-step animation that starts with a rotating globe full of particles.

    Read me on Base Design
  • Two screenshot of websites on a mobile phone. The first one is not fitting the mobile height perfectly The trick to viewport units on mobile

    Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

    Read me on CSS-Tricks
  • Screenshot of Momu website with blue rectangles highlighting the spacings Spacings and CSS Custom properties

    Early on when working on the website for Antwerp’s fashion museum MoMu, we decided to follow a more systematic approach to design. It made a lot of sense for the project, as it had to be a scalable system much more than a custom designed set of pages.
    So by making design more systematic, it should prove easier to code.

    Read me on Base Design
  • Illustration of a bird in a black square Creating a Panning Effect for SVG

    In this article you will learn how to let your user drag & drop within your SVG. Don't skip the bonus part as it show lots of unknown SVG features such as converting mouse coordinates to viewbox coordinates!

    Read me on CSS-Tricks
  • HTML Modal with lorem text and a block button misplaced on top right Scrollbars & CSS Custom Properties
    Scrollbars on Windows are taking some space in the viewport.
    vw units don't take scrollbars into account.
    Fixed buttons in fixed modals are relative to the viewport and not the modal.
    Read me on CodePen
  • 3D blob shape with Quantum written in front Decorative WebGL Backgrounds

    A collection of decorative shapes displayed as backgrounds using WebGL. Shapes are created with Three.js and animated with the GreenSock library.

    Read me on Codrops
  • A 3D tube with a texture of purple galaxies Infinite Tubes with Three.js

    Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.

    Read me on Codrops
  • A 3D tunnel made out of hundres of rainbow color particles Tunnel animation

    If there’s one thing I truly love, it’s tunnel animations 😍
    I will try in this post to explain the basic setup for one of this demo.

    Read me on CodePen
  • A 3D sphere made of hundres of particles Create your own sphere in CSS

    Have you ever dreamed of creating a sphere made out of particle with nothing but CSS and a bit of math?

    Read me
  • Christmas gift box with a ribbon. Open your gift is written on it. Animating the viewBox

    I recently posted a pen to celebrate the new year and I got a lot of positive feedback on how I used the viewBox as a camera in my scene.
    I decided to write a post to explain how I managed to create such animation :)

    Read me on CodePen
  • How to convert an image into particles

    I love particles, I really do. For some effects I need to convert one bitmap image into lots of tiny particles. Here is how!

    Read me