One of my favorite UI experiments so far. I challenged myself to create a cinematic Pepsi landing...

One of my favorite UI experiments so far. I challenged myself to create a cinematic Pepsi landing...One of my favorite UI experiments so far. I challenged myself to create a cinematic Pepsi landing...

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Amir Ostowar

• 14h

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 above the background instead of sitting on top of it.

✨ Features:

🎥 AI-generated animated background

🥤 Scroll-driven storytelling with different Pepsi products

🪟 Glassmorphism & Frosted Glass UI

🌊 Smooth blur, reflections, and premium lighting

⚡ Framer Motion animations

📱 Fully responsive

🎯 Built with React, Vite & Tailwind CSS

The goal wasn't just to build another landing page :it was to create an immersive experience where motion, depth, and interaction tell the story.

Still polishing the animations and interactions, but I'm really happy with how it's coming together.

What would you improve? 👇

#React #TailwindCSS #FramerMotion #UI #UX #WebDesign #Frontend #Glassmorphism #LandingPage #Pepsi #CreativeCoding #MotionDesign

Framer Website Design Motion Design Web Design Base44 Figma Framer

Maty Sandoval

max

• 11h

The floating interface effect actually works here, it reads more like a movie poster than a landing page. How did you handle the scroll-driven storytelling technically, is that all Framer's native scroll effects or did you need custom code for the parallax depth?

Amir Ostowar

• 3h

Appreciate it! It's a mix of Framer Motion and custom code. Framer Motion handles the scroll progress, while the parallax depth, pinned sections, and product transitions are controlled with custom motion values and animations to make the experience feel more cinematic.

Alex Prokhorov

max

• Jul 14

our fourth upcoming framer template will see the light of day pretty soon

Framer Figma

Sahil Dobariya

pro

• Jul 14

Awesome design !

Oleksandra Marchenko

pro

• Jul 14

Check out a new concept of coffee maker machine ☕ What do you think?

Check it out

Adobe Illustrator Figma Webflow

Aligwe Maryjane

• Jul 15

Great attention to spacing and composition.

Dario⚡️ Ferrando

max

• Jul 14

The core UI theme of Brainrot is clean and minimal, but users can unlock extra themes with streaks, to change the entire look of the home screen! We launched with 5 themes, with more to come over the next few months!

Completed work

Mascot Design UI Design Illustration Figma

Maty Sandoval

max

• Jul 14

That autumn theme is my favorite of the four — the warm palette actually makes the mascot feel more alive than the default purple. Are the streak-unlocked themes generated per season or is that just the launch set?