About the project
RANK's main product is not vaults or yield protocol, it's actually a unique quant trading algorythm that allows traders get an edge in trading, without knowing how to code. Conventionally those tools and algorythms are tailor-made for traders. But before the RANK platform is fully opreational, the client wanted to start with the simplest part -- vaults.
Details
The animated portfolio and deposit components were probably the most interesting to work on. I wanted to create a friendly satisfying interaction, which turned out to be quite a challenge, since normal input boxes can't be animated. So I had to create a custom GSAP component with character by character animation:
// Animate changed digits
formatted.split('').forEach((newChar, idx) => {
const oldChar = prevFormatted[idx]
const digitEl = digitRefsRef.current.get(idx)
if (digitEl && newChar !== oldChar) {
gsap.fromTo(
digitEl,
{ y: -30, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.35, ease: 'back.out(1.7)' },
)
}
})
The idea behind the key visual was to allude to RANK's logo.
What if I told you that this comforting notion that you're the author of your life story, is an elaborate fiction your consciousness tells itself? Not in some abstract philosophical sense, but in a very literal, neurologically demonstrable way.
Next Steps
In our next lesson, we'll explore "The Paradox of Agency" - how understanding your complete lack of free will can paradoxically lead to more effective action and greater peace of mind. Though of course, whether you continue this course was determined long before you clicked "enroll."
Remember: You're not choosing to move forward—you're simply observing the inevitable unfolding of your predetermined path. Isn't that comforting? No? Well, your discomfort was predetermined too.