Aonami
Enterprise AI Automation & Autonomous Workflow Orchestration Platform Website
01. Brand Narrative: Non-Invasive Enterprise AI Automation
In BFSI (Banking, Financial Services, and Insurance) and high-volume enterprise operations, traditional digital transformation programs frequently turn into catastrophic multi-year “rip-and-replace” migrations that disrupt customer servicing and cost millions in custom systems integration. Aonami was founded on a contrary principle: sovereign, autonomous workflow orchestration that operates non-invasively on top of existing legacy core banking, ERP, and CRM platforms (such as Salesforce, SAP, Oracle, ServiceNow, and Mulesoft).
As the Lead Frontend & Design Engineer for the digital brand platform, my mandate was to translate complex multi-agent topologies, lending origination pipelines, and real-time operational metrics into a deeply authoritative, cinematic web experience that commands institutional trust while delivering blazing sub-second page performance.
“We engineered an editorial interface where high-craft 3D spatial models and kinetic typography coexist with strict zero-layout-shift budgets and WCAG-compliant contrast math.”
02. Next.js 16 App Router & Tailwind CSS v4 Zero-Runtime Tokens
The digital platform is engineered with the bleeding edge of the React ecosystem — Next.js 16 and React 19.2 on the Bun runtime, styled entirely with Tailwind CSS v4.
Key Frontend Architectural Innovations:
- Tailwind v4 Token Pipeline: Built with
@tailwindcss/postcss, eliminating runtime CSS footprint and compiling micro-utility classes into optimized browser stylesheets. - Zero-Layout-Shift RSC Streaming: All dynamic pages utilize React Server Components with isolated layout containment boxes, preventing layout reflows during async data fetching.
- Route-Specific Asset Preloading: Rather than dumping heavy media preloads into the global root layout, route segments dynamically invoke
ReactDOM.preloadfor critical LCP hero posters (/hero-poster.webp), saving 120KB+ on auxiliary route transitions.
03. Interactive 3D Spatial Runtimes with Spline
To illustrate how Aonami’s sovereign AI orchestration connects disparate enterprise nodes, we integrated interactive 3D spatial scenes using @splinetool/react-spline and @splinetool/runtime.
Enterprise visitors can rotate, inspect, and interact with live agent hubs in real-time WebGL space. To safeguard low-power mobile devices and preserve 60 FPS scrolling, we built an intelligent progressive enhancement layer that detects device GPU capabilities, automatically swapping heavy 3D canvases for hardware-accelerated animated WebP layers on constrained hardware.
04. Kinetic Scroll Expansions with GSAP 3 & Framer Motion 13
We paired GSAP 3 ScrollTrigger with Framer Motion 13 to construct a cohesive motion language across all marketing surfaces:
- Pin-Scrolled Case Study Panoramas: Interactive horizontal timeline scrolls that lock the viewport while expanding before-and-after operational metrics.
- Interactive Leadership Roster (TeamIndex): Designed a dynamic team index with a sticky portrait stage and synchronized typography states, leveraging custom cubic-bezier timing functions (
ease: [0.16, 1, 0.3, 1]) andAnimatePresencefor fluid avatar cross-fades. - Particle Text & Elastic Galleries: Interactive canvas particle typography that reacts to cursor proximity and physics-based inertia.
05. Mathematical WCAG Contrast Scrims & Typography Hierarchy
Dynamic video backgrounds often compromise textual legibility as high-contrast frames drift behind white typography. Rather than applying a heavy, visually destructive static dark overlay across the entire canvas, we developed a mathematical multi-stop gradient scrim system:
// Multi-stop dynamic luminance gradient guarantee
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.18) 12%,
transparent 22%
);
By sampling the video montage’s lowest luminance frame (which dipped to a 2.06:1 raw contrast ratio), this precisely calibrated gradient establishes an unconditional 4.61:1 WCAG AA contrast floor across all viewport widths while preserving the crisp luminescence of the underlying 3D video art.
Technical Specifications
Visual Gallery
01 / 06
Fig 01 · Sovereign AI Automation & Hero Experience01
Fig 02 · Enterprise Cost & Latency Dissection02
Fig 03 · Autonomous Agent Architecture & Orchestration Flow03
Fig 04 · BFSI Lending & Origination System Coverage04
Fig 05 · Kinetic Industry Outcomes & Performance Expansion05
Fig 06 · Interactive Team Roster & Leadership Spotlight06