The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio Demo
Trionn, a digital studio, recently unveiled its redesigned website, an ambitious project built as a comprehensive exploration into the convergence of animation, WebGL, and intricate interaction systems, aiming to deliver a singular, unified digital experience. The platform seamlessly integrates core web technologies including GSAP (GreenSock Animation Platform), Three.js for 3D graphics, Lenis for smooth scrolling, and custom Web Audio API interactions, culminating in a responsive and highly dynamic interface where each section is meticulously driven by its own specialized system.
Genesis and Evolution of an Interactive Vision
The journey to Trionn’s final form spanned four months of intensive experimentation and iteration. The project’s initial conceptualization underwent several transformative phases, moving beyond a collection of isolated features to a cohesive animation framework. The studio’s vision was not merely to incorporate interactive elements but to interweave a captivating hero section, scroll-driven narratives, procedural graphics, and real-time effects into a fluid and interconnected user experience. This developmental chronology highlights a deliberate shift from disparate functionalities to a holistic design philosophy, where every component contributes to a larger, synchronized whole. The dedication to this integrated approach allowed the site to achieve a level of polish that has since garnered significant industry recognition.
Industry Acclaim and Technical Hurdles
Upon its launch, the Trionn website quickly captured the attention of leading design and development communities. It received accolades from prestigious platforms such as FWA (Favorite Website Awards), GSAP, Orpetron, CSS Design Awards, Web Design Awards, and CSS Winner, alongside features in several international design galleries. This widespread recognition underscores the project’s success in setting new benchmarks for interactive web design. However, the development process was not without its complexities. The pursuit of such a high level of animation and interactivity inevitably unearthed a series of technical challenges, particularly concerning performance optimization, precise synchronization across different systems, efficient rendering of complex graphics, and intuitive interaction design. These challenges became central to the case study, providing invaluable insights into overcoming the inherent difficulties of pushing web capabilities to their limits.
Core Technical Architecture: A Symphony of Technologies
The technical foundation of the Trionn website is built upon a strategically chosen stack, where each technology plays a distinct yet interconnected role. This modular approach was critical for balancing creative flexibility with the imperative of maintaining high performance. The architecture ensures that tasks ranging from driving intricate animations and scroll interactions to rendering sophisticated WebGL scenes and generating real-time audio are handled with clear responsibility.
GSAP stands as the central orchestrator of the site’s animation system. It underpins all page transitions, elaborate scroll-driven sequences, pinned sections, and component-level animations. The developers leveraged GSAP timelines and the useGSAP hook within a Next.js environment, simplifying the setup and cleanup processes as components dynamically mount and unmount. For scroll interactions, ScrollTrigger was extensively utilized, managing everything from immersive pinned storytelling sections to scrubbed animations and reveal effects. A notable implementation detail is the heavy reliance on gsap.matchMedia(), which allowed for the creation of distinct animation logic for desktop and mobile layouts, ensuring an optimized and tailored experience across devices rather than relying on shared, potentially suboptimal values. Text animations, a subtle yet impactful detail, were streamlined through a reusable BlurTextReveal component built with SplitText. This component facilitated character-, word-, and line-based animations while centralizing critical functionalities such as reduced-motion handling, GPU layer cleanup, and ScrollTrigger refreshes, thereby eliminating redundant problem-solving for individual headings.
For 3D graphics, Trionn opted for a direct Three.js implementation rather than frameworks like React Three Fiber. This decision provided the development team with granular control over the shared render loop, resource management, and the individual animation of mesh panels within the hero symbol—a crucial factor for achieving the desired level of bespoke interaction and performance. Lenis, the smooth scrolling library, was meticulously synchronized with gsap.ticker, ensuring that scrolling throughout the site remained perfectly aligned with ScrollTrigger and other animations. Complementing the visual and interactive elements, the Web Audio API was employed for generating interactive sound effects, such including the hero section’s magnetic hover, blast, and weld effects. By synthesizing these sounds at runtime instead of relying on prerecorded audio files, the developers achieved a more dynamic and responsive auditory experience.
The Hero Section: A Convergence of Interactive Systems
The hero section of the Trionn website represents a pinnacle of technical integration, combining WebGL, GSAP, SplitText, and the Web Audio API into a single, cohesive interaction system. Its evolution throughout the project underscores the iterative nature of pushing creative boundaries. This section operates on two synchronized layers sharing a common state. The background is a dedicated Three.js scene (useTrionnSymbolScene.ts) responsible for rendering the brand symbol, its subtle idle motion, the magnetic hover effect, the hold-to-blast interaction, and the intricate weld spark effects. All these interactions contribute to a singular explodeAmt value, which dictates the separation distance of the symbol’s panels. This unified value ensures smooth and continuous transitions between states, regardless of whether the user scrolls, hovers, or holds the mouse button.
Conversely, the foreground comprises standard DOM elements—the headline, a rotating word, and a stats hint—animated using GSAP and SplitText. The use of standard HTML guarantees content accessibility, while mix-blend-mode: difference ensures readability against the dynamic WebGL canvas. A shared transitionReady flag orchestrates the synchronization of both layers, ensuring animations only commence after the page transition completes. Non-critical tasks are strategically deferred using requestIdleCallback to prevent competition with the initial page load, thereby preserving optimal loading performance.
The Hero Headline Reveal demonstrates a refined approach to text animation. On page load, the headline animates into view character by character using a staggered blur-to-sharp transition. This effect, achieved with filter: blur() and opacity alongside will-change for GPU layer promotion during animation, creates a dynamic introduction. Once complete, will-change is removed to release GPU resources. The BlurTextReveal component’s reusability across the site, with adjustable settings, exemplifies efficient code patterns.
The Hero Symbol’s Idle State exhibits continuous rotation complemented by each of its three arms following a subtle sine-wave motion with an independent phase offset. This deliberate desynchronization imparts an organic, non-mechanical feel to the movement. prefersReducedMotion is respected by reducing rotation speed, not disabling it, while mouse movement is applied via linear interpolation (lerp), creating a smooth, magnetic response. Ambient drift scales down as other interactions (like explodeAmt) take precedence.
For Magnetic Hover, raycasting is employed for precise hover detection against the symbol’s actual 3D geometry, rather than relying on CSS. As the cursor traverses a panel, it briefly "charges," becoming brighter and more reflective, accompanied by a short beep on initial entry to a new panel. The highlight’s exponential decay on each panel avoids the overhead of individual GSAP tweens, and material properties like envMapIntensity, clearcoatRoughness, and transmission dynamically adjust to create the "charged" visual.
The Hero Lines: Weld Spark Effect is triggered after three guide lines animate outwards from the symbol. Hovering over a line initiates a burst of weld-like sparks arcing towards other lines, reinforcing the "Dare to touch the lines" prompt. A "ready" check ensures the effect activates only after the lines are fully drawn. The sparkWasAway flag prevents continuous sparking, and random variations in bolt count and target lines ensure dynamic interaction. weldCooldown rate-limits bolt generation independently of frame rate. The glow effect is achieved with layered THREE.Line geometries, eschewing a performance-intensive post-processing bloom. The guide lines themselves are rendered to an offscreen 2D canvas, used as a Three.js texture, allowing for lightweight 2D hit testing. A synthesized spark sound plays once per burst, avoiding audio overlap.
The Hero Symbol’s Hold-to-Blast interaction unfolds in multiple stages. Clicking and holding the symbol initiates a charge-up phase, causing nearby UI elements (navigation, headings) to vibrate. After approximately 0.5 seconds, the symbol fragments into individual panels, each following a predefined trajectory and rotation, accompanied by an explosion sound and a sustained "whoosh." Releasing the mouse smoothly reverses the sequence, reassembling the symbol. The clickBurst value drives the explosion, ranging from 0 to 1, with each panel following a deterministic path. A single explodeAmt value unifies scrolling, hovering, and hold-to-blast effects using Math.max(), enabling consistent animation logic. UI elements react using CSS transitions, smoothly returning to rest upon release. The 0.5-second delay before explosion creates intentionality, and state-driven interactions allow for smooth reversal at any point.
Services Scroll Sequence: Orchestrated Storytelling
The Services section stands as the most intricate scroll-driven sequence on the Trionn site, meticulously choreographing a series of animations through a single, shared scrollProgressRef value ranging from 0 to 1. This centralized driver coordinates a 371-frame WebP image sequence, a headline particle explosion, the reveal of six service cards along predefined motion paths, a dynamic color palette transition from black to white, and a final stripe wipe into the Testimonials section. This approach bypasses the need for multiple, complex timelines, ensuring perfect synchronization and simplifying timing adjustments.
The Image Sequence forms the background animation, rendered by dynamically updating the src attribute of a standard <img> element with 371 WebP frames. This lightweight method allows for direct scrubbing by scroll position without the overhead of video or canvas rendering. To prevent initial page load blocking, all frames are preloaded in requestIdleCallback batches of 20, with img.decode() preparing each frame for display.
The Headline Particle Explosion involves splitting the "OUR SERVICES" headline into individual glyphs, each measured using the Range API to account for rendered layout specifics like kerning and line wrapping. As the scroll reaches a transition point, each glyph follows a unique trajectory, creating a visually striking text disintegration effect before the service cards appear.
Service Card Animation introduces six cards that animate into view along curved paths. On desktop, cards appear in left and right pairs for balanced composition, with SVG icon strokes animating via drawSVG. Unlike most of the site, this section’s GSAP timeline is built once and scrubbed via .progress() during scrolling, optimizing performance by avoiding per-frame trajectory recalculations.
The section concludes with a Stripe Wipe Transition, a reusable pattern deployed across other sections like Vision and About. This maintains visual consistency and centralizes implementation, using GPU-accelerated yPercent transforms for smooth transitions.
Dribbble Helix Gallery: Procedural 3D and Interaction
The Dribbble Helix Gallery masterfully blends DOM elements and WebGL to create a captivating scroll-driven 3D sequence. Nine interactive cards are arranged along a parametric helix, rotating past the camera as the user scrolls. Two animated guide lines trace the structure, and cards dynamically respond to hover via raycasting. The sequence culminates in the helix unfolding into a flat grid, complete with rounded-corner masking and a decaying ripple effect.
Building the Helix relies entirely on parametric equations, generating each card’s position and orientation procedurally from its place along the helix. This makes the structure inherently adaptable to scroll-driven changes. Bending Cards onto the Helix is achieved through direct geometry deformation, rewriting vertex positions so each card naturally curves to match the helix’s shape, yielding a more convincing result than simply rotating flat planes.
Scroll-Driven Rendering is optimized: the helix is not continuously animated but renders directly in response to ScrollTrigger updates. A lightweight gsap.ticker only activates when needed (e.g., for interactions to settle), reducing unnecessary work when the scene is idle. The isActive() check ensures rendering only occurs when the section is within one viewport of the screen.
Raycast-Based Hover Interaction uses Three.js raycasting for precise card hover detection. Instead of instantaneous changes, cards smoothly ease toward a target scale, preserving the helix’s fluid motion. Rounded Corners with a Fragment Shader procedurally generates crisp, resolution-independent rounded corners using a signed-distance function to mask the image within the shader, keeping geometry simple and rendering efficient.
To prevent a noticeable hitch upon initial display, the scene undergoes Warming Up the Scene before the user reaches it. Textures, shaders, and geometry are pre-rendered, ensuring the first visible frame is already prepared and the scroll experience remains smooth.
Footer Wire Logo & Smoke: Interactive Audio-Visual Experience
The footer section transcends a typical static element, integrating SVG, Web Audio, and WebGL into a rich interactive experience. The wireframe wordmark functions as a set of digital guitar strings, each pluckable with the cursor, producing synthesized notes and animated waves. Simultaneously, a separate WebGL smoke layer dynamically reacts to the live audio signal, responding not only to user interaction but also to the frequency content of the synthesized sound itself.
Each SVG Stroke Becomes a String, treated as an independent entity with its own oscillation state. Hovering or clicking injects energy, causing it to vibrate and triggering a synthesized note. Independent state management allows for overlapping interactions without interference. The Wave Is Drawn Procedurally, recalculated and redrawn every frame, enabling precise control over amplitude, frequency, and damping for a responsive, plucked-wire effect.
To enhance usability, Enlarging the Hit Area is implemented by creating an invisible, thicker duplicate of each SVG stroke, exclusively for pointer events. This provides a much larger, more forgiving target without altering the visual thinness of the lines.
The Synthesizing the Pluck Sound is a testament to the power of the Web Audio API. Each pluck is generated in real-time using three slightly detuned sine-wave oscillators, layered and fed through a feedback delay. A subtle vibrato LFO further enriches the sound, producing a soft, flute-like timbre that responds instantaneously.
The Procedural Fog with a Fragment Shader creates a dynamic smoke effect as a full-screen fragment shader, rather than a particle system. Layered fractal noise (FBM) forms the base pattern, while domain warping breaks up repetition, resulting in organic, upward-drifting smoke that smoothly reacts to user interaction. Critically, this fog is Audio-Reactive Fog, listening to the same audio graph that synthesizes the pluck sounds via a live AnalyserNode. This allows the shader to dynamically respond to the actual frequency content of the audio, making the smoke’s movement and intensity a direct visual representation of the sound being played.
Lion Reveal & Curtain Drag: Depth, Physics, and Narrative
The About section introduces the "Lion Reveal & Curtain Drag," an interactive experience that combines a depth-mapped image with interactive WebGL effects to create a compelling illusion of depth. A portrait of a lion dynamically responds to cursor movement via a fragment shader, while draggable curtain strips, governed by spring physics, peel back to reveal the image beneath. This interaction triggers a synchronized sound sequence, beginning with the fabric movement and culminating in a lion’s growl, adding a dramatic auditory layer to the visual reveal.
The Sequencing the Reveal is meticulously choreographed. The lion animation is intentionally delayed until the preceding headline animation has fully completed, establishing a clear visual rhythm and ensuring the reveal feels like a narrative continuation rather than an abrupt, attention-competing event. This is managed by a CustomEvent (trionn:about-lion-start) that connects the two components, ensuring proper timing.
The Depth Mapped Portrait creates the illusion of 3D depth from a 2D image using a fragment shader and a precomputed depth map. As the cursor moves, the shader offsets the image based on stored depth information, producing a convincing parallax effect. A subtle RGB offset further enhances the illusion by creating a chromatic fringe. The cursor’s target position is smoothly eased (uMouseEase) for natural responsiveness.
Simulating the Curtain involves treating each curtain strip as an independent spring, updated every frame. When a strip is dragged, it naturally eases back to its resting position, while adjacent strips are dynamically pulled along to preserve the continuous shape of the fabric, preventing visible gaps. This creates the impression of a coherent piece of cloth. The Drawing the Curtain is procedural on a 2D canvas, with the strip’s shape warped by a Gaussian drag envelope centered on the user’s grab point, mimicking fabric deformation.
Movement Driven Sound is integral to the experience. Audio is directly tied to the user’s interaction with the curtain. A main sound effect loops only during an active drag, using a selected section of a recording for continuous texture. Additional sounds, like the lion’s growl, are triggered based on movement progress, ensuring they only play for meaningful gestures and not for quick taps. Unlike the synthesized sounds in the footer, this interaction uses recorded audio assets, dynamically manipulated with looping sections, randomized start offsets, and drag-speed-driven volume changes for a responsive auditory experience.
Gallery Scatter Wall: Randomized Layout and Dynamic Interaction
The "Work hard. Play loud." section features the Gallery Scatter Wall, an engaging display of eleven team photos that animate into place from various directions during scroll. This section showcases an innovative approach to dynamic layouts and user interaction.
The core of the layout is Randomized positions from predefined slots. Instead of truly random coordinates, the gallery uses a fixed collection of collision-safe positions. Each image is assigned a shuffled slot at runtime, ensuring the arrangement varies with each visit while maintaining a controlled, non-overlapping structure. Small, randomized position offsets and rotation values are then added to create a more organic, scattered appearance. The Multi-directional entrance animation further enhances this dynamism; instead of a uniform entry, each photo originates from one of several off-screen positions, creating a sense of the gallery assembling itself around the viewer.
The Scroll controlled entrance sequence is governed by a pinned scroll timeline, which staggers each photo’s entrance before transitioning into a final stripe wipe. Images are introduced with slight delays, building a sequential composition. A two-stage animation ensures the gallery fully settles before the second phase, the stripe wipe, is triggered.
A clever client-side process enables Dominant color extraction from images. When a photo is clicked, its dominant color is analyzed directly in the browser without external processing. The image is downsampled to a 72×72 canvas for faster sampling, and pixels are grouped into color buckets. Transparent, very dark, bright, or low-saturation areas are ignored to identify prominent tones accurately. This extracted color then dynamically tints the gallery background.
The gallery also features Interactive photo movement with collision response. Clicking a photo initiates a pull-forward effect, briefly moving it towards the viewer before returning to its original position. Simultaneously, nearby overlapping photos are detected and dynamically pushed away from the interaction point, creating a subtle, physical response that makes the scattered layout feel more dynamic and responsive.
Finally, Client-side image mounting and color sampling is implemented using useSyncExternalStore to ensure gallery images are mounted only after the component renders on the client. This avoids unnecessary server-side image loading for a section entirely dependent on interaction and animation, contributing to a lighter initial render while still allowing in-browser image processing for color extraction.
Concluding Reflections on Innovation and Synchronization
Looking back at the ambitious undertaking of the Trionn website, the development team highlighted several key insights. A shared canvasManager architecture, if implemented from the outset, would have significantly streamlined the management of multiple WebGL experiences across the site. However, the paramount lesson learned was that the exceptional level of polish achieved stemmed less from individual effects and more from the meticulous synchronization of every layer of the experience—encompassing scrolling, animations, transitions, and audio.
Maintaining consistent patterns throughout the project proved crucial for performance and detail. This included a shared GSAP ticker for animation timing, strategic idle-task scheduling to prevent performance bottlenecks, a focus on GPU-friendly animations to ensure smooth rendering, and the innovative use of synthesized Web Audio for dynamic soundscapes. This unwavering attention to timing and interaction extended even to the smaller, seemingly peripheral elements, such as the interactive footer, ensuring that the rich digital experience permeated every corner of the site. Trionn stands as a compelling testament to the power of thoughtful integration and precise synchronization in crafting cutting-edge, immersive web experiences, setting a high bar for future digital studios.
