Skip to content

CrazyTim/countdown

Repository files navigation

thumbnail

Countdown

A replication of the countdown animation in the film Mission to Mars made with three.js and tween.js.

View the live version here.

Getting Started

Install Node.js, clone this repo, then run:

npm install
npm start

Notes

I love the design of this binary timer. The rings appear to be resting on a translucent surface, which gives a sense of depth as they rotate through it. I used many layers of transparency beneath the rings to create this effect.

Also it was challenging to position the camera and perspective the same as the movie. I had fun referencing the movie and learnt a lot.

Interesting fact: having only 7 rings rotating at this speed lasts about a minute, which wasn't long enough for the scene in the movie!