Portfolio Showcase Project
OVERDRIVE
Esports Championship, Brand & Motion Design
A fictional global esports championship built as a flagship demonstration of motion-first web design. OVERDRIVE explores how a competitive-broadcast identity can live in the browser, extreme editorial typography, a disciplined monochrome system, and a scroll experience choreographed frame by frame.
The OVERDRIVE landing experience, designed and built by Aspire Kinetic Network.
Project background.
Esports broadcasts trade on energy, speed, and spectacle, but most tournament websites flatten that into static schedules and logo grids. OVERDRIVE was conceived as a counter-example: a fictional global championship treated as a canvas for what a motion-led studio can do when the brief is pure craft.
The concept draws on the visual grammar of competitive-broadcast design, near-black surfaces, an extreme type scale, a single electric accent, and rebuilds it as an original property. Rather than a page that lists an event, OVERDRIVE stages one: a numeric broadcast preloader, a hero that scales as you scroll, a live-standings data moment, and a horizontally-scrolling roster of sixteen teams.
As a self-directed showcase, its audience is prospective clients in entertainment, gaming, and any sector that values a distinctive, kinetic digital presence. It demonstrates range beyond conventional business sites, and proves the studio can execute reference-grade motion without sacrificing performance or accessibility.
Project Classification
OVERDRIVE was created by Aspire Kinetic Network as a portfolio showcase project to demonstrate brand direction, motion design, and front-end engineering within the esports and entertainment sector. The event, teams, and matches are fictional.
Industry
Esports / Entertainment
Built By
Aspire Kinetic Network
Status
Live
Business Goals
- ·Demonstrate motion-first design capability at a reference level
- ·Show sector range into esports, gaming, and entertainment
- ·Prove that complex scroll choreography can stay performant and accessible
- ·Position the studio for clients who want a distinctive, kinetic web presence
Conversion Strategy
Craft as the pitch, the experience itself is the argument. Every scroll interaction is engineered to communicate capability before a visitor reads a word of copy.
Design direction.
OVERDRIVE is built on a high-contrast monochrome foundation, near-black (#050505) against near-white, punctuated by a single vivid accent used exactly once per view. The restraint is the point: with almost no colour, hierarchy is carried entirely by scale, weight, and motion.
Typography does the heavy lifting. A tight, editorial display face runs from small labels to a 192px hero wordmark, with negative tracking at large sizes for a bold, broadcast-editorial feel. The layout is flat and shadowless, depth comes from contrast and choreography, not ornament.
The accent discipline is strict: the pink marks only the single most important action on any screen, and red is reserved exclusively for live status. That discipline is what keeps a heavily-animated page reading as premium rather than noisy.
Motion is the brand. Smooth inertia scrolling underpins a sequence of authored beats, a numeric preloader that wipes into the hero, a wordmark that scales and recedes on scroll, a horizontally-scrolling team roster with layered depth, and kinetic type that reacts to scroll velocity, all gated behind reduced-motion for users who prefer stillness.
Key features.
Kinetic Broadcast Preloader
A numeric counter that fills and wipes into the hero as the opening beat, a broadcast-style countdown that primes the visitor for a competitive-broadcast experience before the first section resolves.
Hero Scale-Pin
The wordmark scales and drifts into an atmospheric depth field as the visitor scrolls, pinning the hero in place while the composition recedes, the first authored proof that the page is choreographed, not merely scrolled.
Horizontally-Scrolling Team Roster
The signature moment: a horizontal pan across sixteen team crests with layered in-card depth, turning a conventional logo grid into a broadcast-grade reveal driven entirely by vertical scroll.
Velocity-Reactive Kinetic Type
A marquee that speeds, skews, and reverses in response to scroll velocity, so the typography itself becomes a live instrument of pace, energetic when the visitor moves fast, composed when they slow down.
Live-Standings Data Moment
Broadcast-style ranked numerals present a standings table as a designed data moment, with the live row marked in accent red, a disciplined nod to the on-air graphics language of competitive esports.
Strict Accent Discipline
One pink action per view; red reserved exclusively for live status. The restraint is engineered, with almost no colour in play, every accent carries meaning and the heavily-animated page still reads as premium rather than noisy.
Scroll-Choreographed Reveals
Sections are authored to scroll progress rather than simple fades, so each beat resolves on a timeline the visitor controls, the pacing of a broadcast package rebuilt as an interactive, scrubbable sequence.
Motion-Safe by Design
Full prefers-reduced-motion support is built in from the start. Nothing essential depends on animation, visitors who prefer stillness receive the complete narrative, content, and hierarchy without a single forced movement.
Responsive, Mobile to Ultra-Wide
The monochrome system and its motion degrade gracefully across every breakpoint, preserving type scale, hierarchy, and the choreographed reading rhythm from a 360px phone to an ultra-wide display.
Tech stack.
OVERDRIVE is a single, animation-first page, so its stack differs from this Next.js site, Vite was the right fit for a motion-led build. The tools below describe the OVERDRIVE project itself.
React 19
Component architecture for the single animation-first page
Vite 6
Fast build tooling suited to a single motion-led experience
Tailwind CSS v4
Utility-first system enforcing the monochrome discipline
GSAP + ScrollTrigger
The core motion system, preloader, scale-pin, horizontal scroll
Lenis
Smooth inertia scrolling underpinning the authored beats
Clash Display + General Sans
Editorial display and body type from Fontshare
Vercel
Edge-deployed for global fast loads and reliability
Project outcome.
Portfolio Value
A motion-first flagship proving AKN can build reference-grade, kinetic web experiences for entertainment and gaming brands, a portfolio piece that speaks directly to clients who value spectacle and craft.
Design Execution
Heavy motion and strict discipline coexisting: a shadowless, two-colour system carried entirely by type, scale, and choreography, proving that a heavily-animated page can still read as premium.
Engineering Craft
A full GSAP + Lenis motion system, preloader, scale-pin, horizontal scroll, velocity-reactive type, built transform-only, performant, and reduced-motion-safe from the first commit.
Sector Range
Extends the portfolio beyond conventional business sites into esports and entertainment, where a distinctive kinetic presence is the differentiator rather than a nicety.
On a phone the scroll choreography is cut back rather than reproduced: the type still leads, the standings table scrolls horizontally inside its own container, and nothing on the page depends on a hover state to be readable.
Live Website
See it live.
Visit the live OVERDRIVE experience to see the full motion system, the broadcast preloader, the scale-pinned hero, the horizontally-scrolling roster, and the live-standings moment, in action.
Visit Live WebsiteBuilt by Aspire Kinetic Network
We are a web design and SEO studio in Warangal, Telangana. This was a concept build; the same stack and the same standards go into client work. Founding Partner Programme: five slots, first clients, design and build free on a monthly maintenance plan, while we document the results.