Interactive design reconstruction / InkSoft
Beauty and the Beast
A gilded theatre entrance, anniversary artwork, and a collection that carries the story beyond the stage.
Try the experience
Step inside the storefront.
Explore the animated entrance, browse the collection, and try a product’s options. This self-contained reconstruction uses saved project artwork. Example product names and options illustrate the design; they are not a live catalog.
The collection
The anniversary collection · Design study
A tale. A stage. A little magic.
The story continues beyond the curtain.
Made for the moment
An encore, in every detail.
Gilded details, deep theatre blue, and the warmth of an illuminated stage. A collection entrance with a sense of occasion.
From entrance to selection
A complete journey, with a sense of occasion.
The entrance sets the mood, makes the collection easy to understand, and gives shoppers a clear way forward. Cinematic artwork does the storytelling; real HTML controls provide navigation and accessible actions.
Behind the build
Custom ecommerce frontend & responsive UI design
A theatre-led anniversary collection with a public React reconstruction, editorial product layout, and reusable browsing controls.
- Original storefront
- InkSoft
- Custom HTML
- Scoped CSS
- Responsive design
- Public reconstruction
- React
- TypeScript
- Vite
- Cloudinary
- Custom presentation within InkSoft
The original storefront design adds a branded entrance and collection hierarchy inside the hosted commerce platform. InkSoft retains the operational shopping and checkout functions.
- Editorial layout and theme composition
The reconstruction uses saved theatre and anniversary artwork, gold framing, CSS theme variables, and separate category and product images. The same visual system follows visitors from the hero to collection cards, item inspection, and the demo bag.
- React components and product browsing
Typed theme and product data drive reusable collection cards, category filters, text search, product inspection, size and quantity controls, and a temporary demo bag. React state keeps selections together as the visitor moves between views.
- Responsive frontend and motion controls
Scoped CSS adapts the layout to narrow screens. Native buttons, labeled inputs, focus management, and a modal artwork viewer support keyboard use. Decorative effects pause offscreen or in a hidden tab and respect reduced-motion preferences.
What you can try here
The portfolio version rebuilds the interface in React: collection filters, search, product detail inspection, size selection, quantity, and a temporary demo bag. Each collection carries its own palette, typography, imagery, and atmosphere across the journey. All demo actions stay here, with no checkout or account required.
Built for different screens
Layouts need to accommodate narrow screens, landscape phones, long labels, and the platform’s existing markup. Static imagery is paired with live controls rather than making the whole interface a picture.