Playground

Next.js, Tailwind CSS, and Framer Motion are my go-to tools for transforming designs into reality. This space showcases the exciting projects I've created while experimenting with these powerful technologies. More motion projects can be found here , or you can check them all out on my Github.

Lap 25

F1 Live Activity

Recreation of Apple's F1 live activity concept shared on WWDC23.

Next.js

Tailwind CSS

Framer Motion

Success Button

Button with multiple states to indicate loading and success.

Next.js

Tailwind CSS

Framer Motion

Son Heung-min

Up Next

Dynamic Card

Interaction based on iOS Dynamic Island. Here used to see more info about a player in PLF.

Next.js

Tailwind CSS

Framer Motion

THE NATIONAL

Text Clipping Mask

Experimenting with text clip mask. Trying to recreate standard effects from After Effects with code.

Next.js

Tailwind CSS

Framer Motion

No files found

Your search had no results. You can clear
your search or add new documents.

File Drop

Animated empty state with illustration and hover state.

Next.js

Tailwind CSS

Based in Spain

Working Remotely

Progressive Blur

Playing around with CSS masks and background blur. I also applied various CSS filters to the video.

React

CSS

Sound mode

Enhance Vocals

Bass Boost

Custom Sound

Audio Slider

Playing with CSS shadows, masks and gradients. Added a small animated SVG there too. Functional slider is a work in progress.

Tailwind CSS

Floating Navbar

Simple navbar I created to work on the logic of only having one item active at a time.

React

Tailwind CSS