Kontenta Platform: Premium Web Development & WebGL Integration

Functionality: Visualizes chaotic data aggregation through an infinite, mathematically calculated DOM spiral and custom WebGL environments featuring a zero-reload accessibility toggle.

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.

As an Awwwards Nominee, I hold my work to the highest standards of the modern web, which means high-end design shouldn't leave anyone behind with sensory overload.

The Zero-Reload Kill-Switch: Instead of relying on a clunky page refresh to accommodate accessibility, I engineered a custom, zero-reload kill-switch.

Real-Time Adaptation: One click gracefully halts the complex Three.js renderers and GSAP triggers.

Refined Degradation: It instantly transitions the site into a refined, static layout that feels just as premium and intentional. Beauty meets usability.

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.

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.

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.

Interactive touchpoints need to feel alive. I engineered custom magnetic behavior for primary actions across the site, right down to the footer.

Cursor Tracking: Buttons calculate the mouse coordinates relative to their absolute center, translating the button wrapper along the X and Y axes for a "pulling" effect.

Directional Fills: The hover background fill calculates the exact angle of entry using Math.atan2, deciding whether the fill should slide in from the top, right, bottom, or left.

Parallax Text: The inner text layer moves at exactly half the speed of the button container, creating a localized parallax effect inside the button itself.

Numbers shouldn't just be read; they should be felt.

Character Splitting: I utilized GSAP's SplitText to break data points down to the character level.

3D Entrance: As the section pins, each number swings in with a -90deg X-axis rotation, emerging from invisibility in a cascading wave.

SVG Integration: Tied directly to the scroll progress, intricate SVG lines physically draw themselves into the DOM alongside the staggered data points, leading the eye perfectly to the final call to action.

I engineered the toggle so that a single click gracefully halts all complex Three.js renderers and GSAP triggers, instantly transitioning the site into a refined, static layout that feels just as premium and intentional—all without a single page refresh.