.svg)
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.
.svg){kind=icon}