Olivia’s Cupcakes
React / Vite / After Effects / Illustrator / Photoshop
A modern, conversion-focused landing page for a fictional boutique cupcake bakery, built with React to showcase flavor variety, catering services, and a refined editorial aesthetic. The site includes smooth responsive layouts, subtle motion, and an interactive Cupcake Workshop where users can build and preview a custom cupcake in real time.
PROCESS
Cupcake Workshop
The Cupcake Workshop was designed as a modular, data-driven system rather than a set of hard-coded visual states. Each cupcake is assembled from independent visual layers: base, frosting, and toppings.
To keep the system scalable, images are auto-loaded using Vite’s import.meta.glob, which means new flavors or toppings can be added simply by exporting correctly named image files into the project structure. No JSX updates are required when the menu expands, making the system easy to maintain and extend over time. Layering is handled using z-index control, ensuring predictable stacking order and clean visual composition as elements are swapped.
Assets are prepared in a single master PSD and exported at consistent sizes so they align perfectly in the interface. The UI reflects the design exactly as intended while remaining responsive and fast as users explore different combinations.
Overall, the approach prioritizes visual stability, flexibility, and long-term usability, creating a customization experience that feels polished, intuitive, and easy to expand over time.
Add to Cart
The Cupcake Workshop includes a fully functional add-to-cart flow designed to support custom-built cupcakes. Each cupcake build is treated as structured configuration data rather than a static product, allowing the cart to accurately reflect a user’s selections for base, frosting, toppings, and garnish.
When a user adds a custom cupcake, the current configuration is captured and stored in a centralized cart context, along with quantity and pricing. This state is shared across the application, enabling the cart icon to update in real time and the cart page to render a clear, readable summary of each build.
Animated Cupcake
For the animated cupcake, I designed four layered SVG assets in Illustrator, animated them in After Effects, and exported the motion using the Bodymovin plugin as a lightweight Lottie JSON file.
Preview
