MWS

menu icon

MUIZZ WEB STUDIO

Name

kontenta

Country:

United States

Industry:

Artificial Intelligence / Marketing Tech / Cultural Data Analytics

Tools:

Webflow, GSAP, Three.js, WebGL.

Functionality:

WebGL environments with a real-time, zero-reload accessibility toggle to visualize cultural data aggregation.

Project

kontenta AI - Cultural Intelligence Platform

Design is meaningless if it doesn't embody the content. 🎯 For Kontenta.ai, the challenge was architecting a digital experience that reflects their core engine: pulling chaotic, global public data from platforms like TikTok and X to generate hyper-local content.

🚀 The Infinite DOM Spiral

To tell the story of data aggregation interactively, I built a visual narrative where the design logic perfectly matches the product logic.

100% Code-Driven: No heavy WebGL, no Canvas, and no pre-rendered videos for this specific element.

Native Mathematics: Built entirely using native DOM elements, complex calculated math, and GSAP.

Orbital Physics: The frontend logic physically draws these orbiting data icons into a central hub, illustrating the AI's aggregation process.

🎨 Sequential 3D Card Shuffling

A highly kinetic scroll sequence designed to transition users through the platform's core pillars smoothly.

Pinned Camera Tracking: Utilizing GSAP ScrollTrigger to pin the main camera while scrubbing through an intricate timeline.

Depth & Layering: Colored cards (purple, pink, orange, black) dynamically shuffle to the background, altering their Z-index seamlessly.

Synchronized Reveals: As each card recedes, it triggers text tracks to slide in from out-of-bounds, fading in respective typographic marquees, and morphing the background layer colors for maximum contrast.

📐 Physical Video Card Stacking

A messy but highly calculated 3D interaction designed to present work and capabilities organically.

Viewport Staggering: Video cards are pulled from entirely outside the viewport (100vh) into the exact center of the screen as the user scrolls.

Preserved 3D Transforms: I applied distinct, slight rotational values (-4deg, 3deg) to each card to emulate a physically dropped stack of media.

Pacing & Spacing: Custom buffering logic ensures the scroll distance feels heavy and deliberate, giving the user time to digest each incoming card.

Client Review

"Muizz is a wizard. He took my vision and turned it into a high-performing reality faster than I thought possible. He’s proactive, brilliant at troubleshooting, and quite frankly, the best webmaster in the game right now."

VIEW PROJECT *
left arrow icon