Neon | Devpost

Flickering planet neon sign
Flickering flamingo neon sign
Flickering palm tree neon sign

Inspiration

After seeing such a classic puzzle from our childhood digitalised, we were inspired to use a neon lights theme for our design. Neon lights remind us of both the past, and the future. We also set out to create a puzzle that was user friendly and engaging.

What it does

As the player moves all of their tiles into the correct sequence of 1 to 15, they can enjoy watching each tile spin towards its new spot. If a player clicks on a tile that can’t move, it gives a little jiggle as it turns red for a moment, and then settles back into its original position. In the corner of the screen is a flickering neon sign that changes each time the user refreshes the browser. It could be a planet, a palm tree or a pink flamingo! There is also an unobtrusive help section that slides up to reveal the goal of the game, as well as instructions on how to play.

How we built it

To build the puzzle, we expanded on the sample code with a cool neon theme, additional properties, widgets and I10n text. Initially, we styled the tile using Flutter material theming including box shadows and other effects, before replacing it entirely with a Rive, vector-based animation. Using Rive, we were able to have more animation options and the designer was able to go wild with creation, with minimal developer input or time. The animation is still really smooth and responsive, and extremely interactive.

Challenges we ran into

Our core challenge was the seamless integration of Rive animations into our puzzle.

Accomplishments that we're proud of

We’re happy that we were able to implement a neon lights-themed design, as well as two Rive-based animations for the puzlle. The spinning animation that moves tiles from one position to another is interesting and makes the puzzle more intuitive. The red ‘jiggle’ animation is fun and also adds to an intuitive experience.

What we learned

To control the timing of our Rive-based animation, we implemented ‘Idle’ animations that are swapped out with another animation at the appropriate time.