One of my favorite UI experiments so far. I challenged myself to create a cinematic Pepsi landing page where the interface feels like it’s floating within the experience rather than simply sitting on top of a background. ✨ What I explored: 1. AI-generated animated backgrounds 2. Scroll-driven storytelling with multiple Pepsi products 3. Glassmorphism & frosted-glass UI 4. Smooth blur, reflections, and premium lighting 5. Framer Motion animations 6. Fully responsive design

Built with React, Vite & Tailwind CSS The goal was not just to build another landing page it was to create an immersive experience where motion, depth, and interaction work together to tell a story. I am still refining the animations and interactions, but I’m really happy with where it’s heading. What would you improve or add? #React #TailwindCSS #FramerMotion #UI #UX #WebDesign #Frontend #Glassmorphism #LandingPage #MotionDesign #CreativeCoding

This looks amazing! The cinematic visuals, glassmorphism, and motion work together really well to create an immersive experience. 🚀

LOOP — A softer way to organize a life that refuses to stay in one category.

As a student, bouquet seller, occasional part-time worker, and someone who joins competitions and different projects, I kept running into the same problem:

My life didn't fit neatly into one calendar.

School had its own deadlines. My small business had its own tasks. Competitions had their own schedules. And then there was everything personal—sleep, routines, errands, and the things I kept forgetting to keep track of.

I wanted one place where all of these could coexist without turning everything into one overwhelming list.

So I built Loop.

Try Loop → loop--rffsky.replit.app

The idea

Loop organizes life into Spaces.

A Space can represent anything: Personal, School, Business, Fitness, a project, a client, an organization—or something completely different.

Each Space has its own identity, color, events, and installable tools.

There are 14 general tools available to build a Space around your needs:

Calendar · Tasks · To Buy · Bring List · Habits · Notes · Journal · Files · Contacts · Inventory · Price List · Goals · Expenses · Links

And Personal has its own built-in tools:

Sleep · Water Tracker · Mood

Sleep is particularly important because it isn't treated as another task—it can become protected time in your schedule.

Everything is connected

Loop isn't just a collection of separate screens.

Create an event → add Tasks, To Buy, or Bring List items → those unfinished items can surface in My Tasks and Shopping → and your events ultimately come together in Today, giving you one timeline across all your Spaces.

The system also accounts for schedule conflicts and protected time, so organizing your life isn't only about recording what happens—it's about understanding how everything fits together.

Built as a template, not just an app

Although I designed Loop around my own life, the underlying idea is intentionally broader.

A student could remix it into a school planner.

A freelancer could turn Spaces into clients and projects.

A small business could use them for operations, inventory, expenses, and contacts.

A team could adapt it into a project-management workspace.

A creator could turn it into a content-production system.

An event organizer could build a planning dashboard.

Or someone could simply keep it as what it is now:

one place for a complicated life.

That's what I wanted Loop to be—a polished, functional starting point that someone else can open, understand, and reshape into something completely their own.

Built in Replit, with a reusable visual system, connected workflows, responsive interfaces, and real sample data.

The showcase

I’ve included the project presentation in this post:

01 — UI mockups A visual overview of the Loop experience and its design language.

02 — Mobile walkthrough A complete look at the mobile experience and how the core workflows connect.

03 — Desktop walkthrough The same system presented as a larger workspace, showing how the experience scales beyond mobile.

Try the live project: loop--rffsky.replit.app

Loop — different parts of life. One connected space.

#Replit #ReplitBuildathon #Contra #Buildathon #ReplitTemplates #WebApp #ProductDesign #UIUX #DesignSystems #Productivity #LifeOrganizer #NoCode #IndieMaker #BuildInPublic