Web Design Playground

Welcome to my design sandbox.

I needed a space to create reusable components and try out new ideas so I created this page for that purpose.

Lightbox

A fully responsive Lightbox display.
I added a rotate-on-mouseover animation to give the cards a little life.

A top down look at a white ceramic mug of coffee on a white table.Two cooked ears of corn on a white plate and topped with fresh salsa.A stack of pancakes, with a fork sticking out the top, on a plate sitting on a table with a f

Slide over background

I really like this effect for separating sections.

Magnetic Button

A fun little sticky button.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Sorry, but this effect is a mouse animation and therefore does not work on handheld devices.
‍
On smaller devices I use a pill button with a hover animation.

Magnetic Button
Let's Roll
Hover Button
Get Started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Scroll Meter

A Lottie animation file tied to the Section scroll