Framer web designer creating immersive, interactive websites that blend striking visuals with seamless user experiences, driving engagement.
Core values section of slotwise (appointment booking software).
#sass #webdesign #interactiondesign #codex #productdesign
Bento grid layout exploration for an appointment booking app๐ช.
Built with codex๐ค.
I love finding ways to make websites tell their story before a single word is read ๐ค .
For this film website, I built a rotating 3D cube to showcase the movie collection and immediately give visitors a sense of the type of films waiting inside ๐ .
To reinforce the experience, I paired it with a film reel rolling sound effect so the interaction feels cinematic from the very first second ๐ .
As users scroll through each film section, they're greeted with camera shutter effects and carefully chosen soundtracks that match the mood and energy of the films being showcased ๐ค .
It's a reminder that great web experiences aren't just visualโthey're something you see, hear, and feel ๐ .
Built with Figma, Codex, and Framer.
Link๐: https://lnkd.in/dc2gUfKK
#interactiondesign #webdesign #uiux #codex #framer
I built this interactive 30 Days Challenge website with Codex, and had a lot of fun pushing the details ๐ .
I added sound effects, click interactions, double-click effects, and a loading animation with falling pills to make the experience feel more playful and alive.
This one was all about making the interface fun to explore, not just look at ๐ช .
Live site ๐ : tech-stacks-nine.vercel.app
#interactiondesign #webdesign #codex #uiux #reactjs
I made a version two for the interaction design of the travel agency website I shared previously via figma motion.
What do you think?
Revamped my portfolio a bit via @framer ๐ค. Gave my UI shot a 3d globe visuals.
Open to work๐ง. Currently looking for a product design or framer developer role.
Link: siji-ibukun.framer.website
#webdesign #portfolio #productdesign #codex #framer
Went back to my 2024 design archive to try out figma motion for a travel agency hero section exploration! @figma
Sound effect via caput sound๐ค.
#figmamotion #webdesign #travelagency #uiux
Started with a Figma file. Ended with something that breathes ๐ก .
For Candi, I took a static design and brought it to life โ layering in custom interactions, entrance animations, and sound effects that make the experience feel intentional, not just pretty ๐ช .
This is the part of the process I love most: the moment a design stops being a mockup and starts feeling like a product.
Link๐: candi-eta.vercel.app
#Framer #WebDesign #DesignAndCode #InteractionDesign #Frontend
Meet Testimonial Jotter, a Framer component that turns testimonials into a living notebook moment. A pen writes each quote in real time, synced to your slide interval, then the page flips away with a crisp browser-synthesized paper sound.
Preview: https://testimonials-card.framer.website/
It includes:
Animated jotter illustration
Web Audio page-flip sound, no audio files
Progress ring countdown
Responsive resizing for all screens
Fully editable Framer property controls
Support for up to 10 testimonials
Perfect for adding motion, personality, and a little delight to your testimonial sections without extra setup.
Marketplace link here in comment:
A section of code component that I built for a client for her design agency in framer. Built the code component with react via Claude.
What do you think?
#framer #interactiondesign #webdesign
Wessex Homes is now live on framer market place๐ฅณ. Built with a clean editorial style, refined layouts, and a premium property-focused experience, Wessex is perfect for showcasing homes, rentals, luxury listings, and agency services. It has a light mode and dark mode
Preview link here: https://wessex-homes.framer.website/
Purchase via marketplace in the link in comment.
Just launched Wessex, a premium real estate website template for Framer.
Designed for estate agencies, brokers, property consultants, and real estate brands, Wessex gives you everything you need to launch a polished property website quickly.
It includes:
Light and dark mode
Homepage
Property listing page
Property detail pages
About page
Journal / blog page
Contact page
Property filters
Featured listings
Lead capture sections
Easy customization in Framer
4 CMS
Built with a clean editorial style, refined layouts, and a premium property-focused experience, Wessex is perfect for showcasing homes, rentals, luxury listings, and agency services.
Now available on Framer Marketplace.
Hey๐๐ฝ! Working on a real estate template for framer marketplace. Here is a glimpse of what to expect ๐.
#framer #webdesign #uiux #figma
I've been spending a lot of time exploring what's possible when design meets AI-assisted development.
For this project(TURN ON AUDIO FOR BEST EXPERIENCE ๐ค ), I pretty much babysat Codex from start to finish, turning a Figma design into a fully interactive experience in Framer. To keep everything pixel-perfect, I exported key frames from Figma as SVGs before bringing them into the build โ .
The fun part wasn't the visualsโit was the interactions ๐ .
I added click and drag interactions, then spent way too much time tweaking sound effects until every action felt just right. It's amazing how a small sound can completely change how an interaction feels ๐ .
My favorite part, though, has to be the fireworks animation ๐โโ๏ธ . Watching it come to life after a few iterations made the whole project worth it.
Built with Figma, Codex, and Framer ๐ .
Link:๐ https://photoledger.framer.website
#interactiondesign #codex #webdesign #framer
Meet Testimonial Jotter, a Framer component that turns testimonials into a living notebook moment. A pen writes each quote in real time, synced to your slide interval, then the page flips away with a crisp browser-synthesized paper sound.
It includes:
Animated jotter illustration
Web Audio page-flip sound, no audio files
Progress ring countdown
Responsive resizing for all screens
Fully editable Framer property controls
Support for up to 10 testimonials
Perfect for adding motion, personality, and a little delight to your testimonial sections without extra setup.
Hey guys, I have been unable to post my new template on marketplace for more than a day now, it just keeps throwing error. I have same issue with posting a component too. I have reached out to support but they have been unable to help too. Tired!
I wanted to explore how far I could push a simple collection of images with motion, sound, and playful interactions ๐ค . TURN ON AUDIO FOR BEST EXPERIENCE.
Instead of displaying images in a traditional grid, I threw them all into a popcorn basket and gave each card a flick sound effectโso every drag, toss, and movement feels playful and alive ๐ .
My favorite interaction is what happens when you click an image on the left. Rather than opening instantly, it slides out on the right like a photo being pulled from an envelope. It's a small detail, but it completely changes how the gallery feels ๐ซฃ .
Projects like this remind me that great experiences aren't always about adding more features. Sometimes it's about adding just enough motion and sound to make people want to keep playing ๐ .
Built with Figma, Codex, and Framer.
Link ๐: https://gallery-images.framer.website
#interactiondesign #webdesign #uiux #codex #framer
Hey there! On today's exploration with AI tool I built this pricing page:
Link๐: https://pricing-card.framer.website/ (TURN ON AUDIO FOR BEST EXPERIENCE ๐ ) recently and ran into an interesting AI workflow lesson ๐โโ๏ธ.
I started the entire project with building a react component on Codex to use on framer and things were moving fast. But when it came to creating the spark effect that appears when hovering over the pricing cards, I couldn't quite get the interaction quality I was aiming for ๐ .
So I switched to Claude โก. A few iterations later, the effect felt exactly right. One thing I've learned while building with AI: don't become dependent on a single tool. Different AI models have different strengths, and knowing when to switch can save hours of frustration ๐ค .
Designers who learn to combine tools will always have an edge over those who rely on just one ๐ .
Built with Framer + Codex + Claude ๐ก.
