Case study 01 / 18 · Websites & apps
Emladris
A corporate website for Emladris AI, presenting its product ecosystem through an animated, scroll-led experience. Adaptive 3D scenes connect the company’s story with its focus on giving people greater operational capacity.
Case study
The public website for Emladris AI, a company building a family of related products. It tells the company’s story through a scroll-led narrative about mapping work, finding constraints and returning human capacity. The same repository holds an administration and API workspace behind the site.
The problem
Introduce a parent company and several related products under one coherent identity, and keep a technically ambitious visual experience usable on any device.
What was built
- A responsive site with route-aware navigation, narrative sections, scroll reveals and card transitions.
- Adaptive Three.js scenes (an orb, a galaxy and a brain), with reduced-motion and no-WebGL fallbacks.
- Opt-in visitor analytics, with an authenticated view of the aggregate numbers.
Key decisions
- One animation runtime coordinates scrolling and scene updates, so motion stays in step.
- Particle density and effects scale to the device, and a static content path is always available.
- Consented public analytics are kept apart from the administration routes.
Where it stands
The site is live. This case study covers the corporate website, not every product in the Emladris family.
How it was built
Frontend
- React
- TypeScript
- Vite
- React Router
- Three.js — Adaptive orb, galaxy and brain particle scenes
- Lenis — Smooth scrolling kept in step with the 3D scenes
- Tiptap — Rich-text editing
Backend
- Node.js
- Express — Administration and analytics API
Data
- PostgreSQL — Consented analytics and administration data
Integrations
- Google OAuth — Administrator sign-in
Infrastructure
- Docker Compose
Testing
- Vitest
- Playwright — Browser tests with axe accessibility checks