As far as gameshows go, De Mol is a pretty popular one over here in Belgium.

As it turns out, we have some huge fans in the AppFoundry ranks and this year they got quite creative.

It started with an idea by Senne for a team competition 'who can guess this year's winner', after which Sacha took the challenge upon himself to create a kick-ass experience. And of course we wouldn't be user experience freaks if we didn't go all the way!

Check out the team's Mol Poll experience 👉 molpoll.appfoundry.be.

The game is on!

Here's some technical stuff to get you started!

Next.js

To get started quickly we used a custom Next.js template which is based on the template generated by `create-next-app`, modified with some opinionated linting rules and to suit our common workflow.

https://nextjs.org/docs/api-reference/create-next-app

Three.js, WebGL & GLSL

For the particles we used a combination of Three.js, WebGL and GLSL.

For a more minimal tweaked version of this you could get away without using GLSL. However, if you need a nice custom feel for your particles, you will most likely need shaders.

We used shaders for coloring the particles based on an image, but also to create interactivity. Moving the cursor over the canvas draws a trail on an invisible plain, which we then use in our shaders to calculate particle displacement.

Learning Three.js might seem overwhelming at first if this is your first contact with 3D, but there's plenty of resources out there to help you get started.

If you want to know about how to work with particles without killing performance, make sure to check out `BufferGeometry` and `InstancedBufferGeometry`.

https://threejs.org/docs/#api/en/core/BufferGeometry

https://threejs.org/docs/#api/en/core/InstancedBufferGeometry

https://threejs.org/examples/?q=particl#webgl_buffergeometry_custom_attributes_particles

Tweening & timing

To create smooth transitions between 'pages' and states, we used a combination of custom code & tweening for GSAP.

https://greensock.com/gsap/

Enjoy coding!