Animated Interactive System for a Football Magazine
I designed and developed an engaging interactive module to showcase curious facts and world records from the world of football in a playful, dynamic way.
Objective
Provide readers with a fresh, immersive experience that turns static statistics into live, exploratory content—keeping them engaged and eager to discover new trivia.
Technology Stack
Animation & Interaction: Rive (JavaScript runtime)
Data Handling: JSON database of football facts
Integration: Vanilla JS (or React/Vue) for embedding and control
Key Features
Parallax-Driven Character
A custom-designed mascot with multiple depth layers that shift responsively to mouse or touch movements, creating a 3D-like parallax effect.
A custom-designed mascot with multiple depth layers that shift responsively to mouse or touch movements, creating a 3D-like parallax effect.
Randomized Trivia Display
On each interaction (click), the system pulls one random entry—be it “most goals in a calendar year,” “longest unbeaten streak,” or “youngest World Cup scorer”—from the JSON dataset.
On each interaction (click), the system pulls one random entry—be it “most goals in a calendar year,” “longest unbeaten streak,” or “youngest World Cup scorer”—from the JSON dataset.
Seamless Loading & Performance
Vector assets exported from Rive ensure crisp visuals at any resolution, with minimal impact on load times for both desktop and mobile.
Vector assets exported from Rive ensure crisp visuals at any resolution, with minimal impact on load times for both desktop and mobile.
Development Workflow
Asset Creation in Rive
Built the character rig with layered artwork for parallax depth.
Defined state machines and input triggers for smooth motion.
Set up event listeners to drive animations based on user input.
Defined state machines and input triggers for smooth motion.
Set up event listeners to drive animations based on user input.
Data Integration
Structured a JSON file containing 50+ football records and curiosities.
Implemented a simple random-selection algorithm to pick and display entries.
Structured a JSON file containing 50+ football records and curiosities.
Implemented a simple random-selection algorithm to pick and display entries.