Front-end challenge

I love finding delightful UI elements on the web and I think recreating components is a great way for front-end developers to apply their skills.

If you visited my site before, you probably know I started this challenge with an ambitious goal to recreate 30 front-end components in 30 days. But alas, between job interviews, work and home, I fell behind.

So I'll be continuing the series of front-end challenges, but without a timeframe to allow myself to create polished components. Here are some I've been working on:

01: Vercel's text slider

Inspired by Vercel's iconic 'Develop, Preview, Ship' hero text animation, I created a component that animates a set of given words line by line.

02: A like button that likes you back

Inspired by Josh Comeau's like button, this component animates an SVG and persists the number of likes to a PostgreSQL database using Prisma.

03: Link preview

04: Customizable gradient border

Inspired by the ticket on the Next.js Conf Website. This component uses a CSS workaround to create the gradient border effect and useState() to change its color.

05: Instagram's animated background

Inspired by Instagram's signature gradient backgrounds. This component uses CSS keyframes to create a slight spin effect. The same effect can be found on Instagram's blog headers.

If you have any ideas of any UI elements I can tackle next, please let me know on Twitter!