TKA CUSTOM PRINTING
The online store and fundraising platform for TKA Custom Printing, a 3D printing company based in Edmonton, and one of our most detailed designs to date. Every element is custom, from the generated layer-line textures and the hero that prints itself into place to the scroll reveals that build like a 3D print. Behind the design sit a 105-colour filament library, secure Helcim checkout, a self-managed catalog, and a fundraising engine that sends 20% of every order to the school or club the customer picks.
TKA Custom Printing is a 3D printing company based in Edmonton, making sensory fidgets, games, lamps, and gifts, printed to order in over a hundred colours. They wanted to sell online without handing a slice of every sale to a subscription platform, and they wanted something no template could give them: a store that doubles as a fundraising engine, where a customer picks a school or club at checkout and 20% of the order goes straight back to that group. Behind it, they needed a way to track every order, see what is owed to each group every month, and manage their own products without calling a developer.
We designed and built the entire platform from a blank page. There is no template, no theme, and no off-the-shelf UI kit anywhere on the site: every panel, texture, illustration, and animation was drawn for this brand. The home page is the centrepiece. A luminous sky-to-violet panel carries a generated field of sliced-model contour lines, the headline rises into place line by line, iridescent layer bars draw in one after another and thicken into a solid banner, and a shelf of real product photography slides up to straddle the bottom edge of the hero. Beneath it, the featured product grid, a 105-colour filament library, the fundraising story, the studio's story beside an illustration of a piece cut in half, and a footer that prints the studio's name in layers each reveal as you scroll, the way a printer builds a part. Under the hood is a complete commerce stack: Helcim checkout, a Storyblok-managed catalog, a Neon Postgres order database, automated receipts, and a private payout dashboard.
A fully custom design system built from a blank page: generated layer-line textures, iridescent filament rims, custom illustrations, and a choreographed hero entrance and scroll animations that build like a 3D print, with no template or theme anywhere
A fully custom storefront with 14 launch products, size and material options, and a colour picker built from the studio's own photographs of pieces printed in each of 105 filaments
Secure Helcim checkout with server-side pricing, a hosted card form so card data never touches the site, flat-rate shipping with a free-shipping threshold, and a free local pickup option
A built-in fundraising engine : a school-or-club selector at checkout, 20% of every order attributed to the chosen group, and a unique shareable link for every group that pre-selects them automatically, from Edmonton Public Schools to Strathcona Minor Hockey and the Strathcona County Food Bank
A private payout dashboard showing every order and exactly what is owed to each group by month, with mark-as-paid, search, CSV export, and an automatic summary email on the first of every month
Mobile Experience
The hero carries fully to the phone: the stacked headline, the iridescent layer bars and banner, and the product shelf, which becomes a swipeable rail beneath the call to action.
Mobile Menu
The menu opens as a sheet of the same hero sky, with oversized links, the layer-bar motif, a gradient Shop button, and one-tap phone and email, so the brand never breaks, even in navigation.
The Product Grid
Featured pieces on lifted white cards with badges like Family Favourite and Makes Life Easier, real photography, from-pricing, and category labels, all fed live from the client's Storyblok catalog.
The 105-Colour Library
Over a hundred filaments organised into families, from deep mattes to shifting multi-colour silks and translucent glows. Every swatch is a photograph of a piece the studio printed itself, so what you see is what arrives.
Creativity That Gives Back
The fundraising story gets its own luminous panel: pick a school or club at checkout and 20% of the order goes to them, with a round How It Works call to action and the groups it was built for.
The Studio Story
A statement that prints in beside a custom illustration of a piece sliced open, calling out layer lines, heavier walls, and higher infill. It explains in one glance why a TKA piece outlasts a bargain print.
The Closing Call to Action
The final panel carries a generated illustration of a vase mid-print, finished layers below and open mesh above, beside a gradient Get In Touch button and click-to-call for custom colours, team orders, and fundraiser batches.
Printed in Layers
The footer is the header's bookend: tagline, shop and fundraising links, the four promises in a strip, and the studio's name set enormous in gradient layer lines, bleeding off the bottom of the page.
Fully Custom Design System
No template, no theme, no stock components. Every brand panel carries a layer-line texture generated as SVG at build time, buttons and cards wear iridescent silk-filament rims, the section ribbon is two filament strands crossing, and the footer prints the studio's name in layers. Every detail says 3D printing without ever having to say it.
Animations That Build Like a Print
On load the hero choreographs itself: each headline line rises out of its own line box, the contour field fades up behind it, four layer bars draw in left to right and thicken into the banner, the copy lifts in, and the six product cards slide onto the shelf one after another. Further down, statements print in from the bottom, illustrations wipe on, and the filament strands draw themselves, all hand-written CSS with full reduced-motion support.
Fundraising Engine
A school-or-club selector at checkout attributes 20% of every order to the group the customer picks. Each group gets a unique shareable link that pre-selects them, ready for a newsletter or a team chat, and the client can add or remove groups in the CMS at any time.
Secure Helcim Checkout
The server reprices every cart from the published catalog, then hands off to Helcim's hosted card form, so card data never touches the site. Every completed payment is hash-verified and amount-checked before the order is saved and the receipts go out.
Private Payout Dashboard
A password-protected dashboard lists each month's orders and exactly what is owed to every school or club, with mark-as-done, mark-as-paid, search across months, and CSV export. A scheduled job emails the previous month's totals automatically on the first.
Race-Safe Stock Control
Products are made to order unless the client sets a quantity. Then the page shows Only N Left, live from the database, and checkout places a fifteen-minute atomic hold so two customers can never buy the last unit. Badges refresh on their own after a sale.
Self-Managed Catalog
Products, prices, photos, colour options, fundraising groups, shipping rates, and page copy all live in Storyblok. A webhook rebuilds the site on publish, so a change is live in about two minutes, and a build-safe snapshot means the store can never go blank.
Photo-Real Colour Picker
105 filaments organised into families, each shown as the studio's own photograph of a printed piece rather than a flat colour chip. Products can offer whole families or a hand-picked list, so a two-colour print only shows the colours it can actually be made in.
The design system is built around the idea of a print in progress, and nothing on the page came from a template or a component library. Every brand panel carries a texture of layer lines generated as SVG at build time rather than exported from a design tool. The hero's contour field is a sliced 3D model drawn as smooth, evenly spaced lines at true size, the iridescent rims on buttons and cards echo silk filament, and the ribbon between sections is two strands of filament crossing. The animation is choreographed the way a printer builds a part: the hero assembles itself line by line, bar by bar, and card by card on load, then statements print in from the bottom, illustrations wipe on, and the filament strands draw themselves as you scroll, all of it honouring reduced-motion preferences. Type is Bricolage Grotesque for display, Inter for reading, and JetBrains Mono for the machine-readout labels.
Underneath is Astro 7 with Tailwind CSS 4 and Alpine.js: static pages plus a handful of server routes on Netlify. Every build starts by pulling the published Storyblok entries into a single catalog snapshot, so pages, checkout pricing, and emails always agree with each other. Orders live in Neon Postgres, payments run through Helcim's hosted card form with hash verification on every result, and Resend delivers receipts, shop alerts, contact messages, and the monthly payout summary. The stock system uses a single atomic update to hold units, so the last one can only ever be sold once.
The result is a store with no monthly platform fee that the company runs itself. Products publish in minutes, every order arrives by email with a customer receipt, and on the first of each month the dashboard and the summary email say exactly what to send to each school and club. It launched in September 2026, in time for the school year.
EXPLORE MORE PROJECTS
Green Oasis Services
A CMS-powered platform for one of Alberta's most trusted lawn care and vegetation management companies, serving residential, commercial, and industrial clients province-wide.
Read Case Study
BioSciAI
The investor-ready home of a University of Alberta AI startup building next-generation diagnostics for fungal pathogens, featuring a custom Three.js 3D cell animation and a Storyblok-managed research showcase.
Read Case Study
Edmonton Top Law
One of Edmonton's top litigation firms, a commanding 30+ page build with qualifying client intake and full Stripe-powered invoice payments built right into the site.
Read Case StudyWant Results Like These?
Get a free consultation to discuss your project. No pressure, no sales pitch, just an honest conversation about what you need and how we can help.