Motion Design

Cyprus Rail App

https://JemMaybank.b-cdn.net/Cyprus%20Rail-App-Reveal.mp4

Client

An app reveal animation for a hypothetical Cyprus Rail App. Made with Lottie and After Effects.

After exploring Omma, a new platform by Spline that allows you to build apps with AI-agents, I took my app design further by making an animated trailer for Cyprus Rail.

Cyprus doesn't have a working rail network, but it's something I'm passionate about becoming a reality in the future.

This app reveal shows what a rail network and bookable train tickets could look like if rail were reintroduced to the island.

Complete with icons and a map designed on Illustrator to build on the brand identity, developed to take the initial basic design in Omma to something more believable. UI elements from the app were animated in After Effects to step things up from basic app animation.

The app build in Omma can be accessed here if you want to take a look. It's not bad for a casual AI-built app.

‍

(function () { var PLAY = ''; var PAUSE = ''; var VOL = ''; var MUTED = ''; var styleAdded = false; function setup() { var wraps = document.querySelectorAll('.work-header__video-wrap'); for (var i = 0; i < wraps.length; i++) { var wrap = wraps[i]; if (wrap.getAttribute('data-jem-done')) continue; var video = wrap.querySelector('video'); var urlEl = wrap.querySelector('.js-cms-video-url'); if (!video || !urlEl) continue; var url = urlEl.textContent.trim(); if (!url) continue; wrap.setAttribute('data-jem-done', '1'); video.removeAttribute('autoplay'); video.removeAttribute('muted'); video.removeAttribute('loop'); video.removeAttribute('controls'); video.setAttribute('preload', 'metadata'); video.src = url; video.load(); if (!styleAdded) { styleAdded = true; var s = document.createElement('style'); s.textContent = '.jem-controls{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.5rem;z-index:100;pointer-events:none}.jem-btn{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}.jem-btn:hover{background:rgba(0,0,0,.75)}'; document.head.appendChild(s); } (function (w, v) { var bar = document.createElement('div'); bar.className = 'jem-controls'; var pBtn = document.createElement('button'); pBtn.className = 'jem-btn'; pBtn.innerHTML = PLAY; pBtn.setAttribute('aria-label', 'Play'); var mBtn = document.createElement('button'); mBtn.className = 'jem-btn'; mBtn.innerHTML = VOL; mBtn.setAttribute('aria-label', 'Mute'); bar.appendChild(pBtn); bar.appendChild(mBtn); w.appendChild(bar); function syncPlay() { pBtn.innerHTML = v.paused ? PLAY : PAUSE; pBtn.setAttribute('aria-label', v.paused ? 'Play' : 'Pause'); } function syncMute() { mBtn.innerHTML = v.muted ? MUTED : VOL; mBtn.setAttribute('aria-label', v.muted ? 'Unmute' : 'Mute'); } pBtn.addEventListener('click', function () { v.paused ? v.play() : v.pause(); }); mBtn.addEventListener('click', function () { v.muted = !v.muted; }); v.addEventListener('play', syncPlay); v.addEventListener('pause', syncPlay); v.addEventListener('volumechange', syncMute); syncPlay(); syncMute(); })(wrap, video); } } window.Webflow = window.Webflow || []; window.Webflow.push(function () { setup(); setTimeout(setup, 500); }); })();