TS Aromatics — B2B Essential Oils Platform (Technical Premium)
A buyer-facing procurement platform for premium essential oils with a 'Technical Premium' UX — interactive chromatogram, 3D molecular explorer, and deep documentation.
127
Products
47
GC/MS Analyses
2
Languages
47
Molecules
TS Aromatics needed a procurement platform that could communicate technical legitimacy to serious B2B buyers — manufacturers, wellness founders, and formulators who demand GC/MS documentation, molecular transparency, and ingredient intelligence. The existing site lacked the technical depth to support procurement teams making sourcing decisions. Competitors in the essential oils space either had deep documentation but poor user experience, or beautiful design with no technical substance. The client needed both.
We built a platform that combines scientific rigour with premium brand experience. Every element — from the scroll-driven fluid simulation to the interactive chromatogram — serves the dual purpose of engaging visitors while demonstrating technical credibility. The architecture connects product catalogue, GC/MS data visualization, molecular exploration, procurement workflow, and educational content into a single sensorial interface. A heat-reactive design system responds to user attention, making the page feel alive and responsive.
Overcoming the trust deficit in B2B procurement — buyers need scientific proof before committing to bulk orders
Making complex analytical chemistry (GC/MS data, EMG peak shapes) accessible and engaging for non-scientists
Building a 3D molecular explorer that is scientifically accurate while remaining performant on consumer hardware
Implementing IFRA compliance overlays across 127 products without manual data entry per product
Creating an Academy experience that goes beyond articles into gamified certification and learning paths
Supporting full bilingual (English/Hindi) content without splitting the codebase
Designing a B2B enquiry workflow that balances flexibility with structured data capture
How We Solved It
'Technical Premium' UX philosophy
The design language rejects the choice between scientific depth and brand experience. Every feature — from the interactive chromatogram to the molecular explorer — is treated as both a usability element and a trust-building asset. The philosophy: when complex information is made visible and interactive, it becomes a competitive advantage rather than a usability obstacle.
Heat-reactive ambient interface
The scroll-driven heat system controls bubble physics, glow opacity, and turbulence across the page. As the user scrolls, the environment responds — creating a physical, embodied browsing experience that mirrors the natural-origin products being sold.
Chromatogram as hero element
Instead of hiding technical data in PDFs, we built an interactive Canvas 2D chromatogram with real EMG peak shapes, an animated scan line, and hover-to-identify tooltips. This turns analytical chemistry into a visual selling point.
3D molecular storytelling
The 3D Molecular Explorer uses Three.js and React Three Fiber to render a force-directed graph of 47 molecules with weighted edges, hover glow effects, and IFRA restriction rings. This helps buyers understand the chemical profile of each oil at a glance.
IFRA Compliance Overlays & Chemical Signature Search
Each product page includes IFRA compliance data overlaid on the GC/MS chromatogram, showing restriction levels and safe usage limits. The Chemical Signature reverse search lets buyers identify oils by their molecular profile — a feature that turns the product catalogue into a research tool.
Global sourcing transparency
A 3D globe with animated arc dashes from India to 5 international ports visualizes the supply chain. This builds trust by showing procurement teams exactly where and how products are sourced and shipped.
Academy Gamification
Beyond static articles, the Academy includes certification paths and gamified learning modules that reward buyers for completing courses on aromatherapy science, IFRA compliance, and quality assessment.
The Work
The platform spans product catalog, technical documentation, educational content, and a B2B enquiry workflow — all unified by the ambient, heat-reactive design system.
Homepage hero — The heat-reactive ambient interface with scroll-driven fluid simulation sets the tone for the technical depth to follow.
Product catalog — 127 products with GC/MS data, COA builder, IFRA compliance overlays, and procurement information organized by category.
Academy and documentation — Technical education articles alongside procurement-ready documentation for buyers and formulators.
What We Delivered
Interactive Canvas chromatogram with real EMG peak shapes and hover-to-identify tooltips
3D molecular explorer with force-directed graph of 47 molecules and IFRA restriction rings
Global sourcing globe with animated arc dashes from India to 5 international ports
Scroll-driven heat system that drives bubble physics, glow opacity, and turbulence
127 product pages with GC/MS documentation, COA builder, and IFRA compliance overlays
Chemical Signature reverse search — identify oils by their molecular profile
Full English / Hindi i18n with cookie-based detection
B2B enquiry cart context with Zod-validated server actions
Educational academy with 8 technical articles and gamified certification paths
Harvest-to-Bottle interactive timeline showing sourcing transparency
Created a procurement experience that rivals industry leaders in both technical depth and brand experience
Transformed complex analytical data from a barrier into a competitive advantage
Early engagement metrics show strong time-on-site from procurement professionals
Academy and technical documentation pages drive the highest conversion signals
Client can now onboard new buyers with zero technical handholding
IFRA compliance overlays reduced buyer hesitancy around regulatory questions
Chemical Signature search turned the catalogue into a discovery tool for formulation chemists
“Chiti Technologies understood exactly what we needed — a platform that speaks to procurement professionals in a language they trust. The chromatogram integration alone has changed how our clients evaluate our products.”
Operations Team
TS Aromatics
This project proved that B2B platforms do not have to choose between technical depth and beautiful design. The most effective move was treating scientific data as a design material rather than hiding it behind PDF links. When complex information is made visible and interactive, it becomes a trust-building asset rather than a usability obstacle. The 'Technical Premium' approach — where every scientific feature is also a brand experience — redefined how the client thinks about their digital presence.
Process & Progress
The 'Technical Premium' Approach
Identified a gap in the essential oils B2B market: competitors either had deep scientific documentation with poor UX, or beautiful design with no technical substance. Proposed a 'Technical Premium' philosophy where every scientific feature is also a brand experience — turning GC/MS data, molecular structures, and compliance documentation into interactive, trust-building design assets rather than hidden PDFs.
Interactive Chromatogram Engine
Built a Canvas 2D chromatogram renderer that plots real EMG (Exponentially Modified Gaussian) peak shapes from GC/MS data. Features include an animated scan line, hover-to-identify tooltips showing compound names and retention times, and a visual legend mapping peaks to molecules. This single feature turned analytical chemistry from a barrier into a hero element.
3D Molecular Explorer
Developed a force-directed molecular graph using Three.js and React Three Fiber. Renders 47 molecules with weighted edges showing chemical relationships, hover glow effects for compound identification, and IFRA restriction rings that visually indicate regulatory boundaries. Each molecule node opens detailed compound information.
Global Sourcing Globe
Created a 3D globe visualization with animated arc dashes tracing shipping routes from India to 5 international ports (New York, London, Dubai, Singapore, Sydney). Each arc animates on scroll, showing sourcing transparency and supply chain visibility.
127 Product Pages & Academy
Built and populated 127 product pages with GC/MS documentation, Certificate of Analysis builder, IFRA compliance overlays, and badge rules. Each product can be filtered by category, chemical profile, and compliance status. The Academy section includes 8 technical articles and gamified certification paths covering aromatherapy science and quality assessment.
Bilingual Architecture
Implemented full English/Hindi i18n using next-intl with cookie-based detection and SEO-optimized alternate language URLs. All 127 product pages, academy content, and UI elements are translated without code duplication.
Ready to evolve your digital infrastructure?
Limited intake for Q2. We prioritize partnerships that demand excellence and strategic innovation.