EARTH100000AD
A cinematic sci-fi universe set 100,000 years in the future — humans, AI and beasts united against cosmic invaders.
- Type
- Original IP
- Discipline
- Narrative + Frontend
- Year
- 2026
- Status
- Live
01 — The premise
A future history, written before a single screen was designed
Build an original science-fiction property that can hold an audience on the web — deep enough to reward reading, cinematic enough to feel like a screen experience, and structured so new chapters can be added without rebuilding the site.
Where the story sits
EARTH100000AD is set one hundred thousand years from now. Humans, artificial intelligence and engineered beasts share a single planet and face invaders from outside it. That premise is the constraint the whole interface answers to: every surface has to make an unfamiliar far-future world legible within a few seconds of arrival.
The universe was written first, then translated into a reading architecture: a lore spine, a cast system and a scroll-driven visual language. Motion, typography and imagery were tuned to feature-film pacing so the story leads and the interface stays out of the way.
Humans
What remains of us after a hundred millennia of adaptation.
Artificial intelligence
Not a villain by default — a civilisational participant.
Engineered beasts
Designed life that outlived the reason it was designed.
02 — Experience architecture
How lore, chapters, factions and cinematics connect
The site is not a set of pages — it is a spine with attachment points. Everything a visitor can reach is one of four object types, and each one knows where it belongs in the timeline.
Editorial diagram based on the structure of the live experience. Adding an arc means adding a chapter object and its cast references — layout and navigation code are untouched.
The interface had one job: get out of the way of a hundred thousand years of story.
03 — Decisions & rationale
What was chosen, and what it cost
- 01
Write the universe before designing the site
The lore came first, so the reading architecture could be shaped around real material instead of a template waiting to be filled.
Trade-off — A longer start before anything was visible on screen.
- 02
Scroll-driven pacing instead of a hero and a menu
Reveal timing, parallax depth and video placement were sequenced to feel like film rhythm, so the story leads and the UI recedes.
Trade-off — More care needed to keep motion from interrupting reading or scroll performance.
- 03
One cast system for humans, AI and beasts
Shared profile structure with distinct visual treatments keeps very different characters comparable without flattening them.
Trade-off — Individual characters get less bespoke layout than a one-off page would allow.
- 04
Enter anywhere, still follow the thread
Chapters are cross-linked so a visitor arriving mid-universe is not stranded, which matters for shared links.
Trade-off — Each chapter carries some repeated orientation copy.
04 — Growing the universe
Built so the next arc is an addition, not a rebuild
New stories slot into the existing chapter spine. The extension path was decided at design time because an IP that cannot grow is a landing page with ambitions.
Add the chapter
A new arc is authored against the existing timeline position and inherits chapter layout, type scale and reveal behaviour.
Attach the cast
New characters, factions or beasts are created in the shared profile system and referenced from the chapter.
Place the cinematic
A video or key still is dropped into the chapter's cinematic slot with the same grading and framing rules.
05 — Touch-first storytelling
The phone gets the whole film, not the trailer
Mobile keeps the full narrative rather than collapsing into a summary. That decision set the constraints for type, media and motion at every width.
1440px
Wide cinematic frames with generous margins; parallax depth is most visible here.
1024px
Media and copy share the fold; reveal distances shorten so pacing stays tight.
768px
Single column; cast surfaces move to a two-up grid and captions stay attached to their frames.
390px
Full narrative retained; media crops protect the subject and headings stay readable without clipping.
06 — Role & responsibility
Role & contribution
An original Trust Me Studio property — conceived, written, designed, built and deployed in-house by Divyank Tiwari.
World-building & writing
Original future history, factions, characters and the chapter order.
Narrative product strategy
How the story is entered, read and extended on the web.
Art direction
Typography, colour and the cinematic grading language used across every surface.
UI/UX design
Lore, cast and chapter surfaces, including the mobile reading experience.
Frontend engineering
React and TypeScript implementation of the full responsive build.
Deployment
Launch and post-launch iteration of the live universe.
07 — Evidence
What the project demonstrates
An original IP presented as a readable, navigable universe rather than a landing page
A narrative architecture that can absorb new chapters without redesign
Cinematic motion applied without blocking reading or scrolling
A consistent visual identity carried across every surface
Want work like this for your project?
Trust Me Studio takes on a small number of projects at a time. If this is the standard you're looking for, start a conversation.