XRev Studio Website
The studio site behind CricketX and BaseballX: pages that scroll as a deck of cards, and a hero that tracks deliveries on a canvas.
- Role
- Lead Developer
- Studio
- XRev Studio
- Site
- xrevstudio.com
- Built with
- React, TypeScript, Vite, GSAP, Lenis
- Motion
- Full and Calm modes
By the numbers
The studio's front door
xrevstudio.com is the website of XRev Studio, the team behind CricketX and BaseballX for Meta Quest. The home page shows the two simulators, a few client projects, the services, how the team works and a contact form. Each simulator has its own page, and a work page lists the studio's client projects.
The work page has a filter for each kind of project. Opening a project slides in a panel with its video, pictures and details. The panel has its own address, so a single project can be shared as a link.
Every page is a deck of cards
Each section of a page is a card. As you scroll, the next card slides up over the last one, which steps back and dims. A long card scrolls its own content first. Then a short pause lifts the last lines and names the next card before it arrives.
I wrote this scroll engine on GSAP ScrollTrigger and Lenis. When a wheel or trackpad scroll is most of the way through a change, the engine bends the same glide so the card lands in one motion, and it never pulls against the reader. The label beside the logo shows the card you are on, and a long jump covers the screen with a yellow wipe that names where you are going.
What you'd notice
- Each section slides up over the last like a card, and a “Next” cue names the one coming.
- The hero bowls a new ball every few seconds, traces its path and switches between cricket and baseball.
- A long jump drops a yellow screen that names where you are going.
- On phones, cards light up as they cross the middle of the screen, in place of hover.
A ball-tracking scene, drawn by hand
The hero shows an animated scene. A ball is bowled or pitched, its path is traced in yellow, and labels mark the release, the bounce and the contact. The scene switches between cricket and baseball every few balls, and a small panel shows the speed, spin and length of each one.
There is no 3D library behind it. It is a plain 2D canvas with its own camera, real pitch and diamond sizes, and ball flight worked out 240 times a second. The scene frames itself to the space beside the headline on any screen. On the CricketX page, a Delivery Lab lets visitors set pace, length, line and swing, pick the batter's shot and bowl the ball.
Calm when you ask for it
The site has two motion modes, Full and Calm. Calm is the default when a device asks for less motion, and a switch in the footer changes it. Calm keeps every animation, but the moves are shorter and the 3D tilts are gone.
Phones get their own version of every hover effect: cards and buttons light up as they cross the middle of the screen. To keep scrolling smooth, videos and the canvas pause when they leave the screen, and nothing blurs or blends over content that is moving.
Ready for search and for enquiries
After each build, a headless browser opens every page and saves it as finished HTML, so search engines and link previews see real content. Every page, including each client project, gets its own title, description and share picture, and the sitemap is written at the same time. Links to the old site's pages lead to their new homes.
The contact form sends enquiries straight to the studio inbox through Web3Forms, with a hidden field that catches bots. The site sets no cookies and loads no trackers, and its fonts are hosted with the site. A small script scrolls each page at four screen sizes and reports any text that overlaps or gets cut off.
What I built
I built the whole site: the scroll engine, the page transitions, the ball-tracking canvas and the Delivery Lab, every page, the prerender step, the layout checker and the contact form. Every change in its history is mine. I also rendered the CricketX gameplay loops on the site from the real game, with a generic bowler and plain kits.
The XRev mark and its yellow come from the studio's existing brand, and the client projects in the catalogue are the studio's work. My part was the site that presents them, and the research behind its copy, written to simple rules: no numbers that go out of date, and nothing that is not live.
End of the case studyThanks for reading.
More case studies
Working on something like this?
I'd love to hear about it. If there is a game or a project where this kind of work would help, send me a message.