# Asquareportal — Full Site Content
> Motion design studio crafting explainer animations, interactive motion graphics, and visual storytelling. Based in Berlin.
## Key pages
- [Home](https://asquareportal.com/)
- [Journal](https://asquareportal.com/blog)
- [Work](https://asquareportal.com/work)
- [Courses](https://asquareportal.com/courses)
- [Playground](https://asquareportal.com/play)
- [Portals](https://asquareportal.com/portal)
- [Contact](https://asquareportal.com/contact)
## Articles
# AI & Human Design, NASA HMI, Johnny Harris & Free Tools!
- Published: 2026-04-28
- URL: https://asquareportal.com/blog/ai-and-human-design-nasa-hmi-johnny
Hey Creatives!
First of all, welcome new subscribers! It is so good to have you here. There has never been a better time to join a creative community than during these monumental shifts in our field. I’m glad you’re here.
I want to officially welcome you; come say hi in the Official Discord Channel or DM me on LinkedIn.
Now, since we last spoke, the industry has gone through some massive changes due to AI. But it remains to be seen how much of it is truly long-lasting. Claude Design, Google Stitch, Remotion, HyperFrames—I’ve been deep-diving into these over the last few months. They are powerful for execution, but they come with heavy caveats. You often find yourself stuck in manual adjustment loops or bug-fixes that lead nowhere, especially when you need a model to follow a strict brand system or a specific design brief.
When it comes to AI motion, we’re still miles away from real, orchestrated, and tasteful animation. For something quick and simple? Sure. For a design-driven masterpiece? Not yet.
But here is the flip side.
While I’ve been critical of AI as a "push-button" designer, I’ve found it to be an absolute superpower when treated as an engine for building. Instead of asking AI to _be_ the artist, I’ve been using it to build the tools that _protect_ the artist.
I’ve been quietly building a suite of internal tools, powered by my Product Design Experience to solve my own creative bottlenecks, and as a gift to all of you for being part of this launch, I’m sharing the first one today for free. It’s an open-source app I built called [FlashLearn](http://flashlearn.asquareportal.com), designed to help us absorb complex technical specs at 10x speed so we can get back to the actual craft.
The future isn't just about moving pixels; it’s about building the portals that get us there. My recent [Rive & Contra HMI Challenge](https://www.asquareportal.com/nasa-challenge) is a perfect example—it showcases what a designer can do with real intent, brand alignment, and the right technical systems in place.
More about the NASA project, the FlashLearn gift, and this week's resources below!
Now, let’s enter the portal.
Asquare
> _📺_YouTube Learning
[My latest YouTube video](https://www.youtube.com/watch?v=h-ojRDbTbvw) is live and packed with insights!
In this one I breakdown the secrets behind Johnny Harris’s Animation & Storytelling Techniques that make his videos so special, its almost an hour long - its kind of like a masterclass with so many pro tips and tricks and its all for free, I also gave away After Effects Project Files with all assets for free, check it out!
By the way **[I’ve launched a Patreon!](https://www.patreon.com/c/asquareportal/membership)** more on this later.
Also, I just started a [Discord server](https://discord.gg/UTJ23KeU2B) — a creative space to connect, share, and grow together with other creators like you, get opportunities to share your work and inspiration with the community and get a early access and additional benefits!
> **🚚 Creative Resources**
**[FlashLearn](http://flashlearn.asquareportal.com)**
🚚 FlashLearn: Open-Source AI Study Partner
I’m opening up the hood on FlashLearn, an internal tool I built to bridge the gap between “consuming” and “absorbing” information. It’s a desktop study app that takes any PDF and instantly generates AI-powered true/false flashcards and audio lessons. If you’re a designer trying to stay literate in new technical specs (like Rive or Cavalry) while you’re on the move, this is for you. It’s open-source, built for the community, and designed to make deep learning a friction-less habit.
- **Use Case:** Rapidly absorb software manuals or design theory.
- **Link:** [FlashLearn](http://flashlearn.asquareportal.com)
> **✨Creative Inspiration**
**The "Gem of the Week":** [Visite Amazônia](https://www.visiteamazonia.com.br/en/) ✨
**
Why it matters:** This project is a masterclass in why AI cannot—and will not—replace the designer. While AI models are getting better at generating imagery, they lack the **intentionality** and **orchestrated sensory experience** found here. This isn’t just a website; it’s an immersive narrative.
The seamless integration of high-end scrollytelling, organic motion systems, and a perfectly paced soundscape creates an emotional connection that a prompt alone can’t replicate. It shows that “Real Intent” and “Taste” are our ultimate moats. If you want to see what happens when human art direction meets technical precision, this is the portal you need to enter.
**The Lesson:** Don’t just look at the visuals. Look at the **pacing**. Notice how the motion guides your eyes exactly where the designer wants them. AI can give you “pixels,” but only a designer can give you “presence.”
> [Amazonia by Pagina Inicial](https://www.visiteamazonia.com.br/en/?utm_source=extension&utm_medium=click&utm_campaign=muzli)
> **🎨In the Studio**
Last month I spent weeks building a lunar interface for the Rive & Contra challenge. It’s a deep dive into state machines and functional motion. You can see the full breakdown and the interactive prototype here: **[NASA HMI](https://www.asquareportal.com/nasa-challenge)**
> **🎆Work with me**
**Work with me:** I'm currently opening up 2 spots for custom explainer animations and interactive motion systems for June. If you have a project that needs a "Creative Architect" approach, just reply to this email, get on a call with me here - https://www.asquareportal.com/contact
or find me on [LinkedIn](https://www.linkedin.com/in/aavirash-mitra-523302116/).
> **🌍Be a Part of the Community & [Patreon!](https://www.patreon.com/c/asquareportal/membership)**
### **💡 Support the Journey**
If you want to fuel the deep dives and get under the hood of my process, consider joining the **Patreon**. You’ll get access to the **Official Discord**, my **YouTube project files**, and the **Motion Design Portal**—a members-only show where I deconstruct and rebuild industry-leading animation styles from scratch.
[check it out and join the portal!](https://www.patreon.com/c/asquareportal/membership)
> **Quick Links**
• 🌐 [Asquareportal](http://www.asquareportal.com)
• 🎥 [Watch the latest YouTube video on Mastering Visual Storytelling](https://youtu.be/bVi-nneRxM4)
• 🎨 [Join the Asquareportal Discord community](https://discord.gg/UTJ23KeU2B)
• 👑 [Patreon](https://patreon.com/asquareportal?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink)
• 💼 [LinkedIn](https://www.linkedin.com/in/aavirash-mitra-523302116/)
• 📱 [Instagram](https://www.instagram.com/asquareportal/)
---
# Designing NASA's Lunar Lander HMI in Rive: A Journey into Interactive Motion
- Published: 2026-04-27
- URL: https://asquareportal.com/blog/recreating-nasa-s-lunar-lander-hmi-in-rive
Design is about communication. It’s about guiding the viewer’s eye, evoking emotions, and telling stories. Motion adds a new dimension to this. It can:
- Draw attention to key elements
- Provide feedback to user actions
- Create a sense of flow and continuity
- Enhance storytelling by pacing information
>*Interactive motion takes this further by allowing users to influence what happens on screen.*
This two-way communication creates a richer experience. It invites curiosity and exploration, making the design feel alive.
An interactive slider you can drag with your mouse to reveal what is underneath — live, right here in the post.
Rive is a fantastic tool for creating interactive motion graphics. It combines vector animation with real-time interactivity, all within a single platform. I recently submitted a project to an interactive graphics challenge on Contra using Rive, and it was a rewarding experience.
Rive
Here’s what I learned:
- **Ease of use**: Rive’s interface lets me design and animate in one place, without switching between tools.
- **Interactivity**: I could add triggers and state machines that respond to user input, making the graphic feel alive.
- **Performance**: The animations run smoothly on web and mobile, which is crucial for user experience.
[This project](/#project-11) allowed me to push the boundaries of what interactive motion can do. It also reinforced my belief that this design layer is a space where human creativity shines brightest.
NASA HMI Menu 2 Screen — [check out the full project here](/#project-11).
While I'm on the subject of Rive projects, I also built an [AI Agent Avatar Creator](/#project-39) — a Rive-powered experience where the agent itself is a real, rigged character that reacts in real time.
Pick an agent, customise its look, and the avatar responds through the same state machine that drives the interface — no looping GIFs. It's a full rig: bones, constraints and a state machine graph wiring every interaction. [Check out the whole project](/#project-39).
Interactive motion is not just a trend; it’s a way to build stronger connections with audiences. For brands and creators, it offers several benefits:
- **Improved engagement**: Interactive elements keep users on your site or app longer.
- **Clearer communication**: Motion guides users through complex information step-by-step.
- **Memorable experiences**: Unique interactions make your brand stand out.
Using tools like Rive, it’s possible to create these experiences without heavy coding. This lowers the barrier for brands and creators to adopt interactive motion in their projects.
If you want to explore this further, I recommend checking out [my Rive course](/portal/rive) — I teach this approach in depth. It’s a great starting point for anyone interested in interactive graphics.
Where does AI fit into all this? First of all, Rive has recently shipped the Agent Feature inside the Rive Editor where AI can build things, chat and even refactor your designs and interactions — it's wild! But beyond that, I think AI will continue to improve and assist designers in many ways. It might generate initial animation ideas or automate repetitive tasks. But complex multi-state machine interactive motion will likely remain a space where human creativity leads.
The reason is simple: interactive motion is about connection. It’s about anticipating how a person will feel and respond. It’s about crafting moments that surprise and delight. These are deeply human skills.
I see interactive motion as the last design layer where AI supports but does not replace. It’s a creative frontier that invites us to blend technology with empathy and storytelling.
Some amazing real-world Rive projects — it's way more than just an editor!
My work with Rive has shown me how accessible and powerful this design approach can be. It’s a tool that empowers brands and creators to build richer, more engaging experiences.
If you want to explore interactive motion or need help bringing your ideas to life, I’m here to help. Together, we can create graphics that move, respond, and connect — in ways AI cannot replicate.
If you’re curious about my interactive graphics challenge submission or want to see more examples, feel free to [reach out](/contact) or explore [my Rive course](/portal/rive) to start your own journey.
*Thank you for reading. I look forward to sharing more insights and projects as we continue to explore the future of interactive design.*
---
# The Key to Being an Online Creator — Plus Insider Tips & Resources
- Published: 2025-05-07
- URL: https://asquareportal.com/blog/the-key-to-being-an-online-creator
Hey Creatives!
Before we dive into this week’s announcements, global inspiration, and resources, I want to extend a warm welcome to all the new subscribers of the Creator Portal Newsletter. Honestly, I’m buzzing with excitement and gratitude to have you here. This space is for you — a hub to spark your creativity and fuel your craft.
Now, let’s enter the portal.
It’s been just over 365 days since I launched my YouTube channel focused on Motion Design, Digital Art, Visual Storytelling, and the Creative Process — made for creatives just like you.
From this journey, one core lesson stands out, and it’s the heartbeat of creating work that truly resonates and connects:
**Ask yourself — who exactly is this for?**
I stress _specifically_.
Then ask:
• Is what I’ve created valuable to this audience?
• What kind of value does it bring? Does it teach, inspire, challenge, entertain, or evoke emotion?
When you can answer these clearly, you’re ready to exchange your creation with the world. Value is the currency of connection, and when your work carries it, people will listen, engage, and reciprocate.
(How to define and negotiate that value? That’s a conversation for another time.)
More announcements, inspo and resources below!
Wish you all a great week ahead.
Asquare
[My latest YouTube video](https://youtu.be/bVi-nneRxM4) is live and packed with insights! It features a major announcement: **[I’ve launched a Patreon!](https://www.patreon.com/c/asquareportal/membership)** more on this later.
This learning episode is the first part of a three-part series on Mastering Visual Storytelling, with a special focus on short-form content but plenty more beyond that. Don’t miss it!
Also, I just started a [Discord server](https://discord.gg/UTJ23KeU2B) — a creative space to connect, share, and grow together with other creators like you, get opportunities to share your work and inspiration with the community and get a early access and additional benefits!
> **✨Creative Inspiration**
Scrolling animations are back in vogue, and as a Design Lead working on web experiences, I’m always hunting for fresh, engaging sites. This morning, I stumbled upon an absolute gem — a website brimming with micro-interactions and clever ideas that Product Designers and Web Creators can steal and adapt.
I loved the simple line animations guiding the eyes smoothly into the next sections. The subtle motion on images, contrasted with light design elements, created an immersive experience that naturally draws your focus.
That’s the magic of scrolly websites — they’re portals that pull you in quickly and immerse you in their world. These creators truly know how to craft engagement.
> Check it out here - [Quechua 2025 Lookbook](https://quechua-lookbook.com/ss25/)
> **🚚 Creative Resources**
I’ve got two bangers for you this week:
**Draew — an After Effects plugin** that revolutionizes your animation workflow by simplifying keyframe drawing and easing creation. It’s a game-changer for animators looking to speed up and refine their motion design.
**GSAP Motion Library — now free for commercial use!**
Yes, you heard that right. GSAP, the powerhouse JavaScript animation library, offers unparalleled control and performance for web animations — and it’s fully accessible for commercial projects without cost. Perfect for developers and designers pushing the boundaries of interactive experiences.
> Explore these tools and elevate your creative toolkit:
>
> • Draew: [https://aescripts.com/draew](https://aescripts.com/draew)
>
> • GSAP: [https://gsap.com/pricing](https://gsap.com/pricing)
> **Join AsquarePortal on [Patreon!](https://www.patreon.com/c/asquareportal/membership)**
If you’ve been enjoying the content and want to support my creative journey, Patreon is the best way to do that — and it directly fuels more work, courses, and deep dives into animation, visual storytelling, and design that I’m building just for you.
There are two tiers designed to bring you real value:
**🧙🏽Guardian Tier**
By joining here, you become a vital part of the community. You’ll get a special role on our Discord server, plus exclusive access to _all_ project files from my YouTube videos — complete with explainer tutorials and asset packs. It’s everything you need to learn by doing and level up your craft.
**🧑🏽🚀Luminary Tier**
This is packed with even more value. You get everything from the Guardian tier, plus two powerful extras:
1\. In-depth project breakdowns that reveal the secrets behind the work.
2\. Access to the members-only show _Motion Design Portal_ — where I hunt down amazing work and techniques from the industry and beyond, then rebuild those styles from scratch. Along the way, we uncover new tricks and master animation together.
If you want to deepen your skills and support this creative journey, [check it out and join the portal!](https://www.patreon.com/c/asquareportal/membership)
> **Quick Links**
• 🎥 [Watch the latest YouTube video on Mastering Visual Storytelling](https://youtu.be/bVi-nneRxM4)
• 🎨 [Join the Asquareportal Discord community](https://discord.gg/UTJ23KeU2B)
• 💡 Support the journey on Patreon: \[Link
---
# Your 2025 Creativity Guide!
- Published: 2025-01-09
- URL: https://asquareportal.com/blog/your-2025-creativity-guide
Hey Creatives!
Happy New Year, even before we could blink we are already in the first week of 2025.
Time as we know, is a very curious thing. It slows down when we feel joy and seems to stretch when we are stressed and low.
The clock gives us only digits but fails to represent the meaning.
The meaning is something that only us humans can sense.
And what does this have to do with Creativity? Actually, everything.
And here’s the insight (that ultimately inspired my most recent video) -
No matter the new technologies, advancements in AI and Creative Industry shifts - this _**universal truth of the nature of time and the ways we perceive it will never change**_ — and that has crucial implications for our creative work.
This is what I have been navigating for the better part of my 15 year Creative career.
And now as a Design Leader I feel like I have gained some essential strategies over the years that I want to share with you in this very first edition of The Creator Portal Newsletter!
So I thought, why not make an entire video about it, which can serves as a Guide for Creatives and can be revisited at anytime.
So here is the video.
I wish you all the success for this year fellow Creatives!
---
# Welcome to the Portal!
- Published: 2024-09-29
- URL: https://asquareportal.com/blog/welcome-to-the-portal
> Creativity is presence in action.
The meaning of the word ‘Creator’ has changed.
And this meaning is constantly changing, along with the possibilities that are now available to Creators who want to create their own meaning and design their life around their creative skills and expression.
The advancement of technology has a lot to do with this.
Today’s Creator is no more limited to a person who is great at only one Creative Skill. Today’s Creator can build worlds.
A world founded on their own Creative Potential and Vision.
> **And anyone with the right education, can also learn a combination of creative skills, develop a strong mindset and build a clear vision and become a successful Creator.**
This ‘world’ can look different for different creators - This could be mean a successful creative career in the creative industry (Jessica Walsh), the founder of a creative company or studio (Jorge Canedo Estrada), a coach or workshop facilitator (Vinh Quang Giang), the inventor of a product (Jesse Lyu), a successful entrepreneur (Gary Vaynerchuck), a content creator with a large audience (Ranveer Allahbadia) or a combination of these; the possibilities are endless.
This is why I am building Asquareportal - an online platform that brings these possibilities closer to people by proving Creators a holistic education that is not just limited to skills, but also awareness and developing a resilient mindset.
Made for people who are both aspiring Creators and want to know where to start as well as people who are already professionals in their field and want to broaden their vision and take their career to the next level.
Follow a holistic learning path combining a library of courses on state-of-the-art Creative skills, Narrative Films on the Creative Process made to teach a Resilient Mindset, opportunities to join Live Online and In-person workshops along with other Creators on the Creative Process & Vision Creation and access to powerful tools & techniques aimed to empower professional and aspiring Creatives who want to make a living from their creative expression and be able to fulfil their own unique vision.
**But there’s more.** And this is where **‘The Creator Portal Newsletter’** comes in.
Being a Visual Design Leader in the Creative Industry working alongside creatives of all shapes and sizes in varying stages in their career, and being the founder of a Creative Studio as well as working as a professional Graphic Designer, Illustrator and Motion Graphics Artist for over 10 years there is **one thing** that has been a major factor in my success as a professional Creative.
It has got me out of Creative Block.
It has helped me overcome procrastination.
It has brought certainty when everything about the Creative Industry felt uncertain.
It has helped me to focus on the vision rather than instant gratification.
It allowed me to learn new things and unlearn things that no longer served.
It allowed me to go forward towards my vision and express my creativity with confidence and flow, and that is — Inspiration.
In the form of insights into the Creative Process, detailed breakdown of the work of other artists and creators, essential news from the Creative Industry and stories that provide direction and motivation to engage in the Creative Practice as well as practical tools and techniques to help you success as a modern creator, The Creator Portal Newsletter is your weekly invitation to create your best work and engage in the process.
Enter the Portal.
If you have received this email, this means either you downloaded one of my free workbooks, attended one of my live workshops or subscribed to me on Substack.
For that I say thanks! And I hope you enjoy the newsletter.
If you want to reach out to me directly with questions, doubts or just want to say hi, email me at asquareportal@gmail.com.
## Some housekeeping…
If you can’t find the newsletter, check your Spam folder or Promotions tab, and move this email to your primary inbox.
Thanks again, and please tell a few friends if you feel like it.
## Case studies
# Buzzlove
- URL: https://asquareportal.com/work/buzzlove
- Type: Motion Design
Buzzlove needed a spot that felt like the brand from the very first frame. This short animation does that with bold colour, confident shapes and motion that never wastes a second.
The piece was built around a handful of style frames that locked the look before a single frame moved — then brought to life as a tight, punchy animation.
Below: the style frames that carried the spot, and the final film.
Roles: Creative Direction, Art Direction, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# How to Practice Mindfulness
- URL: https://asquareportal.com/work/practice-mindfulness
- Type: Motion Design
Knowing what mindfulness is, is one thing. Practising it is another. This explainer shows a learner how to actually build the habit — one calm step at a time.
The film sits inside the same learning-academy visual system as the rest of the series: clean vector illustration, a considered palette and motion that moves at a mindful pace.
Below are the design boards that set the direction and the artboards carried through the film.
Roles: Creative Direction, Storyboard, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# CH Library Product Explainer
- URL: https://asquareportal.com/work/ch-library
- Type: Motion Design
CH Library needed a way to explain what it is, fast. This short explainer introduces the library and what it offers through clean, confident motion.
Every idea is distilled to its simplest visual form — no filler, just the product made understandable in under a minute.
Below are frames from the final film.
Roles: Creative Direction, Storyboard, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# Understanding Stress
- URL: https://asquareportal.com/work/understanding-stress
- Type: Motion Design
Understanding Stress walks a learner through the fundamentals of stress — the what, the why and the physical response — without ever feeling like a lecture.
The visual language stays calm and consistent: vector illustration, a considered palette and motion that lets the ideas land at their own pace.
Below are style frames from the piece, showing the look carried through the film.
Roles: Creative Direction, Storyboard, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# Seed & Stem
- URL: https://asquareportal.com/work/seed-stem
- Type: Motion Design
Seed & Stem is a brand built around nature and growth. The spot carries that feeling in motion: organic shapes, soft colours and transitions that grow rather than cut.
The animation was developed through a series of style frames before the final render, exploring how the identity would move.
Below: the style frames that locked the look, the final film, and a look at the process.
Roles: Creative Direction, Art Direction, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# What is Psychological Safety?
- URL: https://asquareportal.com/work/what-is-psych-safety
- Type: Visual & Motion Design
This explainer introduces psychological safety — the idea that a team can speak up without fear. The film makes the concept feel tangible, person by person, scene by scene.
Built inside the learning-academy visual system, the piece pairs clean vector illustration with a considered palette to keep a serious topic approachable.
Below are the artboards and frames that carried the piece.
Roles: Creative Direction, Storyboard, Illustration, Visual Design, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# How to Practice Psychological Safety
- URL: https://asquareportal.com/work/practice-psych-safety
- Type: Motion Design
Knowing what psychological safety is, is one thing. Practising it is another. This explainer turns the practice into steps a team can actually follow.
The piece lives inside the same learning-academy visual system as the rest of the series: vector illustration, a considered palette and motion that keeps the tone approachable.
Below are the design boards that established the look and the style frames carried through the film.
Roles: Creative Direction, Storyboard, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# What is Mindfulness?
- URL: https://asquareportal.com/work/mindfulness
- Type: Motion Design
“What is Mindfulness?” is a motion design project created for CoachHub’s learning academy, the learning platform used by coaches and coachees. The brief was deceptively simple: explain what mindfulness actually is, in just over two minutes, in a way that feels as calm as the subject itself.
The process started with a research-led, story-driven script. My job was to translate that narrative into a visually engaging animated piece that lived inside the CoachHub brand: its values, its design system, its colour and type language. All without ever feeling like a corporate lecture.
Every frame was drawn as clean vector art in Adobe Illustrator, then brought to life in Adobe After Effects. Below you’ll find the final illustrations, the style frames, and the storyboard that carried the piece from script to screen.
Roles: Creative Direction, Storyboard, Illustration, Motion Design, Sound Design
Tools: Adobe Illustrator, Adobe After Effects
---
# Spotify (Concept)
- URL: https://asquareportal.com/work/spotify
- Type: Motion Design
A concept exploration for a Spotify cover: how the artwork could move, breathe and respond — while staying unmistakably Spotify.
The piece explores a single strong visual carried through motion, keeping the identity recognisable in a fast-scrolling feed.
Hit play to see the Wrapped-style animation in motion.
Roles: Creative Direction, Art Direction, Motion Design
Tools: Adobe After Effects
---
# NASA Lunar Module · HMI
- URL: https://asquareportal.com/work/nasa
- Type: Interactive Design
A Human Machine Interface for the NASA Lunar Module — an interactive animation concept built from the ground up inside Rive, the interactive graphics editor.
Created for the HMI Interactive Graphics Challenge hosted by Rive in partnership with Contra. The design and its data follow real mission systems as closely as possible — but not entirely.
Parts of the actual Apollo 11 Lunar Module code were used in the design.
Roles: Interactive Design, UI Design, State Machines, Rive
Tools: Rive, Figma
---
# CH Illustration System
- URL: https://asquareportal.com/work/ch-illustration
- Type: Branding & Visual Design
CH needed an illustration language, not a set of images. This system defines the full character library — faces, skin tones, hairstyles, poses and expressions — plus a colour palette and the spot illustrations that carry the brand.
The work follows a documented process: research and ideation, experimenting and improving, then the results — spot illustrations and illustrated backgrounds that work everywhere.
Below is the system end to end: the characters, the palette, the process and the results.
Roles: Creative Direction, Illustration, Character Design, Branding, Visual Design
Tools: Adobe Illustrator, Figma
---
# E-Learning Car UI
- URL: https://asquareportal.com/work/car-ui
- Type: Interactive Design
E-learning is moving from videos to experiences you can touch. This car UI is an interactive automotive interface built to live inside a course — a dashboard learners explore, not just watch.
Everything is built in Rive as a real state machine, so the interface responds to the learner instead of playing back. The actual Rive file is embedded below — hover to engage and drive it yourself.
The project covers the visual system, the surface and the motion — from locked style frames to the state machines that make every control feel alive.
Roles: Interaction Design, UI Design, State Machines, UI Animation, Rive
Tools: Rive, Figma
---
# AOL
- URL: https://asquareportal.com/work/aol
- Type: Motion Design
AOL needed an opener that landed immediately. This short piece pairs bold graphic motion with a punchy reveal — the brand stated before a single word.
The opener was developed through a set of style frames that locked the typographic and graphic language, then animated into the final piece.
Below are the style frames and the work-in-progress that led to the final opener.
Roles: Creative Direction, Art Direction, Motion Design
Tools: Adobe After Effects
---
# Franklin & Templeton
- URL: https://asquareportal.com/work/franklin
- Type: Visual Design
Franklin & Templeton is a heritage financial brand, and the work started before the design — a body of creative ideation exploring the concepts, the copy and the art direction.
These pages capture the thinking that shaped the direction, from early ideas to the concepts that carried through to the final design.
Roles: Creative Direction, Copywriting, Visual Design
Tools: Figma, Adobe Illustrator
---
# Keeta
- URL: https://asquareportal.com/work/keeta
- Type: Branding & Visual Design
Keeta is a payments network built to unify modern global finance — connecting traditional banking and blockchain on a single layer, with cross-border settlement in milliseconds. The brand had to carry that ambition: precise, engineered and unmistakably modern, the moment a user opens the app.
The work started with research — mapping the payments category, the audience and the trust a money product has to earn. From that came the art direction: a clean, high-contrast visual system built around strong colour, confident type and graphic shapes that read instantly at every scale.
The result is a brand that works on both sides of the glass: the product UI that institutions and customers use every day, and the campaign work that tells the story around it. Here are the research boards, the style frames, and the product surfaces that carry it all.
Roles: Creative Direction, Art Direction, Branding, Visual Design, Product UI
Tools: Adobe Illustrator, Figma
---
# ICC
- URL: https://asquareportal.com/work/icc
- Type: Visual Design
A focused visual design piece for ICC — a small set of frames that carry the whole look and the system behind it.
Clean layout, considered type and a consistent colour logic keep the piece confident and on-brand.
Roles: Visual Design
Tools: Figma
---
# Kurin
- URL: https://asquareportal.com/work/kurin
- Type: Visual Design
Kurin needed a visual voice for social — a set of posts that establish a consistent look and stay recognisable in a fast-scrolling feed.
The direction balances a clear visual system with enough variety to keep every post feeling fresh.
Roles: Art Direction, Visual Design
Tools: Figma, Adobe Photoshop
---
# Pear Diagnostics
- URL: https://asquareportal.com/work/pear
- Type: Branding & Visual Design
Pear Diagnostics came as a complete brand build: the logo and colour system, the typography, the stationery, the style guide — and a website that carries the identity into the product.
The work balances a clean, credible healthcare look with a distinctive identity that feels modern and confident.
Below is the brand end to end — identity, stationery and the web surfaces that carry it.
Roles: Branding, Visual Design, Web Design
Tools: Figma, Adobe Illustrator
---
# Science Behind Stress
- URL: https://asquareportal.com/work/what-is-stress
- Type: Motion Design
“Science Behind Stress” explains what actually happens in the body when we feel stressed — the biology made visible, in just over two minutes.
The film takes the science and makes it feel calm and approachable: clean vector visuals, a restrained palette and motion that moves at a human pace.
Below are style frames carried through the film.
Roles: Creative Direction, Storyboard, Illustration, Motion Design
Tools: Adobe Illustrator, Adobe After Effects
---
# WBHC
- URL: https://asquareportal.com/work/wbhc
- Type: Motion Design
WBHC needed an introduction that carried the brand’s energy from the first frame. This intro animation sets the tone before a single word appears.
The piece builds through a clean, graphic sequence — marks, motion and rhythm doing the talking.
Roles: Creative Direction, Motion Design
Tools: Adobe After Effects
---
# AirCon
- URL: https://asquareportal.com/work/aircon
- Type: Branding & Visual Design
AirCon came as a full branding build: a logo system that works in dark and light, a distinctive colour and image-gradient language, a type system with its own highlight treatment, and a componentised set of cards that keep every surface consistent.
The work started with the mark and its clear space — a standalone logo and a combined lockup with the wordmark — then grew into the palette, typography and the repeating components the product would lean on.
Below is the full system: the logo and its variants, the colour and gradient language, the type range and highlight effect, the three card variants, the homepage teaser, and the complete Figma board the identity lives on.
Roles: Creative Direction, Art Direction, Branding, Visual Design, Logo Design
Tools: Figma, Adobe Illustrator
---
# AI Agent Avatar Creator
- URL: https://asquareportal.com/work/ai-agent
- Type: Interactive Design
AI agents are everywhere, but their avatars are usually static GIFs. This project explores what happens when the agent itself is a real, rigged character that reacts in real time.
The experience is built in Rive: the avatar is a proper rig — bones, constraints and a state machine graph that wires every interaction together. Choose an agent, customise its look, and it responds through the same state machine that drives the interface.
Below you’ll find the embedded demo, the creation interface, and a look inside the editor at the rig and state machine that make it feel alive.
Roles: Interaction Design, Character Design, State Machines, UI Animation, Rive
Tools: Rive, Figma, Adobe Illustrator
---
# X-Ray E-Learning
- URL: https://asquareportal.com/work/x-ray
- Type: Interactive Design
Interactive components are becoming the new way to learn. Instead of a video that explains a car, this experience lets you peel the car open yourself.
The centrepiece is the X-ray slider — a drag interaction that opens the vehicle layer by layer. Built in Rive as a real state machine, so the peel responds to your hand.
Below: the embedded demo, the interaction running inside the course, and the slider in action.
Roles: Interaction Design, UI Design, State Machines, UI Animation, Rive
Tools: Rive, Figma
---
# AirCon Website
- URL: https://asquareportal.com/work/aircon-website
- Type: Web Design & UI/UX
I built the full website for a London-based air conditioning service covering refurbishments, homeowners, and everyday customers. The direction was minimal and premium — showcasing comfort and trust without going over the top.
Everything on the page traces back to the brand: a generative-AI hero video for realism, a set of image-based service cards, dynamic accordions that keep the detail clean, and a motion and parallax footer that closes the experience.
Scroll the live site below, then look at how the pieces come together.
Roles: Web Design, UI/UX Design, Branding, Framer
Tools: Framer, Figma
---
# Green Flag — Clay Stop-Motion AI Matcha Ad
- URL: https://asquareportal.com/work/green-flag
- Type: Motion Design
Green Flag is a ceremonial matcha brand with a big personality on a small savvy. The brief split into two halves: on one side a classic, warm, slightly vanilla-cream brand world; on the other, a litany of quality claims — batch-screened matcha, QR results, nitrogen-flushed 30g tins, refill pouches — the kind of transparency a discerning audience actually reads.
The ad needed to turn watchers into buyers in under thirty seconds. So it opens on a cliffhanger, lets a little drippings and smiles land, and gives the product and its pinch-smoked barista the room to carry the punchline.
Every frame is generated, not filmed. A single clay stop-motion aesthetic runs straight through the film — handled entirely in an AI node graph, from the first keyframe to the final frame.
Roles: AI Art Direction, AI Video Production, Motion Design, Editing
Tools: AI content workflow, Magnific, ChatGPT, OpenAI Playground
---
# EV Automotive App
- URL: https://asquareportal.com/work/ev-app
- Type: Interactive Design
Electric vehicles are only as good as the experience of charging them. This app reframes that moment as something people actually want to touch — a mobile charging dashboard where every tap, slider, and state change is driven by real Rive state machines, not a looping video.
Everything lives in the Rive file embedded below. Hover to interact — the Interact pill lifts away and the interface comes alive, responding to input the way a real app would, from battery draw to charge status.
The project covers the full UI system: the visual language, the screen transitions, and the state logic behind the interactive controls — from fixed style frames to the state machines that make each tap feel alive.
Roles: Interaction Design, UI Design, State Machines, UI Animation, Rive
Tools: Rive, Figma