Gamified Hero with Interactive Spline Grid

Gamified Automation Hero with Interactive Spline Grid

This project explores a gamified hero section concept. Instead of a static background, the hero section becomes a small interactive experience. A glowing ball moves across a grid of tiles, and the tiles react to the ball’s position.

When the ball gets close to a tile, the tile rises up. When the ball moves away, the tile returns to its original position. This creates a playful system where the environment reacts to movement.

The concept turns a normal hero section into something interactive and exploratory.

Users can control the ball using the W, A, S, and D keys on the keyboard.

As the ball moves across the grid, nearby tiles move upward within a defined radius. When the ball leaves that area, the tiles drop back down. This creates a responsive environment that reacts to the user's movement.

The interaction encourages exploration and makes the hero section feel more like a small game.

The grid is made of repeating blocks that form a clean surface. The blocks rise based on the ball’s distance from them.

The visual style is tech inspired and playful. Neon pink, purple, and blue colors create a futuristic atmosphere. The glowing ball contrasts with the darker grid and helps guide the viewer’s attention across the scene.

The scene was built entirely in Spline.

The grid reaction is controlled using distance based logic. Each tile checks how close the ball is and moves upward when it enters the interaction radius. When the ball leaves that radius, the tile returns to its original position.

This system creates a responsive environment without complex physics.

The goal of this hero section is discovery. Instead of simply viewing the page, users interact with it and explore how the grid reacts to their movement.

The part I am most proud of is the overall system. The interaction between the ball and the grid creates a simple but engaging experience that makes the hero section feel alive.

Check it out at: https://cube-road-table.vercel.app/