undefined | Better HN

0 pointsSpyCoder772mo ago0 comments

How did you manage to do the animations so nicely? What is the tech stack?

0 comments

4 comments · 1 top-level

paulhebert2mo ago· 3 in thread

The animations are all CSS animations. The tiles and grid are SVGs. No libraries or anything there. All vanilla, written by hand.

I’d like to write up some blog posts about this. Are there specific animations you’re interested in?

The overall tech stack is Vue and Nuxt. I just added user accounts and auth using Supabase.

The tile connection border animation is really cool, is it something special with clip path or something?

The main trick there is animating the stroke on a copy of the tile: https://css-tricks.com/svg-line-animation-works/

I also animate the size and color of the stroke and scale and translate the entire tile

I would also love to read about your puzzle creation process :)

j / k navigate · click thread line to collapse