Website favicon
Website favicon

About this website

Source code

Live website

Year

2024

Role

Design & Development

Landing page of this website

I made this website as a project to experiment with Next.js. It is 100% code-based and original in design, built from the ground up. One of the experiments I did was to mix canvas with HTML elements in a physics engine.

Skills I used

image
image

The physics simulation is achieved with Matter.js. To make the ball bounce on text, the size and position of the divs were calculated into the canvas to create the collision bodies. When the window resizes, the canvas will get rerendered to re-calibrate.

Besides canvas, I also used the Framer Motion library to create smooth transitions and parallax scrolling effects.

image

Next

Website interface that tells time

Time Machine

Feature

Multi-devices clock syncing

Read more