The context
MyDragonEggs is a dragon breeding and battling game, still in development. A game sells on its atmosphere first and on its mechanics only afterwards. A conventional presentation page with a few screenshots and a paragraph of description conveys no atmosphere at all.
The problem
A game in development needed a showcase able to draw visitors into its universe before they even play. A plain présentation page with a few screenshots would have conveyed none of the atmosphere.
A second, less visible problem: the game news had to exist in two places, in the client and on the site. Publishing the same thing twice always ends up producing two different versions, one of which gets forgotten along the way.
The solution
A single page built around scrolling: the screen stays pinned while an egg-shaped cut-out opens to reveal each step of the story. Three.js effects for the birds and the mist, all in PHP with no framework. The news shown comes from the same API the game client reads, published only once.
Scrolling as the narrative thread
The screen stays pinned while an egg-shaped cut-out opens to reveal the next step of the story. The visitor moves through the narrative at the pace of their scroll wheel, never changing page. The hard part was keeping that motion readable at every scrolling speed.
Deliberately light 3D
The birds and the mist are rendered with Three.js. These elements were kept deliberately simple: they serve the atmosphere and must not weigh on the load time of a page meant to be shared on social media, often opened from a phone on an average connection.
A single source for the news
The site reads the same API as the game client. News published once appears in both places, with the same text and the same date. It is the kind of connection nobody sees but which saves hours of copying and removes a source of errors.
Tech stack
The result
A showcase that tells the universe rather than describing it, and a single source for both the site and the game news.
- A universe presented through experience rather than description
- News published once for both the site and the game
- No framework, everything in PHP and JavaScript
Frequently asked questions
Does scroll animation hurt search rankings?
Not if the text exists in the page from load time. Here the content is produced in PHP on the server and the animation only handles how it appears. The problem is with sites where the text only exists once JavaScript has run.
Can a site be plugged into an existing application?
Yes, as long as the application exposes an API or an accessible database. That is what was done here with the game news, and the same principle applies to management software, a stock system or a booking calendar.