Layered Image

Inspiration

Traditional timelapse video and swipe-through galleries are effective for quickly capturing interest in an artist's work, but they don't offer an interactive experience that can spark deeper engagement. I wanted to create an image gallery for artists that offered a unique way of interacting with an artwork to grow their community.

What it does

Layered Image is a twist on a traditional image gallery where viewers can explore the gallery at their own pace with a slider at the bottom of the post. The switch between layers is instantaneous, unlike the swiping motion of traditional galleries, allowing quick comparison between images. If transparent images are used, underlying layers are able to shine through, combining to create an image with more depth and detail.

How I built it

Layered Image does not use any external libraries or API's.
Some functionality it include:

• Smooth slider controls
• Drag-and-drop
• Image Layering

Challenges

Since Layered Image has similar functionality to traditional galleries, it was imperative to make it stand out from the crowd with a unique experience. Experimenting with drag-and-drop, layering, and slider interaction beyond the default elevates the experience to something new to hopefully inspire artist and creatives. Time will only tell if it succeeds!

Accomplishments

First hackathon!

What I learned

• Practice with React Hooks
• Introduction to Tailwind
• File Uploading

What's next for Layered Image

Its unlikely that Layered Image will have any major functionality changes. There are some minor improvements to the UI to elevate the posting experience.

Built With

• css
• javascript
• react
• seam-miniapp-builder
• typescript