Motion Design

Making Ramen

https://JemMaybank.b-cdn.net/Noodles.mp4

Client

A personal project that uses Array-based animation to explain the process and choices made when making an instant ramen.

Instant ramen doesn't need to be just packet noodles, it's down to your decisions and inspirations that set it apart from being a last-minute lunch.

The array and character animation add to the fun and variety that goes into making instant ramen, with a Lucky Cat-inspired colour palette to give a nod to it's Japanese roots.

‍

Check out more of my work below

Next project
Cyprus Rail 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); }); })();