How to create simple, long running sand clock, javascript

I'd like to make something like a sand clock with javascript and I'd like to be pointed in the right direction. I have some questions, but first, the idea:

1. There is a rectangle of defined size, this is my container.
2. From the top of the screen, a 5px x 5px square shape will fall out of another container at a defined rate (each created one by one, not all at once).
3. This 5x5 square shape will land in the box and bounce according to tuned physics.
4. After it falls into the box, it will neatly organize itself into a stack, filling the container from left to right, bottom to top.
5. The container will be leaky, and rate at which it leaks will be adjustable.

Now questions:

1. Will I be falling into performance issues (macbook) by having around 200,000 5x5 squares on the screen at the same time? Or is that something a browser could likely handle?
2. What is the best way to create the objects? I'm immediately thinking making each one of them a div is the WRONG way to go. What can I use to make these sort of particles?
3. Are there libraries that will allow me to let them all blend together, but eventually self organize so that they fill the container neatly?

This is a personal development project and my first venture into physics animation using code, and I have no experience in creating particles and physics, so any recommendations would be so greatly appreciated!

TLDR: Looking for help in javascript with:

1. Particle Creation
2. Gravity Simulation
3. Border occlusion between objects
4. Self organization of particles (particles will line up nicely and not overlay each other)
5. Controlled particle deletion
6. General system limitations for a project like this with upwards of 500,000 individual particles

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 06, 2016 at 07:51AM by sachio222 http://ift.tt/1PTbonE