Interactive design reconstruction / InkSoft
Jingle Bell, Jingle BAM!
A festive theatre, falling snow, and snow-globe collection paths with front-and-back product inspection.
Try the experience
Step inside the storefront.
Explore the original holiday artwork, snow-globe collections, and all five garment styles. Inspect each decorated front and back, choose your options, and try the demo cart.
Holiday operations · North Pole Mission Control
Jingle Bell, Jingle BAM!
Cue the snow.Bring theBAM!Cozy layers. Bright nights. A little holiday magic.
The Collection
Fleece for warmth. Soft shells for movement. Waterproof jackets for rainy calls. Find your show-night layer.
Ready for the next call?
Find your show-night layer.
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
InkSoft storefront design & interactive React development
A dedicated React reconstruction of the holiday storefront, combining saved garment artwork, SVG collection shapes, and live snow and fireworks.
- Original storefront
- InkSoft
- Custom HTML
- Scoped CSS
- Responsive design
- Public reconstruction
- React
- TypeScript
- Vite
- Cloudinary
- Reconstruction graphics
- SVG
- HTML Canvas 2D
- ResizeObserver
- Original commerce platform and public demo
The storefront presentation was designed within Data Graphics’ client-services workflow using InkSoft. The public React version recreates the browsing journey with saved artwork; customer accounts and checkout remain functions of the original private store.
- Snow-globe navigation and layered artwork
Scoped CSS composes the theatre background, character overlays, glass panels, and garment imagery. An SVG globe shape and separate shell artwork frame collection cards while Canvas 2D supplies snow and decorative fireworks.
- Typed catalog and product options
TypeScript product records drive five saved garment styles, category and text filtering, name or price sorting, and front-and-back inspection. React state manages example sizes, quantity, personalization text, cart totals, and item removal without submitting an order.
- Motion that responds to the browser
ResizeObserver fits each canvas to its container. requestAnimationFrame updates particle positions; IntersectionObserver, tab visibility, a pause control, and reduced-motion preferences suspend animation. Responsive CSS rearranges the hero, collection, and product layouts for smaller screens.
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.