Torrin is a concept investment platform built around a single idea: that patience is the most underrated quality a young investor can have. The name comes from the tortoise, the brand's central metaphor, and everything from the colour system to the motion language was built to reflect that. Slow, considered, unhurried. That constraint ended up being genuinely useful because it made every animation decision easier — if something felt snappy or aggressive, it was wrong for the brand regardless of whether it looked good.
The brief specifies three animations from distinct categories. As the concept developed it became clear that several interactions warranted individual treatment rather than being collapsed together for the sake of meeting a minimum. The two loading states address emotionally different moments in the user journey — launching the app and waiting for a deposit to clear are not the same experience and shouldn't share the same animation. Similarly, the portfolio view contains two distinct data visualisation formats, a line chart and a pie chart, each communicating different things to the user. Developing five animations across four categories felt more considered than artificially limiting the work to fit a number.
The brief's loading indicator category could have been satisfied with a simple spinner. Branded loading states were something I looked at closely during the moodboard phase, and the consistent finding was that a loading moment is actually an opportunity — it's one of the few times the interface has the user's full attention and nothing is competing for it. Wasting that on a generic animation felt like a missed chance.
The decision to render the Torrin logo as a 3D model spinning on its Y axis came from thinking about what the two-stroke mark could do that a flat draw-on couldn't. A 3D object has physical presence and weight. It exists in space rather than sitting on a screen, which felt more aligned with a brand built around something grounded and solid. The coin-spin motion also has a subtle financial association that felt appropriate without being heavy-handed.
Unicorn Studio was used rather than Figma or Lottie because the quality of material rendering available there is genuinely better for this kind of work. The rotation was settled at approximately 1.2–1.5 seconds per full cycle using linear easing. Earlier iterations used slower rotations that felt broken, and faster ones that felt anxious. Linear easing was chosen over ease-in-out specifically because in a looping state, easing creates visible acceleration points at the loop boundary that interrupt the sense of continuity.
For reduced motion, this animation would be replaced with a static logo and a subtle opacity pulse — enough to communicate that loading is in progress without any positional movement.
The deposit loading state is a separate animation from the app launch loader because these are emotionally different moments. Launching the app is neutral. Waiting for a deposit to clear is charged — the user has just committed real money and they're sitting with that. The same spinning tortoise would have felt tonally wrong there.
The original concept for this interaction was illustrative, leaning into the GiffGaff and Little Big Planet reference from the brand work. In practice it looked inconsistent with everything else in the interface. The illustrative style introduced visual noise at a moment that needed calm, and it conflicted with the more minimal UI surrounding it. Abandoning it was the right call even though it was a direction I'd been interested in.
The replacement — a full-screen gradient wave using the brand's green gradient — came from something established much earlier in the project. When I chose a gradient over a flat brand colour, part of the reasoning was that gradients have an inherent sense of movement. That felt honest for a product built around progress over time. Using it as the deposit loading state meant the animation wasn't arbitrary — it was drawing on something already embedded in the brand's logic.
The wave loops on approximately a two second cycle with smooth continuous easing. Feedback from my lecturer Kyle identified that the animation alone wasn't explicit enough about what was happening, so supporting text was added alongside it. That combination — motion communicating that something is in progress, text confirming exactly what — ended up stronger than either element would have been alone. Also built in Unicorn Studio, which gave the same level of control over the gradient behaviour as the app launch loader.
For reduced motion, the wave would be replaced with a static gradient and supporting text alone, preserving the full communication of the state without any movement.
This is the most functionally important animation in the product. The portfolio chart is the screen users return to most frequently and the one carrying the most weight in terms of trust. If the data feels unclear or the transitions feel disconnected, confidence erodes quickly.