A recreation inspired by the end-credits scene from Star Trek: Picard Season 3. Big shout-out to Mike Okuda, Andrew Jarvis and the crew of ST:PIC art/design department for making such a wonderful LCARS upgrade from the TNG version. While respecting the original artwork, I made several adjustments & additions to improve the interactive experience. Additional animations were also mixed in. I hope everything meshes well together. Check back here for future updates! Enjoy~🖖
* My original Titan•EPS simple page is still viewable here.
* Tungsten font is not used due to WebFont subscription licensing cost. Google open source font Antonio is used instead.
Two long duration Titan.DS videos are available on my YouTube channel. Both are in 4K quality. They should be great to play on those large TV screens. Cheers🖖
In the release build 2025.06.17B, the Auto Mode can now be activated immediately when you use a special URL to view the Titan.DS website. See examples below. Please note, the website’s default URL for general usage remains as: https://www.mewho.com/titan/
Remember this star chart by Andrew Jarvis featured in Season 1 of Star Trek: Picard? …Well, I’ve finally turned it into an interactive MAP module on Titan.DS🙂
This map represents a very small region of space in the Alpha & Beta quadrants of our Milky Way galaxy. To provide context, I’ve also added a Galaxy View to contrast with the Regional View. (*Our galaxy is really big!) ⬇️Here is a quick demo video of the new module. A longer walk-through video will be published soon.
User ManualHappy Star Wars Day😉
devLog This Galaxy object will be included in the final MAP module of Titan.DS. Image source of this Milky Way galaxy illustration is from NASA/JPL-Caltech: https://science.nasa.gov/universe/galaxies/ I made it a little bit 3D-ish. The central Star Trek setting represents only a relatively small area when compared to the immense size of the Milky Way. A galaxy is really huge! And this is only a tiny portion of the entire universe~🤔
May the force be with you🖖
One of my goals for Titan.DS has been to find ways to keep it visually engaging, even when you’re not actively interacting with it. It’s taken a while to get here because Titan.DS’s codebase has grown significantly over the last two years. I’ve spent the past several months reorganizing and scaling the app’s internal logic. This made it easier to develop the algorithm for Auto Mode’s controlled randomness, and I’m pretty excited to finally release it! This feature has been requested by several fans, with the first request dating back quite a while❤️ If you’ve used Auto Mode in my other projects: STARFIELD 47 & Project RITOS, you’ll feel right at home🙂
This update introduces a new Settings section for Titan.DS. Several internal variables can now be customized. These settings are stored locally only, and they will stay in effect when you revisit the site. A “reset” button has been added to the loading screen to revert all settings to their default values. This button is hidden unless a setting has been modified from its default.
NOTE: The setting, “Text Rendering on Buttons,” primarily affects the Chrome browser. Its default setting minimizes text flickering but may result slight blurriness.
Settings display
buttons to open Settings & User ManualDesktop app version of the Titan.DS website, packaged by using Electron framework. The content of the app is self-contained, no internet connection required. Right click on the app window to access options from the popup context menu.
three tiled Titan.DS windows w/ context menu
current system info integrated with gaugesFinally converted the Titan.DS website into a wallpaper for Wallpaper Engine. It’s freely available now from the Workshop on Steam. *Please note: Wallpaper Engine is a third-party paid program, with a one-time cost of US$4.99. Keep read for a free alternative Windows app.
Warning ⚠️ Early test build.
This alpha build is not code signed, meaning your operating system will not be able to identify who made this app. As a result, your OS and/or anti-virus program probably will complain or block this app from running when it attempts to launch it on the first time.
New YouTube video is up! It showcases the functionalities of the latest Titan.DS module. Info about this Warp Drive module’s release can be found in the November 18 log entry.
Warp Drive is now online on Titan.DS!
Previewing the Matter/Antimatter Injectors and Warp Coils, part of the upcoming WARP DRIVE module on Titan.DS website.
SVG line art elements were created in Figma, then animated via CSS & Javascript. The new module is scheduled to be released later this month. Cheers🩵🖖
*Design Reference :: Star Trek: Picard & Mike Okuda’s TNG Technical Manual (wiki_link)
As the TV series “ST: Discovery” coming to a close, here I present you my latest module addition, NCC-1031, to the Titan.DS website. The toggle for this new module can be found on the right side of the main display, sitting below the NCC-1701-G module button.
horizontal view option
vertical view optionTitan.DS’s latest update features the integration of my new project, APOD STARDATE. APOD can now be accessed & viewed directly within Titan.DS as a module. This module toggle is located near the lower right section of the main display, adjacent to the Spacedock module button.
APOD Module in Titan.DSThis Titan.DS holiday update idea came at the last minute. Initially, I was attempting to fix the existing sound effect on the ten 3D DNA pairs so that they would match a musical note scale. Previously, I had the audio pitch (PlaybackRate) change on a linear scale via Javascript. After some R&D, I adjusted it to a logarithmic scale. And that worked! Then, one thing led another, and I added a holiday musical section to the DNA module! I might have learned more about musical notation during this update than I’ll ever need😂 Oh, one of the music clips is my very poor imitation of Data’s Life Forms song😬
Titan.DS December Update InfographicI didn’t get a chance to create an infographic when the Spacedock module was released, so here I’ve made two back-to-back infographics for the latest two modules on the Titan.DS interactive website — Enterprise-G & Spacedock modules.
Enterprise-G Module UI Infographic
Spacedock Module UI InfographicAlso recorded a one-hour 4K video of the Spacedock module — great for playback on an older machine or on a TV via Chromecast, Fire Stick, or other similar devices.
Other long-duration videos are available on my YouTube channel. If you enjoyed these videos, be sure to Like/Share/Subscribe🧡 Thanks!
Uploaded two Enterprise-G related videos to my YouTube channel.
If you enjoyed these videos, be sure to Like/Share/Subscribe🧡 Thanks!
The new Enterprise-G module is ready just in time for Halloween🎃. As usual, you can activate this module using a button located on the right-side panel of the main display. Look for the NCC-1701-G button on the Titan.DS website. Please keep in mind that this is a fairly resource-intensive module, so it might affect browser performance on slower/older machines😬
Drawing inspiration from the rich source materials of ST: Picard, I’ve remixed & incorporated various UI elements from season 3 into this module. A big shout-out to Jeremy M for sharing some set photos he took; they’ve been a big help for referencing🧡 Additional reference photos publicly & generously tweeted by Dave Blass and Bill Krause were utilized. Bill Krause is the designer of the Constitution III Titan!
⚠️ Designed with a focus on 4k displays, this particular module may display smaller elements & text as slightly fuzzy or blurry on an HD (1080p) display😬
This Spacedock (Sol Station 398392 / aka Probert Station) is based on a short LCARS video clip tweeted by ST: Picard’s FUI (Fictional UI) designer Andrew Jarvis. That clip could be briefly spotted in season 3. I made a few changes & added several interactive animations so that it could be integrated with the Titan.DS website smoothly.
A kind warning: I used a combination of SVG animation and CSS 3D transform to create the overall effect. It could be a bit heavy when running on a underpowered machine, resulting sluggish performance. And somehow Firefox crashes frequently when displaying this module, at least on my machine 🤷 ¯\_(ツ)_/¯ 👉I will make a long recording of this module and share it on my YouTube channel soon, so that everyone could enjoy this Spacedock animation without needing a fast computer.
🔶Additional short videos & high-resolution screenshots are available in my online albums:
Anyhoo, besides being an interactive module, I’ve also repurposed those spinning mini LCARS to list out names of my project supporters on the Patreon & Ko-Fi platforms, as my special way of making shoutouts😉 🧡 YOUR CONTINUED SUPPORT IS MOST APPRECIATED! The names are arranged randomly on each refresh. Remember to use the “Via Patreon” & “Via Ko-Fi” buttons to switch on/off the platform category.
What’s next on Titan.DS? It will be an Enterprise-G sideview display — voted recently by my Patreon members😃 Cheers~
Been working on this update gradually over the past few months — schedule was rather chaotic. Though I’m really happy that this update is finally complete.
In essence, I integrated my Starfield 47 project into Titan.DS. And a new module was born. I’ve named it the STELLAR CARTOGRAPHY module!
You’ll find the button for this module, labeled STLR-CRTO, positioned just above the DNA Module button, towards the lower right corner of the main display. Once activated, Titan.DS will attempt to load the Starfield 47 website within an iframe (a website within a website). Due to the difference in UI design, the original interface of Starfield 47 wouldn’t fit well with Titan.DS. To resolve this, I created a new UI layer within Titan.DS that would communicate with the SF47 iframe. You can still interact with the 3D Space in this module, just like in Starfield 47. The keyboard shortcuts with Starfield 47 retain their functionality here as well. (Remember to click on the 3D Space before utilizing the shortcuts to ensure the module gains focus first.)
Stellar Cartography module infographic
A new starship module has been added: the USS Enterprise, NCC-1701 — the version from ST: Strange New Worlds (SNW). This wireframe graphic was recreated based on the images tweeted by Timothy Peel, SNW’s motion graphic designer/supervisor.
Since it’s a wireframe graphic, I thought it’d be fun to have a new ‘revealing’ animation sequence to go along with its line art style. I utilized SVG format’s stroke-dasharray property to create the line drawing effect. This main revealing sequence would always start on the line drawing of the saucer section. It’d then proceed to either the nacelles, the pylons or the engineering hull section by chance. As usual, I tried to build in as much randomization as possible, so the overall effect would always be presented slightly different on each run. The bridge, the saucer section & the nacelles are all responsive to clicks.😉
Small improvements were made on other ships as well. Titan.DS now has a total of 3 starship modules (Enterprise, ENT-D & ENT-F). More will be added in the future. Cheers~
I recorded an 1-hour long video of Titan.DS in 4K resolution running with full sound effects on, including the ambient engine noise. A glow effect was added in the post with a video editing software before I uploaded the video to YouTube.
Ideally this could be viewed on a big smart TV via a YouTube app or a Chromecast/Fire Stick/Roku. A less powerful computer or tablet could also easily play this video, as opposed to running the more CPU-demanding Titan.DS website (Titan Display System).
Let me know if there are other types of video you’d like to see🖖
Titan.DS: SFX with Ambient Engine Noise • 1-Hour Loop in 4K
Same recording but Without Ambient Engine Noise YouTube
my YouTube channel, youtube.com/@system47. Please subscribe🧡 Thanks!
Been working on adding the sound effects (SFX) little by little to Titan.DS in the past few weeks. So glad it’s finally complete. 😫Pardon me — currently my brain is filled with constant beeping sounds. Hopefully that will go away soon!
On Titan.DS’s main display, look for the AUDIO button in lower left to activate the sound. (next to the fullscreen button) On desktop, the sound can also be toggled by hitting the M key on your keyboard. The Engine Ambient Noise has also been added. However, it is set to off by default. Head to Titan.DS’s ABOUT section to adjust the volume levels of the Engine Noise and the Sound Effect. Whenever the volume level is altered, the new level’s value gets stored in your browser’s cache. And it will persist when you visit the site again in the future. Have fun💙
Made some bugfixes & performance improvements on Titan.DS, particularly for Firefox & Safari/iOS browsers. I applied blur effect on a few elements. And I have purposely suppressed this effect on Safari browser & any browsers running on iOS (all browsers on iOS actually use Safari as the engine). The blur filter effect is poorly supported on Safari and it affects the entire webapp’s performance unfortunately🙁
A major update on this project. Project was renamed from TitanEPS to Titan.DS because more non-EPS elements have been (and will be) added. The DS stands for “Display System”😀
In this update, two modules were added: DNA & Enterprise-D. The DNA graphics were inspired by ST:Picard Season 3. And the Enterprise NCC-1701-D’s vector graphic was created based on images found in the ST:TNG Tech Manual. Look for the buttons on the side panel to activate these two new modules. Also, two display modes were added: a GrayScale mode & a Light mode (aka, the Flashlight mode 😂). Do be careful with the Light mode. Don’t blind yourself😉 Below is the new URL for the Titan.DS project. Enjoy~🖖
DNA module
NCC-1701-D moduleNew URL for the project: mewho.com/titan
The initial version (simpler/cleaner) can still be viewed at: mewho.com/lab/titanEPS_1.html
The TITAN EPS starship graphic used in my TitanEPS project was recreated based on screenshot from the ST: Picard season 3’s end credits. I have cleaned it up slightly, probably could use more work. Feel free to use it in your non-commercial projects. Please include attribution when repurposing/resharing🙂
Download link: SVG+PNG in a zip
Transitioned my TitanEPS test page into a more solid project. More LCARS elements & animations have been added, and it supports ULTRAWIDE display!! The additional “side content” can be viewed on a regular 16:9 display as well. An Enterprise-F module & a Red Alert function are among the new additions.
👉Special shout out to Starbase400.org. I created the Enterprise-F line-art graphic based on the 3D renders provided by Starbase400🙂
ultrawide support: up to 32x9 aspect ratioYesterday’s season premiere was awesome! And that LCARS end-credits sequence was simply wonderful!! I quickly recreated the Titan EPS graphic and its animation on this test page: TitanEPS — mewho.com/lab/titanEPS_1.html
👉 The EPS boot-up sequence restarts every 47 seconds😉
Mariner of the Seas LCARS MSD